/* 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 — Deal Pipeline (CUSDISP).
// Every deal in the store, by stage: Desked · Cash · F&I · Posted · Funded.
// ONE PATH: deals are created in the CRM (+ New Lead → Desk It) — this screen
// never creates one. It reviews, hands off to the desk / Cash Deal / Finance
// Deal, posts to accounting (window.jbPostDeal) and marks funded (window.jbFundDeal).

const PRINT_FORMS = [
  { code: "BO-01",   name: "Buyer's Order",                       action: "buyersorder" },
  { code: "FW-01",   name: "Finance Worksheet",                   action: "finance" },
  { code: "DOR-108", name: "Missouri Title Application (DOR-108)", action: "titlemo" },
  { code: "DOR-100", name: "Missouri Sales Tax Receipt (DOR-100)" },
  { code: "ODM-01",  name: "Federal Odometer Disclosure" },
  { code: "WEOWE-1", name: "We Owe / Due Bill" },
  { code: "PRIV-1",  name: "Privacy Notice (GLBA)" },
  { code: "RFC-1",   name: "Retail Installment Contract" },
  { code: "POA-1",   name: "Power of Attorney — Title" },
  { code: "CREDIT",  name: "Credit Application (Reg-B)",           action: "creditapp" },
];

// Stage helpers — DMSCore owns the list + reconciliation of legacy records.
const drStages = () => (window.DMS && window.DMS.DEAL_STAGES) || ["Desked", "Cash", "F&I", "Posted", "Funded"];
const drStage = (d) => (window.DMS && window.DMS.dealStage) ? window.DMS.dealStage(d) : (d.stage || "Desked");
const drStageTone = {
  Desked: { bg: "var(--jb-amber-tint, #FBF3E0)", fg: "#9A6700" },
  Cash:   { bg: "var(--jb-green-tint, #E6F7EC)", fg: "var(--jb-green, #0E7A37)" },
  "F&I":  { bg: "var(--jb-blue-tint, #E5EFFA)",  fg: "var(--jb-blue, #1B66A8)" },
  Posted: { bg: "#EAE6F7", fg: "#5B3FA0" },
  Funded: { bg: "var(--jb-green, #16A34A)", fg: "#FFF" },
};
const DrStageBadge = ({ d, small }) => {
  const s = drStage(d); const t = drStageTone[s] || drStageTone.Desked;
  return (
    <span style={{ padding: small ? "1px 7px" : "2px 8px", borderRadius: 4, fontSize: 11, fontWeight: 700, background: t.bg, color: t.fg, whiteSpace: "nowrap" }}>
      {s === "Funded" ? "DONE ✓" : s}
    </span>
  );
};

// Hand the deal to the Desking Tool: link its customer AND its unit (from
// live inventory when the stock # matches). Writes the full pointer set.
const drOpenInDesking = (d, go) => {
  if (!d) return;
  const unit = (DMS.inventory() || []).find(u => u.stock === d.stock);
  if (unit) {
    window.jbDeskUnit = { stock: unit.stock, vin: unit.vin, yr: unit.yr, mk: unit.mk,
                          mdl: unit.mdl, list: unit.asking, cost: unit.cost,
                          type: unit.type, miles: unit.miles };
    try { localStorage.setItem("jb_desk_unit", JSON.stringify(window.jbDeskUnit)); } catch (e) {}
  }
  window.jbDeskDeal = { id: d.id, buyer: d.buyer };
  try { localStorage.setItem("jb_desk_deal", JSON.stringify(window.jbDeskDeal)); } catch (e) {}
  try { localStorage.setItem("jb_fw_deal", d.id); } catch (e) {}
  go && go("desking");
};
const drOpenClosing = (d, go) => {
  if (!d) return;
  try { localStorage.setItem("jb_fw_deal", d.id); } catch (e) {}
  go && go(drStage(d) === "Cash" ? "cashworksheet" : "finance");
};

const DealReview = ({ onClose, go }) => {
  // Deals live in the shared ledger so they appear everywhere (MO Forms,
  // Trade Appraisal, Accounting) — one source of truth.
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => DMS.subscribe(force), []);
  const deals = DMS.deals();
  const [selectedId, setSelectedId] = React.useState(null);
  const [help, setHelp]             = React.useState(false);
  const [stageFilter, setStageFilter] = React.useState("All");
  // Recap — opened by clicking a row or a jb_deal_focus hand-off (read once).
  const [recapId, setRecapId] = React.useState(() => {
    try {
      const id = localStorage.getItem("jb_deal_focus");
      if (id) { localStorage.removeItem("jb_deal_focus"); return id; }
    } catch (e) {}
    return null;
  });

  const selected = deals.find(d => d.id === selectedId);
  const needSel = () => window.k2bToast && window.k2bToast("Select a deal first.", "warn", 2600);

  React.useEffect(() => {
    const fire = (e) => {
      // Audit A-07 guards:
      //  • never intercept F5 (browser refresh) or modified keys
      //  • while a dialog is open, Esc closes ONLY that dialog; other keys pass
      //  • keys typed into an input / textarea / select never trigger actions
      if (e.key === "F5" || e.altKey || e.ctrlKey || e.metaKey) return;
      const dialogOpen = help || (window.jbAnyModalOpen && window.jbAnyModalOpen());
      if (dialogOpen) {
        if (e.key === "Escape") { e.preventDefault(); if (help) setHelp(false); }
        return;
      }
      if (window.jbKeyFromField && window.jbKeyFromField(e)) return;
      const map = {
        // Esc backs out one level: recap → list → previous screen.
        "Escape": () => (recapId ? (setRecapId(null), setBackendView(false)) : onClose()),
        "F1":     () => setHelp(true),
        // ONE PATH: F2 = start in the CRM (deals are never created here).
        "F2":     () => go && go("crm"),
        "F3":     () => go && go("creditapp"),
        "F4":     () => go && go("inventory"),
        "F6":     () => selected ? drOpenInDesking(selected, go) : needSel(),
        "F7":     () => selected ? drOpenInDesking(selected, go) : needSel(),
        "F9":     () => selected ? drOpenClosing(selected, go) : needSel(),
        "F10":    () => onClose(),
      };
      const fn = map[e.key];
      if (fn) { e.preventDefault(); fn(); }
    };
    window.addEventListener("keydown", fire);
    return () => window.removeEventListener("keydown", fire);
  }, [go, onClose, selected, help, recapId]);

  const recapDeal = recapId ? deals.find(d => d.id === recapId) : null;
  const [backendView, setBackendView] = React.useState(false);
  // RC19: one search box over the list (DealSearch.jsx.txt) — searches the stage the chips show; an empty box = the list as before.
  // ↑ ↓ move the highlighted row, Enter opens its review (same as a click). Called before the early returns below (hook order).
  const drSearchBase = stageFilter === "All" ? deals : deals.filter(d => drStage(d) === stageFilter);
  const ds = dsUseDealSearch({ deals: drSearchBase, selectedId, onSelect: setSelectedId, onOpen: (d) => { setSelectedId(d.id); setRecapId(d.id); } });
  if (recapDeal && backendView) {
    return <DealBackend deal={recapDeal} go={go} onBack={() => setBackendView(false)} />;
  }
  if (recapDeal) {
    return <DealRecap deal={recapDeal} go={go}
                      onBack={() => { setRecapId(null); setBackendView(false); }}
                      onBackend={() => setBackendView(true)}
                      onDesk={() => drOpenInDesking(recapDeal, go)} />;
  }

  const counts = drStages().reduce((m, s) => { m[s] = deals.filter(d => drStage(d) === s).length; return m; }, {});
  const shown = ds.list;

  return (
    <div style={{ padding: 20, height: "100%", boxSizing: "border-box" }}>
      {/* Page header */}
      <div style={{ display: "flex", alignItems: "center", marginBottom: 12, gap: 12 }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 700, color: "var(--jb-navy)" }}>Deal Pipeline</div>
          <div style={{ fontSize: 12, color: "var(--jb-text-dim)" }}>
            {deals.length === 0
              ? "No deals yet. Deals start in the CRM: + New Lead → Desk It."
              : `${deals.length} deal${deals.length === 1 ? "" : "s"} · Desked → Cash / F&I → Posted → Funded`}
          </div>
        </div>
        <div style={{ flex: 1 }} />
        <K2BButton onClick={() => setHelp(true)}>? Help</K2BButton>
        <K2BButton onClick={() => go && go("uploadtool")}>Import Deals</K2BButton>
        <K2BButton style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => go && go("crm")}>
          Start in CRM ▸
        </K2BButton>
      </div>

      {deals.length === 0
        ? <EmptyDealsState go={go} onImport={() => go && go("uploadtool")} />
        : (
          <>
            {/* Stage filter chips */}
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 10, alignItems: "center" }}>
              {["All", ...drStages()].map(s => {
                const on = stageFilter === s; const t = drStageTone[s];
                const n = s === "All" ? deals.length : (counts[s] || 0);
                return (
                  <button key={s} className="k2b-button small" onClick={() => setStageFilter(s)}
                          style={{ fontWeight: on ? 700 : 500, background: on ? (t ? t.fg : "var(--jb-navy)") : undefined, color: on ? "#FFF" : undefined, borderRadius: 999 }}>
                    {s}{" "}<span style={{ opacity: 0.75, fontSize: 11 }}>({n})</span>
                  </button>
                );
              })}
              <span style={{ marginLeft: "auto", fontSize: 11.5, color: "var(--jb-text-muted)" }}>Click a row to review · F6/F7 Desk · F9 Cash / Finance Deal</span>
            </div>
            <DsSearchBar ds={ds} style={{ position: "static", marginBottom: 10, border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)" }} />
            <DealsTable deals={shown} selectedId={selectedId} onSelect={setSelectedId} go={go} onOpen={(d) => drOpenInDesking(d, go)} onReview={setRecapId} ds={ds} />
          </>
        )
      }

      {help && <HelpDialog onClose={() => setHelp(false)} />}
    </div>
  );
};

