/* ============================================================
   BLUEPRINTSENSES — OUTPUTS (Pro)
   Ownership dashboard · Pitching deck · Plan summary · Export.
   Everything reads the live plan; deck headlines are editable and
   saved in plan.outputs.deck. Nothing here changes the numbers.
   ============================================================ */
const { useState: useStateOut } = React;

function OutputsModule({ plan, setOutputs, setActive, openIE }) {
  const { t } = useLang();
  const { pro } = usePro();
  const [tab, setTab] = useStateOut("deck");
  const TABS = [["deck", t("out.tabDeck")], ["ownership", t("out.tabOwnership")], ["summary", t("out.tabSummary")], ["export", t("out.tabExport")]];

  if (!pro) {
    return (
      <StepShell k="out" kicker={t("out.kicker")} title={t("out.title")} lead={t("out.lead")}>
        <LockedPreview title={t("out.lockedTitle")} sub={t("out.lockedSub")} reason="outputs" height={420}>
          <div style={{ padding: 20 }}><PitchDeck plan={plan} setOutputs={() => {}} preview /></div>
        </LockedPreview>
      </StepShell>
    );
  }

  return (
    <StepShell k="out" kicker={t("out.kicker")} title={t("out.title")} lead={t("out.lead")}>
      <div className="no-print" style={{ display: "flex", gap: 6, marginBottom: 22, flexWrap: "wrap" }}>
        {TABS.map(([k, l]) => (
          <button key={k} onClick={() => setTab(k)} style={{ border: "none", cursor: "pointer", borderRadius: 99, padding: "8px 16px", fontSize: 13, fontWeight: 600, fontFamily: "inherit", background: tab === k ? "var(--accent)" : "var(--surface)", color: tab === k ? "#fff" : "var(--muted)", boxShadow: tab === k ? "none" : "inset 0 0 0 1px var(--border)" }}>{l}</button>
        ))}
      </div>
      <LastUpdated plan={plan} />
      {tab === "deck" && <PitchDeck plan={plan} setOutputs={setOutputs} />}
      {tab === "ownership" && <OwnershipDashboard plan={plan} setActive={setActive} />}
      {tab === "summary" && <PitchDashboard plan={plan} setActive={setActive} openIE={openIE} />}
      {tab === "export" && <ExportPanel plan={plan} openIE={openIE} goSummary={() => setTab("summary")} goDeck={() => setTab("deck")} />}
    </StepShell>
  );
}

function LastUpdated({ plan }) {
  const { t, lang } = useLang();
  const d = plan.meta.updatedAt ? new Date(plan.meta.updatedAt) : null;
  if (!d) return null;
  return (
    <div className="mono" style={{ fontSize: 10.5, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 14 }}>
      {t("out.lastUpdated", { d: d.toLocaleDateString(lang === "th" ? "th-TH" : "en-GB", { day: "numeric", month: "short", year: "numeric" }) })}
    </div>
  );
}

