/* ============================================================
   BLUEPRINTSENSES — OWNERSHIP MODULE (Pro only)
   Reads/writes: plan.ownership. Reads plan.financials for the
   money each party puts in and the profit there is to share.
   Stakeholder model → profit sharing → management power.
   ============================================================ */
const { useState: useStateO } = React;

const OWN_ROLES = ["Owner-operator", "Operator", "Investor", "Partner", "Chef partner"];
const OWN_MODELS = ["sole", "equal", "investorOperator"];

const pid = () => "p" + Math.random().toString(36).slice(2, 8);

function modelParties(model, idea, live, t) {
  const inv = Math.round((live.investment || idea.founder.capital || 1000000) / 1000) * 1000;
  if (model === "sole") return [{ id: pid(), name: t("own.you"), role: "Owner-operator", cash: inv, inKind: "", inKindValue: 0, share: 100 }];
  if (model === "equal") return [
    { id: pid(), name: t("own.partnerN", { n: 1 }), role: "Partner", cash: inv / 2, inKind: "", inKindValue: 0, share: 50 },
    { id: pid(), name: t("own.partnerN", { n: 2 }), role: "Partner", cash: inv / 2, inKind: "", inKindValue: 0, share: 50 },
  ];
  return [
    { id: pid(), name: t("own.investor"), role: "Investor", cash: Math.round(inv * 0.9 / 1000) * 1000, inKind: "", inKindValue: 0, share: 60 },
    { id: pid(), name: t("own.operator"), role: "Operator", cash: Math.round(inv * 0.1 / 1000) * 1000, inKind: t("own.runsShop"), inKindValue: Math.round(inv * 0.25 / 1000) * 1000, share: 40 },
  ];
}

/* shares, payouts and paybacks over the 36-month projection */
function computeOwnership(own, fin, t) {
  const live = computeFin(fin, t);
  const proj = computeProjection(fin, t, "planned");
  const parties = own.parties || [];
  const contrib = (p) => (p.cash || 0) + (p.inKindValue || 0);
  const totalContrib = parties.reduce((a, p) => a + contrib(p), 0);
  const totalCash = parties.reduce((a, p) => a + (p.cash || 0), 0);
  const shares = parties.map((p) => (own.manualShares ? (p.share || 0) / 100 : totalContrib > 0 ? contrib(p) / totalContrib : 0));
  const shareSum = shares.reduce((a, b) => a + b, 0);
  const pct = own.distributePct ?? 0.7;

  /* month by month: investors-first repays cash before anyone shares by % */
  const paid = parties.map(() => 0);
  const repaid = parties.map(() => 0);
  const paybackMonth = parties.map(() => null);
  const year1 = parties.map(() => 0);
  let repayDoneMonth = own.profitRule === "investorsFirst" ? null : 0;
  proj.months.forEach((mo) => {
    let dist = Math.max(0, mo.net) * pct;
    if (own.profitRule === "investorsFirst" && repayDoneMonth === null) {
      const owed = parties.map((p, i) => Math.max(0, (p.cash || 0) - repaid[i]));
      const owedTotal = owed.reduce((a, b) => a + b, 0);
      if (owedTotal > 0) {
        const use = Math.min(dist, owedTotal);
        parties.forEach((p, i) => { const x = owedTotal > 0 ? use * owed[i] / owedTotal : 0; repaid[i] += x; paid[i] += x; if (mo.m <= 12) year1[i] += x; });
        dist -= use;
      }
      const stillOwed = parties.reduce((a, p, i) => a + Math.max(0, (p.cash || 0) - repaid[i]), 0);
      if (stillOwed <= 0.5) repayDoneMonth = mo.m;
    }
    parties.forEach((p, i) => { const x = dist * (shareSum > 0 ? shares[i] / shareSum : 0); paid[i] += x; if (mo.m <= 12) year1[i] += x; });
    parties.forEach((p, i) => { if (paybackMonth[i] === null && (p.cash || 0) > 0 && paid[i] >= p.cash) paybackMonth[i] = mo.m; });
  });

  const steadyDist = Math.max(0, live.netProfit) * pct;
  const rows = parties.map((p, i) => ({
    ...p, contrib: contrib(p), share: shares[i],
    /* investors-first: while cash is being repaid, payouts follow cash put in, not % */
    monthly: own.profitRule === "investorsFirst" && repayDoneMonth !== 0 && totalCash > 0 ? steadyDist * (p.cash || 0) / totalCash : steadyDist * shares[i],
    yearly: steadyDist * shares[i] * 12,
    year1: year1[i], total3y: paid[i], paybackMonth: paybackMonth[i],
    multiple: p.cash > 0 ? paid[i] / p.cash : null,
  }));

  const flags = [];
  const nm = (p) => p.name || t("own.unnamed");
  if (own.manualShares && Math.abs(shareSum - 1) > 0.005) flags.push({ tone: "red", text: t("own.flagSum", { pct: Math.round(shareSum * 100) }) });
  rows.forEach((r) => {
    if (!r.role) flags.push({ tone: "amber", text: t("own.flagNoRole", { name: nm(r) }) });
    if (own.manualShares && r.share > 0 && r.contrib === 0) flags.push({ tone: "amber", text: t("own.flagNoContrib", { name: nm(r), pct: fmtPct(r.share) }) });
    if ((r.role === "Operator" || r.role === "Owner-operator") && r.share < 0.1 && rows.length > 1) flags.push({ tone: "amber", text: t("own.flagOperatorLow", { name: nm(r), pct: fmtPct(r.share) }) });
    if (r.share > 0.5 && own.majorRule === "majority" && rows.length > 1) flags.push({ tone: "amber", text: t("own.flagMajority", { name: nm(r), pct: fmtPct(r.share) }) });
    if (r.cash > 0 && !r.paybackMonth) flags.push({ tone: "amber", text: t("own.flagNoPayback", { name: nm(r) }) });
  });
  if (parties.length && live.investment > 0 && totalCash < live.investment) flags.push({ tone: "red", text: t("own.flagGap", { cash: fmtBaht(totalCash), inv: fmtBaht(live.investment), gap: fmtBaht(live.investment - totalCash) }) });
  if (own.profitRule === "investorsFirst" && repayDoneMonth === null && parties.length) flags.push({ tone: "amber", text: t("own.flagRepaySlow") });
  if (!own.manager && parties.length > 1) flags.push({ tone: "amber", text: t("own.flagNoManager") });

  const complete = parties.length > 0 && rows.every((r) => r.role && r.share > 0) && !!own.profitRule && (parties.length === 1 || !!own.manager) && !(own.manualShares && Math.abs(shareSum - 1) > 0.005);
  return { live, proj, rows, flags, totalCash, totalContrib, shareSum, repayDoneMonth, steadyDist, complete };
}