/* ─── Empty state ──────────────────────────────────────────── */
const EmptyDealsState = ({ go, onImport }) => (
  <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 16, height: "calc(100% - 60px)" }}>
    {/* Big CTA card */}
    <div style={{
      background: "var(--jb-surface)",
      border: "2px dashed var(--jb-border-strong)",
      borderRadius: "var(--jb-r-lg)",
      display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center",
      padding: 40, textAlign: "center",
    }}>
      <div style={{ fontSize: 56, marginBottom: 12 }}>📑</div>
      <div style={{ fontSize: 20, fontWeight: 700, color: "var(--jb-navy)", marginBottom: 6 }}>
        No deals yet
      </div>
      <div style={{ fontSize: 13, color: "var(--jb-text-dim)", maxWidth: 420, marginBottom: 20, lineHeight: 1.5 }}>
        Deals start in the CRM: <b>+ New Lead → Desk It</b>. The desk works the numbers, then pushes the deal to
        Cash Deal or Finance Deal, which posts it to accounting.
      </div>
      <div style={{ display: "flex", gap: 10, flexWrap: "wrap", justifyContent: "center" }}>
        <K2BButton style={{ background: "var(--jb-yellow)", fontWeight: 700, padding: "10px 18px" }}
                    onClick={() => go && go("crm")}>Open CRM ▸</K2BButton>
        <K2BButton onClick={onImport}>Import from old DMS</K2BButton>
      </div>
    </div>

    {/* Step-by-step */}
    <div style={{
      background: "var(--jb-surface)", border: "1px solid var(--jb-border)",
      borderRadius: "var(--jb-r-lg)", padding: "20px 22px",
      boxShadow: "var(--jb-shadow-sm)",
    }}>
      <div style={{ fontWeight: 700, color: "var(--jb-navy)", marginBottom: 12,
                    textTransform: "uppercase", letterSpacing: "0.04em", fontSize: 11 }}>
        The one path — every deal follows it
      </div>
      <ol style={{ margin: 0, padding: "0 0 0 20px", fontSize: 13, color: "var(--jb-text)", lineHeight: 1.7 }}>
        <li><b>CRM</b> — find the customer (or add them), then <b>+ New Lead</b>.</li>
        <li><b>Desk It ▸</b> creates the deal and opens <b>Desking</b> — price, trade, down, payment.</li>
        <li><b>Push to Cash Deal</b> or <b>Push to Finance</b> hands it to the closing screen.</li>
        <li><b>Post to Accounting</b> books the deal (one shared gate).</li>
        <li>Accounting <b>marks it Funded</b> — done.</li>
      </ol>
      <div style={{ marginTop: 16, padding: 10, background: "var(--jb-blue-tint)",
                    border: "1px solid var(--jb-blue)", borderRadius: "var(--jb-r-sm)",
                    fontSize: 12, color: "var(--jb-navy)", lineHeight: 1.5 }}>
        <b>Tip:</b> Already have deals in your old DMS? Use <b>Import / Export</b> in the
        top toolbar to bring them all over in one pass — no manual re-entry.
      </div>
    </div>
  </div>
);

