/* 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 — Body Shop (collision repair). Master–detail like Service ROs,
// but with estimate import, labor by type (body/paint/frame/mechanical), parts
// reserved from inventory, sublet, supplement approvals, and insurance-vs-
// customer billing. Closing posts to the GL (labor/parts/sublet/tax) and
// relieves reserved parts. Easy print at every step.

const bsMoney = (n) => "$" + (Number(n) || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const BS_LABOR = [
  { k: "body", label: "Body", color: "#1B66A8" }, { k: "paint", label: "Paint", color: "#7C3AED" },
  { k: "frame", label: "Frame", color: "#B23A2E" }, { k: "mechanical", label: "Mechanical", color: "#0E7A37" },
];
const BS_STATUS_TONE = { Estimate: { bg: "#EDEFF3", fg: "#5A6472" }, Open: { bg: "var(--jb-blue-tint,#E5EFFA)", fg: "var(--jb-blue,#1B66A8)" }, Closed: { bg: "var(--jb-green-tint,#E6F7EC)", fg: "#0E7A37" } };
// RC32 (lane ros): who may change a body-shop job (the server's rule — service or the office); M5 labor rates, M4 sublet markup
const bsCanEdit = () => { const D = window.DMS; return !!(D && D.can && (D.can("service") || D.can("acct"))); };
const bsCfg = () => { try { const s = window.DMS && window.DMS.svcSettings ? window.DMS.svcSettings() : null; return s && s.money ? s : null; } catch (e) { return null; } };
const bsRateFor = (type) => { const c = bsCfg(); const r = c && c.money.bodyRates && c.money.bodyRates[type]; return r != null ? +r : ((window.DMS && window.DMS.BODY_RATES && window.DMS.BODY_RATES[type]) || 0); };
const BSBadge = ({ s }) => { const t = BS_STATUS_TONE[s] || BS_STATUS_TONE.Estimate; return <span style={{ background: t.bg, color: t.fg, borderRadius: 999, padding: "2px 10px", fontSize: 11, fontWeight: 700 }}>{s}</span>; };

const BodyShop = ({ 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) => Promise.resolve(r).then(x => { window.k2bToast && window.k2bToast(x.msg, x.ok ? "ok" : "warn", 3600); return x; });   // RC33 (mpx): money after the close is a SERVER command (a promise)
  const ros = (D && D.bodyShopROs) ? D.bodyShopROs() : [];
  const [selId, setSelId] = React.useState(null);
  const [modal, setModal] = React.useState(null);

  React.useEffect(() => { if (selId && ros.find(r => r.id === selId)) return; if (ros[0]) setSelId(ros[0].id); }, [ros.length]);
  // RC26 (inv) fix round: a hand-off from another screen (the Recon Tracker's "Serviced: BR-…" link) opens that job once
  React.useEffect(() => {
    let id = null; try { id = localStorage.getItem("jb_body_focus"); } catch (e) {}
    id = id || window.jbBodyFocus || null;
    if (!id) return;
    try { localStorage.removeItem("jb_body_focus"); } catch (e) {}
    window.jbBodyFocus = null;
    if (ros.find(r => r.id === id)) setSelId(id);
  }, []);
  const sel = ros.find(r => r.id === selId) || null;

  const newRO = () => setModal({ type: "new" });
  const openWip = ros.filter(r => r.status !== "Closed").length;
  const wipDollars = ros.filter(r => r.status !== "Closed").reduce((s, r) => s + (+r.total || 0), 0);

  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="Body Shop — Collision Repair" icon="store" onClose={onClose} />

      <div style={{ display: "flex", gap: 10, alignItems: "center", padding: "10px 16px", borderBottom: "1px solid var(--jb-border)", flexWrap: "wrap" }}>
        <span style={{ fontSize: 12.5, color: "var(--jb-text-dim)" }}><b style={{ color: "var(--jb-navy)" }}>{openWip}</b> open · WIP <b style={{ color: "var(--jb-navy)" }}>{bsMoney(wipDollars)}</b></span>
        <div style={{ flex: 1 }} />
        {bsCanEdit() && <button className="k2b-button" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={newRO}>+ New Body RO</button>}
      </div>

      <div style={{ flex: 1, display: "grid", gridTemplateColumns: "330px 1fr", minHeight: 0 }}>
        <div style={{ borderRight: "1px solid var(--jb-border)", overflow: "auto", background: "#FFF" }}>
          {ros.length === 0 && <div style={{ padding: 24, color: "#888", fontSize: 13, textAlign: "center" }}>No body shop ROs. Click “+ New Body RO” to start, then import an estimate.</div>}
          {ros.map(r => {
            const on = r.id === selId;
            return (
              <div key={r.id} data-body-job={r.id} data-body-active={on ? "1" : "0"} onClick={() => setSelId(r.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)" }}>{r.id}</span>
                  <div style={{ flex: 1 }} />
                  <BSBadge s={r.status} />
                </div>
                <div style={{ fontSize: 12.5, marginTop: 3 }}>{r.customer || "—"}</div>
                <div style={{ fontSize: 11.5, color: "var(--jb-text-muted)" }}>{r.vehicle || ""}</div>
                <div style={{ display: "flex", gap: 8, marginTop: 4, fontSize: 11.5 }}>
                  <span style={{ fontWeight: 700, fontFamily: "var(--jb-mono)" }}>{bsMoney(r.total)}</span>
                  <span style={{ color: r.payType === "Insurance" ? "#1456A0" : "#9A6700" }}>· {r.payType}</span>
                  {r.insurer && <span style={{ color: "var(--jb-text-muted)" }}>· {r.insurer}</span>}
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ overflow: "auto" }}>
          {sel ? <BsEditor ro={sel} act={act} go={go} setModal={setModal} /> : <div style={{ padding: 40, color: "#999", textAlign: "center" }}>Select or create a body shop RO.</div>}
        </div>
      </div>

      <div style={{ borderTop: "1px solid var(--jb-border)", padding: "8px 16px", display: "flex", gap: 6, flexWrap: "wrap" }}>
        <K2BButton small onClick={onClose}>ESC-Close</K2BButton>
        <K2BButton small onClick={() => go && go("service")}>Service ROs</K2BButton>
        <K2BButton small onClick={() => go && go("partsdept")}>Parts Dept</K2BButton>
        <K2BButton small onClick={() => go && go("checkwriting")}>Check Writing</K2BButton>
      </div>

      {modal && modal.type === "new" && <BsNewModal act={act} onClose={() => setModal(null)} onCreated={(id) => setSelId(id)} />}
      {modal && modal.type === "import" && <BsImportModal ro={modal.ro} act={act} onClose={() => setModal(null)} />}
      {modal && modal.type === "addLabor" && <BsLaborModal ro={modal.ro} act={act} onClose={() => setModal(null)} />}
      {modal && modal.type === "addPart" && <BsPartModal ro={modal.ro} act={act} onClose={() => setModal(null)} />}
      {modal && modal.type === "addSublet" && <BsSubletModal ro={modal.ro} act={act} onClose={() => setModal(null)} />}
      {modal && modal.type === "addSupp" && <BsSuppModal ro={modal.ro} act={act} onClose={() => setModal(null)} />}
      {modal && modal.type === "close" && <BsCloseModal ro={ros.find(r => r.id === modal.ro.id) || modal.ro} act={act} onClose={() => setModal(null)} />}
    </div>
  );
};

// Hoisted — an inline section wrapper remounts everything inside it on each
// render, which drops the cursor out of any input after one character.
const BsSect = ({ title, right, children }) => (
  <div style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", overflow: "hidden", marginBottom: 14 }}>
    <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 14px", borderBottom: "1px solid var(--jb-border)", background: "var(--jb-surface-2)" }}>
      <span style={{ fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.3, color: "var(--jb-text-dim)" }}>{title}</span>
      <div style={{ flex: 1 }} />{right}
    </div>
    <div style={{ padding: "8px 14px" }}>{children}</div>
  </div>
);

const BsEditor = ({ ro, act, go, setModal }) => {
  const D = window.DMS;
  // RC32: the office sees the account numbers; everyone else reads plain words (the account lines one click away, still in the page)
  const bsOffice = !!(D && D.fopsIsOffice && D.fopsIsOffice());
  const [acctOpen, setAcctOpen] = React.useState(false);
  const closed = ro.status === "Closed";
  const pendingSupp = (ro.supplements || []).filter(s => s.status === "Pending").length;
  const Sect = BsSect;
  const typeBadge = (t) => { const o = BS_LABOR.find(x => x.k === t) || BS_LABOR[0]; return <span style={{ background: o.color, color: "#fff", borderRadius: 4, padding: "1px 7px", fontSize: 10.5, fontWeight: 700 }}>{o.label}</span>; };

  return (
    <div style={{ padding: "16px 20px" }}>
      {/* header */}
      <div style={{ display: "flex", alignItems: "flex-start", gap: 12, flexWrap: "wrap", marginBottom: 14 }}>
        <div style={{ flex: 1, minWidth: 220 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 22, color: "var(--jb-navy)" }}>{ro.id}</span>
            <BSBadge s={ro.status} />
            <span style={{ fontSize: 12, color: ro.payType === "Insurance" ? "#1456A0" : "#9A6700", fontWeight: 700 }}>{ro.payType}{ro.insurer ? " · " + ro.insurer : ""}{ro.claimNo ? " · claim " + ro.claimNo : ""}</span>
          </div>
          <div style={{ fontSize: 15, fontWeight: 700, marginTop: 4 }}>{ro.customer || "—"}</div>
          <div style={{ fontSize: 12.5, color: "var(--jb-text-dim)" }}>{ro.vehicle || ""}{ro.vin ? " · VIN " + ro.vin : ""}</div>
        </div>
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap", alignItems: "center" }}>
          {ro.vin && window.CarfaxButton && <CarfaxButton small vin={ro.vin} ctx={ro.vehicle} />}
          <button className="k2b-button small" onClick={() => window.k2bPrintBodyRO && window.k2bPrintBodyRO(ro, "estimate")}>🖨 Estimate</button>
          <button className="k2b-button small" onClick={() => window.k2bPrintBodyRO && window.k2bPrintBodyRO(ro, "ro")}>🖨 Repair Order</button>
          <button className="k2b-button small" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => window.k2bPrintBodyRO && window.k2bPrintBodyRO(ro, "invoice")}>🖨 Invoice</button>
        </div>
      </div>

      {!closed && bsCanEdit() && (
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 14 }}>
          <button className="k2b-button small" onClick={() => setModal({ type: "import", ro })}>⇣ Import Estimate</button>
          <button className="k2b-button small" onClick={() => setModal({ type: "addLabor", ro })}>+ Labor</button>
          <button className="k2b-button small" onClick={() => setModal({ type: "addPart", ro })}>+ Reserve Part</button>
          <button className="k2b-button small" onClick={() => setModal({ type: "addSublet", ro })}>+ Sublet</button>
          <button className="k2b-button small" onClick={() => setModal({ type: "addSupp", ro })}>+ Supplement</button>
          {ro.status === "Estimate" && <button className="k2b-button small" onClick={() => act(D.updateBodyRO(ro.id, { status: "Open" }))}>Convert to RO →</button>}
        </div>
      )}

      {/* Labor */}
      <Sect title="Labor Operations">
        {(ro.lines || []).length === 0 ? <div style={{ fontSize: 12.5, color: "#888" }}>No labor lines yet.</div> : (
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
            <thead><tr style={{ color: "var(--jb-text-muted)", textAlign: "left", fontSize: 11 }}><th style={{ padding: "3px 6px" }}>Type</th><th style={{ padding: "3px 6px" }}>Description</th><th style={{ padding: "3px 6px", textAlign: "right" }}>Hrs</th><th style={{ padding: "3px 6px", textAlign: "right" }}>Rate</th><th style={{ padding: "3px 6px", textAlign: "right" }}>Sale</th><th></th></tr></thead>
            <tbody>
              {ro.lines.map(l => (
                <tr key={l.id} style={{ borderTop: "1px solid #F0F0F0" }}>
                  <td style={{ padding: "4px 6px" }}>{typeBadge(l.type)}</td>
                  <td style={{ padding: "4px 6px" }}>{l.desc}</td>
                  <td style={{ padding: "4px 6px", textAlign: "right", fontFamily: "var(--jb-mono)" }}>{(+l.hours).toFixed(1)}</td>
                  <td style={{ padding: "4px 6px", textAlign: "right", fontFamily: "var(--jb-mono)" }}>{bsMoney(l.rate)}</td>
                  <td style={{ padding: "4px 6px", textAlign: "right", fontFamily: "var(--jb-mono)", fontWeight: 700 }}>{bsMoney(l.sale)}</td>
                  <td style={{ padding: "4px 6px", textAlign: "right" }}>{!closed && bsCanEdit() && <button className="k2b-button small" onClick={() => act(D.removeBodyLine(ro.id, l.id))}>✕</button>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </Sect>

      {/* Parts */}
      <Sect title="Parts (reserved from inventory)">
        {(ro.partsLines || []).length === 0 ? <div style={{ fontSize: 12.5, color: "#888" }}>No parts reserved.</div> : (
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
            <thead><tr style={{ color: "var(--jb-text-muted)", textAlign: "left", fontSize: 11 }}><th style={{ padding: "3px 6px" }}>Part #</th><th style={{ padding: "3px 6px" }}>Description</th><th style={{ padding: "3px 6px", textAlign: "right" }}>Qty</th><th style={{ padding: "3px 6px", textAlign: "right" }}>Sale</th><th></th></tr></thead>
            <tbody>
              {ro.partsLines.map(p => (
                <tr key={p.id} style={{ borderTop: "1px solid #F0F0F0" }}>
                  <td style={{ padding: "4px 6px", fontFamily: "var(--jb-mono)", fontWeight: 700, color: "var(--jb-navy)" }}>{p.part}{p.backorder && <span style={{ color: "var(--k2b-maroon)", fontWeight: 700 }}> ⚠B/O</span>}</td>
                  <td style={{ padding: "4px 6px" }}>{p.desc}</td>
                  <td style={{ padding: "4px 6px", textAlign: "right", fontFamily: "var(--jb-mono)" }}>{p.qty}</td>
                  <td style={{ padding: "4px 6px", textAlign: "right", fontFamily: "var(--jb-mono)", fontWeight: 700 }}>{bsMoney(p.sale)}</td>
                  <td style={{ padding: "4px 6px", textAlign: "right" }}>{!closed && bsCanEdit() && <button className="k2b-button small" onClick={() => act(D.removeBodyPart(ro.id, p.id))}>✕</button>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </Sect>

      {/* Sublet */}
      <Sect title="Sublet">
        {(ro.sublets || []).length === 0 ? <div style={{ fontSize: 12.5, color: "#888" }}>No sublet work (glass, alignment, towing, etc.).</div> : (
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
            <thead><tr style={{ color: "var(--jb-text-muted)", textAlign: "left", fontSize: 11 }}><th style={{ padding: "3px 6px" }}>Vendor</th><th style={{ padding: "3px 6px" }}>Description</th><th style={{ padding: "3px 6px", textAlign: "right" }}>Cost</th><th style={{ padding: "3px 6px", textAlign: "right" }}>Sale</th><th></th></tr></thead>
            <tbody>
              {ro.sublets.map(s => (
                <tr key={s.id} style={{ borderTop: "1px solid #F0F0F0" }}>
                  <td style={{ padding: "4px 6px", fontWeight: 600 }}>{s.vendor}</td>
                  <td style={{ padding: "4px 6px" }}>{s.desc}</td>
                  <td style={{ padding: "4px 6px", textAlign: "right", fontFamily: "var(--jb-mono)", color: "var(--jb-text-muted)" }}>{s.cost == null ? "—" : bsMoney(s.cost)}</td>
                  <td style={{ padding: "4px 6px", textAlign: "right", fontFamily: "var(--jb-mono)", fontWeight: 700 }}>{bsMoney(s.sale)}</td>
                  <td style={{ padding: "4px 6px", textAlign: "right" }}>{!closed && bsCanEdit() && <button className="k2b-button small" onClick={() => act(D.removeSublet(ro.id, s.id))}>✕</button>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
        <div style={{ fontSize: 11, color: "var(--jb-text-muted)", marginTop: 6 }}>Sublet vendor costs become A/P payables on close — pay them in Check Writing.</div>
      </Sect>

      {/* Supplements */}
      <Sect title={`Supplements${pendingSupp ? " · " + pendingSupp + " pending" : ""}`}>
        {(ro.supplements || []).length === 0 ? <div style={{ fontSize: 12.5, color: "#888" }}>No supplements. Add one when the insurer approves extra repairs.</div> : (
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {ro.supplements.map(s => (
              <div key={s.id} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 12.5 }}>
                <span style={{ flex: 1 }}>{s.desc}</span>
                <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 700 }}>{bsMoney(s.amount)}</span>
                <span style={{ background: s.status === "Approved" ? "#E6F7EC" : s.status === "Denied" ? "#FBE9E7" : "#FBF3E0", color: s.status === "Approved" ? "#0E7A37" : s.status === "Denied" ? "#B23A2E" : "#9A6700", borderRadius: 999, padding: "1px 9px", fontSize: 11, fontWeight: 700 }}>{s.status}</span>
                {!closed && bsCanEdit() && s.status === "Pending" && (
                  <span style={{ display: "flex", gap: 4 }}>
                    <button className="k2b-button small" style={{ background: "#16A34A", color: "#fff" }} onClick={() => act(D.setSupplementStatus(ro.id, s.id, "Approved"))}>Approve</button>
                    <button className="k2b-button small" onClick={() => act(D.setSupplementStatus(ro.id, s.id, "Denied"))}>Deny</button>
                  </span>
                )}
              </div>
            ))}
          </div>
        )}
      </Sect>

      {/* Totals + close — RC24 (svcm): the SAME calculation the server commits (DMS.bodyMoney / SvcmCalc); once closed, the server's invoice */}
      {(() => { const m = (D.bodyMoney && D.bodyMoney(ro)) || { total: ro.total, labor: ro.laborSale, parts: ro.partsSale, sublet: ro.subletSale, supplements: ro.supplementTotal || 0, tax: ro.tax }; return (<>
      <div data-bs-totals={ro.id} style={{ background: "linear-gradient(160deg, var(--jb-navy), var(--jb-navy-deep))", borderRadius: "var(--jb-r)", padding: "14px 18px", color: "#fff", display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
        {[["Labor", m.labor], ["Parts", m.parts], ["Sublet", m.sublet], ["Supplements", m.supplements], ["Tax", m.tax]].map(([l, v]) => (
          <div key={l}><div style={{ fontSize: 10.5, textTransform: "uppercase", letterSpacing: 0.5, color: "#aeb8d0" }}>{l}</div><div data-bs-sum={l} style={{ fontFamily: "var(--jb-mono)", fontWeight: 700, fontSize: 15 }}>{bsMoney(v)}</div></div>
        ))}
        <div style={{ flex: 1 }} />
        <div style={{ textAlign: "right" }}><div style={{ fontSize: 10.5, textTransform: "uppercase", letterSpacing: 1, color: "var(--jb-yellow)" }}>Total{m.committed ? " (posted)" : " (preview)"}</div><div data-bs-total={ro.id} style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 26 }}>{bsMoney(m.total)}</div></div>
        {!closed && bsCanEdit() && <button className="k2b-button" data-bs-close={ro.id} style={{ background: "var(--jb-yellow)", color: "var(--jb-navy)", border: 0, fontWeight: 800 }} onClick={() => setModal({ type: "close", ro })}>Close &amp; Post →</button>}
      </div>
      {m.problems && m.problems.length > 0 && <div style={{ marginTop: 8, padding: "8px 14px", background: "#FBEAEA", border: "1px solid #E7B2AD", borderRadius: "var(--jb-r)", fontSize: 12.5, color: "#8a1c1c" }}>{m.problems[0]}</div>}
      {!bsOffice && (
        <div data-bs-plain={ro.id} style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center", marginTop: 8, padding: "8px 14px", background: "var(--jb-blue-tint, #E5EFFA)", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", fontSize: 13 }}>
          {ro.payType === "Insurance"
            ? <span>Insurance pays <b>{bsMoney(m.insurer)}</b> · deductible <b>{bsMoney(m.deductible)}</b> · customer owes <b>{bsMoney(closed ? (m.customerOwed || 0) : m.deductible)}</b></span>
            : <span>Customer owes <b>{bsMoney(closed ? (m.customerOwed || 0) : m.customer)}</b></span>}
          <span style={{ flex: 1 }} />
          <button type="button" data-bs-acct-detail="1" onClick={() => setAcctOpen(o => !o)} style={{ border: 0, background: "transparent", color: "var(--jb-blue)", fontWeight: 700, cursor: "pointer", fontSize: 12.5 }}>{acctOpen ? "▾" : "▸"} Accounting detail</button>
        </div>
      )}
      <div data-bs-split={ro.id} style={{ display: bsOffice || acctOpen ? "flex" : "none", gap: 24, flexWrap: "wrap", marginTop: 8, padding: "8px 14px", background: "var(--jb-blue-tint, #E5EFFA)", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", fontSize: 12.5 }}>
        <span style={{ color: "var(--jb-text-dim)" }}>{closed ? "Posted" : "At close"}:</span>
        {ro.payType === "Insurance" && <span><b style={{ color: "#1456A0" }}>{bsMoney(m.insurer)}</b> → {ro.insurer || "insurer"} (262 insurance receivable)</span>}
        {ro.payType === "Insurance" && <span><b style={{ color: "#0E7A37" }}>{bsMoney(m.deductible)}</b> deductible from the customer</span>}
        {ro.payType !== "Insurance" && <span><b style={{ color: "#0E7A37" }}>{bsMoney(m.customer)}</b> from the customer</span>}
        {closed && <span>paid at close <b>{bsMoney(m.paid || 0)}</b>{m.customerOwed > 0 ? <> · <b style={{ color: "#B23A2E" }}>{bsMoney(m.customerOwed)}</b> on the customer's A/R (220)</> : " · nothing owed"}</span>}
        {!closed && <span style={{ color: "var(--jb-text-muted)" }}>cash / card taken at close; the rest goes on the customer's A/R (220). Sublet costs become A/P bills; parts leave stock at the job's cost.</span>}
        {closed && ro.closeJeId && <span data-bs-je={ro.closeJeId} style={{ fontFamily: "var(--jb-mono)", fontWeight: 700 }}>{ro.closeJeId}</span>}
      </div>
      {closed && <BsAfterClose ro={ro} act={act} />}
      </>); })()}
    </div>
  );
};

/* RC33 (mpx): money on a CLOSED body-shop job — a later payment (the customer's share, or the insurer's check for its share), a void or a refund.
   Each is a SERVER command (POST /api/fixedops/bodyshop/payment | void | refund: the entry, the job's payment list, the customer's A/R line together). */
const BsAfterClose = ({ ro, act }) => {
  const D = window.DMS;
  const office = !!(D.can && (D.can("acct") || D.can("glEdit")));
  const pays = (ro.payments || []).filter(p => p && p.receiptNo);
  const ask = (q, d) => { const v = window.prompt(q, d || ""); return v === null ? null : String(v).trim(); };
  const take = (insurer) => {
    const a = ask(insurer ? `The insurer's check for ${ro.id} — amount:` : `Customer payment on ${ro.id} — amount:`); if (!a) return;
    if (insurer) { const ref = ask("The insurer's check number:"); if (!ref) return; act(D.bodyShopPayment(ro.id, { method: "insurance", amount: a, ref })); return; }
    const how = (ask("How was it paid? cash / card / check", "card") || "").toLowerCase(); if (!how) return;
    const ref = how === "cash" ? "" : ask(how === "card" ? "Processor reference / auth code:" : "The customer's check number:"); if (how !== "cash" && !ref) return;
    const drawerRef = how === "cash" ? ask("Cash drawer / deposit reference:") : ""; if (how === "cash" && !drawerRef) return;
    act(D.bodyShopPayment(ro.id, { method: how, amount: a, ref, drawerRef }));
  };
  return (
    <div data-bs-after={ro.id} style={{ marginTop: 8, padding: "8px 14px", background: "var(--jb-surface-2, #F5F7FA)", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", fontSize: 12.5 }}>
      <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
        <b>Payments</b><span style={{ flex: 1 }} />
        <button className="k2b-button small" data-bs-pay={ro.id} onClick={() => take(false)}>Take payment</button>
        {office && ro.payType === "Insurance" && <button className="k2b-button small" data-bs-inspay={ro.id} onClick={() => take(true)}>Insurer's check</button>}
      </div>
      {pays.length === 0 && <div style={{ color: "var(--jb-text-muted)", marginTop: 4 }}>No payments recorded.</div>}
      {pays.map(p => (
        <div key={p.id || p.receiptNo} data-bs-receipt={p.receiptNo} style={{ display: "flex", gap: 10, alignItems: "center", marginTop: 4, opacity: p.voided ? 0.55 : 1 }}>
          <span style={{ fontFamily: "var(--jb-mono)" }}>{p.receiptNo}</span><span>{p.method === "insurance" ? "insurer" : (p.tender || p.method)}</span>
          <b style={{ fontFamily: "var(--jb-mono)" }}>{bsMoney(Math.abs(+p.amount || 0))}{+p.amount < 0 ? " refund" : ""}</b>
          {p.voided && <span style={{ color: "#B23A2E" }}>void</span>}<span style={{ flex: 1 }} />
          {office && !p.voided && !p.refundOf && p.method !== "invoice" && <button className="k2b-button small" data-bs-void={p.receiptNo} onClick={() => { const why = ask(`Void ${p.receiptNo}? Reason:`); if (why) act(D.voidBodyShopPayment(ro.id, p.receiptNo, why)); }}>Void</button>}
          {office && !p.voided && !p.refundOf && ["cash", "card"].indexOf(p.method) !== -1 && <button className="k2b-button small" data-bs-refund={p.receiptNo} onClick={() => { const a = ask(`Refund how much of ${p.receiptNo}?`, String(Math.abs(+p.amount || 0).toFixed(2))); if (!a) return; const how = (ask("Refund by cash / card / check?", p.method) || "").toLowerCase(); if (!how) return; const why = ask("Reason:"); if (why) act(D.refundBodyShopPayment(ro.id, p.receiptNo, a, how, why)); }}>Refund</button>}
        </div>
      ))}
    </div>
  );
};

/* RC24 (svcm): the confirm step before Close & Post — every amount the server will commit (the same calculation), the insurer / customer
   split, and the customer's payment taken now (cash / card / an invoice to an A/R account for the office). The result shown is the server's. */
const BsCloseModal = ({ ro, act, onClose }) => {
  const D = window.DMS;
  const m = (D.bodyMoney && D.bodyMoney(ro)) || {};
  const [pay, setPay] = React.useState({ on: m.customer > 0, method: "cash", amount: m.customer > 0 ? String((+m.customer).toFixed(2)) : "", tendered: "", drawerRef: "", ref: "", last4: "", account: "" });
  const [busy, setBusy] = React.useState(false);
  const set = (k) => (e) => setPay({ ...pay, [k]: e && e.target ? (e.target.type === "checkbox" ? e.target.checked : e.target.value) : e });
  const arAccts = D.arCustomers ? D.arCustomers() : [];
  const fee = pay.method === "card" && D.roCardFee ? D.roCardFee(+pay.amount || 0) : { fee: 0 };
  const row = (l, v, strong) => <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, padding: "3px 0", fontWeight: strong ? 800 : 400 }}><span>{l}</span><span style={{ fontFamily: "var(--jb-mono)" }}>{bsMoney(v)}</span></div>;
  const go = async () => {
    setBusy(true);
    try {
      const payments = pay.on && +pay.amount > 0 ? [{ method: pay.method, amount: pay.amount, tendered: pay.tendered || undefined, drawerRef: pay.drawerRef, ref: pay.ref, last4: pay.last4, account: pay.account }] : undefined;
      const r = await D.closeBodyRO(ro.id, { payments });
      act(r);
      if (r.ok) onClose();
    } finally { setBusy(false); }
  };
  return (
    <K2BModal title={`Close & Post ${ro.id}`} width={640} onClose={onClose} buttons={<><K2BButton onClick={onClose}>Cancel</K2BButton><button type="button" className="k2b-button" data-bs-close-ok="1" disabled={busy || !!(m.problems && m.problems.length > 0)} onClick={go} style={{ background: "var(--jb-yellow)", color: "var(--jb-navy)", border: 0, fontWeight: 800, ...(busy || (m.problems && m.problems.length > 0) ? { opacity: 0.5, cursor: "not-allowed" } : {}) }}>{busy ? "Posting…" : "Close & Post"}</button></>}>
      <div data-bs-close-preview="1" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", color: "var(--jb-text-dim)", marginBottom: 4 }}>What the server will post</div>
          {row("Labor (460A)", m.labor)}{row("Parts (467)", m.parts)}{row("Sublet (468)", m.sublet)}{m.supplements > 0 && row("Approved supplements (460A)", m.supplements)}{row("Sales tax on parts (324A)", m.tax)}
          <div style={{ borderTop: "1px solid var(--jb-border)", marginTop: 4 }}>{row("Total", m.total, true)}</div>
          {ro.payType === "Insurance" ? <>{row(`Billed to ${ro.insurer || "insurer"} (262)`, m.insurer)}{row("Deductible — customer", m.deductible)}</> : row("Customer's share", m.customer)}
          <div style={{ fontSize: 11.5, color: "var(--jb-text-muted)", marginTop: 6 }}>Parts leave stock at the job's cost; sublet costs become A/P bills for the vendors; what the customer does not pay now goes on their A/R account (220).</div>
          {m.problems && m.problems.length > 0 && <div style={{ fontSize: 12.5, color: "#8a1c1c", marginTop: 6 }}>{m.problems[0]}</div>}
        </div>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", color: "var(--jb-text-dim)", marginBottom: 4 }}>Customer's payment now</div>
          <label style={{ display: "flex", gap: 6, alignItems: "center", fontSize: 12.5 }}><input type="checkbox" checked={pay.on} onChange={set("on")} /> Take {bsMoney(m.customer)} now</label>
          {pay.on && <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 6 }}>
            <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
              {[["cash", "💵 Cash"], ["card", "💳 Card"], ["check", "🧾 Check"]].concat(D.can && D.can("acct") ? [["invoice", "🧾 Invoice (A/R)"]] : []).map(([k, l]) => (
                <button key={k} data-bs-pm={k} className="k2b-button small" onClick={() => setPay({ ...pay, method: k })} style={{ background: pay.method === k ? "var(--jb-navy, #1B66A8)" : undefined, color: pay.method === k ? "#fff" : undefined }}>{l}</button>
              ))}
            </div>
            <BsField label="Amount $"><input data-bs-pay="amount" value={pay.amount} onChange={(e) => setPay({ ...pay, amount: e.target.value.replace(/[^0-9.]/g, "") })} style={{ ...bsInp, fontFamily: "var(--jb-mono)" }} /></BsField>
            {pay.method === "cash" && <><BsField label="Cash received $ (optional)"><input data-bs-pay="tendered" value={pay.tendered} onChange={(e) => setPay({ ...pay, tendered: e.target.value.replace(/[^0-9.]/g, "") })} style={bsInp} /></BsField><BsField label="Drawer / deposit ref"><input data-bs-pay="drawerRef" value={pay.drawerRef} onChange={set("drawerRef")} placeholder="DRAWER-1" style={bsInp} /></BsField></>}
            {pay.method === "check" && <><BsField label="Customer's check #"><input data-bs-pay="ref" value={pay.ref} onChange={set("ref")} style={bsInp} /></BsField><BsField label="Drawer / deposit ref"><input data-bs-pay="drawerRef" value={pay.drawerRef} onChange={set("drawerRef")} placeholder="DRAWER-1" style={bsInp} /></BsField></>}
            {pay.method === "card" && <><BsField label="Processor ref / auth code"><input data-bs-pay="ref" value={pay.ref} onChange={set("ref")} style={bsInp} /></BsField><BsField label="Last 4 (optional)"><input data-bs-pay="last4" value={pay.last4} maxLength={4} onChange={(e) => setPay({ ...pay, last4: e.target.value.replace(/\D/g, "").slice(0, 4) })} style={bsInp} /></BsField>{fee.fee > 0 && <div style={{ fontSize: 12 }}>Card fee {bsMoney(fee.fee)} — charge the card <b>{bsMoney((+pay.amount || 0) + fee.fee)}</b></div>}</>}
            {pay.method === "invoice" && <BsField label="A/R account"><select data-bs-pay="account" value={pay.account} onChange={set("account")} style={bsInp}><option value="">— pick account —</option>{arAccts.map(a => <option key={a.acct} value={a.acct}>{a.acct} — {a.name}</option>)}</select></BsField>}
          </div>}
          {!pay.on && <div style={{ fontSize: 12, color: "var(--jb-text-muted)", marginTop: 6 }}>{bsMoney(m.customer)} goes on the customer's A/R account (220) — collect it later in A/R.</div>}
        </div>
      </div>
    </K2BModal>
  );
};

/* ── modals ── */
const bsInp = { width: "100%", boxSizing: "border-box", padding: "6px 8px", border: "1px solid #C8CCD2", borderRadius: 4, fontSize: 13 };
const BsField = ({ label, children }) => <label style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>{label}</span>{children}</label>;

const BsNewModal = ({ act, onClose, onCreated }) => {
  const [f, setF] = React.useState({ customer: "", custNum: "", vehicle: "", vin: "", payType: "Insurance", insurer: "", claimNo: "", deductible: "" });
  // RC30 (cn): the job carries the customer's Customer # (the phone without the area code) so the body-shop close finds the customer's own A/R
  // account and the customer file shows the job — picked from the customer file (name / phone / Customer #), or typed as a walk-in name
  const [cq, setCq] = React.useState("");
  const custRows = React.useMemo(() => (cq.trim().length >= 2 && window.DMS && window.DMS.customerSearch ? window.DMS.customerSearch(cq).slice(0, 8) : []), [cq]);
  const pickCust = (c) => { setF(s => ({ ...s, customer: String(c.name || "").toUpperCase(), custNum: c.custNum || "" })); setCq(""); };
  // A 17-character VIN typed / pasted here fills the Vehicle box ("2022 CHEVROLET SILVERADO 1500") from our server (window.DMS.vin:
  // MarketCheck -> NHTSA -> the VIN itself) when it is still blank. A typed vehicle stays; Undo puts it back.
  const bsTyped = React.useRef(new Set());
  const set = (k, v) => { bsTyped.current.add(k); setF(s => ({ ...s, [k]: v })); };
  const vinFill = (typeof VlUseVinFill === "function") ? VlUseVinFill({
    vin: f.vin, keys: { vehicle: "ymm" }, read: () => f, write: (p) => setF(s => ({ ...s, ...p })), typed: () => bsTyped.current,
  }) : null;
  const submit = () => { const r = window.DMS.createBodyRO(f); act(r); if (r.ok) { onCreated(r.id); onClose(); } };
  return (
    <K2BModal title="New Body Shop RO" width={560} onClose={onClose} buttons={<><K2BButton onClick={onClose}>Cancel</K2BButton><K2BButton primary onClick={submit}>Create</K2BButton></>}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <BsField label={f.custNum ? `Customer (Customer # ${f.custNum})` : "Customer — find by name, phone or Customer #"}>
          <div style={{ position: "relative" }}>
            <input autoComplete="off" data-lpignore="true" data-1p-ignore="true" data-form-type="other" name="k2b-find-bodyshop-1" id="bs-new-customer" value={f.custNum ? f.customer : cq} placeholder="type to search the customer file, or a walk-in name"
                   onChange={(e) => { if (f.custNum) setF(s => ({ ...s, custNum: "", customer: "" })); setCq(e.target.value); setF(s => ({ ...s, customer: e.target.value.toUpperCase() })); }} style={bsInp} />
            {custRows.length > 0 && !f.custNum && (
              <div style={{ position: "absolute", zIndex: 5, top: "100%", left: 0, right: 0, background: "#FFF", border: "1px solid #C8CCD2", borderRadius: 4, boxShadow: "0 4px 12px rgba(0,0,0,0.12)", maxHeight: 200, overflow: "auto" }}>
                {custRows.map((c) => <div key={c.custNum} className="bs-cust-option" data-custnum={c.custNum} onClick={() => pickCust(c)} style={{ padding: "6px 9px", cursor: "pointer", fontSize: 12, borderTop: "1px solid #F0F1F4" }}><b>{c.name}</b> <span style={{ fontFamily: "var(--jb-mono)", color: "#555" }}>#{c.custNum}</span> {c.phone ? <span style={{ color: "#555" }}>· {c.phone}</span> : null}</div>)}
              </div>
            )}
          </div>
        </BsField>
        <BsField label="Vehicle"><input id="bs-new-vehicle" value={f.vehicle} onChange={(e) => set("vehicle", e.target.value)} style={bsInp} /></BsField>
        <BsField label="VIN"><input id="bs-new-vin" value={f.vin} onChange={(e) => set("vin", e.target.value.toUpperCase())} onBlur={() => vinFill && vinFill.onBlur()} spellCheck={false} style={{ ...bsInp, fontFamily: "var(--jb-mono)" }} /></BsField>
        {vinFill && typeof VlVinNote === "function" && <div style={{ gridColumn: "1 / -1" }}><VlVinNote fill={vinFill} id="bs-vin-note" /></div>}
        <BsField label="Pay Type"><select value={f.payType} onChange={(e) => set("payType", e.target.value)} style={bsInp}><option>Insurance</option><option>Customer</option></select></BsField>
        <BsField label="Insurer"><input value={f.insurer} onChange={(e) => set("insurer", e.target.value)} placeholder="e.g. State Farm" style={bsInp} /></BsField>
        <BsField label="Claim #"><input value={f.claimNo} onChange={(e) => set("claimNo", e.target.value)} style={bsInp} /></BsField>
        <BsField label="Deductible $"><input value={f.deductible} onChange={(e) => set("deductible", e.target.value.replace(/[^0-9.]/g, ""))} style={bsInp} /></BsField>
      </div>
    </K2BModal>
  );
};

const BsLaborModal = ({ ro, act, onClose }) => {
  const [f, setF] = React.useState({ type: "body", desc: "", hours: "", rate: "" });
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const rate = f.rate || bsRateFor(f.type);   // RC32: M5 (default = today's 58 / 62 / 75 / 145)
  return (
    <K2BModal title="Add Labor Operation" width={520} onClose={onClose} buttons={<><K2BButton onClick={onClose}>Cancel</K2BButton><K2BButton primary onClick={() => { act(window.DMS.addBodyLine(ro.id, { ...f, rate: f.rate || rate })); onClose(); }}>Add</K2BButton></>}>
      <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
        {BS_LABOR.map(o => <button key={o.k} className="k2b-button small" onClick={() => set("type", o.k)} style={f.type === o.k ? { background: o.color, color: "#fff", borderColor: o.color, fontWeight: 700 } : {}}>{o.label}</button>)}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: 12 }}>
        <BsField label="Description"><input value={f.desc} onChange={(e) => set("desc", e.target.value)} placeholder="e.g. R&R front bumper cover" style={bsInp} /></BsField>
        <BsField label="Hours"><input value={f.hours} onChange={(e) => set("hours", e.target.value.replace(/[^0-9.]/g, ""))} style={bsInp} /></BsField>
        <BsField label={"Rate ($/hr, def " + rate + ")"}><input value={f.rate} onChange={(e) => set("rate", e.target.value.replace(/[^0-9.]/g, ""))} placeholder={String(rate)} style={bsInp} /></BsField>
      </div>
    </K2BModal>
  );
};

const BsPartModal = ({ ro, act, onClose }) => {
  const parts = window.DMS ? window.DMS.parts() : [];
  const [q, setQ] = React.useState(""); const [qty, setQty] = React.useState("1");
  const matches = q.length >= 2 ? parts.filter(p => p.part.toLowerCase().includes(q.toLowerCase()) || (p.desc || "").toLowerCase().includes(q.toLowerCase())).slice(0, 8) : [];
  return (
    <K2BModal title="Reserve Part from Inventory" width={560} onClose={onClose} buttons={<><K2BButton onClick={onClose}>Close</K2BButton></>}>
      <div style={{ display: "flex", gap: 8, marginBottom: 10 }}>
        <input autoComplete="off" data-lpignore="true" data-1p-ignore="true" data-form-type="other" name="k2b-find-bodyshop-2" autoFocus value={q} onChange={(e) => setQ(e.target.value)} placeholder="part # or description…" style={{ ...bsInp, flex: 1 }} />
        <input value={qty} onChange={(e) => setQty(e.target.value.replace(/[^0-9]/g, ""))} style={{ ...bsInp, width: 70 }} />
      </div>
      <div style={{ maxHeight: 260, overflow: "auto", border: "1px solid #EEE", borderRadius: 6 }}>
        {matches.length === 0 ? <div style={{ padding: 14, color: "#999", fontSize: 12.5 }}>Type to search the parts master.</div> : matches.map(p => {
          const avail = p.onHand - p.committed;
          return (
            <div key={p.part} style={{ display: "flex", alignItems: "center", gap: 10, padding: "7px 12px", borderTop: "1px solid #F0F0F0" }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: "var(--jb-mono)", fontWeight: 700, color: "var(--jb-navy)" }}>{p.part}</div>
                <div style={{ fontSize: 11.5, color: "#888" }}>{p.desc} · avail {avail} · {bsMoney(p.list)}</div>
              </div>
              <button className="k2b-button small" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => act(window.DMS.reserveBodyPart(ro.id, p.part, +qty || 1))}>Reserve</button>
            </div>
          );
        })}
      </div>
    </K2BModal>
  );
};

const BsSubletModal = ({ ro, act, onClose }) => {
  const [f, setF] = React.useState({ vendor: "", desc: "", cost: "", sale: "" });
  const mk = (bsCfg() && bsCfg().money.subletMarkup) || { on: false, factor: 1.25 };   // M4: fill the sale in from the cost (off = today)
  const typed = React.useRef(false);
  const set = (k, v) => setF(s => { const n = { ...s, [k]: v }; if (k === "sale") typed.current = true; if (k === "cost" && mk.on && !typed.current) n.sale = v ? (Math.round(+v * mk.factor * 100) / 100).toFixed(2) : ""; return n; });
  return (
    <K2BModal title="Add Sublet" width={520} onClose={onClose} buttons={<><K2BButton onClick={onClose}>Cancel</K2BButton><K2BButton primary onClick={() => { act(window.DMS.addSublet(ro.id, f)); onClose(); }}>Add</K2BButton></>}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <BsField label="Vendor"><input value={f.vendor} onChange={(e) => set("vendor", e.target.value)} placeholder="e.g. Courtois Glass" style={bsInp} /></BsField>
        <BsField label="Description"><input value={f.desc} onChange={(e) => set("desc", e.target.value)} placeholder="windshield R&R" style={bsInp} /></BsField>
        <BsField label="Vendor Cost $"><input value={f.cost} onChange={(e) => set("cost", e.target.value.replace(/[^0-9.]/g, ""))} style={bsInp} /></BsField>
        <BsField label={mk.on ? `Sale $ (cost × ${mk.factor})` : "Sale $ (def cost ×1.25)"}><input value={f.sale} onChange={(e) => set("sale", e.target.value.replace(/[^0-9.]/g, ""))} style={bsInp} /></BsField>
      </div>
    </K2BModal>
  );
};

const BsSuppModal = ({ ro, act, onClose }) => {
  const [f, setF] = React.useState({ desc: "", amount: "" });
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  return (
    <K2BModal title="Submit Supplement" width={480} onClose={onClose} buttons={<><K2BButton onClick={onClose}>Cancel</K2BButton><K2BButton primary onClick={() => { act(window.DMS.addSupplement(ro.id, f)); onClose(); }}>Submit</K2BButton></>}>
      <BsField label="Description"><input value={f.desc} onChange={(e) => set("desc", e.target.value)} placeholder="hidden damage found on teardown" style={bsInp} /></BsField>
      <div style={{ height: 10 }} />
      <BsField label="Supplement Amount $"><input value={f.amount} onChange={(e) => set("amount", e.target.value.replace(/[^0-9.]/g, ""))} style={bsInp} /></BsField>
      <div style={{ fontSize: 11.5, color: "#888", marginTop: 8 }}>Pending supplements must be approved or denied before the RO can be closed. Approved amounts add to the invoice total.</div>
    </K2BModal>
  );
};

const BsImportModal = ({ ro, act, onClose }) => {
  const [text, setText] = React.useState("");
  const sample = "body, R&R front bumper cover, 2.5\npaint, refinish bumper, 3.0\nframe, pull LH rail, 4.0\n19260218, , 1\nbody, blend LH fender, 1.5";
  const parse = () => text.split(/\r?\n/).map(l => l.trim()).filter(Boolean).map(l => {
    const c = l.split(",").map(x => x.trim());
    // part rows: first cell looks like a part number (alnum, no space) + qty in 3rd
    if (/^[A-Z0-9\-]{6,}$/i.test(c[0]) && !BS_LABOR.find(b => b.k === c[0].toLowerCase())) return { part: c[0], qty: c[2] || c[1] || 1 };
    return { type: c[0], desc: c[1], hours: c[2] };
  });
  const rows = text ? parse() : [];
  return (
    <K2BModal title={"Import Estimate → " + ro.id} width={640} onClose={onClose}
      buttons={<><K2BButton onClick={() => setText(sample)}>Load Sample</K2BButton><K2BButton onClick={onClose}>Cancel</K2BButton><K2BButton primary onClick={() => { act(window.DMS.importBodyEstimate(ro.id, parse())); onClose(); }}>Import {rows.length ? "(" + rows.length + ")" : ""}</K2BButton></>}>
      <div style={{ fontSize: 12.5, color: "#555", marginBottom: 8 }}>Paste estimate lines (from CCC / Mitchell / Audatex export), one per line:</div>
      <div style={{ fontFamily: "var(--jb-mono)", fontSize: 11, color: "#888", marginBottom: 6 }}>labor: <b>type, description, hours</b> &nbsp;·&nbsp; part: <b>part#, , qty</b></div>
      <textarea value={text} onChange={(e) => setText(e.target.value)} rows={7} placeholder={sample} style={{ width: "100%", boxSizing: "border-box", fontFamily: "var(--jb-mono)", fontSize: 12, border: "1px solid #808080", padding: 8, background: "#FFFEF4", resize: "vertical" }} />
      {rows.length > 0 && <div style={{ fontSize: 11.5, color: "#888", marginTop: 8 }}>{rows.filter(r => r.part).length} part line(s), {rows.filter(r => !r.part).length} labor line(s) — parts reserve from inventory.</div>}
    </K2BModal>
  );
};

Object.assign(window, { BodyShop });