function PartyCard({ p, i, own, onChange, onRemove, share }) {
  const { t, lang } = useLang();
  return (
    <div style={{ padding: "16px 0", borderBottom: "1px solid var(--border)" }}>
      <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
        <span className="mono" style={{ width: 26, height: 26, borderRadius: "50%", background: "var(--accent-tint)", color: "var(--accent)", display: "grid", placeItems: "center", fontSize: 11, fontWeight: 700, flexShrink: 0 }}>{i + 1}</span>
        <div style={{ flex: 1, minWidth: 160 }}><TextInput wide value={p.name} onChange={(v) => onChange({ name: v })} placeholder={t("own.namePh")} /></div>
        <select value={p.role} onChange={(e) => onChange({ role: e.target.value })} style={{ padding: "11px 12px", borderRadius: 12, border: "1.5px solid var(--border)", background: "var(--surface-2)", fontFamily: "inherit", fontSize: 14, fontWeight: 600, color: "var(--ink)" }}>
          <option value="">{t("own.rolePick")}</option>
          {OWN_ROLES.map((r) => <option key={r} value={r}>{optLabel(lang, r)}</option>)}
        </select>
        <button onClick={onRemove} aria-label={t("own.remove")} style={{ width: 30, height: 30, border: "none", borderRadius: 8, background: "transparent", color: "var(--faint)", cursor: "pointer", fontSize: 17 }}>×</button>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))", gap: "10px 18px", marginTop: 12, paddingLeft: 36 }}>
        <div>
          <div style={{ fontSize: 12.5, color: "var(--muted)", marginBottom: 5 }}>{t("own.cashIn")}</div>
          <Amount value={p.cash} onChange={(v) => onChange({ cash: v })} />
        </div>
        <div>
          <div style={{ fontSize: 12.5, color: "var(--muted)", marginBottom: 5 }}>{t("own.inKind")}</div>
          <TextInput value={p.inKind} onChange={(v) => onChange({ inKind: v })} placeholder={t("own.inKindPh")} />
        </div>
        <div>
          <div style={{ fontSize: 12.5, color: "var(--muted)", marginBottom: 5 }}>{t("own.inKindValue")}</div>
          <Amount value={p.inKindValue} onChange={(v) => onChange({ inKindValue: v })} />
        </div>
        <div>
          <div style={{ fontSize: 12.5, color: "var(--muted)", marginBottom: 5 }}>{t("own.ownership")}</div>
          {own.manualShares
            ? <Stepper value={p.share || 0} onChange={(v) => onChange({ share: v })} max={100} step={5} suffix="%" />
            : <div className="serif-fig" style={{ fontSize: 28, lineHeight: 1.4 }}>{fmtPct(share, 1)}</div>}
        </div>
      </div>
    </div>
  );
}

