/* 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 — Recon Tracker. Two views:
//   • Recon Budgets — every used unit's approved recon budget vs estimated / actual / projected recon work, status,
//     pending budget requests and over-budget alerts; unit detail with ROs, requests, alerts and the change history.
//   • Make-Ready Line — kanban Intake → … → Ready Line (DMS.setReconStage).
// Also exports components the RO screen and app shell use:
//   <window.ReconBudgetPanel ro={ro} />  — budget / projected / warning / request-increase box on a recon (internal) RO
//   <window.ReconAlertsPanel go={go} />  — the owner's in-app over-budget alert list (badge count: window.jbReconAlertCount())
// All math + records live in ReconCore.jsx.txt (DMS.recon*). A warning never changes the approved budget; only a manager
// approval (or a manager's explicit Set budget with reason) does.

const rcMoney = (n) => "$" + (Number(n) || 0).toLocaleString("en-US", { maximumFractionDigits: 0 });
const rcDays = (iso) => iso ? Math.floor((Date.now() - new Date(iso)) / 86400000) : 0;
const rcbMoney = (n) => (n == null ? "—" : (n < 0 ? "−$" : "$") + Math.abs(+n || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
const rcbWhen = (iso) => { if (!iso) return ""; const d = new Date(iso); return isNaN(d) ? String(iso) : d.toLocaleDateString("en-US", { month: "2-digit", day: "2-digit", year: "2-digit" }) + " " + d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" }); };
const rcbToast = (r) => { if (r && r.msg && window.k2bToast) window.k2bToast(r.msg, r.ok ? "ok" : "warn", r.ok ? 3600 : 5200); return r; };
const RCB_STATUS = {
  none:        { label: "No budget",   bg: "var(--jb-surface-2, #EEF1F5)", fg: "var(--jb-text-dim, #555)", bar: "#9AA5B4" },
  ok:          { label: "OK",          bg: "var(--jb-green-tint, #E6F7EC)", fg: "#15803D",                 bar: "var(--jb-green, #16A34A)" },
  approaching: { label: "Approaching", bg: "var(--jb-amber-tint, #FFF4DB)", fg: "var(--jb-amber, #9A6700)", bar: "var(--jb-amber, #D99A06)" },
  over:        { label: "OVER",        bg: "var(--jb-red-tint, #FDECEC)",   fg: "var(--jb-red, #B42318)",   bar: "var(--jb-red, #D92D20)" },
};
const RCB_KIND = { "warn": "Approaching", "over-projected": "Over — projected", "over-actual": "Over — actual" };
const RCB_HIST = { "set": "Budget set", "increase-request": "Increase requested", "approved": "Increase approved", "denied": "Increase denied", "alert": "Alert", "ack": "Alert acknowledged" };

const rcbUseLive = () => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => (window.DMS && window.DMS.subscribe) ? window.DMS.subscribe(force) : undefined, []);
};

const RcbChip = ({ status, text }) => {
  const c = RCB_STATUS[status] || RCB_STATUS.none;
  return <span style={{ display: "inline-block", padding: "2px 9px", borderRadius: 999, background: c.bg, color: c.fg, fontSize: 11, fontWeight: 700, whiteSpace: "nowrap" }}>{text || c.label}</span>;
};

// Budget bar: actual (solid) + open estimates (striped), a tick at the warning %, 100% = approved budget.
const RcbBar = ({ sum, height }) => {
  if (!sum || !sum.hasBudget) return <div style={{ height: height || 10, borderRadius: 999, background: "var(--jb-surface-2, #EEF1F5)" }} />;
  const scale = Math.max(sum.budget, sum.projected) || 1;
  const w = (v) => Math.max(0, Math.min(100, v / scale * 100)) + "%";
  const c = (RCB_STATUS[sum.status] || RCB_STATUS.ok).bar;
  return (
    <div style={{ position: "relative", height: height || 10, borderRadius: 999, background: "var(--jb-surface-2, #EEF1F5)", overflow: "hidden" }} title={`Actual ${rcbMoney(sum.actual)} + open ${rcbMoney(sum.estimated)} = ${rcbMoney(sum.projected)} of ${rcbMoney(sum.budget)}`}>
      <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: w(sum.actual), background: c }} />
      <div style={{ position: "absolute", left: w(sum.actual), top: 0, bottom: 0, width: w(sum.estimated), background: c, opacity: 0.45 }} />
      <div style={{ position: "absolute", left: w(sum.budget * sum.warnPct / 100), top: 0, bottom: 0, width: 2, background: "var(--jb-amber, #D99A06)" }} />
      {sum.projected > sum.budget && <div style={{ position: "absolute", left: w(sum.budget), top: 0, bottom: 0, width: 2, background: "#111" }} />}
    </div>
  );
};

const rcbLbl = { fontSize: 10.5, fontWeight: 700, color: "var(--jb-text-muted, #6B7280)", textTransform: "uppercase", letterSpacing: ".04em" };
const rcbNum = { fontFamily: "var(--jb-mono)", fontSize: 13, fontWeight: 700, color: "var(--jb-text, #111)" };
const rcbInput = { width: "100%", boxSizing: "border-box", padding: "6px 8px", border: "1px solid var(--jb-border-strong, #B8C0CC)", borderRadius: "var(--jb-r-sm, 4px)", fontSize: 13, fontFamily: "var(--jb-font)" };

// Request an increase (anyone in service) — or, for a manager, set the budget directly. Neither is triggered by a warning.
const RcbBudgetModal = ({ sum, mode, roId, onClose }) => {
  const D = window.DMS;
  const suggested = mode === "set" ? (sum.budget || "") : (sum.hasBudget ? Math.ceil(Math.max(sum.projected, sum.budget) / 50) * 50 + (sum.projected >= sum.budget ? 50 : 0) : Math.ceil((sum.projected || 0) / 50) * 50 || "");
  const [amt, setAmt] = React.useState(String(suggested || ""));
  const [reason, setReason] = React.useState("");
  const [err, setErr] = React.useState("");
  const submit = () => {
    const r = mode === "set" ? D.reconSetBudget(sum.stock, +amt, reason) : D.reconRequestIncrease(sum.stock, { amount: +amt, reason, roId: roId || "" });
    if (!r.ok) { setErr(r.msg); return; }
    rcbToast(r); onClose();
  };
  return (
    <K2BModal title={(mode === "set" ? "Set recon budget — " : "Request recon budget increase — ") + sum.stock} width={460} onClose={onClose}
      buttons={<><K2BButton small primary onClick={submit}>{mode === "set" ? "Save budget" : "Send request"}</K2BButton><K2BButton small onClick={onClose}>Cancel</K2BButton></>}>
      <div style={{ display: "grid", gap: 10, fontSize: 12.5 }}>
        <div style={{ color: "var(--jb-text-dim)" }}>{sum.vehicle} · VIN {sum.vin || "—"}</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8 }}>
          <div><div style={rcbLbl}>Approved</div><div style={rcbNum}>{sum.hasBudget ? rcbMoney(sum.budget) : "none"}</div></div>
          <div><div style={rcbLbl}>Projected</div><div style={rcbNum}>{rcbMoney(sum.projected)}</div></div>
          <div><div style={rcbLbl}>Actual</div><div style={rcbNum}>{rcbMoney(sum.actual)}</div></div>
        </div>
        <label><div style={rcbLbl}>{mode === "set" ? "Approved budget ($)" : "New budget total requested ($)"}</div>
          <input data-rcb="amount" type="number" min="0" step="50" value={amt} onChange={e => { setAmt(e.target.value); setErr(""); }} style={rcbInput} autoFocus /></label>
        <label><div style={rcbLbl}>Reason (required)</div>
          <textarea data-rcb="reason" rows={3} value={reason} onChange={e => { setReason(e.target.value); setErr(""); }} style={{ ...rcbInput, resize: "vertical" }}
            placeholder={mode === "set" ? "e.g. Appraisal recon allowance" : "e.g. Windshield cracked — found at inspection"} /></label>
        {mode !== "set" && <div style={{ fontSize: 11.5, color: "var(--jb-text-muted)" }}>The approved budget does <b>not</b> change until a manager approves this request. It is logged with your name.</div>}
        {err && <div style={{ color: "var(--jb-red)", fontWeight: 600 }}>{err}</div>}
      </div>
    </K2BModal>
  );
};

// Pending request row with Approve / Deny for managers (not their own request unless admin).
const RcbRequestRow = ({ q, stock }) => {
  const D = window.DMS;
  const [note, setNote] = React.useState("");
  const mine = q.requestedById && D.userId && q.requestedById === D.userId() && !(D.isAdmin && D.isAdmin());
  const can = D.reconCanApprove && D.reconCanApprove() && q.status === "pending" && !mine;
  return (
    <div data-rcb-req={q.id} style={{ display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center", padding: "6px 8px", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-sm)", background: q.status === "pending" ? "#FFFBEF" : "#fff", fontSize: 12 }}>
      <b style={{ fontFamily: "var(--jb-mono)" }}>{rcbMoney(q.from)} → {rcbMoney(q.amount)}</b>
      <span style={{ color: "var(--jb-text-dim)" }}>{q.requestedBy} · {rcbWhen(q.at)}{q.roId ? " · " + q.roId : ""}</span>
      <span style={{ flex: "1 1 200px" }}>“{q.reason}”</span>
      {q.status !== "pending" ? <RcbChip status={q.status === "approved" ? "ok" : "over"} text={q.status + (q.decidedBy ? " · " + q.decidedBy : "")} />
        : can ? (<>
          <input value={note} onChange={e => setNote(e.target.value)} placeholder="note (optional)" style={{ ...rcbInput, width: 150, padding: "3px 6px", fontSize: 12 }} />
          <button className="k2b-button small" data-rcb="approve" onClick={() => rcbToast(D.reconDecideRequest(stock, q.id, "approved", note))}>Approve</button>
          <button className="k2b-button small" data-rcb="deny" onClick={() => rcbToast(D.reconDecideRequest(stock, q.id, "denied", note))}>Deny</button>
        </>) : <span style={{ color: "var(--jb-amber)", fontWeight: 700 }}>Pending manager approval</span>}
    </div>
  );
};

// ── RO screen panel: <window.ReconBudgetPanel ro={ro} /> ──────────────────
const ReconBudgetPanel = ({ ro, roId, go, compact }) => {
  const D = window.DMS;
  rcbUseLive();
  const [modal, setModal] = React.useState(null);
  const id = (ro && ro.id) || roId;
  const sum = (D && D.reconBudgetForRO && id) ? (D.reconBudgetForRO(id) || (ro ? D.reconBudgetForRO(ro) : null)) : null;
  const prev = React.useRef(null);
  const statusKey = sum && sum.unit ? sum.stock + "|" + sum.budget + "|" + sum.status : "";
  // One toast to the user working this RO when work added ON THIS RO pushes the vehicle into approaching / over
  // (not on first render, not for other ROs' / other users' changes, no repeats).
  React.useEffect(() => {
    if (!sum || !sum.unit) return;
    const p = prev.current; prev.current = { key: statusKey, status: sum.status, stock: sum.stock, budget: sum.budget, roTotal: sum.ro.total };
    if (!p || p.stock !== sum.stock || p.budget !== sum.budget || p.status === sum.status || !(sum.ro.total > p.roTotal)) return;
    if (sum.status === "approaching" && p.status === "ok") window.k2bToast && window.k2bToast(`⚠ ${sum.stock} recon at ${sum.pct}% of its ${rcbMoney(sum.budget)} budget (warning at ${sum.warnPct}%).`, "warn", 6000);
    if (sum.status === "over" && p.status !== "over") window.k2bToast && window.k2bToast(`⛔ ${sum.stock} recon projected ${rcbMoney(sum.projected)} — ${rcbMoney(sum.overBy)} over budget. Managers alerted; request an increase.`, "warn", 7000);
  }, [statusKey]);
  if (!sum || !sum.isRecon) return null;
  const box = { border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", background: "#fff", padding: compact ? 8 : 10, fontFamily: "var(--jb-font)", fontSize: 12.5 };
  if (!sum.unit) return (
    <div data-recon-panel="unlinked" style={{ ...box, background: "var(--jb-surface-2)" }}>
      <b>Recon budget</b> — this internal RO isn’t linked to a vehicle in inventory. Set the stock # (internal stock) on the RO so its work counts against that vehicle’s recon budget.
    </div>
  );
  const st = RCB_STATUS[sum.status] || RCB_STATUS.none;
  const r = sum.ro;
  const canReq = D.reconCanRequest && D.reconCanRequest();
  const canApp = D.reconCanApprove && D.reconCanApprove();
  const openInTracker = () => { try { localStorage.setItem("jb_recon_focus", sum.stock); } catch (e) {} go && go("recontracker"); };
  const fig = (label, val, strong, color) => (
    <div style={{ minWidth: 0 }}><div style={rcbLbl}>{label}</div><div style={{ ...rcbNum, fontSize: strong ? 14.5 : 13, color: color || rcbNum.color }}>{val}</div></div>
  );
  return (
    <div data-recon-panel={sum.status} style={{ ...box, borderLeft: "4px solid " + st.bar }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", marginBottom: 8 }}>
        <b style={{ fontSize: 13 }}>Recon budget</b>
        <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 700, color: "var(--jb-navy)" }}>{sum.stock}</span>
        <span style={{ color: "var(--jb-text-dim)" }}>{sum.vehicle} · VIN {sum.vin || "—"}</span>
        <div style={{ flex: 1 }} />
        <RcbChip status={sum.status} text={sum.status === "approaching" ? `Approaching · ${sum.pct}%` : sum.status === "over" ? `OVER · ${rcbMoney(sum.overBy)}` : null} />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(104px, 1fr))", gap: 8, marginBottom: 8 }}>
        {fig("Approved budget", sum.hasBudget ? rcbMoney(sum.budget) : "not set", true)}
        {fig("Actual (closed ROs)", rcbMoney(sum.actual))}
        {fig("Open estimates", rcbMoney(sum.estimated))}
        {fig("Projected total", rcbMoney(sum.projected), true, sum.status === "over" ? "var(--jb-red)" : sum.status === "approaching" ? "var(--jb-amber)" : null)}
        {fig("Remaining", sum.hasBudget ? rcbMoney(sum.remaining) : "—", false, sum.remaining < 0 ? "var(--jb-red)" : null)}
      </div>
      <RcbBar sum={sum} />
      <div style={{ display: "flex", gap: 14, flexWrap: "wrap", fontSize: 11.5, color: "var(--jb-text-dim)", marginTop: 6 }}>
        <span>This RO {r.roId}: <b style={{ fontFamily: "var(--jb-mono)", color: "var(--jb-text)" }}>{rcbMoney(r.total)}</b></span>
        <span>Labor {rcbMoney(r.labor)}</span><span>Parts {rcbMoney(r.parts)}</span><span>Outside / sublet {rcbMoney(r.sublet)}</span>
        {sum.ros.length > 1 && <span>· {sum.ros.length} recon ROs on this vehicle</span>}
        {sum.hasBudget && <span>· warning at {sum.warnPct}%</span>}
      </div>
      {sum.status === "approaching" && (
        <div data-recon-warn="approaching" style={{ marginTop: 8, padding: "7px 10px", borderRadius: "var(--jb-r-sm)", background: st.bg, color: st.fg, fontWeight: 600 }}>
          ⚠ Projected {rcbMoney(sum.projected)} is {sum.pct}% of the {rcbMoney(sum.budget)} recon budget (warning at {sum.warnPct}%) — {rcbMoney(sum.remaining)} left. Get a manager’s approval before adding work that goes over.
        </div>
      )}
      {sum.status === "over" && (
        <div data-recon-warn="over" style={{ marginTop: 8, padding: "7px 10px", borderRadius: "var(--jb-r-sm)", background: st.bg, color: st.fg, fontWeight: 600 }}>
          ⛔ {sum.actualOver ? `Actual charges ${rcbMoney(sum.actual)}` : `Projected ${rcbMoney(sum.projected)}`} is {rcbMoney(sum.overBy)} over the approved {rcbMoney(sum.budget)} budget. Managers have been alerted. The budget does not change until an increase is approved.
        </div>
      )}
      {sum.status === "none" && (
        <div style={{ marginTop: 8, padding: "7px 10px", borderRadius: "var(--jb-r-sm)", background: st.bg, color: st.fg }}>
          No recon budget approved for this vehicle yet{canApp ? "." : " — request one so a manager can approve it."}
        </div>
      )}
      {sum.pending.length > 0 && <div style={{ display: "grid", gap: 6, marginTop: 8 }}>{sum.pending.map(q => <RcbRequestRow key={q.id} q={q} stock={sum.stock} />)}</div>}
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 8 }}>
        {canReq && <button className="k2b-button small" data-rcb="request" onClick={() => setModal("request")}>Request budget increase</button>}
        {canApp && <button className="k2b-button small" data-rcb="set" onClick={() => setModal("set")}>{sum.hasBudget ? "Change budget…" : "Set budget…"}</button>}
        {go && <button className="k2b-button small" onClick={openInTracker}>Recon Tracker ▸</button>}
      </div>
      {modal && <RcbBudgetModal sum={sum} mode={modal} roId={r.roId} onClose={() => setModal(null)} />}
    </div>
  );
};

// ── Owner / manager alert list: <window.ReconAlertsPanel go={go} /> ────────
const ReconAlertsPanel = ({ go, onOpenUnit, showAll }) => {
  const D = window.DMS;
  rcbUseLive();
  const [all, setAll] = React.useState(!!showAll);
  const [notes, setNotes] = React.useState({});
  if (!D || !D.reconAlerts) return null;
  const list = D.reconAlerts(all ? { overOnly: true } : { open: true });
  const canAck = D.reconCanApprove && D.reconCanApprove();
  const openUnit = (stock) => { if (onOpenUnit) return onOpenUnit(stock); try { localStorage.setItem("jb_recon_focus", stock); } catch (e) {} go && go("recontracker"); };
  return (
    <div data-recon-alerts={list.length} style={{ fontFamily: "var(--jb-font)", fontSize: 12.5 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
        <b style={{ fontSize: 13 }}>Recon alerts</b>
        <span style={{ color: "var(--jb-text-dim)" }}>{all ? `${list.length} over-budget alert${list.length === 1 ? "" : "s"} (all)` : `${list.length} open`}</span>
        <div style={{ flex: 1 }} />
        <label style={{ fontSize: 12, display: "flex", gap: 4, alignItems: "center" }}><input type="checkbox" checked={all} onChange={e => setAll(e.target.checked)} /> show acknowledged</label>
      </div>
      {list.length === 0 && <div style={{ padding: 18, textAlign: "center", color: "var(--jb-text-muted)", border: "1px dashed var(--jb-border)", borderRadius: "var(--jb-r)" }}>No {all ? "" : "open "}over-budget recon alerts.</div>}
      <div style={{ display: "grid", gap: 8 }}>
        {list.map(a => (
          <div key={a.id} data-rcb-alert={a.kind} style={{ border: "1px solid var(--jb-border)", borderLeft: "4px solid " + (a.ack ? "#9AA5B4" : "var(--jb-red)"), borderRadius: "var(--jb-r-sm)", background: "#fff", padding: "8px 10px" }}>
            <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
              <RcbChip status={a.ack ? "none" : "over"} text={(RCB_KIND[a.kind] || a.kind) + (a.ack ? " · ack" : "")} />
              <button className="k2b-button small" style={{ fontFamily: "var(--jb-mono)", fontWeight: 700 }} onClick={() => openUnit(a.stock)} title="Open this vehicle's recon budget">{a.stock}</button>
              <span>{a.vehicle}</span>
              <span style={{ color: "var(--jb-text-dim)", fontFamily: "var(--jb-mono)", fontSize: 11.5 }}>VIN {a.vin || "—"}</span>
              <span>RO <b style={{ fontFamily: "var(--jb-mono)" }}>{a.roId}</b></span>
              <div style={{ flex: 1 }} />
              <b style={{ color: "var(--jb-red)", fontFamily: "var(--jb-mono)" }}>{rcbMoney(a.over)} over</b>
            </div>
            <div style={{ fontSize: 12, color: "var(--jb-text-dim)", marginTop: 4 }}>
              {a.kind === "over-actual" ? "Actual" : "Projected"} {rcbMoney(a.kind === "over-actual" ? a.actual : a.projected)} vs approved {rcbMoney(a.budget)} · {rcbWhen(a.at)} · flagged by {a.by}
            </div>
            <div style={{ fontSize: 12, marginTop: 4 }}><b>Reason:</b> {a.reason}</div>
            {a.ack ? <div style={{ fontSize: 11.5, color: "var(--jb-text-muted)", marginTop: 4 }}>Acknowledged by {a.ackBy} · {rcbWhen(a.ackAt)}{a.ackNote ? " — " + a.ackNote : ""}</div>
              : canAck && (
                <div style={{ display: "flex", gap: 6, marginTop: 6 }}>
                  <input value={notes[a.id] || ""} onChange={e => setNotes({ ...notes, [a.id]: e.target.value })} placeholder="note (optional)" style={{ ...rcbInput, width: 220, padding: "3px 6px", fontSize: 12 }} />
                  <button className="k2b-button small" data-rcb="ack" onClick={() => rcbToast(D.reconAckAlert(a.stock, a.id, notes[a.id] || ""))}>Acknowledge</button>
                </div>
              )}
          </div>
        ))}
      </div>
    </div>
  );
};

// ── Unit detail (modal) ─────────────────────────────────────────────────
const RcbUnitDetail = ({ stock, onClose, go }) => {
  const D = window.DMS;
  rcbUseLive();
  const [modal, setModal] = React.useState(null);
  const [openRO, setOpenRO] = React.useState(null);
  const sum = D.reconBudget(stock);
  if (!sum) return null;
  const canApp = D.reconCanApprove(), canReq = D.reconCanRequest();
  const th = { textAlign: "left", padding: "5px 8px", fontSize: 10.5, color: "var(--jb-text-muted)", textTransform: "uppercase", borderBottom: "1px solid var(--jb-border)", whiteSpace: "nowrap" };
  const td = { padding: "5px 8px", borderBottom: "1px solid var(--jb-border)", fontSize: 12.5, verticalAlign: "top" };
  const num = { ...td, textAlign: "right", fontFamily: "var(--jb-mono)", whiteSpace: "nowrap" };
  const H = ({ children }) => <div style={{ fontWeight: 700, fontSize: 13, margin: "14px 0 6px", color: "var(--jb-navy)" }}>{children}</div>;
  return (
    <K2BModal title={`Recon budget — ${sum.stock} · ${sum.vehicle}`} width={1000} onClose={onClose}
      buttons={<>
        {canReq && <K2BButton small onClick={() => setModal("request")}>Request increase</K2BButton>}
        {canApp && <K2BButton small primary onClick={() => setModal("set")}>{sum.hasBudget ? "Change budget…" : "Set budget…"}</K2BButton>}
        <K2BButton small onClick={onClose}>Close</K2BButton></>}>
      <div data-rcb-detail={sum.stock} style={{ fontSize: 12.5 }}>
        <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap", marginBottom: 8 }}>
          <span style={{ fontFamily: "var(--jb-mono)" }}>VIN {sum.vin || "—"}</span>
          <RcbChip status={sum.status} text={sum.status === "approaching" ? `Approaching · ${sum.pct}%` : sum.status === "over" ? `OVER · ${rcbMoney(sum.overBy)}` : null} />
          {sum.hasBudget && <span style={{ color: "var(--jb-text-dim)" }}>Approved by {sum.approvedBy || "—"} · {rcbWhen(sum.approvedAt)}</span>}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, minmax(0,1fr))", gap: 8, marginBottom: 8 }}>
          {[["Approved budget", sum.hasBudget ? rcbMoney(sum.budget) : "not set"], ["Estimated (open)", rcbMoney(sum.estimated)], ["Actual (closed)", rcbMoney(sum.actual)],
            ["Projected", rcbMoney(sum.projected)], ["Remaining", sum.hasBudget ? rcbMoney(sum.remaining) : "—"], ["Used", sum.hasBudget ? sum.pct + "%" : "—"]].map(([l, v]) => (
            <div key={l} style={{ background: "var(--jb-surface, #F7F8FA)", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-sm)", padding: "6px 8px" }}><div style={rcbLbl}>{l}</div><div style={rcbNum}>{v}</div></div>
          ))}
        </div>
        <RcbBar sum={sum} height={12} />
        <div style={{ fontSize: 11.5, color: "var(--jb-text-muted)", marginTop: 4 }}>Solid = actual charges on closed ROs · light = open estimates · amber tick = warning at {sum.warnPct}% · totals recompute from current RO lines (no double counting on edits).</div>

        <H>Recon ROs ({sum.ros.length})</H>
        {sum.ros.length === 0 ? <div style={{ color: "var(--jb-text-muted)" }}>No recon / internal ROs for this stock # or VIN yet.</div> : (
          <table style={{ width: "100%", borderCollapse: "collapse" }}>
            <thead><tr><th style={th}>RO</th><th style={th}>Status</th><th style={th}>Opened</th><th style={{ ...th, textAlign: "right" }}>Labor</th><th style={{ ...th, textAlign: "right" }}>Parts</th><th style={{ ...th, textAlign: "right" }}>Outside</th><th style={{ ...th, textAlign: "right" }}>Total</th><th style={th}>Counts as</th></tr></thead>
            <tbody>{sum.ros.map(r => (
              <React.Fragment key={r.id}>
                <tr style={{ cursor: "pointer" }} onClick={() => setOpenRO(openRO === r.id ? null : r.id)}>
                  <td style={{ ...td, fontFamily: "var(--jb-mono)", fontWeight: 700 }}>{openRO === r.id ? "▾ " : "▸ "}{r.id}{r.body ? " (body)" : ""}</td>
                  <td style={td}>{r.status}</td><td style={td}>{rcbWhen(r.opened)}</td>
                  <td style={num}>{rcbMoney(r.labor)}</td><td style={num}>{rcbMoney(r.parts)}</td><td style={num}>{rcbMoney(r.sublet)}</td><td style={{ ...num, fontWeight: 700 }}>{rcbMoney(r.total)}</td>
                  <td style={td}>{r.closed ? "Actual" : "Estimate"}</td>
                </tr>
                {openRO === r.id && r.lines.map(l => (
                  <tr key={l.key} style={{ background: "var(--jb-surface, #FAFBFC)", color: l.declined ? "var(--jb-text-muted)" : undefined, textDecoration: l.declined ? "line-through" : undefined }}>
                    <td style={td} /><td style={td}>{l.kind}</td><td style={td} colSpan={4}>{l.desc}{l.qty && l.kind === "parts" ? ` × ${l.qty}` : ""}{l.declined ? " (declined — not counted)" : ""}</td><td style={num}>{rcbMoney(l.amount)}</td><td style={td} />
                  </tr>
                ))}
              </React.Fragment>
            ))}</tbody>
          </table>
        )}

        <H>Budget requests ({sum.requests.length})</H>
        {sum.requests.length === 0 ? <div style={{ color: "var(--jb-text-muted)" }}>No budget requests.</div>
          : <div style={{ display: "grid", gap: 6 }}>{sum.requests.map(q => <RcbRequestRow key={q.id} q={q} stock={sum.stock} />)}</div>}

        <H>Alerts ({sum.alerts.length})</H>
        {sum.alerts.length === 0 ? <div style={{ color: "var(--jb-text-muted)" }}>No alerts.</div> : (
          <table style={{ width: "100%", borderCollapse: "collapse" }}>
            <thead><tr><th style={th}>When</th><th style={th}>Kind</th><th style={th}>RO</th><th style={{ ...th, textAlign: "right" }}>Budget</th><th style={{ ...th, textAlign: "right" }}>Projected</th><th style={{ ...th, textAlign: "right" }}>Actual</th><th style={{ ...th, textAlign: "right" }}>Over</th><th style={th}>Reason</th><th style={th}>Ack</th></tr></thead>
            <tbody>{sum.alerts.map(a => (
              <tr key={a.id}>
                <td style={td}>{rcbWhen(a.at)}</td><td style={td}><RcbChip status={a.kind === "warn" ? "approaching" : a.ack ? "none" : "over"} text={RCB_KIND[a.kind] || a.kind} /></td>
                <td style={{ ...td, fontFamily: "var(--jb-mono)" }}>{a.roId}</td><td style={num}>{rcbMoney(a.budget)}</td><td style={num}>{rcbMoney(a.projected)}</td><td style={num}>{rcbMoney(a.actual)}</td>
                <td style={{ ...num, color: a.over > 0 ? "var(--jb-red)" : undefined }}>{a.kind === "warn" ? a.pct + "%" : rcbMoney(a.over)}</td>
                <td style={{ ...td, maxWidth: 300 }}>{a.reason}</td>
                <td style={td}>{a.kind === "warn" ? "—" : a.ack ? `${a.ackBy}` : canApp ? <button className="k2b-button small" onClick={() => rcbToast(D.reconAckAlert(sum.stock, a.id, ""))}>Ack</button> : "open"}</td>
              </tr>
            ))}</tbody>
          </table>
        )}

        <H>History — who changed what</H>
        {sum.history.length === 0 ? <div style={{ color: "var(--jb-text-muted)" }}>No budget activity yet.</div> : (
          <table style={{ width: "100%", borderCollapse: "collapse" }}>
            <thead><tr><th style={th}>When</th><th style={th}>Who</th><th style={th}>Event</th><th style={{ ...th, textAlign: "right" }}>From</th><th style={{ ...th, textAlign: "right" }}>To</th><th style={th}>RO</th><th style={th}>Reason / detail</th></tr></thead>
            <tbody>{sum.history.map(h => (
              <tr key={h.id}>
                <td style={td}>{rcbWhen(h.at)}</td><td style={td}>{h.by}</td><td style={td}>{RCB_HIST[h.type] || h.type}</td>
                <td style={num}>{h.from == null ? "—" : rcbMoney(h.from)}</td><td style={num}>{h.to == null ? "—" : rcbMoney(h.to)}</td>
                <td style={{ ...td, fontFamily: "var(--jb-mono)" }}>{h.roId || ""}</td><td style={td}>{h.reason}</td>
              </tr>
            ))}</tbody>
          </table>
        )}
      </div>
      {modal && <RcbBudgetModal sum={sum} mode={modal} onClose={() => setModal(null)} />}
    </K2BModal>
  );
};

const rcbCsvCell = (v) => { const s = v == null ? "" : String(v); return /[",\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s; };

/* RC26 (inv): the office's one-time "Catch up serviced cars" — units whose internal ROs were closed before RC26 get their "Serviced" stamp and
   their card moved to Detail (never back), once per RO (GET / POST /api/recon/catch-up). From RC26 every RO / body-shop close does it by itself. */