/* ---------- ownership dashboard ---------- */
function OwnershipDashboard({ plan, setActive }) {
  const { t, lang } = useLang();
  const res = computeOwnership(plan.ownership, plan.financials, t);
  if (!res.rows.length) {
    return (
      <div style={{ ...card, textAlign: "center", padding: 40 }}>
        <div className="serif" style={{ fontSize: 26 }}>{t("out.noOwners")}</div>
        <p style={{ color: "var(--muted)", fontSize: 14.5 }}>{t("out.noOwnersSub")}</p>
        <button onClick={() => setActive("ownership")} style={btnPrimary}>{t("out.goOwnership")}</button>
      </div>
    );
  }
  const colors = ["var(--c-food)", "var(--c-rent)", "var(--brass)", "var(--c-mkt)", "var(--green)", "var(--c-util)"];
  const th = { fontSize: 10, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--muted)", fontWeight: 600, padding: "0 0 8px", textAlign: "right" };
  const td = { padding: "11px 0", textAlign: "right", borderTop: "1px solid var(--border)", fontVariantNumeric: "tabular-nums" };
  return (
    <div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 14 }}>
        <Stat label={t("pitch.totalToOpen")} value={fmtBaht(res.live.investment)} sub={t("own.cashTotalShort", { x: fmtBaht(res.totalCash) })} />
        <Stat label={t("out.distributable")} value={fmtBaht(res.steadyDist)} sub={t("out.perMonthSteady")} tone={res.steadyDist > 0 ? "green" : "red"} />
        <Stat label={t("fin2.cashPayback")} value={res.proj.moneyBackMonth ? t("proj.monthN", { n: res.proj.moneyBackMonth }) : "—"} sub={t("out.wholeBusiness")} />
      </div>
      <div style={{ ...card, marginTop: 16, padding: 26 }}>
        <h2 className="serif" style={{ fontSize: 23, fontWeight: 400, margin: 0 }}>{t("out.whoOwns")}</h2>
        <div style={{ display: "flex", height: 26, borderRadius: 8, overflow: "hidden", marginTop: 14, boxShadow: "inset 0 0 0 1px var(--border)" }}>
          {res.rows.map((r, i) => <div key={r.id} title={`${r.name} ${fmtPct(r.share, 1)}`} style={{ width: `${r.share * 100}%`, background: colors[i % colors.length] }} />)}
        </div>
        <div style={{ overflowX: "auto", marginTop: 16 }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14, minWidth: 620 }}>
            <thead className="mono"><tr>
              <th style={{ ...th, textAlign: "left" }}>{t("own.party")}</th><th style={th}>{t("out.putIn")}</th><th style={th}>%</th>
              <th style={th}>{t("own.perMonth")}</th><th style={th}>{t("own.year1")}</th><th style={th}>{t("own.stakeholderPayback")}</th><th style={th}>{t("out.return3y")}</th>
            </tr></thead>
            <tbody>{res.rows.map((r, i) => (
              <tr key={r.id}>
                <td style={{ ...td, textAlign: "left" }}><span style={{ display: "inline-block", width: 10, height: 10, borderRadius: 3, background: colors[i % colors.length], marginRight: 8 }} /><strong>{r.name || t("own.unnamed")}</strong><div style={{ fontSize: 12, color: "var(--muted)", marginLeft: 18 }}>{optLabel(lang, r.role)}</div></td>
                <td style={td}>{fmtBaht(r.cash)}{r.inKindValue > 0 && <div style={{ fontSize: 12, color: "var(--muted)" }}>+ {fmtBaht(r.inKindValue)} {t("out.inKindShort")}</div>}</td>
                <td style={td}>{fmtPct(r.share, 1)}</td>
                <td style={td}>{fmtBaht(r.monthly)}</td>
                <td style={td}>{fmtBaht(r.year1)}</td>
                <td style={td}>{r.cash > 0 ? (r.paybackMonth ? t("proj.monthN", { n: r.paybackMonth }) : t("proj.notIn36")) : "—"}</td>
                <td style={{ ...td, color: r.multiple >= 1 ? "var(--green)" : "var(--ink)" }}>{r.multiple !== null ? r.multiple.toFixed(2) + "×" : "—"}</td>
              </tr>
            ))}</tbody>
          </table>
        </div>
        <div style={{ fontSize: 12, color: "var(--faint)", marginTop: 12 }}>{t("out.ownFootnote")}</div>
      </div>
    </div>
  );
}