/* ─── Deals table ──────────────────────────────────────────── */
const DealsTable = ({ deals, selectedId, onSelect, go, onOpen, onReview, ds }) => (
  <div style={{
    background: "var(--jb-surface)", border: "1px solid var(--jb-border)",
    borderRadius: "var(--jb-r-lg)", overflow: "hidden",
  }}>
    <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
      <thead>
        <tr>
          <th style={dealsTh}>Deal #</th>
          <th style={dealsTh}>Buyer</th>
          <th style={dealsTh}>Vehicle</th>
          <th style={dealsTh}>Stage</th>
          <th style={dealsTh}>Created</th>
          <th style={dealsTh}></th>
        </tr>
      </thead>
      <tbody>
        {deals.length === 0 && (
          <tr><td colSpan={6} style={{ ...dealsTd, color: "var(--jb-text-dim)", textAlign: "center", padding: 18 }}>{ds && ds.filtering ? "No deals match the search." : "No deals at this stage."}</td></tr>
        )}
        {deals.map(d => {
          const st = drStage(d);
          return (
            <tr key={d.id} data-ds-row={d.id}
                onClick={() => { onSelect && onSelect(d.id); onReview && onReview(d.id); }}
                title="Click to review this deal"
                style={{
                  background: d.id === selectedId ? "var(--jb-blue-tint)" : "transparent",
                  cursor: "pointer", borderBottom: "1px solid var(--jb-border)",
                  opacity: st === "Funded" ? 0.75 : 1,
                }}>
              <td style={dealsTd}><b>{d.id}</b></td>
              <td style={dealsTd}>{d.buyer || "—"}{ds ? <DsWhy ds={ds} d={d} /> : null}</td>
              <td style={dealsTd}>{d.vehicle || "—"}</td>
              <td style={dealsTd}><DrStageBadge d={d} /></td>
              <td style={dealsTd}>{d.created ? new Date(d.created).toLocaleDateString() : "—"}</td>
              <td style={dealsTd}>
                <span style={{ display: "inline-flex", gap: 6 }}>
                  <K2BButton small onClick={(e) => { e.stopPropagation(); onReview && onReview(d.id); }}>Review</K2BButton>
                  {!d.postedToGL && <K2BButton small onClick={(e) => { e.stopPropagation(); onOpen && onOpen(d); }}>Desk ▸</K2BButton>}
                  {(st === "Cash" || st === "F&I") && (
                    <K2BButton small onClick={(e) => { e.stopPropagation(); drOpenClosing(d, go); }}>{st === "Cash" ? "Cash Deal ▸" : "Finance Deal ▸"}</K2BButton>
                  )}
                </span>
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  </div>
);

const dealsTh = { padding: "10px 14px", textAlign: "left", fontSize: 11,
                  textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--jb-text-dim)",
                  borderBottom: "1px solid var(--jb-border)", background: "var(--jb-surface-2)" };
const dealsTd = { padding: "10px 14px", fontSize: 13, color: "var(--jb-text)" };

/* ─── Help dialog ──────────────────────────────────────────── */
const HelpDialog = ({ onClose }) => (
  <K2BModal title="Deal Pipeline — Help" onClose={onClose} width={520}>
    <div style={{ fontSize: 13, lineHeight: 1.6 }}>
      <p style={{ marginTop: 0 }}>
        <b>Deal Pipeline</b> lists every deal at the dealership by stage
        (Desked · Cash · F&amp;I · Posted · Funded) and lets you open any one to work it through to funding.
        Deals are created in the <b>CRM</b> (+ New Lead → Desk It) — never here.
      </p>
      <div style={{ display: "grid", gridTemplateColumns: "70px 1fr", rowGap: 4, marginTop: 10 }}>
        <b>F1</b> <span>This help screen</span>
        <b>F2</b> <span>Start in the CRM (new customer / lead → Desk It)</span>
        <b>F3</b> <span>Open the buyer's Credit Application</span>
        <b>F4</b> <span>Open Vehicle Inventory</span>
        <b>F6 / F7</b> <span>Open the selected deal in Desking (carries the unit)</span>
        <b>F9</b> <span>Open the selected deal's closing screen (Cash Deal / Finance Deal)</span>
        <b>F10 / ESC</b> <span>Close</span>
        <b>Ctrl+S</b> <span>Save (anywhere)</span>
      </div>
    </div>
  </K2BModal>
);

Object.assign(window, { DealReview });

/* ═══ Deal recap — the per-deal screen ═══════════════════════
   The full picture of one deal: pipeline stage, buyer, vehicle,
   trade, figures, gross recap, and every next action. */

const dr$ = (n) => "$" + (+n || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });

const DealRecap = ({ deal: d, go, onBack, onDesk, onBackend }) => {
  const stage = drStage(d);
  const stageIdx = (window.DMS && window.DMS.dealStageIndex) ? window.DMS.dealStageIndex(d) : Math.max(0, drStages().indexOf(stage));
  const cust = (window.DMS && d.custNum) ? ((window.DMS.findCustomer ? window.DMS.findCustomer(d.custNum) : window.DMS.customers()[d.custNum]) || null) : null;   // RC30 (cn): an old number still finds the account
  const unit = window.DMS ? (window.DMS.inventory() || []).find(u => u.stock === d.stock) : null;
  const unitCheck = (window.DMS && window.DMS.unitOpenItems && d.stock)
    ? window.DMS.unitOpenItems(d.stock, { exceptDeal: d.id }) : { clean: true, items: [] };
  // RC28 (fx, the reviewer's gate 2b): the gross recap is the desk's / the posting's (DMSCore.dealGross = DealCalc.profitPlan): the pack and the
  // deal's cost lines (Profit panel) come off exactly as they do there — before RC28 this screen showed price − cost and the F&I gross only
  const g = window.DMS && window.DMS.dealGross ? window.DMS.dealGross(d) : null;
  const front = g ? g.frontGrossCents / 100 : (+d.salePrice || 0) - (+d.cost || 0) - ((+d.tradeAllow || 0) - (+d.tradeACV || +d.tradeAllow || 0));
  const fi = g ? g.fiGrossCents / 100 : (+d.fiGross || 0);
  const isCash = stage === "Cash" || (d.postedToGL && /cash/i.test(String(d.dealType || "")));

  const toClosing = (which) => {
    try { localStorage.setItem("jb_fw_deal", d.id); } catch (e) {}
    go && go(which === "cash" ? "cashworksheet" : "finance");
  };
  // ONE PATH: post + fund only through the shared helpers (one gate, one confirm).
  const post = () => { if (window.jbPostDeal) window.jbPostDeal(d.id); else window.k2bToast && window.k2bToast("Ledger offline.", "warn"); };
  const fund = () => { if (window.jbFundDeal) window.jbFundDeal(d.id); else window.k2bToast && window.k2bToast("Ledger offline.", "warn"); };

  const card = { background: "var(--jb-surface)", border: "1px solid var(--jb-border)",
                 borderRadius: "var(--jb-r-lg)", padding: "14px 16px" };
  const cardHead = { fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em",
                     color: "var(--jb-text-dim)", fontWeight: 700, marginBottom: 8 };
  const fig = (label, val, strong) => (
    <div style={{ display: "flex", justifyContent: "space-between", padding: "2px 0",
                  fontWeight: strong ? 700 : 400,
                  borderTop: strong ? "1px solid var(--jb-border)" : "none",
                  marginTop: strong ? 4 : 0, paddingTop: strong ? 6 : 2 }}>
      <span style={{ color: "var(--jb-text-dim)" }}>{label}</span>
      <span style={{ fontFamily: "var(--jb-mono)", color: strong ? "var(--jb-navy)" : "var(--jb-text)" }}>{val}</span>
    </div>
  );

  // Stage strip: Desked · (Cash / F&I) · Posted · Funded. Cash and F&I are
  // alternatives — whichever leg the deal took is lit, the other greyed.
  const stripNode = (s, i, lit, done, ghost) => (
    <div key={s} style={{ display: "flex", alignItems: "center", gap: 6, whiteSpace: "nowrap", opacity: ghost ? 0.35 : 1 }}>
      <span style={{
        width: 22, height: 22, borderRadius: "50%", fontSize: 11, fontWeight: 700,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        background: done ? "var(--jb-green)" : lit ? "var(--jb-navy)" : "var(--jb-surface-2)",
        color: (done || lit) ? "#FFF" : "var(--jb-text-dim)",
        border: lit ? "2px solid var(--jb-yellow)" : "1px solid var(--jb-border)",
      }}>{done ? "✓" : i}</span>
      <span style={{ fontSize: 12, fontWeight: lit ? 700 : 400, color: lit ? "var(--jb-navy)" : "var(--jb-text-dim)" }}>{s}</span>
    </div>
  );
  const line = (on) => <div style={{ flex: 1, height: 2, background: on ? "var(--jb-green)" : "var(--jb-border)", margin: "0 8px" }}></div>;
  const legTaken = stageIdx >= 3 ? (isCash ? "Cash" : "F&I") : (stage === "Cash" || stage === "F&I" ? stage : null);

  return (
    <div style={{ padding: 20, height: "100%", boxSizing: "border-box", display: "flex", flexDirection: "column", gap: 14, overflow: "auto" }}>
      {/* Header */}
      <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
        <K2BButton onClick={onBack}>‹ Pipeline</K2BButton>
        <div>
          <div style={{ fontSize: 22, fontWeight: 700, color: "var(--jb-navy)", display: "flex", alignItems: "center", gap: 10 }}>
            {d.id} — {d.buyer} <DrStageBadge d={d} />
          </div>
          <div style={{ fontSize: 12, color: "var(--jb-text-dim)" }}>
            {d.vehicle || "no vehicle yet"}{d.stock ? ` · Stk ${d.stock}` : ""}{d.created ? ` · created ${new Date(d.created).toLocaleDateString()}` : ""}
            {d.salesperson ? ` · ${d.salesperson}` : ""}{d.dealType ? ` · ${d.dealType}` : ""}
          </div>
        </div>
        <div style={{ flex: 1 }} />
        {/* Stage-driven next actions */}
        {!d.postedToGL && <K2BButton onClick={onDesk}>▭ Desk ▸</K2BButton>}
        {stage === "Cash" && <K2BButton onClick={() => toClosing("cash")} style={{ fontWeight: 700, color: "var(--jb-green)" }}>Cash Deal ▸</K2BButton>}
        {stage === "F&I" && <K2BButton onClick={() => toClosing("finance")} style={{ fontWeight: 700, color: "var(--jb-blue)" }}>Finance Deal ▸</K2BButton>}
        <K2BButton onClick={onBackend} title="Internal cost sheet — products, options, reserve (dealer cost visible)"
                   style={{ borderColor: "var(--k2b-maroon)", color: "var(--k2b-maroon)", fontWeight: 700 }}>
          🔒 Backend ▸
        </K2BButton>
        {/* Posted deals: post-sale adjustments (charges, fees, products, payoff, terms)
            post one adjusting entry. Unposted deals are still live on the
            Cash Deal / Finance Deal screen (buttons above). */}
        {d.postedToGL && window.DealAdjustButton && <window.DealAdjustButton deal={d} go={go} />}
        {window.DealCorrectButtons && <window.DealCorrectButtons deal={d} />}
        <K2BButton onClick={() => go && go("creditapp")}>✍ Credit App</K2BButton>
        <K2BButton onClick={() => go && go("buyersorder")}>📋 Buyer's Order</K2BButton>
        {!d.postedToGL && (
          <K2BButton style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={post}
                     title="One shared gate — checks the deal, confirms, posts to accounting">
            Post to Accounting
          </K2BButton>
        )}
        {stage === "Posted" && (
          <K2BButton style={{ background: "var(--jb-green-tint)", fontWeight: 700, color: "var(--jb-green)" }} onClick={fund}>
            ✓ Mark Funded
          </K2BButton>
        )}
        {stage === "Funded" && (
          <span style={{ background: "var(--jb-green)", color: "#FFF", fontWeight: 800, padding: "6px 14px", borderRadius: 6, letterSpacing: 0.5 }}>DONE ✓</span>
        )}
      </div>

      {/* Pipeline strip */}
      <div style={{ ...card, display: "flex", alignItems: "center", gap: 0, padding: "12px 16px" }}>
        {stripNode("Desked", 1, stageIdx === 0, stageIdx > 0, false)}
        {line(stageIdx >= 1)}
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          {stripNode("Cash", 2, stage === "Cash", stageIdx >= 3 && legTaken === "Cash", legTaken != null && legTaken !== "Cash")}
          <span style={{ color: "var(--jb-text-muted)", fontWeight: 700 }}>/</span>
          {stripNode("F&I", 2, stage === "F&I", stageIdx >= 3 && legTaken === "F&I", legTaken != null && legTaken !== "F&I")}
        </div>
        {line(stageIdx >= 3)}
        {stripNode("Posted", 3, stage === "Posted", stageIdx > 3, false)}
        {line(stageIdx >= 4)}
        {stripNode("Funded", 4, stage === "Funded", false, false)}
      </div>

      {/* Issues / pending notes */}
      {!unitCheck.clean && (
        <div style={{ background: "#FBEAEA", border: "1px solid var(--k2b-maroon)",
                      borderRadius: "var(--jb-r-sm)", padding: "8px 12px", fontSize: 13, color: "var(--k2b-maroon)" }}>
          <b>⚠ Unit not clean — Stk {d.stock}:</b>{" "}
          {unitCheck.items.map(x => x.label).join(" · ")}
          <span style={{ marginLeft: 8 }}>
            <K2BButton small onClick={() => go && go("servicedept")}>Service ▸</K2BButton>
          </span>
        </div>
      )}
      {(d.fundingIssue || d.pending) && (
        <div style={{ background: "var(--jb-amber-tint)", border: "1px solid var(--jb-amber)",
                      borderRadius: "var(--jb-r-sm)", padding: "8px 12px", fontSize: 13, color: "var(--jb-text)" }}>
          ⚠ {d.fundingIssue || d.pending}
        </div>
      )}

      {/* RC23 (corr): the deal's correction history (unwinds, cancelled products, refunds, funding reversals) */}
      {window.DealCorrectionHistory && <window.DealCorrectionHistory deal={d} />}

      {/* Body grid */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1.2fr", gap: 14, alignItems: "start" }}>
        {/* Buyer */}
        <div style={card}>
          <div style={cardHead}>Buyer</div>
          <div style={{ fontSize: 15, fontWeight: 700, color: "var(--jb-navy)", marginBottom: 4 }}>{d.buyer}</div>
          {cust ? (
            <div style={{ fontSize: 12, color: "var(--jb-text-dim)", lineHeight: 1.6 }}>
              {cust.phone || cust.cell || "no phone"} · Customer # {cust.custNum}<br />
              {[cust.street, [cust.city, cust.state, cust.postal || cust.zip].filter(Boolean).join(" ")].filter(Boolean).join(" · ") || ""}
              {cust.dlNumber ? <><br />DL {cust.dlNumber}</> : null}
            </div>
          ) : (
            <div style={{ fontSize: 12, color: "#9A6700", background: "var(--jb-amber-tint)", border: "1px solid var(--jb-amber)", borderRadius: 4, padding: "6px 8px" }}>
              Not linked to a customer file — this deal was not started from the CRM.{d.custNum ? ` (Customer # ${d.custNum})` : ""}
            </div>
          )}
          <div style={{ marginTop: 10, display: "flex", gap: 6 }}>
            <K2BButton small onClick={() => go && go("customers")}>Customer File ▸</K2BButton>
            <K2BButton small onClick={() => go && go("crm")}>CRM ▸</K2BButton>
          </div>
        </div>

        {/* Vehicle + trade */}
        <div style={card}>
          <div style={cardHead}>Vehicle</div>
          <div style={{ fontSize: 14, fontWeight: 700, color: "var(--jb-navy)" }}>{d.vehicle || "—"}</div>
          <div style={{ fontSize: 12, color: "var(--jb-text-dim)", marginBottom: 6 }}>
            {d.stock ? `Stock ${d.stock}` : "no stock # yet"}{d.type ? ` · ${d.type}` : ""}
            {unit ? ` · ${unit.status}` : d.stock ? " · not in inventory" : ""}
          </div>
          {unit && (
            <div style={{ fontSize: 12, color: "var(--jb-text-dim)" }}>
              Cost {dr$(unit.cost)} · Asking {dr$(unit.asking || unit.list || 0)}
            </div>
          )}
          {(+d.tradeAllow || 0) > 0 && (
            <>
              <div style={{ ...cardHead, marginTop: 12 }}>Trade</div>
              {fig("Allowance", dr$(d.tradeAllow))}
              {fig("Payoff", dr$(d.tradePayoff))}
              {fig("Net equity", dr$((+d.tradeAllow || 0) - (+d.tradePayoff || 0)), true)}
            </>
          )}
          <div style={{ marginTop: 10 }}>
            <K2BButton small onClick={() => go && go("inventory")}>Inventory ▸</K2BButton>
          </div>
        </div>

        {/* Figures */}
        <div style={card}>
          <div style={cardHead}>Deal Figures{isCash ? " — Cash" : d.dealType ? ` — ${d.dealType}` : ""}</div>
          <div style={{ fontSize: 13 }}>
            {fig("Sale price", dr$(d.salePrice))}
            {/* K2B-003 (RC18): a cash deal shows owed / received (recorded payments only) / balance — cashDown is never "owed" */}
            {isCash && window.DMS && window.DMS.cashDealFigures ? (() => { const cf = window.DMS.cashDealFigures(d); return (<>
              {fig("Total due", dr$(cf.totalDue))}
              {fig("Received", cf.legacy ? "not recorded (saved before RC18)" : dr$(cf.received))}
              {fig("Balance due", dr$(cf.balanceDue), true)}</>); })()
              : fig(isCash ? "Cash due at delivery" : "Cash down", dr$(d.cashDown))}
            {(+d.rebate || 0) > 0 && fig("Rebate", dr$(d.rebate))}
            {fig("Sales tax", dr$(d.tax))}
            {fig("Doc fee", dr$(d.docFee))}
            {(+d.titleFee || 0) > 0 && fig("Title fee", dr$(d.titleFee))}
            {(+d.vscSale || 0) > 0 && fig("Service contract", dr$(d.vscSale))}
            {(+d.gapSale || 0) > 0 && fig("GAP", dr$(d.gapSale))}
            {(+d.tradePayoff || 0) > 0 && !((+d.tradeAllow || 0) > 0) && fig("Trade payoff", dr$(d.tradePayoff))}
            {Array.isArray(d.charges) && d.charges.map((c, i) => <React.Fragment key={"chg" + i}>{fig("+ " + (c.desc || "Charge"), dr$(c.amount))}</React.Fragment>)}
            {!isCash && fig("Amount financed", dr$(d.amtFinanced), true)}
            {!isCash && d.lender ? fig("Lender", d.lender) : null}
            {!isCash && ((+d.apr || 0) > 0 || +d.term > 0) && fig("APR / Term", `${(+d.apr || 0).toFixed(2)}% / ${d.term || "—"} mo`)}
            {!isCash && (+d.payment || 0) > 0 && fig("Payment", dr$(d.payment) + " /mo")}
            {isCash && fig("Lender", "None — cash deal", true)}
          </div>
          <div style={{ ...cardHead, marginTop: 12 }}>Gross Recap</div>
          <div style={{ fontSize: 13 }}>
            <span data-dr="front" data-cents={g ? g.frontGrossCents : ""}>{fig("Front gross", dr$(front))}</span>
            {g && g.packCents ? fig("− Pack", dr$(g.packCents / 100)) : null}
            {g && g.frontAddsCents ? fig("− Front cost lines", dr$(g.frontAddsCents / 100)) : null}
            {g ? <span data-dr="netfront" data-cents={g.netFrontCents}>{fig("Net front", dr$(g.netFrontCents / 100))}</span> : null}
            {fig("F&I gross", dr$(fi))}
            {g && g.backAddsCents ? fig("− Back cost lines", dr$(g.backAddsCents / 100)) : null}
            <span data-dr="total" data-cents={g ? g.totalGrossCents : ""}>{fig("Total gross", dr$(g ? g.totalGrossCents / 100 : front + fi), true)}</span>
          </div>
          {Array.isArray(d.products) && d.products.length > 0 && (
            <div style={{ fontSize: 11, color: "var(--jb-text-dim)", marginTop: 6 }}>
              {d.products.length} backend product{d.products.length !== 1 ? "s" : ""} on deal — see 🔒 Backend.
            </div>
          )}
        </div>
      </div>

      {Array.isArray(d.adjustments) && d.adjustments.length > 0 && window.DealAdjustHistory && <window.DealAdjustHistory deal={d} />}

      {/* Status footer */}
      <div style={{ fontSize: 12, color: "var(--jb-text-dim)" }}>
        Stage: <b style={{ color: "var(--jb-navy)" }}>{stage}</b>
        {d.status ? ` · ${d.status}` : ""}
        {d.postedToGL ? " · posted to accounting" : " · not posted"}
        {d.postedToGL && !/^funded/i.test(String(d.status || "")) && d.fundingStatus ? ` · ${d.fundingStatus}${d.sentForFundingAt ? " " + new Date(d.sentForFundingAt).toLocaleDateString() : ""}` : ""}
        {d.delivered ? ` · delivered ${new Date(d.delivered).toLocaleDateString()}` : ""}
        {d.fundedDate ? ` · funded ${new Date(d.fundedDate).toLocaleDateString()}` : ""}
      </div>
    </div>
  );
};

Object.assign(window, { DealRecap });