/* ============================================================
   BLUEPRINTSENSES — HOME (Plan overview)
   Answers "where does my concept stand?" before anything is
   entered: verdict status, module cards, concept slot, what needs
   attention, and one clear "Start here".
   ============================================================ */

/* Mint's example concept — loaded only when the user asks for it */
const EXAMPLE_IDEA = {
  mode: "form", conceptName: "Nami Ramen", tagline: "Slow-broth ramen for Thonglor nights",
  usp: "The only 18-hour tonkotsu on the soi, open until 10pm with a ฿199 set for the lunch crowd.",
  category: "Casual dining", categoryConfirmed: true, cuisine: "Ramen",
  targetCustomer: ["Office workers", "Expats"], priceBand: "Mid", avgSpend: 280,
  channelMix: { dineIn: 70, delivery: 20, takeaway: 10 },
  format: { seats: 32, sqm: 70, serviceStyle: "Table service" },
  locationType: "Street / shophouse", hours: { open: 11, close: 22 },
  founder: { experience: "Worked in F&B", capital: 1800000, risk: "", involvement: "Owner-operator" },
  step: 1, formStep: 0,
};
const EXAMPLE_FIN = {
  step: 3, revMode: "detailed", detailed: { seats: 32, turns: 1.8, avgCheck: 280, openDays: 26 },
  investment: { renovation: 650000, equipment: 450000, furniture: 180000, deposit: 135000, licenses: 30000, management: 60000, inventory: 40000, reserve: 250000 },
  space: { shopSqm: 70, kitchenSqm: 18 },
  foodPct: 0.32, staff: 110000, rent: 45000, utilities: 22000, marketing: 12000, management: 10000, other: 12000, taxes: 8000,
};

function homeStatus(idea, fin, check, live) {
  const started = check.started || (fin.step || 0) > 0;
  if (!started) return { key: "none" };
  if (check.readiness < 60 || (fin.step || 0) < 3 || live.sales <= 0) return { key: "draft" };
  return { key: "final", verdict: live.verdict };
}

function ModuleCard({ n, title, sub, status, tone, locked, onClick, time }) {
  const { t } = useLang();
  return (
    <button onClick={onClick} style={{ ...card, padding: "18px 20px", textAlign: "left", cursor: "pointer", fontFamily: "inherit", display: "flex", flexDirection: "column", gap: 6, minHeight: 138 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }}>
        <span className="mono" style={{ width: 26, height: 26, borderRadius: "50%", display: "grid", placeItems: "center", fontSize: 11, fontWeight: 700, background: "var(--accent-tint)", color: "var(--accent)" }}>{n}</span>
        {locked ? <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}><LockIcon color="var(--brass-deep)" /><ProBadge /></span> : time && <span className="mono" style={{ fontSize: 10, color: "var(--faint)", letterSpacing: ".06em" }}>{time}</span>}
      </div>
      <div style={{ fontWeight: 700, fontSize: 16, color: "var(--ink)", marginTop: 4 }}>{title}</div>
      <div style={{ fontSize: 13, color: "var(--muted)", lineHeight: 1.45, flex: 1 }}>{sub}</div>
      <div style={{ fontSize: 13, fontWeight: 700, color: toneVar(tone, "fg") }}>{status} <span style={{ color: "var(--accent)" }}>→</span></div>
    </button>
  );
}

