/* eslint-disable */
/* © 2026 K2B NETWORK SOLUTIONS LLC. All rights reserved.
   Proprietary and confidential. Unauthorized copying, distribution, or use of
   this file, via any medium, is strictly prohibited. Original work product. */
// JBREWS DMS — Pay-Plan Engine. Salesperson commission calculated live off
// each deal's gross: commissionable front gross (after pack & over-allowance),
// commission %, mini floor, and per-product bonuses (VSC / GAP / appearance),
// with a funded-only payout gate. Plan settings are editable and persist.

// RC28 fix round (audit FU6): cents are shown when there are any ($150.50 was shown — and paid — as $151)
const ppMoney = (n) => { const v = Math.round((Number(n) || 0) * 100) / 100; return (v < 0 ? "−$" : "$") + Math.abs(v).toLocaleString("en-US", { minimumFractionDigits: Math.abs(v) % 1 ? 2 : 0, maximumFractionDigits: 2 }); };

const PayPlan = ({ onClose, go }) => {
  const D = window.DMS;
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => (D && D.subscribe) ? D.subscribe(force) : undefined, []);
  const act = (r) => { window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn", 3000); return r; };
  const deals = (D && D.deals) ? D.deals().filter(d => (+d.salePrice || 0) > 0) : [];
  const cfg = D.payPlanConfig ? D.payPlanConfig() : {};
  const [selId, setSelId] = React.useState(null);
  const [cfgOpen, setCfgOpen] = React.useState(false);
  React.useEffect(() => { if (selId && deals.find(d => d.id === selId)) return; if (deals[0]) setSelId(deals[0].id); }, [deals.length]);
  const sel = deals.find(d => d.id === selId) || null;
  const pp = sel ? D.dealPayPlan(sel.id) : null;

  const totalPayable = deals.reduce((s, d) => { const p = D.dealPayPlan(d.id); return s + (p.found && p.eligible ? p.total : 0); }, 0);
  const pendingPayable = deals.reduce((s, d) => { const p = D.dealPayPlan(d.id); return s + (p.found && !p.eligible ? p.total : 0); }, 0);

  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 1280, height: "calc(100vh - 110px)", margin: "0 auto",
                                          display: "flex", flexDirection: "column", background: "var(--jb-surface, #F4F4F4)", fontFamily: "var(--jb-font)" }}>
      <K2BTitlebar title="Pay-Plan Engine — Live Commission" icon="store" onClose={onClose} />

      <div style={{ display: "flex", gap: 10, padding: "10px 16px", borderBottom: "1px solid var(--jb-border)", flexWrap: "wrap", alignItems: "center" }}>
        <div style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", padding: "8px 14px" }}>
          <div style={{ fontSize: 10.5, letterSpacing: 0.6, textTransform: "uppercase", color: "var(--jb-text-muted)" }}>Payable (funded)</div>
          <div style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 19, color: "var(--jb-green, #16A34A)" }}>{ppMoney(totalPayable)}</div>
        </div>
        <div style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", padding: "8px 14px" }}>
          <div style={{ fontSize: 10.5, letterSpacing: 0.6, textTransform: "uppercase", color: "var(--jb-text-muted)" }}>Pending (not funded)</div>
          <div style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 19, color: "var(--jb-amber, #9A6700)" }}>{ppMoney(pendingPayable)}</div>
        </div>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 11.5, color: "var(--jb-text-muted)" }}>
          <span data-pp="summary">{Math.round(cfg.usedPct * 10000) / 100}% used · {Math.round(cfg.newPct * 10000) / 100}% new · mini {ppMoney(cfg.miniFloor)}{cfg.fundedOnly ? " · funded-only" : ""} · plan v{cfg.version || 0}{cfg.version ? "" : " (shipped default)"}</span>
        </span>
        <button className="k2b-button small" data-pp="open" onClick={() => setCfgOpen(true)}>⚙ Pay Plan (server)</button>
      </div>

      <div style={{ flex: 1, display: "grid", gridTemplateColumns: "320px 1fr", minHeight: 0 }}>
        <div style={{ borderRight: "1px solid var(--jb-border)", overflow: "auto", background: "#FFF" }}>
          {deals.length === 0 && <div style={{ padding: 24, color: "#888", fontSize: 13, textAlign: "center" }}>No deals with a sale price yet.</div>}
          {deals.map(d => {
            const p = D.dealPayPlan(d.id); const on = d.id === selId;
            return (
              <div key={d.id} onClick={() => setSelId(d.id)} style={{ padding: "10px 14px", borderBottom: "1px solid var(--jb-border)", cursor: "pointer", background: on ? "var(--jb-blue-tint, #E5EFFA)" : "transparent", borderLeft: on ? "3px solid var(--jb-blue)" : "3px solid transparent" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 700, color: "var(--jb-navy)" }}>{d.id}</span>
                  <div style={{ flex: 1 }} />
                  <span data-pp-total={d.id} style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, color: p.unwound ? "#888" : p.eligible ? "var(--jb-green)" : "var(--jb-amber, #9A6700)" }}>{ppMoney(p.total)}</span>
                </div>
                <div style={{ fontSize: 12.5, marginTop: 3 }}>{d.salesperson || "—"} · {d.buyer}</div>
                <div style={{ fontSize: 11.5, color: "var(--jb-text-muted)" }} data-pp-row={d.id}>{d.status}{p.unwound ? " · unwound — commission reversed" : (p.isMini ? " · MINI" : "") + (!p.eligible ? " · holds for funding" : "")}</div>
              </div>
            );
          })}
        </div>

        <div style={{ overflow: "auto" }}>
          {sel && pp ? (
            <div style={{ padding: "16px 22px" }}>
              <div style={{ marginBottom: 14 }}>
                <div style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 20, color: "var(--jb-navy)" }}>{sel.id}</div>
                <div style={{ fontSize: 14, fontWeight: 700 }}>{pp.salesperson} · {sel.buyer}</div>
                <div style={{ fontSize: 12.5, color: "var(--jb-text-dim)" }}>{sel.vehicle} · {pp.isNew ? "New" : "Used"} · {sel.status}</div>
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 16, alignItems: "start" }}>
                {/* breakdown */}
                <div style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", overflow: "hidden" }}>
                  <PpRow label="Sale price" value={ppMoney(sel.salePrice)} />
                  <PpRow label="Vehicle cost" value={"−" + ppMoney(sel.cost)} />
                  {pp.pack > 0 && <PpRow label="Pack" value={"−" + ppMoney(pp.pack)} />}
                  {pp.tradeOverallow > 0 && <PpRow label="Trade over-allowance" value={"−" + ppMoney(pp.tradeOverallow)} />}
                  {pp.frontAdds > 0 && <PpRow label="Front cost lines (Profit panel)" value={"−" + ppMoney(pp.frontAdds)} />}
                  <PpRow label="Commissionable gross" value={ppMoney(pp.frontGross)} bold />
                  <PpRow label={`Commission @ ${Math.round(pp.pct * 10000) / 100}%${pp.planPosted ? " (plan v" + (pp.planVersion || 0) + ", as posted)" : ""}`} value={ppMoney(pp.baseComm)} />
                  {pp.isMini && <PpRow label={`Mini floor applied (${ppMoney(pp.miniFloor)})`} value={ppMoney(pp.commission)} amber />}
                  {pp.bonuses.map((b, i) => <PpRow key={i} label={"Bonus · " + b.label} value={"+" + ppMoney(b.amount)} green />)}
                  <PpRow label="TOTAL PAYABLE" value={ppMoney(pp.total)} big />
                </div>

                {/* eligibility */}
                <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                  <div style={{ background: pp.eligible ? "linear-gradient(160deg,#0E7A37,#0B5C2A)" : "linear-gradient(160deg,#B8860B,#8A6400)", borderRadius: "var(--jb-r-lg)", padding: "16px 18px", color: "#fff" }}>
                    <div style={{ fontSize: 11, letterSpacing: 1.2, textTransform: "uppercase", opacity: 0.85 }}>{pp.eligible ? "Payable Now" : "Holds for Funding"}</div>
                    <div style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 32 }}>{ppMoney(pp.total)}</div>
                    <div style={{ fontSize: 12, opacity: 0.9, marginTop: 4 }}>{pp.eligible ? "Deal funded — commission released." : (pp.fundedOnly ? "Funded-only plan: pays when the lender funds." : "Eligible.")}</div>
                  </div>
                  <div style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", padding: "12px 14px", fontSize: 12.5 }}>
                    <PpFlag label="Gross finalized" ok={pp.postedToGL} />
                    <PpFlag label="Deal funded" ok={pp.funded} />
                    <PpFlag label="Not a mini" ok={!pp.isMini} />
                    <PpFlag label="Payroll eligible" ok={pp.eligible} />
                  </div>
                  <button className="k2b-button" onClick={() => { try { localStorage.setItem("jb_deal_focus", sel.id); } catch (e) {} go && go("deal"); }}>Open Deal ▸</button>
                </div>
              </div>
            </div>
          ) : <div style={{ padding: 40, color: "#999", textAlign: "center" }}>Select a deal.</div>}
        </div>
      </div>

      <div style={{ borderTop: "1px solid var(--jb-border)", padding: "8px 16px", display: "flex", gap: 6 }}>
        <K2BButton small onClick={onClose}>ESC-Close</K2BButton>
        <K2BButton small onClick={() => go && go("deal")}>Deals</K2BButton>
        <K2BButton small onClick={() => go && go("payroll")}>Payroll</K2BButton>
      </div>

      {cfgOpen && <PayPlanConfig cfg={cfg} act={act} onClose={() => setCfgOpen(false)} />}
    </div>
  );
};