/* ---------- pitching deck ---------- */
function Slide({ n, kicker, title, onTitle, children, preview }) {
  return (
    <div className="slide" style={{ aspectRatio: "16 / 9", background: "var(--surface)", borderRadius: 16, border: "1px solid var(--border)", boxShadow: "var(--shadow)", padding: "4.5% 5.5%", display: "flex", flexDirection: "column", position: "relative", overflow: "hidden", marginBottom: 18, breakInside: "avoid", pageBreakAfter: "always" }}>
      <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 6, background: "var(--accent)" }} />
      <div className="mono" style={{ fontSize: "clamp(8px, 1.2vw, 11px)", letterSpacing: ".14em", textTransform: "uppercase", color: "var(--brass-deep)", fontWeight: 600 }}>{kicker}</div>
      {onTitle && !preview
        ? <input value={title} onChange={(e) => onTitle(e.target.value)} className="serif" aria-label="Slide title"
            style={{ fontSize: "clamp(18px, 3vw, 32px)", border: "none", outline: "none", background: "transparent", padding: 0, marginTop: 6, color: "var(--ink)", fontFamily: "Newsreader, serif", width: "100%" }} />
        : <div className="serif" style={{ fontSize: "clamp(18px, 3vw, 32px)", marginTop: 6 }}>{title}</div>}
      <div style={{ flex: 1, marginTop: "2.5%", minHeight: 0 }}>{children}</div>
      <div className="mono" style={{ position: "absolute", right: "3%", bottom: "4%", fontSize: 10, color: "var(--faint)" }}>{n}</div>
    </div>
  );
}

function DeckFigure({ label, value, tone }) {
  return (
    <div style={{ padding: "3% 4%", borderRadius: 12, background: "var(--surface-2)", border: "1px solid var(--border)" }}>
      <div className="mono" style={{ fontSize: "clamp(7px, 1vw, 10px)", letterSpacing: ".08em", textTransform: "uppercase", color: "var(--muted)" }}>{label}</div>
      <div className="serif-fig" style={{ fontSize: "clamp(15px, 2.4vw, 26px)", marginTop: 4, color: tone === "green" ? "var(--green)" : tone === "red" ? "var(--red)" : "var(--ink)" }}>{value}</div>
    </div>
  );
}