function OwnershipModule({ plan, setOwn, goOutputs }) {
  const { t, lang } = useLang();
  const { pro } = usePro();
  const own = plan.ownership;
  const idea = plan.idea;
  const res = computeOwnership(own, plan.financials, t);
  const [section, setSection] = useStateO(0);

  if (!pro) {
    return (
      <StepShell k="own" kicker={t("own.kicker")} title={t("own.title")} lead={t("own.lead")}>
        <div style={{ display: "grid", gap: 12, marginBottom: 18 }}>
          {["q1", "q2", "q3"].map((q) => <Flag key={q} tone="muted" text={t("own.answers." + q)} />)}
        </div>
        <LockedPreview title={t("own.lockedTitle")} sub={t("own.lockedSub")} reason="ownership" height={340}>
          <OwnershipPreview />
        </LockedPreview>
      </StepShell>
    );
  }

  const parties = own.parties || [];
  const setParties = (ps) => setOwn({ parties: ps });
  const upd = (id, patch) => setParties(parties.map((p) => (p.id === id ? { ...p, ...patch } : p)));
  const add = () => setParties([...parties, { id: pid(), name: "", role: "", cash: 0, inKind: "", inKindValue: 0, share: 0 }]);
  const pickModel = (m) => {
    const ps = modelParties(m, idea, res.live, t);
    setOwn({ model: m, parties: ps, manager: ps.find((p) => p.role === "Operator" || p.role === "Owner-operator")?.id || ps[0].id, profitRule: m === "investorOperator" ? "investorsFirst" : "prorata" });
  };
  const SECTIONS = [t("own.secModel"), t("own.secProfit"), t("own.secPower")];
  const nm = (id) => (parties.find((p) => p.id === id) || {}).name || "—";

  return (
    <StepShell k="own" kicker={t("own.kicker")} title={t("own.title")} lead={t("own.lead")}>
      <div style={{ display: "flex", gap: 6, marginBottom: 22, flexWrap: "wrap" }}>
        {SECTIONS.map((s, i) => (
          <button key={s} onClick={() => setSection(i)} style={{ border: "none", cursor: "pointer", borderRadius: 99, padding: "8px 16px", fontSize: 13, fontWeight: 600, fontFamily: "inherit", background: i === section ? "var(--accent)" : "var(--surface)", color: i === section ? "#fff" : "var(--muted)", boxShadow: i === section ? "none" : "inset 0 0 0 1px var(--border)" }}>{i + 1} · {s}</button>
        ))}
      </div>

      {section === 0 && (
        <div>
          <div style={card}>
            <div style={{ fontWeight: 700, fontSize: 15.5 }}>{t("own.startFrom")}</div>
            <div style={{ color: "var(--muted)", fontSize: 13.5, marginTop: 3 }}>{t("own.startFromSub")}</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(170px, 1fr))", gap: 10, marginTop: 14 }}>
              {OWN_MODELS.map((m) => (
                <button key={m} onClick={() => pickModel(m)} style={{ textAlign: "left", padding: "14px 16px", borderRadius: 14, cursor: "pointer", fontFamily: "inherit", border: `1.5px solid ${own.model === m ? "var(--accent)" : "var(--border)"}`, background: own.model === m ? "var(--accent-tint)" : "var(--surface-2)" }}>
                  <div style={{ fontWeight: 700, fontSize: 14.5, color: "var(--ink)" }}>{t("own.model." + m)}</div>
                  <div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 3, lineHeight: 1.4 }}>{t("own.modelSub." + m)}</div>
                </button>
              ))}
            </div>
          </div>
          <div style={{ ...card, marginTop: 16 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
              <div style={{ fontWeight: 700, fontSize: 15.5 }}>{t("own.stakeholders")}</div>
              <label style={{ fontSize: 13, color: "var(--muted)", display: "inline-flex", gap: 8, alignItems: "center", cursor: "pointer" }}>
                <input type="checkbox" checked={!!own.manualShares} onChange={(e) => setOwn({ manualShares: e.target.checked, parties: parties.map((p, i) => ({ ...p, share: Math.round((res.rows[i] ? res.rows[i].share : 0) * 100) })) })} style={{ accentColor: "var(--accent)" }} />
                {t("own.setManual")}
              </label>
            </div>
            <div style={{ color: "var(--muted)", fontSize: 13, marginTop: 3 }}>{own.manualShares ? t("own.manualNote") : t("own.autoNote")}</div>
            {parties.map((p, i) => <PartyCard key={p.id} p={p} i={i} own={own} share={res.rows[i] ? res.rows[i].share : 0} onChange={(patch) => upd(p.id, patch)} onRemove={() => setParties(parties.filter((x) => x.id !== p.id))} />)}
            <button onClick={add} style={{ width: "100%", marginTop: 14, padding: "11px 12px", borderRadius: 10, border: "1.5px dashed var(--border-strong)", background: "var(--surface)", fontFamily: "inherit", fontSize: 14, fontWeight: 600, color: "var(--accent)", cursor: "pointer" }}>+ {t("own.addParty")}</button>
            {parties.length > 0 && (
              <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 16, marginTop: 6, gap: 12, flexWrap: "wrap", fontSize: 14 }}>
                <span>{t("own.cashTotal")} <strong className="serif-fig" style={{ fontSize: 18, fontWeight: 400 }}>{fmtBaht(res.totalCash)}</strong> <span style={{ color: "var(--muted)" }}>/ {fmtBaht(res.live.investment)} {t("own.toOpen")}</span></span>
                {own.manualShares && <span style={{ color: Math.abs(res.shareSum - 1) > 0.005 ? "var(--red)" : "var(--green)", fontWeight: 700 }}>Σ {Math.round(res.shareSum * 100)}%</span>}
              </div>
            )}
          </div>
        </div>
      )}

      {section === 1 && (
        <div>
          <div style={card}>
            <div style={{ fontWeight: 700, fontSize: 15.5 }}>{t("own.profitRule")}</div>
            <div style={{ marginTop: 12 }}>
              <Segmented value={own.profitRule} onChange={(v) => setOwn({ profitRule: v })} options={[{ v: "prorata", l: t("own.rule.prorata") }, { v: "investorsFirst", l: t("own.rule.investorsFirst") }]} />
            </div>
            <div style={{ color: "var(--muted)", fontSize: 13.5, marginTop: 10, lineHeight: 1.5 }}>{t("own.ruleSub." + own.profitRule)}</div>
            <FieldRow label={t("own.distribute")} hint={t("own.distributeHint", { x: fmtBaht(res.steadyDist), keep: fmtBaht(Math.max(0, res.live.netProfit) - res.steadyDist) })} last>
              <Stepper value={Math.round((own.distributePct ?? 0.7) * 100)} onChange={(v) => setOwn({ distributePct: v / 100 })} max={100} step={5} suffix="%" />
            </FieldRow>
          </div>
          {own.profitRule === "investorsFirst" && (
            <div style={{ marginTop: 14 }}><Flag tone={res.repayDoneMonth ? "green" : "amber"} text={res.repayDoneMonth ? t("own.repaidBy", { n: res.repayDoneMonth }) : t("own.flagRepaySlow")} /></div>
          )}
          <PayoutTable res={res} />
        </div>
      )}

      {section === 2 && (
        <div>
          <div style={card}>
            <FieldRow label={t("own.manager")} hint={t("own.managerHint")}>
              <select value={own.manager} onChange={(e) => setOwn({ manager: e.target.value })} style={{ padding: "11px 12px", borderRadius: 12, border: "1.5px solid var(--border)", background: "var(--surface-2)", fontFamily: "inherit", fontSize: 14, fontWeight: 600, minWidth: 178 }}>
                <option value="">{t("own.pickPerson")}</option>
                {parties.map((p) => <option key={p.id} value={p.id}>{p.name || t("own.unnamed")}</option>)}
              </select>
            </FieldRow>
            <FieldRow label={t("own.signoff")} hint={t("own.signoffHint")}><Amount value={own.signoffLimit} onChange={(v) => setOwn({ signoffLimit: v })} /></FieldRow>
            <FieldRow label={t("own.major")} hint={t("own.majorHint")} top last>
              <div style={{ maxWidth: 360 }}><Chips options={["unanimous", "majority", "lead"]} value={own.majorRule} onChange={(v) => v && setOwn({ majorRule: v })} renderLabel={(v) => t("own.majorRule." + v)} /></div>
            </FieldRow>
          </div>
          <GovernanceSummary own={own} res={res} nm={nm} idea={idea} />
        </div>
      )}

      {res.flags.length > 0 && (
        <div style={{ ...card, marginTop: 16, padding: 24 }}>
          <h2 className="serif" style={{ fontSize: 22, fontWeight: 400, margin: "0 0 14px" }}>{t("own.checkSplit")}</h2>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>{res.flags.map((f, i) => <Flag key={i} {...f} />)}</div>
        </div>
      )}

      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 26, gap: 12 }}>
        <button onClick={() => setSection(Math.max(0, section - 1))} style={{ ...btnGhost, visibility: section === 0 ? "hidden" : "visible" }}>{t("common.back")}</button>
        {section < 2
          ? <button onClick={() => setSection(section + 1)} style={btnPrimary}>{t("fin.continue")}</button>
          : <button onClick={goOutputs} style={{ ...btnPrimary, opacity: res.complete ? 1 : .85 }}>{t("own.toOutputs")}</button>}
      </div>
    </StepShell>
  );
}

