/* 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 — Parts Department.
// Full parts operations that read/write the shared DMSCore ledger:
//   Master File · Inventory Control · Special Orders · Purchase Orders ·
//   Cores · Obsolescence · Physical Inventory.
// Every sale/receipt/adjustment posts to the GL through the engine.

const PartsDept = ({ onClose, go }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => DMS.subscribe(force), []);
  const [tab, setTab]   = React.useState("master");
  const [q, setQ]       = React.useState("");
  const [modal, setModal] = React.useState(null);

  const parts  = DMS.parts();
  const orders = DMS.partsOrders();
  const cores  = DMS.cores();
  const money = (n) => "$" + Number(n || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  // RC26 (inv): the parts money actions are server commands (they answer later) — a result or a promise of one
  const act = (r) => Promise.resolve(r).then((x) => { x = x || { ok: false, msg: "No answer." }; window.k2bToast && window.k2bToast(x.msg, x.ok ? "ok" : "warn", x.ok ? 3500 : 8000); return x; });

  const filtered = parts.filter(p => !q ||
    p.part.toLowerCase().includes(q.toLowerCase()) || (p.desc || "").toLowerCase().includes(q.toLowerCase()));

  const specialOrders = parts.filter(p => p.specialOrder);
  const obsolete = parts.filter(p => p.age >= 365 || (p.lastSale && (Date.now() - new Date(p.lastSale)) / 86400000 >= 365) || (!p.lastSale && p.age >= 180));

  const invValue = parts.reduce((s, p) => s + Math.max(0, p.onHand) * p.cost, 0);

  const TABS = [
    { k: "master",  label: "Master File" },
    { k: "special", label: `Special Orders (${specialOrders.length})` },
    { k: "po",      label: `Purchase Orders (${orders.filter(o => o.status === "Open").length})` },
    { k: "cores",   label: `Core Bank (${cores.filter(c => c.status !== "Credited" && c.status !== "Returned to Mfr" && c.status !== "Part Returned").length})` },
    { k: "obsolete",label: `Obsolescence (${obsolete.length})` },
    { k: "physical",label: "Physical Inventory" },
  ];

  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 1240, height: "calc(100vh - 110px)",
                                          margin: "0 auto", display: "flex", flexDirection: "column",
                                          background: "var(--jb-surface, #F4F4F4)" }}>
      <K2BTitlebar title="Parts Department" icon="store" onClose={onClose} />

      {/* KPI strip */}
      <div style={{ display: "flex", gap: 10, padding: "10px 16px", borderBottom: "1px solid var(--jb-border, #C0C0C0)", flexWrap: "wrap" }}>
        <PKpi label="Inventory Value" value={money(invValue)} />
        <PKpi label="Line Items" value={parts.length} />
        <PKpi label="Negative On-Hand" value={parts.filter(p => p.onHand < 0).length} tone={parts.some(p => p.onHand < 0) ? "red" : "ok"} />
        <PKpi label="Special Orders" value={specialOrders.length} tone={specialOrders.length ? "amber" : "ok"} />
        <PKpi label="Open POs" value={orders.filter(o => o.status === "Open").length} />
        <PKpi label="Obsolete" value={obsolete.length} tone={obsolete.length ? "amber" : "ok"} />
        <div style={{ flex: 1 }} />
        <K2BButton small onClick={() => setModal({ type: "addPart" })} style={{ background: "var(--jb-yellow, #FFE9B0)", fontWeight: 700 }}>+ Add Part</K2BButton>
        <K2BButton small onClick={() => setModal({ type: "newPO" })}>+ New PO</K2BButton>
      </div>

      {/* Tabs */}
      <div style={{ display: "flex", gap: 4, padding: "8px 16px 0", borderBottom: "1px solid var(--jb-border, #C0C0C0)", flexWrap: "wrap" }}>
        {TABS.map(t => (
          <button key={t.k} className="k2b-button small" onClick={() => setTab(t.k)}
                  style={{ background: tab === t.k ? "var(--jb-navy, #1B66A8)" : undefined,
                           color: tab === t.k ? "#FFF" : undefined, fontWeight: tab === t.k ? 700 : 500,
                           borderBottom: tab === t.k ? "2px solid var(--jb-navy)" : undefined }}>
            {t.label}
          </button>
        ))}
      </div>

      <div style={{ flex: 1, overflow: "auto", padding: "12px 16px" }}>

        {/* ── MASTER FILE / INVENTORY CONTROL ── */}
        {tab === "master" && (
          <>
            <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }}>
              <span style={{ fontWeight: 700, color: "var(--k2b-maroon, #8a1c1c)" }}>Find:</span>
              <input autoComplete="off" data-lpignore="true" data-1p-ignore="true" data-form-type="other" name="k2b-find-partsdept-1" value={q} onChange={(e) => setQ(e.target.value)} placeholder="part # or description"
                     style={{ flex: 1, maxWidth: 320, background: "var(--k2b-yellow, #FFFFE1)", border: "1px solid #808080",
                              padding: "2px 6px", fontFamily: "'Courier Prime', monospace" }} />
              <span style={{ color: "#666", fontSize: 11 }}>{filtered.length} parts · available = on-hand − committed</span>
            </div>
            <table style={partsTable}>
              <thead>
                <tr style={partsHeadRow}>
                  <th style={pTh}>Part #</th><th style={pThL}>Description</th><th style={pTh}>Bin</th>
                  <th style={pThR}>On Hand</th><th style={pThR}>Cmtd</th><th style={pThR}>Avail</th><th style={pThR}>On Ord</th>
                  <th style={pThR}>Cost</th><th style={pThR}>List</th><th style={pThR}>Trade</th><th style={pThC}>Sell</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map((p, i) => {
                  const avail = p.onHand - p.committed;
                  return (
                    <tr key={p.part} style={{ background: i % 2 ? "#F4F4F4" : "#FFF", borderBottom: "1px dotted #DDD" }}>
                      <td style={pTdMono}>{p.part}</td>
                      <td style={pTd}>{p.desc}{p.core ? <span style={{ color: "#B26A00", fontSize: 10 }}> · core ${p.core}</span> : null}</td>
                      <td style={{ ...pTdMono, color: p.bin ? "var(--k2b-navy)" : "#C03546" }}>{p.bin || "— none —"}</td>
                      <td style={{ ...pTdR, color: p.onHand < 0 ? "#C03546" : "var(--k2b-blue-data-dk)", fontWeight: p.onHand < 0 ? 700 : 400 }}>{p.onHand}</td>
                      <td style={pTdR}>{p.committed || ""}</td>
                      <td style={{ ...pTdR, fontWeight: 700, color: avail <= 0 ? "#C03546" : "var(--k2b-green)" }}>{avail}</td>
                      <td style={pTdR}>{p.onOrder || ""}</td>
                      <td style={pTdR}>{money(p.cost)}</td>
                      <td style={pTdR}>{money(p.list)}</td>
                      <td style={pTdR}>{money(p.trade)}</td>
                      <td style={pTdC}>
                        <button className="k2b-button small" onClick={() => setModal({ type: "sell", part: p })}>Sell</button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </>
        )}

        {/* ── SPECIAL ORDERS ── */}
        {tab === "special" && (
          <table style={partsTable}>
            <thead>
              <tr style={partsHeadRow}>
                <th style={pTh}>Part #</th><th style={pThL}>Description</th><th style={pThL}>Customer / RO</th>
                <th style={pTh}>Ordered</th><th style={pTh}>ETA</th><th style={pTh}>Status</th><th style={pThC}>Action</th>
              </tr>
            </thead>
            <tbody>
              {specialOrders.length === 0 && <tr><td colSpan={7} style={{ padding: 14, textAlign: "center", color: "#888" }}>No open special orders.</td></tr>}
              {specialOrders.map(p => {
                const so = p.specialOrder;
                return (
                  <tr key={p.part} style={{ borderBottom: "1px dotted #DDD" }}>
                    <td style={pTdMono}>{p.part}</td>
                    <td style={pTd}>{p.desc}</td>
                    <td style={pTd}>{so.customer}<br/><span style={{ fontSize: 10, color: "#666" }}>{so.ro} · {so.advisor}</span></td>
                    <td style={pTdMono}>{so.ordered ? new Date(so.ordered).toLocaleDateString() : "—"}</td>
                    <td style={pTdMono}>{so.eta ? new Date(so.eta).toLocaleDateString() : "—"}</td>
                    <td style={pTd}>
                      <span style={{ fontSize: 11, fontWeight: 700,
                        color: so.installed ? "var(--k2b-green)" : so.received ? "#B26A00" : "#666" }}>
                        {so.installed ? "Installed" : so.received ? "Received — not installed" : "On order"}
                      </span>
                      {so.received && !so.installed && <div style={{ fontSize: 10, color: so.contacted ? "var(--k2b-green)" : "#C03546" }}>{so.contacted ? "✓ customer contacted" : "⚠ customer not contacted"}</div>}
                    </td>
                    <td style={pTdC}>
                      {so.received && !so.installed && (
                        <div style={{ display: "flex", gap: 4, justifyContent: "center" }}>
                          {!so.contacted && <button className="k2b-button small" onClick={() => act(DMS.contactSpecialOrderCustomer(p.part))}>Contact</button>}
                          <button className="k2b-button small" style={{ background: "var(--jb-yellow)", fontWeight: 700 }}
                                  onClick={() => act(DMS.markSpecialOrderInstalled(p.part))}>Installed</button>
                        </div>
                      )}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}

        {/* ── PURCHASE ORDERS ── */}
        {tab === "po" && (
          <table style={partsTable}>
            <thead>
              <tr style={partsHeadRow}>
                <th style={pTh}>PO #</th><th style={pThL}>Type</th><th style={pThL}>Vendor</th>
                <th style={pTh}>Created</th><th style={pThR}>Lines</th><th style={pThR}>Est. Cost</th>
                <th style={pTh}>Status</th><th style={pThC}>Action</th>
              </tr>
            </thead>
            <tbody>
              {orders.length === 0 && <tr><td colSpan={8} style={{ padding: 14, textAlign: "center", color: "#888" }}>No purchase orders.</td></tr>}
              {orders.map(o => {
                const est = o.lines.reduce((s, l) => s + l.qty * l.cost, 0);
                return (
                  <tr key={o.po} style={{ borderBottom: "1px dotted #DDD" }}>
                    <td style={pTdMono}>{o.po}</td>
                    <td style={pTd}>{o.type}</td>
                    <td style={pTd}>{o.vendor}</td>
                    <td style={pTdMono}>{new Date(o.created).toLocaleDateString()}</td>
                    <td style={pTdR}>{o.lines.length}</td>
                    <td style={pTdR}>{money(est)}</td>
                    <td style={pTd}><span style={{ fontWeight: 700, color: o.status === "Received" ? "var(--k2b-green)" : "#B26A00" }}>{o.status}</span>{Array.isArray(o.receipts) && o.receipts.length ? <span style={{ fontSize: 10.5, color: "#666" }}> · {o.receipts.length} receipt{o.receipts.length === 1 ? "" : "s"}</span> : null}</td>
                    <td style={pTdC}>
                      {(o.status === "Open" || o.status === "Partial") && <button className="k2b-button small" data-parts-receive={o.po} style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => setModal({ type: "receivePO", po: o.po })}>Receive</button>}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}

        {/* ── CORE BANK (engine / transmission / battery & other reman cores) ── */}
        {tab === "cores" && (() => {
          const cb = DMS.coreBankSummary ? DMS.coreBankSummary() : { rows: [], totalOpen: 0, dueFromCustomer: 0, onShelf: 0, shipped: 0, count: 0 };
          const TYPE_ICON = { Engine: "🛠", Transmission: "⚙", Battery: "🔋", Alternator: "🔌", Starter: "🔑", Brake: "🛞", Driveline: "🪛", Turbo: "🌀", Other: "📦" };
          const openCores = cores.filter(c => c.status !== "Credited" && c.status !== "Part Returned");   // RC26 fix round: "Part Returned" = the sold part came back on a counter return — nothing due
          const doneCores = cores.filter(c => c.status === "Credited" || c.status === "Part Returned");
          const m2 = (v) => "$" + (Number(v) || 0).toFixed(2);
          const coreAge = (c) => c.created ? Math.max(0, Math.floor((Date.now() - new Date(c.created)) / 86400000)) : (c.age || 0);
          return (
          <div>
            {/* Pipeline summary */}
            <div style={{ display: "flex", gap: 8, marginBottom: 10, flexWrap: "wrap" }}>
              <PKpi label="Open cores" value={cb.count} tone={cb.count ? "amber" : "ok"} />
              <PKpi label="Due from customer" value={money(cb.dueFromCustomer)} tone={cb.dueFromCustomer ? "amber" : "ok"} />
              <PKpi label="On core shelf" value={money(cb.onShelf)} />
              <PKpi label="Shipped — awaiting credit" value={money(cb.shipped)} />
              <PKpi label="Total outstanding" value={money(cb.totalOpen)} tone="navy" />
              <div style={{ flex: 1 }} />
              <K2BButton small onClick={() => setModal({ type: "addCore" })} style={{ background: "var(--jb-yellow, #FFE9B0)", fontWeight: 700 }}>+ Log Core</K2BButton>
            </div>

            {/* By-type cards (Engine / Transmission / Battery first) */}
            {cb.rows.length > 0 && (
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: 8, marginBottom: 12 }}>
                {cb.rows.map(r => (
                  <div key={r.type} style={{ border: "1px solid #C0C0C0", background: "#FAFAFA", padding: "6px 10px" }}>
                    <div style={{ fontSize: 12, fontWeight: 700, color: "var(--k2b-navy)", display: "flex", alignItems: "center", gap: 6 }}>
                      <span>{TYPE_ICON[r.type] || "📦"}</span>{r.type}
                      <span style={{ flex: 1 }} />
                      <span style={{ color: "#888", fontWeight: 400 }}>{r.count}</span>
                    </div>
                    <div style={{ fontFamily: "'Courier Prime', monospace", fontSize: 15, fontWeight: 700, color: "var(--k2b-blue-data-dk)" }}>{money(r.amount)}</div>
                    <div style={{ fontSize: 10, color: "#777" }}>
                      {r.dueCust ? `${money(r.dueCust)} due · ` : ""}{r.onShelf ? `${money(r.onShelf)} shelf · ` : ""}{r.shipped ? `${money(r.shipped)} shipped` : ""}
                      {!r.dueCust && !r.onShelf && !r.shipped ? "—" : ""}
                    </div>
                  </div>
                ))}
              </div>
            )}

            {/* Outstanding core table with lifecycle actions */}
            <table style={partsTable}>
              <thead>
                <tr style={partsHeadRow}>
                  <th style={pThL}>Type</th><th style={pTh}>Part #</th><th style={pThL}>Description</th>
                  <th style={pThL}>RO / Customer</th><th style={pThR}>Core $</th><th style={pThR}>Age</th>
                  <th style={pTh}>Status</th><th style={pThC}>Next step</th>
                </tr>
              </thead>
              <tbody>
                {openCores.length === 0 && <tr><td colSpan={8} style={{ padding: 14, textAlign: "center", color: "#888" }}>No outstanding cores. Reman engine, transmission and battery core charges show up here.</td></tr>}
                {openCores.map((c) => {
                  const st = c.status;
                  return (
                    <tr key={c.id || c.part} style={{ borderBottom: "1px dotted #DDD" }}>
                      <td style={pTd}><span style={{ fontWeight: 700 }}>{TYPE_ICON[c.coreType] || "📦"} {c.coreType || "Other"}</span></td>
                      <td style={pTdMono}>{c.part || "—"}</td>
                      <td style={pTd}>{c.desc}</td>
                      <td style={pTd}>{c.ro}{c.customer ? ` · ${c.customer}` : ""}</td>
                      <td style={pTdR}>{money(c.amount)}</td>
                      <td style={{ ...pTdR, color: coreAge(c) > 30 ? "#C03546" : undefined, fontWeight: coreAge(c) > 30 ? 700 : 400 }}>{coreAge(c)}d</td>
                      <td style={pTd}>
                        <span style={{ fontWeight: 700, color:
                          st === "Due from Customer" ? "#C03546" :
                          st === "On Core Shelf" ? "#B26A00" :
                          st === "Shipped to Mfr" ? "var(--k2b-blue-data-dk)" : "var(--k2b-green)" }}>{st}</span>
                      </td>
                      <td style={pTdC}>
                        {st === "Due from Customer" && <button className="k2b-button small" data-core-receive={c.id} style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => { const held = c.depositCollected && c.depositAcct; const where = held ? (c.tender === "charge" ? `CREDITED BACK TO A/R ACCOUNT ${c.tenderAccount} out of the deposit held (${c.depositAcct})` : `REFUNDED FROM THE BANK (202) out of the deposit collected on ${c.ticket || "the ticket"} and held in ${c.depositAcct}`) : "REFUNDED FROM THE BANK (202)"; if (!window.confirm(`Receive core ${c.part || c.id}${c.customer ? " from " + c.customer : ""}?\n\nThe customer's core deposit of ${m2(c.amount)} is ${where} and the core goes on the core shelf (246) — entry COC-${c.id}.${held ? "" : "\n\n(This core is from before RC28: no deposit was collected on its ticket.)"}\n\nOnly press OK when the old unit is here.`)) return; act(DMS.collectCore(c.id)); }} title="Customer brought the old unit back — the server refunds the deposit from the bank (COC-: DR 246 / CR 202) and puts the core on the shelf">Receive Core</button>}
                        {st === "On Core Shelf" && <button className="k2b-button small" data-core-ship={c.id} style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => { const claim = window.prompt("Ship core " + (c.part || c.id) + " to GM — a vendor credit of " + m2(c.amount) + " is then expected (no money moves now).\n\nReturn claim # (blank = the next GMCR number):", ""); if (claim === null) return; act(DMS.shipCore(c.id, claim)); }} title="Ship the core back to GM on a return claim — the server writes the vendor credit document">Ship to GM</button>}
                        {st === "Shipped to Mfr" && <button className="k2b-button small" data-core-credit={c.id} style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => { if (!window.confirm(`Post the GM core credit for ${c.part || c.id}${c.claimNo ? " (claim " + c.claimNo + ")" : ""}?\n\n${m2(c.amount)} goes INTO THE BANK (202) and the core shelf (246) is cleared — entry COG-${c.id}. A core is credited once.\n\nOnly press OK when the credit has arrived.`)) return; act(DMS.creditCore(c.id)); }} title="GM core credit received — the server posts COG- (DR 202 / CR 246) once">Post Credit</button>}
                        {st === "Shipped to Mfr" && <button className="k2b-button small" data-core-credit-short={c.id} style={{ marginLeft: 4 }} onClick={() => {   // RC33 (mpx, B16): the vendor credited LESS than the core charge (or rejected the core) — the difference is a core loss (688) with a reason
                          const a = window.prompt(`Short core credit for ${c.part || c.id}${c.claimNo ? " (claim " + c.claimNo + ")" : ""}.\n\nThe core charge is ${m2(c.amount)}. Type what the vendor CREDITED (0 = the core was rejected). What goes into the bank (202) is that amount; the rest is a core loss (688). The core shelf (246) is cleared — entry COG-${c.id}. A core is credited once.\n\nOnly press OK when the credit has arrived.`, "");
                          if (a === null || !String(a).trim()) return;
                          const got = String(a).trim();
                          if (Math.round(parseFloat(got.replace(/[$,]/g, "")) * 100) === Math.round((+c.amount || 0) * 100)) { act(DMS.creditCore(c.id)); return; }
                          const why = window.prompt("The vendor credited less than the core charge — why? (damaged, rejected, wrong core …)", "");
                          if (!why || !why.trim()) return;
                          act(DMS.creditCore(c.id, { amount: got, reason: why.trim() }));
                        }} title="The vendor credited less than the core charge, or rejected the core — the server posts COG- once with the difference as a core loss (688)">Short credit</button>}
                        {c.creditDocId && <div style={{ fontSize: 10, color: "#666" }}>credit doc {c.creditDocId}{c.claimNo ? " · claim " + c.claimNo : ""}</div>}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>

            {doneCores.length > 0 && (
              <details style={{ marginTop: 10 }}>
                <summary style={{ cursor: "pointer", fontSize: 12, color: "#666" }}>Credited / closed cores ({doneCores.length})</summary>
                <table style={{ ...partsTable, marginTop: 4 }}>
                  <tbody>
                    {doneCores.map((c) => (
                      <tr key={c.id || c.part} style={{ borderBottom: "1px dotted #EEE", color: "#888" }}>
                        <td style={pTd}>{TYPE_ICON[c.coreType] || "📦"} {c.coreType}</td>
                        <td style={pTdMono}>{c.part}</td>
                        <td style={pTd}>{c.desc}</td>
                        <td style={pTdR}>{money(c.amount)}</td>
                        <td style={pTd}>{c.claimNo || ""}{c.cogJeId ? " · " + c.cogJeId : ""}{c.closedReturnId ? "part came back on " + c.closedReturnId : ""}</td>
                        <td style={pTd}><span data-core-closed={c.id} style={{ color: "var(--k2b-green)", fontWeight: 700 }}>{c.status === "Part Returned" ? "Part Returned" : "Credited"}</span></td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </details>
            )}
          </div>
          );
        })()}

        {/* ── OBSOLESCENCE ── */}
        {tab === "obsolete" && (
          <>
            <div style={{ marginBottom: 8, fontSize: 12, color: "#666" }}>
              Parts with no sale in 12+ months (or special parts aged 6+ months with no sale). Trapped cash:
              <b style={{ color: "#C03546" }}> {money(obsolete.reduce((s, p) => s + Math.max(0, p.onHand) * p.cost, 0))}</b>
            </div>
            <table style={partsTable}>
              <thead>
                <tr style={partsHeadRow}>
                  <th style={pTh}>Part #</th><th style={pThL}>Description</th><th style={pThR}>On Hand</th>
                  <th style={pThR}>Cost Ea</th><th style={pThR}>Trapped</th><th style={pTh}>Last Sale</th><th style={pTh}>Returnable</th>
                </tr>
              </thead>
              <tbody>
                {obsolete.length === 0 && <tr><td colSpan={7} style={{ padding: 14, textAlign: "center", color: "var(--k2b-green)" }}>No obsolete parts. ✓</td></tr>}
                {obsolete.map(p => (
                  <tr key={p.part} style={{ borderBottom: "1px dotted #DDD" }}>
                    <td style={pTdMono}>{p.part}</td><td style={pTd}>{p.desc}</td>
                    <td style={pTdR}>{p.onHand}</td><td style={pTdR}>{money(p.cost)}</td>
                    <td style={{ ...pTdR, color: "#C03546", fontWeight: 700 }}>{money(Math.max(0, p.onHand) * p.cost)}</td>
                    <td style={pTdMono}>{p.lastSale ? new Date(p.lastSale).toLocaleDateString() : "never"}</td>
                    <td style={pTd}>{p.returnable ? <span style={{ color: "var(--k2b-green)" }}>Yes</span> : <span style={{ color: "#C03546" }}>No</span>}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </>
        )}

        {/* ── PHYSICAL INVENTORY ── */}
        {tab === "physical" && (
          <>
            <div style={{ marginBottom: 8, fontSize: 12, color: "#666" }}>
              Enter the counted quantity and the reason; the server posts the variance at the part's cost (PI-: parts inventory <b>242</b> against adjustment <b>688</b>) and moves the stock — both together or nothing. A count never goes below zero; a large change may need the office (the owner's count limit).
            </div>
            <table style={partsTable}>
              <thead>
                <tr style={partsHeadRow}>
                  <th style={pTh}>Part #</th><th style={pThL}>Description</th><th style={pTh}>Bin</th>
                  <th style={pThR}>System</th><th style={pThC}>Counted</th><th style={pThL}>Reason</th><th style={pThC}>Post</th>
                </tr>
              </thead>
              <tbody>
                {parts.map(p => <PhysRow key={p.part} p={p} money={money} act={act} />)}
              </tbody>
            </table>
          </>
        )}
      </div>

      {/* Footer F-keys */}
      <div style={{ borderTop: "1px solid var(--jb-border, #C0C0C0)", padding: "8px 16px", display: "flex", gap: 6, flexWrap: "wrap" }}>
        <K2BButton small onClick={onClose}>ESC-Close</K2BButton>
        <K2BButton small onClick={() => setModal({ type: "addPart" })}>F2-Add Part</K2BButton>
        <K2BButton small onClick={() => setModal({ type: "scan" })} style={{ background: "var(--jb-navy, #1B66A8)", color: "#FFF", fontWeight: 700 }}>📷 Scan Part</K2BButton>
        <K2BButton small onClick={() => setModal({ type: "bulkoil" })}>🛢 Bulk Oil</K2BButton>
        <K2BButton small onClick={() => setModal({ type: "import" })} style={{ background: "var(--jb-yellow, #FFD24A)", fontWeight: 700 }}>⤓ Import GM Master</K2BButton>
        <K2BButton small onClick={() => setModal({ type: "newPO" })}>F3-New PO</K2BButton>
        <K2BButton small onClick={() => go && go("parts")}>F4-Parts Ticket</K2BButton>
        <K2BButton small onClick={() => go && go("service")}>F5-Service RO</K2BButton>
        <K2BButton small onClick={() => go && go("accounting")}>F6-Accounting</K2BButton>
      </div>

      {modal && modal.type === "sell"    && <SellPartDialog part={modal.part} onClose={() => setModal(null)} act={act} money={money} />}
      {modal && modal.type === "addPart" && <AddPartDialog onClose={() => setModal(null)} act={act} prefill={modal.prefill} />}
      {modal && modal.type === "newPO"   && <NewPODialog parts={parts} onClose={() => setModal(null)} act={act} money={money} />}
      {modal && modal.type === "addCore" && <AddCoreDialog onClose={() => setModal(null)} act={act} />}
      {modal && modal.type === "receivePO" && typeof PartsReceivePODialog === "function" && <PartsReceivePODialog po={modal.po} onClose={() => setModal(null)} act={act} />}
      {modal && modal.type === "import"  && <ImportMasterDialog onClose={() => setModal(null)} act={act} />}
      {modal && modal.type === "bulkoil" && <BulkOilDialog onClose={() => setModal(null)} act={act} />}
      {modal && modal.type === "scan"    && <ScanPartDialog parts={parts} onClose={() => setModal(null)}
          onFound={(p) => setModal({ type: "sell", part: p })}
          onUnknown={(code) => setModal({ type: "addPart", prefill: code })} act={act} />}
    </div>
  );
};

// KPI pill for the Parts header strip
const PKpi = ({ label, value, tone }) => {
  const border = tone === "red" ? "#C03546" : tone === "amber" ? "#D9920A" : tone === "ok" ? "var(--jb-green, #16A34A)" : "var(--jb-border, #C0C0C0)";
  const color  = tone === "red" ? "#C03546" : tone === "amber" ? "#9A6700" : "var(--jb-navy, #11337A)";
  return (
    <div style={{ background: "#FFF", border: "1px solid " + border, borderRadius: 6, padding: "6px 12px", minWidth: 96 }}>
      <div style={{ fontSize: 10, color: "#666", textTransform: "uppercase", letterSpacing: "0.04em", fontWeight: 600 }}>{label}</div>
      <div style={{ fontSize: 17, fontWeight: 700, color, lineHeight: 1.1 }}>{value}</div>
    </div>
  );
};

// Physical-inventory row with a counted-qty input — RC26 (inv): Post is the server command POST /api/parts/adjust (reason required; the preview is
// PartsCalc.countAdjust, the same calculation the server commits)
const PARTS_COUNT_REASONS = ["Physical count", "Damaged", "Found / misplaced", "Lost / missing", "Wrong part in bin", "Other"];
const PhysRow = ({ p, money, act }) => {
  const [counted, setCounted] = React.useState("");
  const [why, setWhy] = React.useState("");
  const [other, setOther] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const PC = window.PartsCalc;
  const calc = counted === "" || !PC ? null : PC.countAdjust({ onHand: p.onHand, counted, cost: p.cost });
  const variance = calc && calc.ok ? calc.varianceMilli / 1000 : null;
  const reason = why === "Other" ? other.trim() : why;
  const post = async () => {
    if (!calc || !calc.ok) return act({ ok: false, msg: calc ? calc.problem : "Enter the counted quantity." });
    if (reason.length < 3) return act({ ok: false, msg: "Pick the reason for the count — it goes on the journal entry." });
    setBusy(true);
    const r = await act(DMS.adjustInventory(p.part, counted, reason));
    setBusy(false);
    if (r && r.ok) { setCounted(""); setWhy(""); setOther(""); }
  };
  return (
    <tr data-phys-row={p.part} style={{ borderBottom: "1px dotted #DDD" }}>
      <td style={pTdMono}>{p.part}</td><td style={pTd}>{p.desc}</td>
      <td style={pTdMono}>{p.bin || "—"}</td>
      <td style={pTdR}>{p.onHand}</td>
      <td style={pTdC}>
        <input data-phys-count={p.part} value={counted} onChange={(e) => setCounted(e.target.value.replace(/[^0-9.]/g, ""))}
               style={{ width: 56, textAlign: "right", background: "var(--k2b-yellow, #FFFFE1)", border: "1px solid #808080",
                        fontFamily: "'Courier Prime', monospace", padding: "0 4px" }} />
        {variance !== null && variance !== 0 && <span data-phys-var={p.part} style={{ marginLeft: 6, fontSize: 11, fontWeight: 700, color: variance > 0 ? "var(--k2b-green)" : "#C03546" }}>{variance > 0 ? "+" : ""}{variance} · {PC.fmt(calc.valueCents)}</span>}
        {calc && !calc.ok && <span style={{ marginLeft: 6, fontSize: 11, color: "#C03546" }}>not a quantity</span>}
      </td>
      <td style={pTd}>
        <select data-phys-reason={p.part} value={why} onChange={(e) => setWhy(e.target.value)} style={{ fontSize: 11.5 }}>
          <option value="">— reason —</option>
          {PARTS_COUNT_REASONS.map(x => <option key={x}>{x}</option>)}
        </select>
        {why === "Other" && <input value={other} onChange={(e) => setOther(e.target.value)} placeholder="say why" style={{ width: 110, fontSize: 11.5, marginLeft: 4 }} />}
      </td>
      <td style={pTdC}>
        <button className="k2b-button small" data-phys-post={p.part} disabled={counted === "" || busy}
                onClick={post}
                style={{ background: counted !== "" ? "var(--jb-yellow)" : undefined, fontWeight: 700 }}>{busy ? "Posting…" : "Post"}</button>
      </td>
    </tr>
  );
};

const SellPartDialog = ({ part, onClose, act, money }) => {
  const [qty, setQty] = React.useState("1");
  const [kind, setKind] = React.useState("retail");
  const [override, setOverride] = React.useState("");
  const [reason, setReason] = React.useState("");
  const avail = part.onHand - part.committed;
  const baseUnit = kind === "wholesale" ? part.trade : part.list;
  // round 2: a part with no price on file is never sold for $0.00 — it needs a one-time price and a reason (the server checks the same)
  const noPrice = !(window.FopsCalc && window.FopsCalc.toCents(baseUnit) > 0);
  const hasOverride = override !== "" && parseFloat(override) >= 0 && (noPrice || parseFloat(override) !== baseUnit);
  const unit = hasOverride ? parseFloat(override) : baseUnit;
  const n = parseInt(qty, 10) || 0;
  const sale = unit * n;
  // RC20 (fops): the preview is the server's calculation (integer cents, one tax, the shared rate); Post Sale = the checkout command
  const pvT = DMS.partsTicketPreview ? DMS.partsTicketPreview(n > 0 ? [{ part: part.part, qty: n, overrideUnit: hasOverride ? override : undefined }] : [], kind) : null;
  const tax = pvT ? pvT.taxCents / 100 : (kind === "wholesale" ? 0 : sale * (window.jbTaxRate ? window.jbTaxRate("parts") : 0.07225));
  const [posting, setPosting] = React.useState(false);
  return (
    <K2BModal title={`Sell Part — ${part.part}`} onClose={onClose}
              buttons={<>
                <K2BButton onClick={onClose}>Cancel</K2BButton>
                <K2BButton style={{ background: "var(--jb-yellow)", fontWeight: 700 }}
                           onClick={async () => { if (posting) return; if (noPrice && (!hasOverride || !reason.trim())) { act({ ok: false, msg: `${part.part} has no ${kind === "wholesale" ? "trade" : "list"} price in the parts file — enter a one-time price and the reason, or put the price in the parts file first.` }); return; } setPosting(true); const r = await DMS.sellPart(part.part, n, kind, hasOverride ? parseFloat(override) : undefined, hasOverride ? reason.trim() : undefined); setPosting(false); act(r); if (r.ok) onClose(); }}>{posting ? "Posting…" : "Post Sale"}</K2BButton>
              </>}>
      <div style={{ fontSize: 13, lineHeight: 1.8 }}>
        <div><b>{part.desc}</b></div>
        <div style={{ color: "#666", fontSize: 12 }}>Available: {avail} · On hand: {part.onHand} · Committed: {part.committed}</div>
        <div style={{ marginTop: 10, display: "grid", gridTemplateColumns: "110px 1fr", rowGap: 8, alignItems: "center" }}>
          <span>Sale type:</span>
          <span style={{ display: "flex", gap: 6 }}>
            <button className="k2b-button small" onClick={() => setKind("retail")} style={{ background: kind === "retail" ? "var(--jb-navy)" : undefined, color: kind === "retail" ? "#FFF" : undefined }}>Counter Retail</button>
            <button className="k2b-button small" onClick={() => setKind("wholesale")} style={{ background: kind === "wholesale" ? "var(--jb-navy)" : undefined, color: kind === "wholesale" ? "#FFF" : undefined }}>Wholesale</button>
          </span>
          <span>Quantity:</span>
          <input value={qty} onChange={(e) => setQty(e.target.value.replace(/[^0-9]/g, ""))}
                 style={{ width: 70, background: "var(--k2b-yellow)", border: "1px solid #808080", padding: "2px 6px", fontFamily: "'Courier Prime', monospace" }} />
          <span>List price:</span><span>{noPrice ? <b data-fops-sell-noprice="1" style={{ color: "#C03546" }}>none on file — enter a one-time price and a reason</b> : <>{money(baseUnit)} {kind === "wholesale" ? "(trade)" : "(list)"}</>}</span>
          <span>Override price:</span>
          <span style={{ display: "flex", gap: 8, alignItems: "center" }}>
            <input value={override} onChange={(e) => setOverride(e.target.value.replace(/[^0-9.]/g, ""))}
                   placeholder={"one-time — e.g. " + baseUnit}
                   style={{ width: 100, background: hasOverride ? "#FFFBEA" : "#FFF", border: "1px solid #808080", padding: "2px 6px", fontFamily: "'Courier Prime', monospace" }} />
            {hasOverride && <span style={{ fontSize: 11, color: "var(--k2b-maroon)", fontWeight: 700 }}>this sale only — master price unchanged</span>}
          </span>
          {(hasOverride || noPrice) && <><span>Reason:</span>
            <input data-fops-sell-reason="1" value={reason} onChange={(e) => setReason(e.target.value.slice(0, 200))} placeholder={noPrice ? "required — e.g. price per vendor quote" : "e.g. match competitor quote"}
                   style={{ background: "#FFF", border: "1px solid #808080", padding: "2px 6px" }} /></>}
          <span>Unit price:</span><span style={{ fontWeight: hasOverride ? 700 : 400, color: hasOverride ? "var(--k2b-maroon)" : undefined }}>{money(unit)}</span>
          <span>Sale:</span><span>{money(pvT ? pvT.subtotalCents / 100 : sale)}</span>
          <span>Tax:</span><span>{money(tax)}</span>
          {pvT && pvT.coreDepositCents ? <><span>Core deposit:</span><span data-fops-sell-core="1" title="Collected on this ticket and held for the customer — refunded when the old unit comes back (Core Bank › Receive Core)">{money(pvT.coreDepositCents / 100)} (refunded when the core comes back)</span></> : null}
          <span style={{ fontWeight: 700 }}>Total:</span><span style={{ fontWeight: 700 }}>{money(pvT ? pvT.totalCents / 100 : sale + tax)}</span>
        </div>
        {n > avail && <div style={{ marginTop: 8, color: "#C03546", fontSize: 12 }}>⚠ Only {avail} available.</div>}
      </div>
    </K2BModal>
  );
};

const AddPartDialog = ({ onClose, act, prefill }) => {
  const [f, setF] = React.useState({ part: prefill || "", desc: "", bin: "", cost: "", list: "" });   // RC26 fix round (audit F5): no opening on-hand — stock goes in with its books
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const suggested = f.cost ? DMS.matrixPrice(f.cost) : 0;
  return (
    <K2BModal title="Add Part to Master File" onClose={onClose}
              buttons={<>
                <K2BButton onClick={onClose}>Cancel</K2BButton>
                <K2BButton style={{ background: "var(--jb-yellow)", fontWeight: 700 }}
                           onClick={() => { act(DMS.addPart({ ...f, list: f.list || suggested })); onClose(); }}>Add Part</K2BButton>
              </>}>
      <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", rowGap: 8, columnGap: 8, alignItems: "center", fontSize: 13 }}>
        <span>Part #:</span><input value={f.part} onChange={(e) => set("part", e.target.value.toUpperCase())} style={inpStyle} />
        <span>Description:</span><input value={f.desc} onChange={(e) => set("desc", e.target.value.toUpperCase())} style={inpStyle} />
        <span>Bin:</span><input value={f.bin} onChange={(e) => set("bin", e.target.value.toUpperCase())} style={inpStyle} />
        <span>On Hand:</span><span data-addpart-onhand="0" style={{ fontSize: 11.5, color: "#555" }}><b>0</b> — a new part starts empty. Put its stock in with <b>Physical Inventory › Post count</b> or <b>Receive</b> on its purchase order (the stock and its value post together).</span>
        <span>Cost:</span><input value={f.cost} onChange={(e) => set("cost", e.target.value.replace(/[^0-9.]/g, ""))} style={{ ...inpStyle, width: 110 }} />
        <span>List:</span>
        <span style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <input value={f.list} onChange={(e) => set("list", e.target.value.replace(/[^0-9.]/g, ""))} placeholder={suggested ? String(suggested) : ""} style={{ ...inpStyle, width: 110 }} />
          {suggested ? <span style={{ fontSize: 11, color: "#666" }}>matrix suggests ${suggested}</span> : null}
        </span>
      </div>
    </K2BModal>
  );
};

const NewPODialog = ({ parts, onClose, act, money }) => {
  const [type, setType] = React.useState("Stock Order");
  const [vendor, setVendor] = React.useState("GM Parts");
  const [lines, setLines] = React.useState([{ part: "", qty: "1" }]);
  const setLine = (i, k, v) => setLines(ls => ls.map((l, j) => j === i ? { ...l, [k]: v } : l));
  const build = () => {
    const out = [];
    lines.forEach(l => {
      const p = parts.find(x => x.part === l.part);
      if (p && parseInt(l.qty, 10) > 0) out.push({ part: p.part, desc: p.desc, qty: parseInt(l.qty, 10), cost: p.cost });
    });
    return out;
  };
  return (
    <K2BModal title="New Purchase Order" onClose={onClose} width={560}
              buttons={<>
                <K2BButton onClick={onClose}>Cancel</K2BButton>
                <K2BButton style={{ background: "var(--jb-yellow)", fontWeight: 700 }}
                           onClick={() => { const l = build(); if (!l.length) return act({ ok: false, msg: "Add at least one valid part line." }); act(DMS.createPO(type, vendor, l)); onClose(); }}>Create PO</K2BButton>
              </>}>
      <div style={{ display: "grid", gridTemplateColumns: "90px 1fr", rowGap: 8, columnGap: 8, alignItems: "center", fontSize: 13, marginBottom: 10 }}>
        <span>Type:</span>
        <select value={type} onChange={(e) => setType(e.target.value)} style={inpStyle}>
          <option>Stock Order</option><option>Special Order</option><option>Emergency Order</option>
          <option>Warranty Order</option><option>Wholesale Order</option>
        </select>
        <span>Vendor:</span><input value={vendor} onChange={(e) => setVendor(e.target.value)} style={inpStyle} />
      </div>
      <div style={{ fontWeight: 700, fontSize: 12, marginBottom: 4 }}>Lines</div>
      {lines.map((l, i) => (
        <div key={i} style={{ display: "flex", gap: 6, marginBottom: 4 }}>
          <input autoComplete="off" data-lpignore="true" data-1p-ignore="true" data-form-type="other" name="k2b-find-partsdept-2" list="po-parts" value={l.part} onChange={(e) => setLine(i, "part", e.target.value.toUpperCase())} placeholder="part #" style={{ ...inpStyle, flex: 1 }} />
          <input value={l.qty} onChange={(e) => setLine(i, "qty", e.target.value.replace(/[^0-9]/g, ""))} style={{ ...inpStyle, width: 60 }} />
        </div>
      ))}
      <datalist id="po-parts">{parts.map(p => <option key={p.part} value={p.part}>{p.desc}</option>)}</datalist>
      <K2BButton small onClick={() => setLines(ls => [...ls, { part: "", qty: "1" }])}>+ Add Line</K2BButton>
    </K2BModal>
  );
};

// styles
const inpStyle = { background: "var(--k2b-yellow, #FFFFE1)", border: "1px solid #808080", padding: "3px 6px", fontFamily: "'Courier Prime', monospace", fontSize: 13 };
const partsTable = { width: "100%", borderCollapse: "collapse", fontFamily: "'Courier Prime', monospace", fontSize: 12 };
const partsHeadRow = { background: "#C0C0C0", color: "var(--k2b-maroon, #8a1c1c)", borderBottom: "1px solid #808080", position: "sticky", top: 0 };
const pTh = { padding: "3px 6px", textAlign: "left", whiteSpace: "nowrap" };
const pThL = { ...pTh, width: "auto" };
const pThR = { ...pTh, textAlign: "right" };
const pThC = { ...pTh, textAlign: "center" };
const pTd = { padding: "2px 6px", color: "var(--k2b-navy, #11337A)" };
const pTdMono = { ...pTd, fontFamily: "'Courier Prime', monospace", fontWeight: 700, color: "var(--k2b-blue-data-dk, #11337A)" };
const pTdR = { ...pTd, textAlign: "right" };
const pTdC = { ...pTd, textAlign: "center" };

/* Log a core that must go back to GM (engine / transmission / battery / …) */
const CORE_TYPES = ["Engine", "Transmission", "Battery", "Alternator", "Starter", "Brake", "Driveline", "Turbo", "Other"];
const AddCoreDialog = ({ onClose, act }) => {
  const [f, setF] = React.useState({ coreType: "Engine", part: "", desc: "", amount: "", ro: "", customer: "" });
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const ip = { width: "100%", boxSizing: "border-box", padding: "5px 8px", border: "1px solid #C8CCD2",
               fontFamily: "'Courier Prime', monospace", fontSize: 13, color: "var(--k2b-navy)" };
  const lab = { fontSize: 11, color: "#666", marginBottom: 2, display: "block" };
  const submit = () => {
    // RC26 (inv): the amount is read strictly (PartsCalc) — "5,00" is not clear and is refused, never read as 500 (it used to strip the comma)
    const PC = window.PartsCalc;
    const c = PC ? PC.strictMoney(String(f.amount).trim()) : Math.round((parseFloat(f.amount) || 0) * 100);
    if (PC && PC.moneyProblem(String(f.amount).trim(), "The core charge")) return act({ ok: false, msg: PC.moneyProblem(String(f.amount).trim(), "The core charge") });
    const r = DMS.addCore({ ...f, amount: c / 100 });
    act(r); if (r.ok) onClose();
  };
  return (
    <K2BModal title="Log Core Charge" onClose={onClose} width={460}
              buttons={<>
                <K2BButton onClick={onClose}>Cancel</K2BButton>
                <K2BButton primary onClick={submit}>Log Core</K2BButton>
              </>}>
      <div style={{ display: "grid", gap: 8 }}>
        <div>
          <label style={lab}>Core type</label>
          <select value={f.coreType} onChange={(e) => set("coreType", e.target.value)} style={ip}>
            {CORE_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
          </select>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
          <div><label style={lab}>Part #</label><input value={f.part} onChange={(e) => set("part", e.target.value.toUpperCase())} style={ip} /></div>
          <div><label style={lab}>Core charge $</label><input value={f.amount} onChange={(e) => set("amount", e.target.value)} placeholder="0.00" style={ip} /></div>
        </div>
        <div><label style={lab}>Description</label><input value={f.desc} onChange={(e) => set("desc", e.target.value.toUpperCase())} placeholder="e.g. REMAN 6.2L ENGINE ASSY" style={ip} /></div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
          <div><label style={lab}>RO / Ticket</label><input value={f.ro} onChange={(e) => set("ro", e.target.value.toUpperCase())} placeholder="COUNTER" style={ip} /></div>
          <div><label style={lab}>Customer</label><input value={f.customer} onChange={(e) => set("customer", e.target.value.toUpperCase())} style={ip} /></div>
        </div>
        <div style={{ fontSize: 11, color: "#777", lineHeight: 1.5 }}>
          The core deposit is billed to the customer now. When they bring the old unit back you’ll
          <b> Receive Core</b> (refund the deposit), then <b>Ship to GM</b> and <b>Post Credit</b> when GM pays it.
        </div>
      </div>
    </K2BModal>
  );
};

/* ─── Import the master GM parts list ───────────────────────────────────
   Accepts pasted CSV/TSV (part, desc, cost, list, trade, bin, mfr, source,
   core) or loads a built-in GM sample tape. Imports catalog + pricing only;
   never touches dealer on-hand quantities. */
const GM_MASTER_SAMPLE = [
  ["12378526", "FILTER ASM-OIL", "5.12", "11.49", "8.61", "A-12-04", "ACDelco", "GM", "0"],
  ["84176191", "PAD KIT-FRT DISC BRK", "41.80", "86.99", "67.20", "B-04-12", "ACDelco", "GM", "0"],
  ["13508023", "SENSOR-CMSHFT POSN", "28.65", "62.49", "48.00", "C-09-21", "ACDelco", "GM", "0"],
  ["55509589", "PCV VALVE", "9.40", "21.99", "16.80", "A-15-02", "ACDelco", "GM", "0"],
  ["19420609", "ROTOR-FRT BRK", "58.10", "119.99", "92.00", "B-05-07", "ACDelco", "GM", "0"],
  ["84670822", "BATTERY ASM (AGM)", "118.40", "229.99", "188.00", "D-01-01", "ACDelco", "GM", "22.00"],
  ["12690512", "PLUG ASM-SPARK", "6.95", "14.99", "11.20", "A-18-09", "ACDelco", "GM", "0"],
  ["23262335", "BELT-SERPENTINE", "31.20", "67.49", "52.00", "C-11-14", "ACDelco", "GM", "0"],
  ["84383471", "MIRROR ASM-O/S RR VIEW", "184.30", "349.99", "280.00", "E-03-06", "GM", "GM", "0"],
  ["13537899", "MODULE ASM-BCM", "210.55", "398.99", "320.00", "F-02-02", "GM", "GM", "0"],
];
const ImportMasterDialog = ({ onClose, act }) => {
  const [text, setText] = React.useState("");
  const [updatePrices, setUpdatePrices] = React.useState(true);
  const [preview, setPreview] = React.useState(null);

  const parseRows = (raw) => {
    const lines = raw.split(/\r?\n/).map(l => l.trim()).filter(Boolean);
    const out = [];
    lines.forEach(line => {
      // header row? skip if first cell isn't part-number-ish
      const cells = line.split(/[\t,]/).map(c => c.trim());
      if (/part\s*#?|number|desc/i.test(cells[0]) && out.length === 0 && !/^\w*\d/.test(cells[0])) return;
      const [part, desc, cost, list, trade, bin, mfr, source, core] = cells;
      if (!part) return;
      out.push({ part, desc, cost, list, trade, bin, mfr, source, core });
    });
    return out;
  };
  const rows = preview || (text ? parseRows(text) : []);
  const loadSample = () => {
    setText(GM_MASTER_SAMPLE.map(r => r.join(",")).join("\n"));
    setPreview(GM_MASTER_SAMPLE.map(r => ({ part: r[0], desc: r[1], cost: r[2], list: r[3], trade: r[4], bin: r[5], mfr: r[6], source: r[7], core: r[8] })));
  };
  const doImport = () => {
    const data = parseRows(text);
    if (!data.length) { act({ ok: false, msg: "Nothing to import — paste rows or load the sample." }); return; }
    const r = DMS.importPartsMaster(data, { updatePrices });
    act(r); if (r.ok) onClose();
  };

  return (
    <K2BModal title="Import Master GM Parts List" width={680} onClose={onClose}
              buttons={<>
                <K2BButton onClick={loadSample}>Load GM Sample Tape</K2BButton>
                <K2BButton onClick={onClose}>Cancel</K2BButton>
                <K2BButton style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={doImport}>Import {rows.length ? `(${rows.length})` : ""}</K2BButton>
              </>}>
      <div style={{ fontSize: 12.5, color: "#555", marginBottom: 8 }}>
        Paste the GM master price tape as <b>CSV or tab-separated</b> rows, one part per line:
        <div style={{ fontFamily: "'Courier Prime', monospace", fontSize: 11.5, color: "#777", marginTop: 3 }}>
          part #, description, cost, list, trade, bin, mfr, source, core
        </div>
      </div>
      <textarea value={text} onChange={(e) => { setText(e.target.value); setPreview(null); }}
                placeholder={"12378526, FILTER ASM-OIL, 5.12, 11.49, 8.61, A-12-04, ACDelco, GM, 0"}
                rows={7} style={{ width: "100%", boxSizing: "border-box", fontFamily: "'Courier Prime', monospace", fontSize: 12,
                                  border: "1px solid #808080", padding: 8, background: "#FFFEF4", resize: "vertical" }} />
      <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 10, flexWrap: "wrap" }}>
        <label style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 12.5 }}>
          <input type="checkbox" checked={updatePrices} onChange={(e) => setUpdatePrices(e.target.checked)} style={{ width: 15, height: 15 }} />
          Update prices on parts I already stock
        </label>
        <span style={{ fontSize: 11.5, color: "#888" }}>{rows.length} row{rows.length !== 1 ? "s" : ""} ready · on-hand quantities are never changed</span>
      </div>
      {rows.length > 0 && (
        <div style={{ maxHeight: 150, overflow: "auto", border: "1px solid #DDD", marginTop: 10 }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 11.5, fontFamily: "'Courier Prime', monospace" }}>
            <thead><tr style={{ background: "#F0F0F0", position: "sticky", top: 0 }}>
              {["Part #", "Description", "Cost", "List", "Trade", "Bin"].map((h, i) => <th key={i} style={{ padding: "3px 8px", textAlign: i >= 2 && i <= 4 ? "right" : "left", color: "#666" }}>{h}</th>)}
            </tr></thead>
            <tbody>
              {rows.slice(0, 60).map((r, i) => (
                <tr key={i} style={{ borderTop: "1px solid #EEE" }}>
                  <td style={{ padding: "2px 8px", fontWeight: 700, color: "var(--jb-navy)" }}>{String(r.part).toUpperCase()}</td>
                  <td style={{ padding: "2px 8px" }}>{r.desc}</td>
                  <td style={{ padding: "2px 8px", textAlign: "right" }}>{r.cost}</td>
                  <td style={{ padding: "2px 8px", textAlign: "right" }}>{r.list}</td>
                  <td style={{ padding: "2px 8px", textAlign: "right" }}>{r.trade}</td>
                  <td style={{ padding: "2px 8px" }}>{r.bin}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </K2BModal>
  );
};

/* ─── Barcode scan tool ─────────────────────────────────────────────────
   Works with a USB/Bluetooth wedge scanner (types the code + Enter into the
   focused field) or manual entry. Optional camera mode uses BarcodeDetector
   when the browser supports it. Found part → opens Sell; unknown → Add Part. */
const ScanPartDialog = ({ parts, onClose, onFound, onUnknown, act }) => {
  const [code, setCode] = React.useState("");
  const [log, setLog] = React.useState([]);
  const [camOn, setCamOn] = React.useState(false);
  const [camErr, setCamErr] = React.useState("");
  const inputRef = React.useRef(null);
  const videoRef = React.useRef(null);
  const streamRef = React.useRef(null);

  React.useEffect(() => { inputRef.current && inputRef.current.focus(); }, []);

  const lookup = (raw) => {
    const c = String(raw || "").trim().toUpperCase();
    if (!c) return;
    const hit = parts.find(p => p.part.toUpperCase() === c)
             || parts.find(p => p.part.toUpperCase().replace(/[^0-9A-Z]/g, "") === c.replace(/[^0-9A-Z]/g, ""));
    setLog(L => [{ code: c, ok: !!hit, desc: hit ? hit.desc : "not in master", t: Date.now() }, ...L].slice(0, 6));
    setCode("");
    if (hit) { stopCam(); onFound(hit); }
    else { act({ ok: false, msg: `Scanned ${c} — not in master file. Add it?` }); onUnknown(c); stopCam(); }
  };

  const stopCam = () => {
    if (streamRef.current) { streamRef.current.getTracks().forEach(t => t.stop()); streamRef.current = null; }
    setCamOn(false);
  };
  React.useEffect(() => () => stopCam(), []);

  const startCam = async () => {
    setCamErr("");
    if (!("BarcodeDetector" in window)) { setCamErr("This browser has no barcode camera support — use a USB scanner or type the code."); return; }
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
      streamRef.current = stream; setCamOn(true);
      if (videoRef.current) { videoRef.current.srcObject = stream; await videoRef.current.play(); }
      const detector = new window.BarcodeDetector({ formats: ["code_128", "code_39", "ean_13", "upc_a", "qr_code"] });
      const tick = async () => {
        if (!streamRef.current) return;
        try {
          const codes = await detector.detect(videoRef.current);
          if (codes && codes.length) { lookup(codes[0].rawValue); return; }
        } catch (e) {}
        requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    } catch (e) { setCamErr("Camera unavailable or permission denied. Use a USB scanner or type the code."); }
  };

  return (
    <K2BModal title="Scan Part — Barcode" width={520} onClose={() => { stopCam(); onClose(); }}
              buttons={<>
                <K2BButton onClick={() => { stopCam(); onClose(); }}>Close</K2BButton>
                <K2BButton style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => lookup(code)}>Look Up</K2BButton>
              </>}>
      <div style={{ fontSize: 12.5, color: "#555", marginBottom: 8 }}>
        Scan a barcode with a USB/Bluetooth scanner (it types here automatically), or type the part number and press Enter.
      </div>
      <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
        <span style={{ fontSize: 22 }}>🔎</span>
        <input autoComplete="off" data-lpignore="true" data-1p-ignore="true" data-form-type="other" name="k2b-find-partsdept-3" ref={inputRef} value={code}
               onChange={(e) => setCode(e.target.value.toUpperCase())}
               onKeyDown={(e) => { if (e.key === "Enter") lookup(code); }}
               placeholder="Scan or type part #…"
               style={{ flex: 1, fontFamily: "'Courier Prime', monospace", fontSize: 16, fontWeight: 700,
                        letterSpacing: 1, background: "#FFFEF4", border: "2px solid var(--jb-navy)", padding: "8px 10px", color: "var(--jb-navy)" }} />
      </div>
      <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
        {!camOn
          ? <K2BButton small onClick={startCam}>📷 Use Camera</K2BButton>
          : <K2BButton small onClick={stopCam} style={{ background: "var(--k2b-maroon)", color: "#FFF" }}>■ Stop Camera</K2BButton>}
        <span style={{ fontSize: 11.5, color: "#999", alignSelf: "center" }}>Camera scanning needs a supported browser + permission.</span>
      </div>
      {camErr && <div style={{ marginTop: 8, fontSize: 12, color: "var(--k2b-maroon)" }}>{camErr}</div>}
      {camOn && (
        <div style={{ marginTop: 10, border: "1px solid #808080", background: "#000", display: "flex", justifyContent: "center" }}>
          <video ref={videoRef} muted playsInline style={{ width: "100%", maxHeight: 220, objectFit: "contain" }} />
        </div>
      )}
      {log.length > 0 && (
        <div style={{ marginTop: 12 }}>
          <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: 0.5, color: "#999", marginBottom: 4 }}>Recent scans</div>
          {log.map((e, i) => (
            <div key={i} style={{ display: "flex", gap: 8, fontSize: 12.5, padding: "2px 0", alignItems: "center" }}>
              <span style={{ color: e.ok ? "var(--jb-green, #16A34A)" : "var(--k2b-maroon)" }}>{e.ok ? "✓" : "✕"}</span>
              <span style={{ fontFamily: "'Courier Prime', monospace", fontWeight: 700, color: "var(--jb-navy)" }}>{e.code}</span>
              <span style={{ color: "#777" }}>{e.desc}</span>
            </div>
          ))}
        </div>
      )}
    </K2BModal>
  );
};

/* ─── Bulk oil tanks — levels, receive delivery, settings ─────────────── */
const BulkOilDialog = ({ onClose, act }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  const status = (window.DMS && DMS.bulkOilStatus) ? DMS.bulkOilStatus() : [];
  const [view, setView] = React.useState("tanks"); // tanks | receive | edit
  const [sel, setSel] = React.useState(null);      // fluid being received/edited
  const lows = status.filter(s => s.low);

  const Gauge = ({ s }) => (
    <div style={{ border: "1px solid #DDD", borderRadius: 6, padding: "10px 12px", background: "#FFF" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <span style={{ fontWeight: 700, fontSize: 13, color: "var(--jb-navy)" }}>{s.tank || s.id}</span>
        <span style={{ fontSize: 12.5, color: "#555", flex: 1 }}>{s.name}</span>
        {s.low && <span style={{ background: "#FBE9E7", color: "#B23A2E", borderRadius: 999, padding: "1px 8px", fontSize: 10.5, fontWeight: 700 }}>REORDER</span>}
      </div>
      <div style={{ height: 14, background: "#EEF1F5", borderRadius: 999, overflow: "hidden", margin: "8px 0 4px", position: "relative" }}>
        <div style={{ width: Math.min(100, s.pct) + "%", height: "100%", background: s.low ? "#C03546" : s.pct < 45 ? "#C8862A" : "#16A34A" }} />
        <div style={{ position: "absolute", left: (s.capacity ? (s.reorderAt / s.capacity) * 100 : 0) + "%", top: 0, bottom: 0, width: 2, background: "#11264D", opacity: 0.5 }} title="Reorder point" />
      </div>
      <div style={{ display: "flex", fontSize: 11.5, color: "#666", fontFamily: "'Courier Prime', monospace" }}>
        <span>{s.onHand} / {s.capacity} {s.uom} ({s.pct}%)</span>
        <span style={{ flex: 1 }} />
        <span>cost ${(+s.cost).toFixed(2)} · sale ${(+s.sale).toFixed(2)}</span>
      </div>
      <div style={{ display: "flex", gap: 6, marginTop: 8 }}>
        <K2BButton small onClick={() => { setSel(s); setView("receive"); }} style={{ background: "var(--jb-yellow)", fontWeight: 700 }}>Receive Delivery</K2BButton>
        <K2BButton small onClick={() => { setSel(s); setView("edit"); }}>Settings</K2BButton>
        {s.low && <span style={{ fontSize: 11, color: "#B23A2E", alignSelf: "center" }}>order ~{s.suggestedOrder} {s.uom} from {s.vendor || "vendor"}</span>}
      </div>
    </div>
  );

  return (
    <K2BModal title="Bulk Oil — Tanks & Fluids" width={640} onClose={onClose}
      buttons={<>
        {view !== "tanks" && <K2BButton onClick={() => setView("tanks")}>← Back</K2BButton>}
        {view === "tanks" && <K2BButton onClick={() => { setSel(null); setView("edit"); }}>+ Add Fluid</K2BButton>}
        <K2BButton onClick={onClose}>Close</K2BButton>
      </>}>
      {view === "tanks" && (
        <>
          {lows.length > 0 && (
            <div style={{ background: "#FBE9E7", border: "1px solid #B23A2E", borderRadius: 6, padding: "7px 11px", fontSize: 12.5, color: "#B23A2E", marginBottom: 10 }}>
              ⚠ {lows.length} tank{lows.length !== 1 ? "s" : ""} at or below reorder point — {lows.map(l => `${l.name} (order ~${l.suggestedOrder} ${l.uom})`).join(", ")}.
            </div>
          )}
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {status.map(s => <Gauge key={s.id} s={s} />)}
            {!status.length && <div style={{ color: "#888", fontSize: 13, textAlign: "center", padding: 18 }}>No fluids yet — click “+ Add Fluid.”</div>}
          </div>
          <div style={{ fontSize: 11.5, color: "#888", marginTop: 10 }}>
            Receiving a delivery books the vendor invoice to A/P and posts DR 247 (Gas·Oil·Grease) / CR 300. Dispensing from a repair order relieves the tank and bills the customer per quart.
          </div>
        </>
      )}
      {view === "receive" && sel && <BulkReceiveForm fluid={sel} act={act} done={() => { setView("tanks"); force(); }} />}
      {view === "edit" && <BulkEditForm fluid={sel} act={act} done={() => { setView("tanks"); force(); }} />}
    </K2BModal>
  );
};

const BulkReceiveForm = ({ fluid, act, done }) => {
  const [f, setF] = React.useState({ qty: "", unitCost: String(fluid.cost), vendor: fluid.vendor || "", invoice: "" });
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  // RC26 (inv): the preview is PartsCalc.bulkReceipt (strict amounts — "5,00" is refused, never read as 500); Post Delivery is the server command
  const PC = window.PartsCalc;
  const pv = PC ? PC.bulkReceipt({ qty: f.qty, unitCost: f.unitCost }) : null;
  const amt = pv && pv.ok ? pv.amountCents / 100 : 0;
  const [busy, setBusy] = React.useState(false);
  const vendors = (window.DMS && DMS.vendors) ? DMS.vendors() : [];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ fontWeight: 700, fontSize: 13.5 }}>{fluid.name} <span style={{ color: "#888", fontWeight: 400 }}>· {fluid.onHand}/{fluid.capacity} {fluid.uom} on hand</span></div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, color: "#666", fontWeight: 600 }}>Quantity received ({fluid.uom})</span>
          <input data-bulk-qty="1" value={f.qty} onChange={(e) => set("qty", e.target.value.replace(/[^0-9.]/g, ""))} autoFocus style={{ fontSize: 13, padding: "6px 8px", fontFamily: "var(--jb-mono)" }} />
        </label>
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, color: "#666", fontWeight: 600 }}>Cost per {fluid.uom} $</span>
          <input data-bulk-cost="1" value={f.unitCost} onChange={(e) => set("unitCost", e.target.value.replace(/[^0-9.,$]/g, ""))} style={{ fontSize: 13, padding: "6px 8px", fontFamily: "var(--jb-mono)" }} />
        </label>
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, color: "#666", fontWeight: 600 }}>Vendor</span>
          {vendors.length ? (
            <select value={f.vendor} onChange={(e) => set("vendor", e.target.value)} style={{ fontSize: 13, padding: "6px 8px" }}>
              {f.vendor && !vendors.some(v => v.name === f.vendor) && <option>{f.vendor}</option>}
              {vendors.map(v => <option key={v.id}>{v.name}</option>)}
            </select>
          ) : <input value={f.vendor} onChange={(e) => set("vendor", e.target.value.toUpperCase())} style={{ fontSize: 13, padding: "6px 8px" }} />}
        </label>
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, color: "#666", fontWeight: 600 }}>Invoice # (optional)</span>
          <input value={f.invoice} onChange={(e) => set("invoice", e.target.value.toUpperCase())} style={{ fontSize: 13, padding: "6px 8px", fontFamily: "var(--jb-mono)" }} />
        </label>
      </div>
      <div style={{ background: "#FFFFE1", border: "1px solid #808080", padding: "6px 10px", fontSize: 12.5, fontFamily: "'Courier Prime', monospace" }}>
        Invoice total: <b>${amt.toFixed(2)}</b> → one open vendor bill (A/P 300) · OIL- entry DR bulk oil inventory / CR 300{pv && !pv.ok && f.qty !== "" ? <div style={{ color: "#C03546", fontFamily: "var(--jb-font)" }}>{pv.problem}</div> : null}
      </div>
      <div>
        <K2BButton primary disabled={busy} onClick={async () => { setBusy(true); const r = await act(DMS.receiveBulkOil({ fluidId: fluid.id, qty: f.qty, unitCost: f.unitCost, vendor: f.vendor, invoice: f.invoice })); setBusy(false); if (r && r.ok) done(); }}>
          {busy ? "Posting…" : "Post Delivery"}
        </K2BButton>
      </div>
    </div>
  );
};

// Hoisted to module scope — defining a field component INSIDE the form body
// makes React see a new component type on every keystroke, remounting the
// input and losing the cursor after one character.
const BulkNumField = ({ label, k, f, set }) => (
  <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
    <span style={{ fontSize: 11, color: "#666", fontWeight: 600 }}>{label}</span>
    <input value={f[k]} onChange={(e) => set(k, e.target.value.replace(/[^0-9.]/g, ""))} style={{ fontSize: 13, padding: "6px 8px", fontFamily: "var(--jb-mono)" }} />
  </label>
);

const BulkEditForm = ({ fluid, act, done }) => {
  const [f, setF] = React.useState(fluid ? { ...fluid } : { name: "", tank: "", uom: "qt", onHand: 0, capacity: 300, reorderAt: 75, cost: 2, sale: 8, vendor: "" });
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const N = (p) => <BulkNumField {...p} f={f} set={set} />;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <label style={{ display: "flex", flexDirection: "column", gap: 3, gridColumn: "1 / -1" }}>
          <span style={{ fontSize: 11, color: "#666", fontWeight: 600 }}>Fluid name</span>
          <input value={f.name} onChange={(e) => set("name", e.target.value)} autoFocus style={{ fontSize: 13, padding: "6px 8px" }} />
        </label>
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, color: "#666", fontWeight: 600 }}>Tank / location</span>
          <input value={f.tank} onChange={(e) => set("tank", e.target.value)} style={{ fontSize: 13, padding: "6px 8px" }} />
        </label>
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, color: "#666", fontWeight: 600 }}>Vendor</span>
          <input value={f.vendor} onChange={(e) => set("vendor", e.target.value.toUpperCase())} style={{ fontSize: 13, padding: "6px 8px" }} />
        </label>
        {fluid && fluid.id ? <div style={{ fontSize: 12, color: "#555" }}>On hand <b>{fluid.onHand} {fluid.uom || "qt"}</b> · cost <b>${(+fluid.cost || 0).toFixed(2)}</b> — changed only by Receive delivery and Dispense (the server's books)</div> : <BulkNumField label="On hand (qt)" k="onHand" f={f} set={set} />}
        <BulkNumField label="Capacity (qt)" k="capacity" f={f} set={set} />
        <BulkNumField label="Reorder point (qt)" k="reorderAt" f={f} set={set} />
        {!(fluid && fluid.id) && <BulkNumField label="Cost / qt $" k="cost" f={f} set={set} />}
        <BulkNumField label="Sale / qt $" k="sale" f={f} set={set} />
      </div>
      <div style={{ display: "flex", gap: 8 }}>
        <K2BButton primary onClick={() => { const r = DMS.upsertBulkFluid(f); act(r); if (r.ok) done(); }}>Save</K2BButton>
        {fluid && fluid.id && <K2BButton onClick={() => { if (window.confirm("Remove " + f.name + "?")) { const r = DMS.removeBulkFluid(fluid.id); act(r); if (r.ok) done(); } }}>Delete</K2BButton>}
      </div>
    </div>
  );
};

Object.assign(window, { PartsDept, AddCoreDialog });