const RcCatchUp = () => {
  const D = window.DMS;
  const [pv, setPv] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [msg, setMsg] = React.useState(null);
  const load = () => { if (D && D.reconCatchUpPreview) D.reconCatchUpPreview().then(setPv); };
  React.useEffect(() => { load(); }, []);
  if (!pv || pv.ok === false) return null;
  const run = async () => { setBusy(true); const r = await D.reconCatchUp(); setBusy(false); setMsg(r); window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn", 6000); load(); };
  const c = pv.counts || {};
  return (
    <div data-rc-catchup={c.toRegister || 0} style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap", marginBottom: 10, padding: "6px 10px", background: c.toRegister ? "#FFF7E0" : "#F4F8FC", border: "1px solid " + (c.toRegister ? "#E5C46B" : "#C9D6E3"), borderRadius: 6, fontSize: 12 }}>
      <span><b>Serviced cars:</b> {c.toRegister ? `${c.toRegister} closed internal RO${c.toRegister === 1 ? "" : "s"} from before this update are not on their cards yet.` : `every closed internal RO is on its card (${c.alreadyRegistered || 0} registered).`}</span>
      {pv.may && pv.may.run && c.toRegister > 0 && <button className="k2b-button small" data-rc-catchup-run="1" disabled={busy} onClick={run} style={{ fontWeight: 700, background: "var(--jb-yellow, #FFD24A)" }}>{busy ? "Working…" : "Catch up serviced cars"}</button>}
      {msg && <span data-rc-catchup-msg={msg.ok ? "ok" : "error"} style={{ color: msg.ok ? "#0E7A37" : "#B23A2E" }}>{msg.msg}</span>}
    </div>
  );
};

const ReconTracker = ({ onClose, go }) => {
  const D = window.DMS;
  rcbUseLive();
  const act = (r) => { window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn", 3000); return r; };
  const [tab, setTab] = React.useState("budgets");
  const [filter, setFilter] = React.useState("all");
  const [q, setQ] = React.useState("");
  const [detail, setDetail] = React.useState(null);
  const [warnDraft, setWarnDraft] = React.useState(null);
  React.useEffect(() => {
    let f = null; try { f = localStorage.getItem("jb_recon_focus"); if (f) localStorage.removeItem("jb_recon_focus"); } catch (e) {}
    if (f) setDetail(f);
  }, []);
  const STAGES = (D && D.RECON_STAGES) || [];
  // Used units not yet sold; default stage Intake.
  const units = (D && D.inventory) ? D.inventory().filter(u => !/new/i.test(u.type || "") && window.DealCalc.unitOnLot(u)) : [];
  const stageOf = (u) => u.reconStage || "Intake";
  const byStage = {};
  STAGES.forEach(s => { byStage[s] = units.filter(u => stageOf(u) === s); });
  const inRecon = units.filter(u => stageOf(u) !== "Ready Line").length;
  const onLine = units.filter(u => stageOf(u) === "Ready Line").length;
  const nextStage = (s) => { const i = STAGES.indexOf(s); return i >= 0 && i < STAGES.length - 1 ? STAGES[i + 1] : null; };

  const sums = (D && D.reconUnits) ? D.reconUnits() : [];
  const counts = { all: sums.length, none: 0, ok: 0, approaching: 0, over: 0, pending: 0 };
  sums.forEach(s => { counts[s.status]++; if (s.pending.length) counts.pending++; });
  const needle = q.trim().toUpperCase();
  const rows = sums.filter(s => (filter === "all" || (filter === "pending" ? s.pending.length > 0 : s.status === filter)) &&
    (!needle || (s.stock + " " + s.vin + " " + s.vehicle).toUpperCase().includes(needle)))
    .sort((a, b) => ({ over: 0, approaching: 1, ok: 2, none: 3 }[a.status] - { over: 0, approaching: 1, ok: 2, none: 3 }[b.status]) || String(a.stock).localeCompare(String(b.stock)));
  const openAlerts = D && D.reconAlerts ? D.reconAlerts({ open: true }).length : 0;
  const pendingAll = sums.reduce((n, s) => n + s.pending.length, 0);
  const canApp = D && D.reconCanApprove && D.reconCanApprove();
  const warnPct = D && D.reconWarnPct ? D.reconWarnPct() : 85;

  const cols = ["Stock", "VIN", "Year", "Make", "Model", "Approved budget", "Estimated (open)", "Actual (closed)", "Projected", "Remaining", "% used", "Status", "Pending requests", "Open alerts"];
  const rowVals = (s) => { const u = D._unit(s.stock) || {}; return [s.stock, s.vin, u.yr || "", u.mk || "", u.mdl || "", s.hasBudget ? s.budget.toFixed(2) : "", s.estimated.toFixed(2), s.actual.toFixed(2), s.projected.toFixed(2), s.hasBudget ? s.remaining.toFixed(2) : "", s.hasBudget ? s.pct : "", RCB_STATUS[s.status].label, s.pending.length, s.openAlerts.length]; };
  const exportCsv = () => {
    const lines = [cols.map(rcbCsvCell).join(","), ...rows.map(s => rowVals(s).map(rcbCsvCell).join(","))];
    try {
      const url = URL.createObjectURL(new Blob([lines.join("\r\n")], { type: "text/csv" }));
      const a = document.createElement("a"); a.href = url; a.download = "recon-budgets-" + new Date().toISOString().slice(0, 10) + ".csv";
      document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(url), 2000);
      window.k2bToast && window.k2bToast(`Exported ${rows.length} unit${rows.length === 1 ? "" : "s"}.`, "ok", 2500);
    } catch (e) { window.k2bToast && window.k2bToast("Export failed: " + e.message, "warn", 4000); }
  };
  const printList = () => {
    const esc = (s) => String(s == null ? "" : s).replace(/[&<>]/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[c]));
    const html = `<!doctype html><html><head><meta charset="utf-8"><title>Recon Budgets</title><style>body{font:12px Arial,sans-serif;margin:18px}table{border-collapse:collapse;width:100%}th,td{border:1px solid #bbb;padding:3px 6px;text-align:left}td.n{text-align:right;font-family:monospace}h1{font-size:16px}</style></head><body><h1>Recon Budgets — ${esc(new Date().toLocaleString())} · filter: ${esc(filter)} · warning at ${warnPct}%</h1><table><thead><tr>${cols.map(c => "<th>" + esc(c) + "</th>").join("")}</tr></thead><tbody>${rows.map(s => "<tr>" + rowVals(s).map((v, i) => `<td class="${i >= 5 && i <= 10 ? "n" : ""}">${esc(v)}</td>`).join("") + "</tr>").join("")}</tbody></table></body></html>`;
    const w = window.open("", "_blank");
    if (!w) { window.k2bToast && window.k2bToast("Allow pop-ups to print.", "warn", 3000); return; }
    w.document.write(html); w.document.close(); w.focus(); setTimeout(() => { try { w.print(); } catch (e) {} }, 250);
  };

  const th = { position: "sticky", top: 0, background: "var(--jb-surface-2, #EEF1F5)", textAlign: "left", padding: "7px 6px", fontSize: 10.5, color: "var(--jb-text-muted)", textTransform: "uppercase", letterSpacing: ".03em", borderBottom: "1px solid var(--jb-border)", zIndex: 1 };
  const td = { padding: "6px 6px", borderBottom: "1px solid var(--jb-border)", fontSize: 12.5, whiteSpace: "nowrap" };
  const num = { ...td, textAlign: "right", fontFamily: "var(--jb-mono)" };
  const tabBtn = (k, label) => (
    <button key={k} data-rcb-tab={k} onClick={() => setTab(k)} style={{ border: "none", borderBottom: tab === k ? "3px solid var(--jb-navy)" : "3px solid transparent", background: "transparent", padding: "8px 12px", fontWeight: tab === k ? 700 : 500, fontSize: 12.5, cursor: "pointer", color: tab === k ? "var(--jb-navy)" : "var(--jb-text-dim)", fontFamily: "var(--jb-font)" }}>{label}</button>
  );

  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 1340, height: "calc(100vh - 110px)", margin: "0 auto",
                                          display: "flex", flexDirection: "column", background: "var(--jb-surface, #F4F4F4)", fontFamily: "var(--jb-font)" }}>
      <K2BTitlebar title="Recon Tracker — Budgets & Make-Ready Line" icon="store" onClose={onClose} />

      <div style={{ display: "flex", gap: 4, alignItems: "flex-end", padding: "0 12px", borderBottom: "1px solid var(--jb-border)", background: "#fff", flexWrap: "wrap" }}>
        {tabBtn("budgets", "Recon Budgets")}
        {tabBtn("alerts", `Recon alerts${openAlerts ? " (" + openAlerts + ")" : ""}`)}
        {tabBtn("line", "Make-Ready Line")}
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 12, color: "var(--jb-text-dim)", padding: "8px 4px" }}>
          <b style={{ color: "var(--jb-navy)" }}>{inRecon}</b> in recon · <b style={{ color: "var(--jb-green)" }}>{onLine}</b> ready ·{" "}
          <b style={{ color: counts.over ? "var(--jb-red)" : "var(--jb-text-dim)" }}>{counts.over}</b> over · <b style={{ color: counts.approaching ? "var(--jb-amber)" : "var(--jb-text-dim)" }}>{counts.approaching}</b> approaching · {pendingAll} pending request{pendingAll === 1 ? "" : "s"}
        </span>
      </div>

      {tab === "budgets" && (
        <div style={{ display: "flex", gap: 8, alignItems: "center", padding: "8px 14px", borderBottom: "1px solid var(--jb-border)", flexWrap: "wrap" }}>
          <select data-rcb="filter" value={filter} onChange={e => setFilter(e.target.value)} style={{ ...rcbInput, width: "auto", padding: "4px 6px" }}>
            {[["all", "All used units"], ["over", "Over budget"], ["approaching", "Approaching"], ["ok", "OK"], ["none", "No budget"], ["pending", "Pending request"]].map(([k, l]) => <option key={k} value={k}>{l} ({counts[k]})</option>)}
          </select>
          <input autoComplete="off" data-lpignore="true" data-1p-ignore="true" data-form-type="other" name="k2b-find-recontracker-1" value={q} onChange={e => setQ(e.target.value)} placeholder="Stock, VIN, year/make/model…" style={{ ...rcbInput, width: 230, padding: "4px 8px" }} />
          <div style={{ flex: 1 }} />
          <span style={{ fontSize: 12, color: "var(--jb-text-dim)" }}>Warn service at</span>
          {canApp ? (<>
            <input data-rcb="warnpct" type="number" min="50" max="100" value={warnDraft == null ? warnPct : warnDraft} onChange={e => setWarnDraft(e.target.value)} style={{ ...rcbInput, width: 64, padding: "4px 6px" }} />
            <span style={{ fontSize: 12 }}>% of budget</span>
            {warnDraft != null && +warnDraft !== warnPct && <button className="k2b-button small" onClick={() => { const r = rcbToast(D.reconSetWarnPct(+warnDraft)); if (r.ok) setWarnDraft(null); }}>Save</button>}
          </>) : <b style={{ fontSize: 12 }}>{warnPct}%</b>}
          <button className="k2b-button small" onClick={exportCsv}>Export CSV</button>
          <button className="k2b-button small" onClick={printList}>Print</button>
        </div>
      )}

      <div style={{ flex: 1, overflow: "auto", padding: tab === "budgets" ? 0 : 14, minHeight: 0 }}>
        {tab === "budgets" && (
          sums.length === 0 ? <div style={{ textAlign: "center", color: "#888", fontSize: 13, padding: 40 }}>No used units in stock. Stock one in (Inventory → Stock-In) to give it a recon budget.</div> : (
          <table data-rcb-table="1" style={{ width: "100%", borderCollapse: "collapse", background: "#fff" }}>
            <thead><tr>
              <th style={th}>Stock</th><th style={th}>VIN</th><th style={th}>Year / Make / Model</th>
              <th style={{ ...th, textAlign: "right" }}>Approved budget</th><th style={{ ...th, textAlign: "right" }}>Estimated</th><th style={{ ...th, textAlign: "right" }}>Actual</th>
              <th style={{ ...th, textAlign: "right" }}>Projected</th><th style={{ ...th, textAlign: "right" }}>Remaining</th><th style={{ ...th, minWidth: 96 }}>Used</th><th style={th}>Status</th><th style={th}>Requests / alerts</th>
            </tr></thead>
            <tbody>
              {rows.map(s => (
                <tr key={s.stock} data-rcb-row={s.stock} onClick={() => setDetail(s.stock)} style={{ cursor: "pointer" }} title="Open recon budget detail">
                  <td style={{ ...td, fontFamily: "var(--jb-mono)", fontWeight: 700, color: "var(--jb-navy)" }}>{s.stock}</td>
                  <td style={{ ...td, fontFamily: "var(--jb-mono)", fontSize: 11 }}>{s.vin || "—"}</td>
                  <td style={{ ...td, whiteSpace: "normal", minWidth: 150 }}>{s.vehicle}</td>
                  <td style={{ ...num, fontWeight: 700 }}>{s.hasBudget ? rcbMoney(s.budget) : "—"}</td>
                  <td style={num}>{rcbMoney(s.estimated)}</td>
                  <td style={num}>{rcbMoney(s.actual)}</td>
                  <td style={{ ...num, color: s.status === "over" ? "var(--jb-red)" : s.status === "approaching" ? "var(--jb-amber)" : undefined, fontWeight: 700 }}>{rcbMoney(s.projected)}</td>
                  <td style={{ ...num, color: s.remaining < 0 ? "var(--jb-red)" : undefined }}>{s.hasBudget ? rcbMoney(s.remaining) : "—"}</td>
                  <td style={td}><div style={{ display: "flex", alignItems: "center", gap: 6 }}><div style={{ flex: 1, minWidth: 50 }}><RcbBar sum={s} height={8} /></div><span style={{ fontFamily: "var(--jb-mono)", fontSize: 11 }}>{s.hasBudget ? Math.round(s.pct) + "%" : ""}</span></div></td>
                  <td style={td}><RcbChip status={s.status} /></td>
                  <td style={{ ...td, fontSize: 11.5, lineHeight: 1.35 }}>
                    {s.pending.length ? <div style={{ color: "var(--jb-amber)", fontWeight: 700 }}>{s.pending.length} request{s.pending.length === 1 ? "" : "s"} pending</div> : null}
                    {s.openAlerts.length ? <div style={{ color: "var(--jb-red)", fontWeight: 700 }}>{s.openAlerts.length} open alert{s.openAlerts.length === 1 ? "" : "s"}</div> : null}
                  </td>
                </tr>
              ))}
              {rows.length === 0 && <tr><td colSpan={11} style={{ ...td, textAlign: "center", color: "var(--jb-text-muted)", padding: 24 }}>No units match this filter.</td></tr>}
            </tbody>
          </table>)
        )}

        {tab === "alerts" && <div style={{ maxWidth: 1100 }}><ReconAlertsPanel go={go} onOpenUnit={(st) => setDetail(st)} /></div>}

        {tab === "line" && <RcCatchUp />}
        {tab === "line" && (units.length === 0 ? (
          <div style={{ textAlign: "center", color: "#888", fontSize: 13, padding: 40 }}>No used units in stock. Stock one in (Inventory → Stock-In) to start its recon line.</div>
        ) : (
          <div style={{ display: "grid", gridTemplateColumns: `repeat(${STAGES.length}, minmax(168px, 1fr))`, gap: 10, minHeight: 0 }}>
            {STAGES.map((stage, si) => (
              <div key={stage} style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", display: "flex", flexDirection: "column", minHeight: 120 }}>
                <div style={{ padding: "8px 10px", borderBottom: "1px solid var(--jb-border)", display: "flex", alignItems: "center", gap: 6,
                              background: stage === "Ready Line" ? "var(--jb-green-tint, #E6F7EC)" : "var(--jb-surface-2)" }}>
                  <span style={{ width: 18, height: 18, borderRadius: 999, fontSize: 10, fontWeight: 700, display: "inline-flex", alignItems: "center", justifyContent: "center", background: stage === "Ready Line" ? "var(--jb-green, #16A34A)" : "var(--jb-navy, #11337A)", color: "#fff" }}>{si + 1}</span>
                  <span style={{ fontSize: 11, fontWeight: 700, flex: 1 }}>{stage}</span>
                  <span style={{ fontSize: 11, color: "var(--jb-text-muted)", fontFamily: "var(--jb-mono)" }}>{byStage[stage].length}</span>
                </div>
                <div style={{ padding: 8, display: "flex", flexDirection: "column", gap: 8, flex: 1 }}>
                  {byStage[stage].map(u => {
                    const sb = D.reconBudget ? D.reconBudget(u.stock) : null;
                    const next = nextStage(stage);
                    const inDays = rcDays((u.reconHist && u.reconHist.Intake) || u.created);
                    return (
                      <div key={u.stock} style={{ border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-sm)", padding: "8px 9px", background: "var(--jb-surface, #FAFBFC)" }}>
                        <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
                          <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 700, fontSize: 12, color: "var(--jb-navy)", flex: 1 }}>{u.stock}</span>
                          {sb && sb.status !== "none" && sb.status !== "ok" && <RcbChip status={sb.status} />}
                        </div>
                        <div style={{ fontSize: 11.5, color: "var(--jb-text-dim)" }}>{u.yr} {u.mk} {u.mdl}</div>
                        <div style={{ display: "flex", gap: 8, fontSize: 11, color: "var(--jb-text-muted)", marginTop: 2, flexWrap: "wrap" }}>
                          <span>{inDays}d in</span>
                          {sb && sb.projected > 0 && <span>· recon {rcMoney(sb.projected)}{sb.hasBudget ? " / " + rcMoney(sb.budget) : ""}</span>}
                        </div>
                        {sb && sb.hasBudget && <div style={{ marginTop: 4 }}><RcbBar sum={sb} height={5} /></div>}
                        {Array.isArray(u.serviced) && u.serviced.length > 0 && (() => { const sv = u.serviced[u.serviced.length - 1]; return (
                          <div data-rc-serviced={u.stock} title={(u.stageLog || []).slice(-3).map(x => x.text).join("\n")} style={{ marginTop: 5, fontSize: 11, background: "#E6F7EC", border: "1px solid #9ED9B1", borderRadius: 4, padding: "3px 6px", color: "#0E5A2A" }}>
                            ✓ Serviced: <a href="#" data-rc-serviced-ro={sv.ro} onClick={(e) => { e.preventDefault(); try { localStorage.setItem(sv.kind === "body" ? "jb_body_focus" : "jb_ro_focus", sv.ro); } catch (x) {} if (sv.kind === "body") window.jbBodyFocus = sv.ro; else window.jbROFocus = sv.ro; go && go(sv.kind === "body" ? "bodyshop" : "service"); }} style={{ fontWeight: 700, color: "#0E5A2A" }}>{sv.ro}</a>, {sv.date}{sv.reconCents != null ? <>, <span data-rc-serviced-cost="1">{"$" + (Number(sv.reconCents) / 100).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span> internal</> : null}{u.serviced.length > 1 ? ` (+${u.serviced.length - 1} earlier)` : ""}
                          </div>); })()}
                        <div style={{ display: "flex", gap: 4, marginTop: 6, flexWrap: "wrap" }}>
                          {next && <button className="k2b-button small" onClick={() => act(D.setReconStage(u.stock, next))}>→ {next === "Estimate/Approval" ? "Approve" : next === "In Recon RO" ? "Open RO" : next}</button>}
                          {stage === "In Recon RO" && <button className="k2b-button small" onClick={() => go && go("servicedept")} title="Open recon RO in Service">RO</button>}
                          <button className="k2b-button small" onClick={() => setDetail(u.stock)} title="Recon budget">$</button>
                          <button className="k2b-button small" onClick={() => { try { localStorage.setItem("jb_inv_focus", u.stock); } catch (e) {} go && go("inventory"); }} title="Open in Inventory">↗</button>
                        </div>
                      </div>
                    );
                  })}
                  {byStage[stage].length === 0 && <div style={{ fontSize: 11.5, color: "#C2C8D0", textAlign: "center", padding: "10px 0" }}>—</div>}
                </div>
              </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("inventory")}>Inventory</K2BButton>
        <K2BButton small onClick={() => go && go("servicedept")}>Service</K2BButton>
        <K2BButton small onClick={() => go && go("partsdept")}>Parts</K2BButton>
      </div>
      {detail && <RcbUnitDetail stock={detail} go={go} onClose={() => setDetail(null)} />}
    </div>
  );
};

Object.assign(window, { ReconTracker, ReconBudgetPanel, ReconAlertsPanel });