function PitchDeck({ plan, setOutputs, preview }) {
  const { t, lang } = useLang();
  const ol = (v) => optLabel(lang, v);
  const idea = plan.idea, fin = plan.financials;
  const live = computeFin(fin, t);
  const proj = computeProjection(fin, t, "planned");
  const own = computeOwnership(plan.ownership, fin, t);
  const deck = (plan.outputs && plan.outputs.deck) || {};
  const title = (k, def) => (deck[k] !== undefined ? deck[k] : def);
  const setTitle = (k) => (v) => setOutputs({ deck: { ...deck, [k]: v } });
  const name = idea.conceptName || t("pitch.untitledConcept");
  const per = (idea.pro || {}).persona || {};
  const neg = (n) => `${n < 0 ? "−" : ""}${fmtBaht(Math.abs(n))}`;
  const txt = { fontSize: "clamp(11px, 1.55vw, 16px)", lineHeight: 1.5, margin: "0 0 1.2%" };
  const grid = { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "2.5%" };
  const flags = computeIdea(idea, t, lang).flags.concat(live.flags).filter((f) => f.tone !== "green").slice(0, 3);

  const slides = [
    <Slide key="1" n="1" kicker={[ol(idea.category), ol(idea.cuisine), ol(idea.locationType)].filter(Boolean).join(" · ") || "BlueprintSenses"} title={title("cover", name)} onTitle={setTitle("cover")} preview={preview}>
      <div style={{ display: "flex", flexDirection: "column", justifyContent: "flex-end", height: "100%" }}>
        {idea.tagline && <div className="serif" style={{ fontSize: "clamp(14px, 2.4vw, 26px)", fontStyle: "italic", color: "var(--muted)" }}>“{idea.tagline}”</div>}
        <div style={{ ...txt, marginTop: "2%", color: "var(--muted)" }}>{t("deck.coverSub")}</div>
      </div>
    </Slide>,
    <Slide key="2" n="2" kicker={t("deck.k.concept")} title={title("concept", t("deck.t.concept"))} onTitle={setTitle("concept")} preview={preview}>
      <p style={txt}>{t("deck.conceptLine", { who: idea.targetCustomer.map(ol).join(", ").toLowerCase() || "—", loc: (ol(idea.locationType) || "—").toLowerCase(), spend: fmtBaht(ideaAvgSpend(idea)) })}</p>
      <p style={txt}>{t("deck.formatLine", { seats: idea.format.seats || "—", sqm: idea.format.sqm || "—", hours: fmtHours(idea.hours) || "—", svc: (ol(idea.format.serviceStyle) || "—").toLowerCase() })}</p>
      {idea.usp && <div className="serif" style={{ fontSize: "clamp(13px, 2vw, 21px)", marginTop: "2%", padding: "2% 3%", background: "var(--surface-2)", borderRadius: 12 }}>{idea.usp}</div>}
    </Slide>,
    <Slide key="3" n="3" kicker={t("deck.k.customer")} title={title("customer", per.name ? t("deck.t.meet", { name: per.name }) : t("deck.t.customer"))} onTitle={setTitle("customer")} preview={preview}>
      {per.name ? (
        <div>
          <p style={{ ...txt, fontWeight: 700 }}>{per.name}{per.age ? `, ${per.age}` : ""}{per.occupation ? ` · ${per.occupation}` : ""}</p>
          {per.story && <p style={txt}>{per.story}</p>}
          {per.wants && <p style={txt}><strong>{t("concept.wants")}:</strong> {per.wants}</p>}
        </div>
      ) : <p style={txt}>{idea.targetCustomer.map(ol).join(", ") || "—"}</p>}
      {(idea.pro || {}).valuePromise && <p style={{ ...txt, color: "var(--muted)" }}>{t("concept.pro.valuePromise")}: {idea.pro.valuePromise}</p>}
    </Slide>,
    <Slide key="4" n="4" kicker={t("deck.k.numbers")} title={title("numbers", t("deck.t.numbers"))} onTitle={setTitle("numbers")} preview={preview}>
      <div style={grid}>
        <DeckFigure label={t("pitch.totalToOpen")} value={fmtBaht(live.investment)} />
        <DeckFigure label={t("fin2.salesMo")} value={fmtBaht(live.sales)} />
        <DeckFigure label={t("pitch.profitMoAfterTax")} value={neg(live.netProfit)} tone={live.netProfit >= 0 ? "green" : "red"} />
        <DeckFigure label={t("pitch.netMargin")} value={fmtPct(live.netMargin)} />
        <DeckFigure label={t("pitch.breakEvenSales")} value={fmtBaht(live.breakEvenDaily) + t("pro.perDay")} />
        <DeckFigure label={t("fin2.invPayback")} value={fmtMonths(live.paybackAfterTax)} />
      </div>
    </Slide>,
    <Slide key="5" n="5" kicker={t("deck.k.cash")} title={title("cash", proj.moneyBackMonth ? t("deck.t.cashBack", { n: proj.moneyBackMonth }) : t("deck.t.cash"))} onTitle={setTitle("cash")} preview={preview}>
      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: "3%", height: "100%" }}>
        <div style={{ minWidth: 0 }}><CashChart proj={proj} /></div>
        <div style={{ display: "flex", flexDirection: "column", gap: "4%" }}>
          <DeckFigure label={t("proj.lowestCash")} value={neg(proj.lowestCash)} tone={proj.lowestCash < 0 ? "red" : undefined} />
          <DeckFigure label={t("proj.firstProfit")} value={proj.firstProfitMonth ? t("proj.monthN", { n: proj.firstProfitMonth }) : "—"} />
          <DeckFigure label={t("fin2.cashPayback")} value={proj.moneyBackMonth ? t("proj.monthN", { n: proj.moneyBackMonth }) : "—"} />
        </div>
      </div>
    </Slide>,
    <Slide key="6" n="6" kicker={t("deck.k.ask")} title={title("ask", t("deck.t.ask", { x: fmtBaht(Math.max(0, live.investment - own.totalCash) || live.investment) }))} onTitle={setTitle("ask")} preview={preview}>
      {own.rows.length ? own.rows.map((r) => (
        <div key={r.id} style={{ display: "flex", justifyContent: "space-between", gap: "3%", ...txt, borderBottom: "1px dashed var(--border)", paddingBottom: "1%" }}>
          <strong>{r.name || t("own.unnamed")}</strong><span>{fmtBaht(r.cash)}</span><span>{fmtPct(r.share, 1)}</span>
          <span style={{ color: "var(--muted)" }}>{r.cash > 0 && r.paybackMonth ? t("deck.backIn", { n: r.paybackMonth }) : ""}</span>
        </div>
      )) : <p style={txt}>{t("deck.noOwners")}</p>}
    </Slide>,
    <Slide key="7" n="7" kicker={t("deck.k.watch")} title={title("watch", t("deck.t.watch"))} onTitle={setTitle("watch")} preview={preview}>
      {flags.length ? flags.map((f, i) => <p key={i} style={txt}>{i + 1}. {f.text}</p>) : <p style={txt}>{t("pitch.noFlags")}</p>}
    </Slide>,
  ];

  if (preview) return <div>{slides.slice(0, 2)}</div>;
  return (
    <div>
      <div className="no-print" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, marginBottom: 16, flexWrap: "wrap" }}>
        <span style={{ fontSize: 13.5, color: "var(--muted)" }}>{t("out.deckNote")}</span>
        <div style={{ display: "flex", gap: 10 }}>
          {Object.keys(deck).length > 0 && <button onClick={() => setOutputs({ deck: {} })} style={{ ...btnGhost, padding: "10px 16px", fontSize: 13.5 }}>{t("out.resetTitles")}</button>}
          <button onClick={() => window.print()} style={{ ...btnPrimary, padding: "10px 18px", fontSize: 14 }}>{t("out.deckPdf")}</button>
        </div>
      </div>
      {slides}
    </div>
  );
}