const PpRow = ({ label, value, bold, big, green, amber }) => (
  <div style={{ display: "flex", justifyContent: "space-between", padding: big ? "10px 14px" : "6px 14px", borderTop: "1px solid var(--jb-border)",
                background: big ? "var(--jb-navy, #11337A)" : bold ? "var(--jb-surface-2)" : "#fff",
                color: big ? "#fff" : green ? "#0E7A37" : amber ? "#9A6700" : "var(--jb-text)", fontWeight: big || bold ? 800 : 400 }}>
    <span style={{ fontSize: big ? 14 : 13 }}>{label}</span>
    <span style={{ fontFamily: "var(--jb-mono)", fontSize: big ? 18 : 13.5, fontWeight: 700 }}>{value}</span>
  </div>
);
const PpFlag = ({ label, ok }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "3px 0" }}>
    <span style={{ color: ok ? "var(--jb-green, #16A34A)" : "#C8862A", fontWeight: 700 }}>{ok ? "✓" : "○"}</span>
    <span style={{ color: ok ? "var(--jb-text)" : "#999" }}>{label}</span>
  </div>
);

// RC28 (fx, the reviewer's finding 3): the plan is the SERVER's — one stored configuration, VERSIONED with an effective date and audited
// (GET / POST /api/pay-plan). Saving makes a NEW version (the owner, Admin / F&I or the Office Manager); every other login reads it.
// The desk, the posting, the chargebacks and this screen all use it; a posted deal keeps the version it was posted with.
const PayPlanConfig = ({ cfg, act, onClose }) => {
  const D = window.DMS;
  const pp = (D && D.payPlanCached) ? D.payPlanCached() : {};
  const may = !!pp.mayEdit;
  const today = (() => { const t = new Date(); return t.getFullYear() + "-" + String(t.getMonth() + 1).padStart(2, "0") + "-" + String(t.getDate()).padStart(2, "0"); })();
  const pctTxt = (x) => String(Math.round((+x || 0) * 10000) / 100);
  const [f, setF] = React.useState({
    usedPct: pctTxt(cfg.usedPct), newPct: pctTxt(cfg.newPct),
    miniFloor: (+cfg.miniFloor || 0).toFixed(2), vscBonus: (+cfg.vscBonus || 0).toFixed(2), gapBonus: (+cfg.gapBonus || 0).toFixed(2),
    appearanceBonus: (+cfg.appearanceBonus || 0).toFixed(2), fundedOnly: cfg.fundedOnly !== false, packCounts: cfg.packCounts !== false,
    effectiveOn: today, reason: "",
  });
  const [busy, setBusy] = React.useState(false);
  const [msg, setMsg] = React.useState(null);
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const save = async () => {
    setBusy(true); setMsg(null);
    const r = await D.setPayPlanConfig({ usedPctText: f.usedPct, newPctText: f.newPct, miniFloor: f.miniFloor, vscBonus: f.vscBonus, gapBonus: f.gapBonus, appearanceBonus: f.appearanceBonus,
      fundedOnly: !!f.fundedOnly, packCounts: !!f.packCounts }, { effectiveOn: f.effectiveOn, reason: f.reason });
    setBusy(false);
    if (r.ok) { if (window.k2bToast) window.k2bToast(r.msg, /still scheduled/.test(r.msg || "") ? "warn" : "ok", /still scheduled/.test(r.msg || "") ? 12000 : 3000); onClose(); } else setMsg(r.msg);
  };
  const versions = (pp.versions || []).slice().reverse();
  // RC28 fix round (audit FU4): each version says when it is in effect — the one in effect today, the ones still to come (each on its own day)
  const vState = (v) => (v.version === (cfg.version || 0) ? "IN EFFECT" : v.effectiveOn > (pp.today || "") ? "takes effect " + v.effectiveOn : "");
  return (
    <K2BModal title="Pay Plan — the store's plan (kept on the server)" width={640} onClose={onClose}
      buttons={<><K2BButton onClick={onClose}>{may ? "Cancel" : "Close"}</K2BButton>{may && <K2BButton primary onClick={save} disabled={busy}>{busy ? "Saving…" : "Save as a new version"}</K2BButton>}</>}>
      <div data-pp="current" data-version={cfg.version || 0} style={{ fontSize: 12.5, marginBottom: 10, padding: "8px 10px", background: "#EEF4FB", borderRadius: 4 }}>
        In effect today: <b>version {cfg.version || 0}</b>{cfg.version ? " (from " + cfg.effectiveOn + ")" : " — the shipped default plan; the store's own plan has not been saved yet. Check it matches your real pay plan before the next deal posts."}
        <div style={{ color: "#555", marginTop: 3 }}>The desk, the posting, the product chargebacks and this screen all use this plan. A deal already posted keeps the version it was posted with.</div>
      </div>
      {!may && <div style={{ fontSize: 12.5, color: "#8A6400", marginBottom: 10 }}>Only the owner, Admin / F&amp;I or the Office Manager can save a new version of the pay plan — your login can read it.</div>}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <PpCfgFld label="Used commission" k="usedPct" suffix="% of net front" f={f} set={set} dis={!may} />
        <PpCfgFld label="New commission" k="newPct" suffix="% of net front" f={f} set={set} dis={!may} />
        <PpCfgFld label="Mini floor" k="miniFloor" suffix="$" f={f} set={set} dis={!may} />
        <div />
        <PpCfgFld label="VSC bonus" k="vscBonus" suffix="$" f={f} set={set} dis={!may} />
        <PpCfgFld label="GAP bonus" k="gapBonus" suffix="$" f={f} set={set} dis={!may} />
        <PpCfgFld label="Appearance bonus" k="appearanceBonus" suffix="$" f={f} set={set} dis={!may} />
      </div>
      <label style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 14 }}>
        <input type="checkbox" disabled={!may} checked={!!f.fundedOnly} onChange={(e) => set("fundedOnly", e.target.checked)} style={{ width: 16, height: 16 }} />
        <span style={{ fontSize: 13 }}>Funded-only — commission pays only after the lender funds the deal</span>
      </label>
      <label style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 8 }}>
        <input type="checkbox" disabled={!may} checked={!!f.packCounts} onChange={(e) => set("packCounts", e.target.checked)} style={{ width: 16, height: 16 }} />
        <span style={{ fontSize: 13 }}>Subtract pack before commission</span>
      </label>
      {may && <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 12, marginTop: 12 }}>
        <PpCfgFld label="In effect from (today or later)" k="effectiveOn" f={f} set={set} />
        <PpCfgFld label="Why it changes (kept with the version)" k="reason" f={f} set={set} />
      </div>}
      {msg && <div data-pp="msg" style={{ marginTop: 10, color: "#8A2A20", fontSize: 12.5 }}>{msg}</div>}
      <div style={{ marginTop: 14, fontSize: 11.5, color: "#555" }}>
        <b>Versions</b>
        {versions.map(v => <div key={v.version} data-pp-version={v.version} style={{ display: "flex", gap: 8, borderTop: "1px solid #E3E6EA", padding: "3px 0" }}>
          <span style={{ width: 70 }}>v{v.version}</span><span style={{ width: 90 }}>{v.version ? v.effectiveOn : "shipped"}</span><span data-pp-vstate={v.version} style={{ width: 130, fontWeight: 700 }}>{vState(v)}</span>
          <span style={{ flex: 1 }}>{(v.plan.newPctBp / 100)}% new · {(v.plan.usedPctBp / 100)}% used · mini ${(v.plan.miniFloorCents / 100).toFixed(2)}{v.byName ? " · " + v.byName : ""}{v.reason && v.version ? " · " + v.reason : ""}</span>
        </div>)}
      </div>
    </K2BModal>
  );
};

const ppInpStyle = { width: "100%", boxSizing: "border-box", padding: "7px 9px", border: "1px solid #C8CCD2", borderRadius: 4, fontSize: 13, fontFamily: "var(--jb-mono)" };
const PpCfgFld = ({ label, k, suffix, f, set, dis }) => (
    <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
      <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>{label}</span>
      <div style={{ display: "flex", alignItems: "center", gap: 4 }}><input data-pp-field={k} disabled={!!dis} value={f[k]} onChange={(e) => set(k, e.target.value)} style={ppInpStyle} />{suffix && <span style={{ fontSize: 12, color: "#888" }}>{suffix}</span>}</div>
    </label>
);

Object.assign(window, { PayPlan });