/* Financial summary — quiet, professional read-out of the plan */

function SumRow({ label, value, sub, strong, tone, last }) {
  const col = tone === "green" ? "var(--green)" : tone === "red" ? "var(--red)" : "var(--ink)";
  const missing = value === "—";
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 14, padding: "9px 0", borderBottom: last ? "none" : "1px dashed var(--border)" }}>
      <div style={{ minWidth: 0 }}>
        <span style={{ fontSize: 13.5, fontWeight: strong ? 700 : 500, color: strong ? col : "var(--ink)" }}>{label}</span>
        {sub && <div style={{ fontSize: 11.5, color: "var(--faint)", marginTop: 1 }}>{sub}</div>}
      </div>
      <span className="serif-fig" style={{ fontSize: strong ? 19 : 16.5, color: missing ? "var(--faint)" : strong ? col : "var(--ink)", whiteSpace: "nowrap" }}>{value}</span>
    </div>
  );
}

function SumGroup({ title, children }) {
  return (
    <div style={{ minWidth: 0 }}>
      <div className="mono" style={{ fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--brass-deep)", fontWeight: 600, marginBottom: 6, display: "flex", alignItems: "center", gap: 8 }}>
        <span style={{ width: 12, height: 1.5, background: "var(--brass)" }} />{title}
      </div>
      {children}
    </div>
  );
}

function FinancialSummary({ live }) {
  const { t } = useLang();
  const dash = "—";
  const money = (n) => (isFinite(n) && n > 0 ? fmtBaht(n) : dash);
  const profTone = live.profit >= 0 ? "green" : "red";
  return (
    <div style={{ background: "var(--surface)", border: "1px solid var(--border)", borderRadius: "var(--radius)", padding: 28, boxShadow: "var(--shadow)", marginTop: 16 }}>
      <h2 className="serif" style={{ fontSize: 26, fontWeight: 400, margin: 0, letterSpacing: "-.01em" }}>{t("fs.heading")}</h2>
      <div style={{ color: "var(--muted)", fontSize: 14, marginTop: 6, lineHeight: 1.5 }}>
        {t("fs.desc")}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: "22px 40px", marginTop: 22 }}>
        <SumGroup title={t("fs.capital")}>
          <SumRow label={t("fs.totalCapex")} sub={t("fs.totalCapexSub")} value={money(live.capex)} />
          <SumRow label={t("fs.capexPerSqm")} sub={isFinite(live.capexPerSqm) ? t("fs.ofShopArea") : t("fs.addShopM2")} value={isFinite(live.capexPerSqm) ? fmtBaht(live.capexPerSqm) : dash} />
          <SumRow label={t("fs.kitchenCostPerSqm")} sub={isFinite(live.kitchenPerSqm) ? t("fs.equipDivKitchen") : t("fs.addKitchenM2")} value={isFinite(live.kitchenPerSqm) ? fmtBaht(live.kitchenPerSqm) : dash} />
          <SumRow label={t("fs.operatingReserve")} sub={t("fs.monthsFixedCovered")} value={isFinite(live.reserveMonths) && live.reserveMonths > 0 ? live.reserveMonths.toFixed(1) + " mo" : dash} />
          <SumRow label={t("fs.totalCapitalRequired")} value={money(live.investment)} strong last />
        </SumGroup>
        <SumGroup title={t("fs.monthlyEconomics")}>
          <SumRow label={t("fs.totalVariableCosts")} sub={t("fs.foodDrinkPct", { pct: fmtPct(live.foodPct) })} value={money(live.foodCost)} />
          <SumRow label={t("fs.totalFixedCosts")} sub={t("fs.fixedCostsSub")} value={money(live.fixed)} />
          <SumRow label={t("fs.breakEvenMonthly")} sub={t("fs.breakEvenSalesSub")} value={money(live.breakEven)} />
          <SumRow label={t("fs.breakEvenDaily")} value={money(live.breakEvenDaily)} />
          <SumRow label={t("fs.ebitdaMonth")} sub={t("fs.ebitdaSub")} tone={profTone} strong last
            value={live.sales > 0 ? `${live.profit < 0 ? "−" : ""}${fmtBaht(Math.abs(live.profit))} · ${fmtPct(live.margin)}` : dash} />
        </SumGroup>
        {live.netProfit !== undefined && (
          <SumGroup title={t("fs.taxesTakeHome")}>
            <SumRow label={t("fs.taxesStatutoryMonth")} sub={t("fs.taxesSub")} value={live.taxTotal > 0 ? fmtBaht(live.taxTotal) : live.sales > 0 ? "฿0" : dash} />
            <SumRow label={t("fs.netProfitAfterTax")} sub={t("fs.takeHomeNumber")} tone={live.netProfit >= 0 ? "green" : "red"} strong last
              value={live.sales > 0 ? `${live.netProfit < 0 ? "−" : ""}${fmtBaht(Math.abs(live.netProfit))} · ${fmtPct(live.netMargin)}` : dash} />
          </SumGroup>
        )}
        <SumGroup title={t("fs.customers")}>
          <SumRow label={t("fs.avgCustValue")} sub={live.detailedMode ? t("fs.spendPerHead") : t("fs.useHelpEstimate")} value={live.detailedMode ? fmtBaht(live.avgCheck) : dash} />
          <SumRow label={t("fs.effCustDay")} sub={live.detailedMode ? t("fs.seatsTurns") : t("fs.useHelpEstimate")} value={live.detailedMode ? fmt(live.custDay) : dash} last />
        </SumGroup>
      </div>
    </div>
  );
}

function PageSummary({ note, items }) {
  return (
    <div style={{ marginTop: 18, padding: "16px 20px 15px", borderRadius: 14, border: "1px dashed var(--border-strong)" }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 13 }}>
        <span style={{ width: 12, height: 1.5, background: "var(--brass)", alignSelf: "center" }}></span>
        <span className="mono" style={{ fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--brass-deep)", fontWeight: 600 }}>Financial summary</span>
        {note && <span style={{ fontSize: 11.5, color: "var(--faint)" }}>· {note}</span>}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(135px, 1fr))", gap: "12px 20px" }}>
        {items.map((it, i) => (
          <div key={i} style={{ minWidth: 0 }}>
            <div className="mono" style={{ fontSize: 9.5, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--muted)" }}>{it.label}</div>
            <div className="serif-fig" style={{ fontSize: 19, marginTop: 3, whiteSpace: "nowrap", color: it.value === "—" ? "var(--faint)" : it.tone === "green" ? "var(--green)" : it.tone === "red" ? "var(--red)" : "var(--ink)" }}>{it.value}</div>
            {it.sub && <div style={{ fontSize: 11, color: "var(--faint)", marginTop: 2 }}>{it.sub}</div>}
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { FinancialSummary, PageSummary });