/* ---------- export ---------- */
function xmlEsc(s) { return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"); }
function sheet(name, rows) {
  const cell = (v) => typeof v === "number" && isFinite(v)
    ? `<Cell><Data ss:Type="Number">${Math.round(v * 100) / 100}</Data></Cell>`
    : `<Cell><Data ss:Type="String">${xmlEsc(v === null || v === undefined ? "" : v)}</Data></Cell>`;
  return `<Worksheet ss:Name="${xmlEsc(name).slice(0, 31)}"><Table>${rows.map((r) => `<Row>${r.map(cell).join("")}</Row>`).join("")}</Table></Worksheet>`;
}

function buildWorkbook(plan, t, lang) {
  const idea = plan.idea, fin = plan.financials;
  const live = computeFin(fin, t);
  const proj = computeProjection(fin, t, fin.projScenario || "planned");
  const own = computeOwnership(plan.ownership, fin, t);
  const ol = (v) => optLabel(lang, v);
  const summary = [
    [t("xl.concept"), idea.conceptName], [t("concept.slogan"), idea.tagline], [t("concept.restaurantType"), ol(idea.category)], [t("concept.cuisineType"), ol(idea.cuisine)],
    [t("concept.areaType"), ol(idea.locationType)], [t("idea.seats"), idea.format.seats], ["m²", idea.format.sqm], [t("concept.openingHours"), fmtHours(idea.hours)],
    [t("concept.avgSpend"), ideaAvgSpend(idea)], [], [t("pitch.totalToOpen"), live.investment], [t("fin2.salesMo"), live.sales],
    [t("fin.ebitdaMo"), live.profit], [t("pitch.profitMoAfterTax"), live.netProfit], [t("fin.netMargin"), live.netMargin], [t("fin.breakEvenMo"), live.breakEven],
    [t("fin2.invPayback") + " (mo)", isFinite(live.paybackAfterTax) ? live.paybackAfterTax : ""], [t("fin2.cashPayback") + " (mo)", proj.moneyBackMonth || ""],
    [t("proj.lowestCash"), proj.lowestCash], [t("fin.theVerdict"), live.verdict.label],
  ];
  const inv = [[t("xl.category"), t("xl.amount")], ...INV_FIELDS.map(([k, lk]) => [t("fin." + lk), live.invVals[k]]), [t("fin.totalToOpen"), live.investment]];
  (Object.keys(fin.invItems || {})).forEach((k) => (fin.invItems[k] || []).forEach((it) => inv.push(["  · " + it.name, (it.qty || 0) * (it.price || 0)])));
  const cost = [[t("xl.category"), t("xl.amount")], [t("fin.foodDrink"), live.foodCost], ...COST_FIELDS.map(([k, lk]) => [t("fin." + lk), live.costs[k] || 0]), [t("fin.totalMonthlyCost"), live.totalCost]];
  const pj = [[t("xl.month"), t("xl.calMonth"), t("fin2.salesMo"), t("fin2.netMo"), t("proj.legendCash"), t("proj.legendCum")],
    ...proj.months.map((m) => [m.m, MONTHS_EN[m.cal], m.sales, m.net, m.cash, m.cum])];
  const ow = [[t("own.party"), t("xl.role"), t("own.cashIn"), t("own.inKindValue"), "%", t("own.perMonth"), t("own.year1"), t("own.stakeholderPayback") + " (mo)"],
    ...own.rows.map((r) => [r.name, ol(r.role), r.cash, r.inKindValue, r.share, r.monthly, r.year1, r.paybackMonth || ""])];
  return `<?xml version="1.0"?>\n<?mso-application progid="Excel.Sheet"?>\n<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">`
    + sheet(t("xl.sSummary"), summary) + sheet(t("xl.sInvestment"), inv) + sheet(t("xl.sCost"), cost) + sheet(t("xl.sProjection"), pj) + sheet(t("xl.sOwnership"), ow)
    + `</Workbook>`;
}

function ExportPanel({ plan, openIE, goSummary, goDeck }) {
  const { t, lang } = useLang();
  const fileBase = (plan.idea.conceptName || "blueprintsenses-plan").replace(/[^\p{L}\p{N}]+/gu, "-").toLowerCase();
  const excel = () => {
    const blob = new Blob([buildWorkbook(plan, t, lang)], { type: "application/vnd.ms-excel" });
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob); a.download = fileBase + ".xls"; a.click();
    setTimeout(() => URL.revokeObjectURL(a.href), 1000);
  };
  const pdf = (go) => { go(); setTimeout(() => window.print(), 250); };
  const rows = [
    ["out.pdfPlan", "out.pdfPlanSub", () => pdf(goSummary)],
    ["out.pdfDeck", "out.pdfDeckSub", () => pdf(goDeck)],
    ["out.excel", "out.excelSub", excel],
    ["out.json", "out.jsonSub", openIE],
  ];
  return (
    <div style={card}>
      {rows.map(([k, sub, fn], i) => (
        <div key={k} style={{ display: "flex", alignItems: "center", gap: 16, padding: "16px 0", borderBottom: i < rows.length - 1 ? "1px solid var(--border)" : "none", flexWrap: "wrap" }}>
          <div style={{ flex: 1, minWidth: 220 }}>
            <div style={{ fontWeight: 700, fontSize: 15.5 }}>{t(k)}</div>
            <div style={{ color: "var(--muted)", fontSize: 13.5, marginTop: 3 }}>{t(sub)}</div>
          </div>
          <button onClick={fn} style={{ ...btnGhost, padding: "10px 18px", fontSize: 14 }}>{t("out.download")}</button>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { OutputsModule, PitchDeck, buildWorkbook });