function HomeModule({ plan, ws, activeId, setActive, setNS, updatePlan, switchConcept, newConcept }) {
  const { t, lang } = useLang();
  const { pro, askUnlock } = usePro();
  const idea = plan.idea, fin = plan.financials;
  const check = computeIdea(idea, t, lang);
  const live = computeFin(fin, t);
  const own = computeOwnership(plan.ownership, fin, t);
  const st = homeStatus(idea, fin, check, live);
  const [showAll, setShowAll] = React.useState(false);

  const start = (mode) => { setNS("idea", { mode, step: 0 }); setActive("concept"); };
  const loadExample = () => updatePlan((p) => ({ ...p, idea: deepMerge(IDEA_DEFAULTS, EXAMPLE_IDEA), financials: deepMerge(FIN_DEFAULTS, EXAMPLE_FIN) }));

  /* coaching flags once data exists: Financial's only after the user has opened it */
  const finOpened = (fin.step || 0) > 0;
  const attention = [...(check.started ? check.flags : []), ...(finOpened ? [...coherenceWithNumbers(idea, fin, live, t), ...live.flags] : [])].filter((f) => f.tone !== "green");
  const shown = showAll ? attention : attention.slice(0, 3);

  const statusLabel = st.key === "none" ? t("home.notStarted") : st.key === "draft" ? t("home.draft") : st.verdict.label;
  const statusTone = st.key === "final" ? st.verdict.tone : st.key === "draft" ? "amber" : "muted";

  return (
    <StepShell k="home" kicker={t("home.kicker")} title={idea.conceptName || t("home.title")} lead={idea.tagline ? "“" + idea.tagline + "”" : t("home.lead")}>
      {/* verdict + slot */}
      <div style={{ background: "var(--surface)", borderRadius: 20, boxShadow: "var(--shadow-lg)", overflow: "hidden", border: "1px solid var(--border)" }}>
        <div style={{ height: 4, background: toneVar(statusTone, "fg") }} />
        <div style={{ padding: "22px 26px", display: "flex", gap: 20, flexWrap: "wrap", alignItems: "center" }}>
          <div style={{ flex: 1, minWidth: 220 }}>
            <div className="mono" style={{ fontSize: 10.5, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--muted)", fontWeight: 600 }}>{t("home.verdict")}</div>
            <div className="serif" style={{ fontSize: 36, color: toneVar(statusTone, "fg"), marginTop: 4, lineHeight: 1.1 }}>{statusLabel}</div>
            <div style={{ fontSize: 14, color: "var(--muted)", marginTop: 6, lineHeight: 1.5 }}>{t("home.verdictSub." + st.key, { n: check.readiness })}</div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--muted)" }}>{t("home.slot")}</div>
            <div style={{ marginTop: 6, display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 14px", borderRadius: 99, background: pro ? "var(--green-tint)" : "var(--surface-2)", border: `1px solid ${pro ? "rgba(62,142,90,.28)" : "var(--border)"}`, fontWeight: 700, fontSize: 13.5, color: pro ? "var(--green)" : "var(--ink)" }}>
              {pro ? "✓ " + t("home.unlocked") : t("home.free")}
            </div>
            {!pro && <div><button onClick={() => askUnlock("home")} style={{ border: "none", background: "transparent", color: "var(--accent)", fontWeight: 700, fontSize: 13, cursor: "pointer", fontFamily: "inherit", padding: 0, marginTop: 8 }}>{t("pro.unlockThis")} →</button></div>}
          </div>
        </div>
        {st.key !== "none" && (
          <div style={{ padding: "0 26px 20px", display: "flex", justifyContent: "flex-start" }}>
            <button onClick={() => setActive(check.readiness < 60 ? "concept" : "financial")} style={{ ...btnPrimary, padding: "11px 20px", fontSize: 14.5 }}>{t("home.continue")}</button>
          </div>
        )}
      </div>

      {/* start here */}
      {st.key === "none" && (
        <div style={{ ...card, marginTop: 16, padding: 28 }}>
          <div className="mono" style={{ fontSize: 10.5, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--brass-deep)", fontWeight: 600 }}>{t("home.startHere")}</div>
          <div className="serif" style={{ fontSize: 26, marginTop: 6 }}>{t("home.startTitle")}</div>
          <div style={{ color: "var(--muted)", fontSize: 14.5, marginTop: 6, lineHeight: 1.5 }}>{t("home.startSub")}</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 12, marginTop: 18 }}>
            {[["interview", "home.answerQuestions", "home.answerQuestionsSub"], ["form", "home.fillForm", "home.fillFormSub"]].map(([m, l, s], i) => (
              <button key={m} onClick={() => start(m)} style={{ textAlign: "left", padding: "18px 20px", borderRadius: 16, cursor: "pointer", fontFamily: "inherit", border: i === 0 ? "none" : "1.5px solid var(--border-strong)", background: i === 0 ? "var(--accent)" : "var(--surface)", color: i === 0 ? "#fff" : "var(--ink)", boxShadow: i === 0 ? "0 10px 24px -12px rgba(27,59,95,.6)" : "none" }}>
                <div style={{ fontWeight: 700, fontSize: 16 }}>{t(l)}</div>
                <div style={{ fontSize: 13, marginTop: 4, opacity: .8, lineHeight: 1.45 }}>{t(s)}</div>
              </button>
            ))}
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, marginTop: 16, flexWrap: "wrap" }}>
            <span className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: ".06em" }}>⏱ {t("home.about15")}</span>
            <button onClick={loadExample} style={{ border: "none", background: "transparent", color: "var(--accent)", fontWeight: 700, fontSize: 13.5, cursor: "pointer", fontFamily: "inherit", padding: 0 }}>{t("home.tryExample")}</button>
          </div>
        </div>
      )}

      {/* modules */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: 14, marginTop: 16 }}>
        <ModuleCard n="1" title={t("nav.concept")} sub={t("home.conceptSub")} time={t("home.min", { n: 15 })} onClick={() => setActive("concept")}
          status={check.started ? t("home.readyN", { n: check.readiness }) : t("home.start")} tone={check.readiness >= 75 ? "green" : check.started ? "amber" : "muted"} />
        <ModuleCard n="2" title={t("nav.financial")} sub={t("home.financialSub")} time={t("home.min", { n: 10 })} onClick={() => setActive("financial")}
          status={(fin.step || 0) >= 3 && live.sales > 0 ? live.verdict.label : (fin.step || 0) > 0 ? t("home.inProgress") : t("home.start")} tone={(fin.step || 0) >= 3 && live.sales > 0 ? live.verdict.tone : "muted"} />
        <ModuleCard n="3" title={t("nav.ownership")} sub={t("home.ownershipSub")} locked={!pro} onClick={() => setActive("ownership")}
          status={!pro ? t("home.whatItAnswers") : own.complete ? t("home.done") : own.rows.length ? t("home.inProgress") : t("home.start")} tone={own.complete ? "green" : "muted"} />
        <ModuleCard n="◆" title={t("nav.outputs")} sub={t("home.outputsSub")} locked={!pro} onClick={() => setActive("outputs")}
          status={!pro ? t("home.seePreview") : t("home.open")} tone="muted" />
      </div>

      {/* what needs attention */}
      {attention.length > 0 && (
        <div style={{ ...card, marginTop: 16, padding: 26 }}>
          <h2 className="serif" style={{ fontSize: 23, fontWeight: 400, margin: "0 0 14px" }}>{t("home.attention")}</h2>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>{shown.map((f, i) => <Flag key={i} tone={f.tone} text={f.text} />)}</div>
          {attention.length > 3 && <button onClick={() => setShowAll(!showAll)} style={{ border: "none", background: "transparent", color: "var(--accent)", fontWeight: 700, fontSize: 13, cursor: "pointer", fontFamily: "inherit", padding: 0, marginTop: 14 }}>{showAll ? t("home.showLess") : t("home.showAll", { n: attention.length })}</button>}
        </div>
      )}

      {/* my concepts */}
      <div style={{ ...card, marginTop: 16, padding: 24 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
          <h2 className="serif" style={{ fontSize: 21, fontWeight: 400, margin: 0 }}>{t("home.myConcepts")}</h2>
          <button onClick={newConcept} style={{ ...btnGhost, padding: "8px 14px", fontSize: 13 }}>+ {t("home.newConcept")}</button>
        </div>
        <div style={{ marginTop: 10 }}>
          {ws.concepts.map((c) => (
            <button key={c.id} onClick={() => switchConcept(c.id)} style={{ display: "flex", width: "100%", justifyContent: "space-between", alignItems: "center", gap: 10, padding: "11px 0", border: "none", borderTop: "1px solid var(--border)", background: "transparent", cursor: "pointer", fontFamily: "inherit", textAlign: "left" }}>
              <span style={{ fontWeight: c.id === activeId ? 700 : 500, fontSize: 14.5, color: "var(--ink)" }}>{c.id === activeId ? "● " : ""}{c.plan.idea.conceptName || t("home.untitled")}</span>
              <span className="mono" style={{ fontSize: 10, letterSpacing: ".08em", textTransform: "uppercase", color: c.plan.meta.unlocked ? "var(--green)" : "var(--faint)" }}>{c.plan.meta.unlocked ? t("home.unlocked") : t("home.free")}</span>
            </button>
          ))}
        </div>
      </div>

      {/* after pre-opening */}
      <div style={{ marginTop: 16, padding: "16px 20px", borderRadius: 14, border: "1.5px dashed var(--border-strong)", display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
        <span className="mono" style={{ fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--brass-deep)", fontWeight: 700 }}>{t("home.next")}</span>
        <span style={{ flex: 1, minWidth: 200, fontSize: 14, color: "var(--muted)", lineHeight: 1.5 }}><strong style={{ color: "var(--ink)" }}>{t("home.menuCosting")}</strong> — {t("home.menuCostingSub")}</span>
      </div>
    </StepShell>
  );
}

Object.assign(window, { HomeModule, EXAMPLE_IDEA, EXAMPLE_FIN });