function PayoutTable({ res }) {
  const { t } = useLang();
  const th = { fontSize: 10, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--muted)", fontWeight: 600, padding: "0 0 8px", textAlign: "right" };
  const td = { padding: "10px 0", textAlign: "right", borderTop: "1px solid var(--border)", fontVariantNumeric: "tabular-nums" };
  return (
    <div style={{ ...card, marginTop: 16, padding: 24, overflowX: "auto" }}>
      <h2 className="serif" style={{ fontSize: 22, fontWeight: 400, margin: 0 }}>{t("own.payoutTitle")}</h2>
      <div style={{ color: "var(--muted)", fontSize: 13, margin: "4px 0 12px" }}>{t("own.payoutSub")}</div>
      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14, minWidth: 540 }}>
        <thead className="mono"><tr>
          <th style={{ ...th, textAlign: "left" }}>{t("own.party")}</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>
        </tr></thead>
        <tbody>{res.rows.map((r) => (
          <tr key={r.id}>
            <td style={{ ...td, textAlign: "left", fontWeight: 600 }}>{r.name || t("own.unnamed")}</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>
          </tr>
        ))}</tbody>
      </table>
    </div>
  );
}

function GovernanceSummary({ own, res, nm, idea }) {
  const { t } = useLang();
  const rows = res.rows;
  return (
    <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("own.govKicker")}</div>
      <h2 className="serif" style={{ fontSize: 26, fontWeight: 400, margin: "6px 0 14px" }}>{t("own.govTitle", { name: idea.conceptName || t("pro.thisConcept") })}</h2>
      <ol style={{ margin: 0, paddingLeft: 20, display: "flex", flexDirection: "column", gap: 10, fontSize: 14.5, lineHeight: 1.55 }}>
        <li><strong>{t("own.govOwners")}</strong> {rows.map((r) => `${r.name || t("own.unnamed")} ${fmtPct(r.share, 1)}`).join(" · ") || "—"}</li>
        <li><strong>{t("own.govMoney")}</strong> {rows.map((r) => `${r.name || t("own.unnamed")} ${fmtBaht(r.cash)}${r.inKind ? ` + ${r.inKind}` : ""}`).join(" · ") || "—"}</li>
        <li><strong>{t("own.govProfit")}</strong> {t("own.govProfitText." + own.profitRule, { pct: fmtPct(own.distributePct ?? 0.7) })}</li>
        <li><strong>{t("own.govDaily")}</strong> {t("own.govDailyText", { name: nm(own.manager), limit: fmtBaht(own.signoffLimit) })}</li>
        <li><strong>{t("own.govMajor")}</strong> {t("own.majorRule." + own.majorRule)}</li>
      </ol>
      <div style={{ fontSize: 12, color: "var(--faint)", marginTop: 14 }}>{t("own.govDisclaimer")}</div>
    </div>
  );
}

function OwnershipPreview() {
  return (
    <div style={{ padding: 24 }}>
      {[["Mint", "60%", "฿38,400"], ["Partner", "25%", "฿16,000"], ["Investor", "15%", "฿9,600"]].map(([n, p, v]) => (
        <div key={n} style={{ display: "flex", justifyContent: "space-between", padding: "14px 0", borderBottom: "1px solid var(--border)", fontSize: 15 }}>
          <strong>{n}</strong><span>{p}</span><span className="serif-fig">{v}</span>
        </div>
      ))}
      <div style={{ height: 120, marginTop: 16, borderRadius: 12, background: "linear-gradient(90deg, var(--accent) 60%, var(--c-rent) 60% 85%, var(--c-mkt) 85%)" }} />
    </div>
  );
}

Object.assign(window, { OwnershipModule, computeOwnership, OWN_ROLES });