/* 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. */
// K2B Network Solutions — VIN Decode (K2BVIN).
// Slate-blue F&I Pro skin; row-oriented. Every field of the vehicle is an input the person can edit.
// A VIN typed, pasted or handed over by another screen is decoded by OUR server (window.DMS.vin / VinLookup.jsx.txt):
// MarketCheck first (a saved answer of any age before a paid call), then NHTSA (the free government decoder), then what the VIN
// itself says - and the screen always says which one answered. The decode fills only fields that are still blank or that an
// earlier decode filled; what a person typed is never overwritten (Undo puts the filled values back).
//   F5 decode · F2 recent decodes on this station · F8 NHTSA recalls · F4 window sticker · F6 spec sheet (both print the EDITED
//   vehicle) · F3 build the next stock number the way Stock-In does · Send to Stock-In · Send to Trade Appraisal / Trade-In Request · ESC.
// Names here start with vd / Vd (every .jsx.txt shares ONE global scope).

const VD_KEYS = { year: "year", make: "make", model: "model", trim: "trim", body: "body", engine: "engine", cylinders: "cylinders", displacement: "displacement", transmission: "transmission", drive: "drivetrain", fuel: "fuel", gvwr: "gvwr", color: "exteriorColor" };
const VD_LABEL = { year: "Year", make: "Make", model: "Model", trim: "Trim", body: "Body", engine: "Engine", cylinders: "Cylinders", displacement: "Displacement", transmission: "Trans", drive: "Drive", fuel: "Fuel", gvwr: "GVWR", color: "Color", miles: "Miles", stock: "Stock #" };
const VD_EMPTY = () => ({ year: "", make: "", model: "", trim: "", body: "", engine: "", cylinders: "", displacement: "", transmission: "", drive: "", fuel: "", gvwr: "", color: "", miles: "", stock: "", type: "U" });
const vdS = (x) => (x == null ? "" : String(x));
const vdEsc = (s) => vdS(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
const vdVinApi = () => (window.DMS && window.DMS.vin) || window.jbVin || null;
const vdWhen = (iso) => { if (!iso) return ""; const d = new Date(iso); return isNaN(d.getTime()) ? "" : d.toLocaleString("en-US", { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }); };
const vdYearLetter = (vin) => { const api = vdVinApi(); const c = vdS(vin)[9] || ""; if (!c) return ""; const i = "ABCDEFGHJKLMNPRSTVWXY123456789".indexOf(c); if (i < 0) return c; return c + "=" + ((/\d/.test(vdS(vin)[6] || "") ? 1980 : 2010) + i); };
// Next stock number the way Stock-In builds one (U<yy>-#### used / T<yy>-#### new), never one that is already in inventory.
const vdNextStock = (type, year) => {
  const yy = String(parseInt(year, 10) || new Date().getFullYear()).slice(-2);
  const taken = new Set(((window.DMS && window.DMS.inventory) ? (window.DMS.inventory() || []) : []).map(u => String(u.stock || "").toUpperCase()));
  for (let i = 0; i < 50; i++) { const n = Math.floor(1000 + Math.random() * 8999); const s = `${type === "N" ? "T" : "U"}${yy}-${n}`; if (!taken.has(s)) return s; }
  return `${type === "N" ? "T" : "U"}${yy}-${Date.now() % 9000 + 1000}`;
};
const vdPrint = (title, bodyHtml) => {
  if (window.k2bPrint) { window.k2bPrint(bodyHtml, { title }); return true; }
  let w = null; try { w = window.open("", "_blank", "width=900,height=1100"); } catch (e) { w = null; }
  if (!w) return false;
  w.document.write(`<!doctype html><html><head><meta charset="utf-8"/><title>${vdEsc(title)}</title><style>body{font:12px/1.45 Arial,sans-serif;margin:28px;color:#111}.doc-title{font-size:20px;font-weight:700;margin:0 0 4px}.doc-sub{color:#555;margin-bottom:12px}.sect{font-size:13px;margin:14px 0 4px;border-bottom:1px solid #999}.fg-row{display:flex;gap:16px}.fg-cell{flex:1;padding:4px 0}.lab{font-size:10px;text-transform:uppercase;color:#777}.val{font-size:13px}.mono{font-family:monospace}.foot{margin-top:24px;font-size:10px;color:#777;display:flex;justify-content:space-between}@media print{button{display:none}}</style></head><body>${bodyHtml}<script>setTimeout(function(){try{window.print()}catch(e){}},300)<\/script></body></html>`);
  w.document.close();
  return true;
};
const vdHead = () => (typeof dealerHeadHtml === "function" ? dealerHeadHtml() : (window.dealerHeadHtml ? window.dealerHeadHtml() : ""));
const vdCell = (l, v, mono) => `<div class="fg-cell"><span class="lab">${vdEsc(l)}</span><div class="val${mono ? " mono" : ""}">${vdEsc(v) || "—"}</div></div>`;
const vdDealerName = () => (window.K2BPrint ? window.K2BPrint.party.print() : "");   // RC35 (brd): the active store's print name

// Same look as K2BButton (same classes); carries an id / data attribute (K2BButton does not pass them through).
const VdBtn = ({ id, children, onClick, small, style, disabled, title }) => (
  <button id={id} type="button" className={"k2b-button" + (small ? " small" : "")} onClick={onClick} style={style} disabled={disabled} title={title}>{children}</button>
);

const VinDecode = ({ onClose, go }) => {
  const [vin, setVinRaw] = React.useState("");
  const [veh, setVeh] = React.useState(VD_EMPTY);
  const typed = React.useRef(new Set());                 // fields the person typed - a decode never overwrites them
  const wrote = React.useRef({});                        // what the last decode put where (for Undo / for the next VIN)
  const [dec, setDec] = React.useState({ state: "idle" });
  const [recalls, setRecalls] = React.useState({ state: "idle" });
  const [modal, setModal] = React.useState(null);        // 'lookup' | 'sticker' | 'print' | 'recall' | 'help' | 'stk'
  const [flash, setFlash] = React.useState("");
  const [confirmVin, setConfirmVin] = React.useState(false);
  const [stkBuilt, setStkBuilt] = React.useState(null);
  const R = React.useRef({}); R.current = { vin, veh, dec, modal, confirmVin };
  const seq = React.useRef(0); const lastDecoded = React.useRef("");
  const api = vdVinApi();
  const isVin = !!(api && api.isVin(vin));
  const cdOk = isVin && api.checkDigitOk(vin);
  const isSales = !!(window.DMS && window.DMS.roleIs && window.DMS.roleIs("Sales"));
  // Hand-off buttons only for screens this role can open (the app's own menu rule, window.jbNavAllowed): a button that would only
  // raise "your role doesn't have access" is not shown at all.
  const navOk = (key) => (typeof window.jbNavAllowed === "function" ? !!window.jbNavAllowed(key) : true);
  const canStockIn = navOk("stockin");
  const tradeTarget = isSales ? (navOk("trades") ? "trades" : null) : (navOk("appraisal") ? "appraisal" : navOk("trades") ? "trades" : null);

  const toast = (m) => { setFlash(m); setTimeout(() => setFlash(""), 3200); };
  const setVin = (v) => { const n = (api ? api.normVin(v) : vdS(v).toUpperCase().replace(/[\s-]+/g, "")).slice(0, 17); setVinRaw(n); };
  const upd = (k, val) => { typed.current.add(k); setVeh(p => ({ ...p, [k]: val })); };

  // ── the decode ──
  const decode = React.useCallback(async (opts) => {
    const v = R.current.vin;
    if (!api) { setDec({ state: "err", text: "VIN look-up is not loaded. Reload the page." }); return; }
    if (!api.isVin(v)) { setDec({ state: "err", text: "A VIN has 17 letters and numbers (the letters I, O and Q are never used)." }); return; }
    const my = ++seq.current;
    setDec({ state: "busy", vin: v });
    setRecalls(rc => (rc.vin === v ? rc : { state: "idle" }));          // a recall check belongs to its VIN
    let r = null, err = null;
    try { r = await api.decode(v, { confirm: (opts && opts.confirm) || R.current.confirmVin, refresh: opts && opts.refresh }); } catch (e) { err = e; }
    if (my !== seq.current) return;
    if (!r) { setDec({ state: "err", vin: v, text: err && err.text ? err.text : "VIN look-up is not available right now." }); return; }
    lastDecoded.current = v;
    const cur = R.current.veh;
    const { patch, filled } = api.fill(cur, r, typed.current, VD_KEYS, { year: (n) => String(n), cylinders: (n) => String(n) }, wrote.current);
    // what an earlier decode of ANOTHER VIN put there and this one does not fill goes back to blank (it belonged to the other car)
    const prevVin = wrote.current["|vin"];
    if (prevVin && prevVin !== v) Object.keys(VD_KEYS).forEach(k => { if (patch[k] === undefined && wrote.current[k] !== undefined && String(cur[k]) === String(wrote.current[k]) && !typed.current.has(k)) { patch[k] = ""; delete wrote.current[k]; delete wrote.current[k + "|from"]; } });
    if (Object.keys(patch).length) setVeh(p => ({ ...p, ...patch }));
    filled.forEach(f => { wrote.current[f.key] = f.to; wrote.current[f.key + "|from"] = f.from; });
    wrote.current["|vin"] = v;
    const vv = r.vehicle || {};
    const label = [vv.year, vv.make, vv.model, vv.trim].filter(Boolean).join(" ");
    api.remember({ vin: v, source: r.source, vehicle: vv, label });
    setDec({ state: "ok", vin: v, source: r.source, cached: !!r.cached, partial: !!r.partial, ageMinutes: r.ageMinutes, fetchedAt: r.fetchedAt, filled, warning: r.warning || null, message: r.message || "",
             mc: r.marketcheck || null, dollars: !!r.dollars, msrp: vv.msrp, options: Array.isArray(vv.options) ? vv.options : [], packages: Array.isArray(vv.packages) ? vv.packages : [], plant: vv.plant || "", manufacturer: vv.manufacturer || "" });
    toast(r.partial ? `Only part of VIN ${v} could be read - type the rest.` : `VIN ${v} decoded by ${api.sourceLabel(r.source)} — ${label || "vehicle"}.`);
  }, [api]);

  // a VIN that arrives from another screen (pointer written by Inventory / Service / CRM: { vin, year, make, model, ... }).
  // ptr.typed (a list of keys) = the fields that are the other screen's own facts (stock #, colour, miles, new/used): kept whatever the
  // decode says. Everything else in the pointer is a hint the decode may replace (Undo puts the hint back). No list = every field is kept.
  React.useEffect(() => {
    let ptr = api ? api.pointerTake("jb_vin_decode") : null;
    if (!ptr && window.jbVinDecodePrefill) ptr = window.jbVinDecodePrefill;
    try { delete window.jbVinDecodePrefill; } catch (e) {}
    if (!ptr || !ptr.vin) return;
    const pre = {};
    Object.keys(VD_EMPTY()).forEach(k => { if (ptr[k] != null && String(ptr[k]).trim() !== "") pre[k] = String(ptr[k]); });
    if (ptr.yr && !pre.year) pre.year = String(ptr.yr); if (ptr.mk && !pre.make) pre.make = String(ptr.mk); if (ptr.mdl && !pre.model) pre.model = String(ptr.mdl);
    if (ptr.trans && !pre.transmission) pre.transmission = String(ptr.trans);
    const keep = Array.isArray(ptr.typed) ? new Set(ptr.typed.map(String)) : null;
    Object.keys(pre).forEach(k => { if (!keep || keep.has(k) || k === "type") typed.current.add(k); else { wrote.current[k] = pre[k]; wrote.current[k + "|from"] = pre[k]; } });
    setVeh(p => ({ ...p, ...pre }));
    setVin(ptr.vin);
  }, []);
  // typed / pasted: decode once the VIN is complete and new (Enter / F5 decode at once, also again)
  React.useEffect(() => {
    if (!isVin || lastDecoded.current === vin) return;
    const t = setTimeout(() => { if (R.current.vin === vin && lastDecoded.current !== vin) decode(); }, 450);
    return () => clearTimeout(t);
  }, [vin, isVin]);

  const undo = () => {
    if (!dec.filled || !dec.filled.length) return;
    const back = {}; let n = 0;
    dec.filled.forEach(f => { if (String(veh[f.key]) === String(f.to)) { back[f.key] = f.from == null ? "" : f.from; n++; delete wrote.current[f.key]; delete wrote.current[f.key + "|from"]; } });
    setVeh(p => ({ ...p, ...back }));
    setDec(d => ({ ...d, filled: [], undone: n }));
    toast(`Undone - ${n} field${n === 1 ? "" : "s"} put back${dec.filled.length - n ? "; " + (dec.filled.length - n) + " you changed kept" : ""}.`);
  };
  const clearAll = () => { typed.current = new Set(); wrote.current = {}; lastDecoded.current = ""; seq.current++; setVeh(VD_EMPTY()); setVinRaw(""); setDec({ state: "idle" }); setRecalls({ state: "idle" }); setConfirmVin(false); setStkBuilt(null); };

  // ── buttons ──
  const buildStk = () => {
    const stk = vdNextStock(veh.type, veh.year);
    setStkBuilt(stk); upd("stock", stk); setModal("stk");
  };
  const unitForPrint = () => ({ vin, stock: veh.stock, yr: veh.year, mk: veh.make, mdl: veh.model, trim: veh.trim, body: veh.body, color: veh.color, miles: veh.miles, engine: veh.engine, trans: veh.transmission, drive: veh.drive, fuel: veh.fuel, type: veh.type, status: "STOCK" });
  const vehicleLine = () => [veh.year, veh.make, veh.model, veh.trim].filter(x => vdS(x).trim()).join(" ");
  const decodeLine = () => (dec.state === "ok" ? `Decoded by ${api ? api.sourceLabel(dec.source) : dec.source}${dec.cached ? " (saved " + (api ? api.age(dec.ageMinutes, dec.fetchedAt) : "earlier") + ")" : ""}${dec.partial ? " - partial" : ""}` : "Not decoded - typed by hand");
  const recallLine = () => (recalls.state === "ok" ? (recalls.data.count ? `${recalls.data.count} NHTSA recall campaign${recalls.data.count === 1 ? "" : "s"} listed` : "NHTSA lists no recall campaigns") + ` (checked ${vdWhen(recalls.data.fetchedAt)})` : "Recalls not looked up (F8)");
  const printSticker = () => {
    const isNew = veh.type === "N";
    const opts = (dec.state === "ok" && dec.dollars) ? (dec.packages || []).concat((dec.options || []).map(o => o && (o.name || o.code)).filter(Boolean)) : [];
    const seen = []; opts.forEach(n => { if (!seen.some(s => s.toLowerCase() === String(n).toLowerCase())) seen.push(String(n)); });
    const msrp = dec.state === "ok" && dec.dollars && dec.msrp > 0 ? Number(dec.msrp) : null;
    const html = `${vdHead()}
      <div class="doc-title">${isNew ? "MONRONEY LABEL — NEW VEHICLE" : "WINDOW STICKER — PRE-OWNED VEHICLE"}</div>
      <div class="doc-sub">${vdEsc(vehicleLine())}${veh.stock ? " · Stock " + vdEsc(veh.stock) : ""} · VIN ${vdEsc(vin)}</div>
      <div class="field-grid">
        <div class="fg-row">${vdCell("Exterior Color", veh.color)}${vdCell("Body Style", veh.body)}</div>
        <div class="fg-row">${vdCell("Odometer", veh.miles ? Number(String(veh.miles).replace(/[^0-9]/g, "")).toLocaleString("en-US") + " mi" : "", true)}${vdCell("Stock Type", isNew ? "New" : "Pre-Owned")}</div>
      </div>
      <h3 class="sect">Powertrain</h3>
      <div class="field-grid">
        <div class="fg-row">${vdCell("Engine", veh.engine)}${vdCell("Transmission", veh.transmission)}</div>
        <div class="fg-row">${vdCell("Drivetrain", veh.drive)}${vdCell("Fuel", veh.fuel)}</div>
        <div class="fg-row">${vdCell("Cylinders / Displacement", [veh.cylinders, veh.displacement].filter(Boolean).join(" · "))}${vdCell("GVWR", veh.gvwr)}</div>
      </div>
      <h3 class="sect">Factory Equipment</h3>
      ${seen.length ? `<ul style="columns:2;font-size:9.5pt;margin:4px 0;padding-left:18px;">${seen.map(s => `<li>${vdEsc(s)}</li>`).join("")}</ul>` : `<p style="font-size:9.5pt;margin:4px 0;">${dec.state === "ok" && dec.source === "marketcheck" ? "No factory option list came with this decode." : "The factory option list is not part of this decode - see the build sheet / original window sticker."}</p>`}
      ${msrp !== null ? `<h3 class="sect">Pricing</h3><table class="totals"><tr><td class="lab">Manufacturer's Suggested Retail Price${isNew ? "" : " (when new)"}</td><td class="val">$${msrp.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td></tr></table>` : ""}
      <p style="font-size:8.5pt;line-height:1.4;margin-top:10px;">${vdEsc(decodeLine())}. ${vdEsc(recallLine())}. ${isNew ? "Fuel economy, warranty and safety ratings per the manufacturer's Monroney label." : "Pre-owned vehicle — see the accompanying FTC Buyers Guide for warranty status."}</p>
      <div class="foot"><span>${vdEsc(vdDealerName())}</span><span>Window Sticker · ${vdEsc(veh.stock || vin)}</span></div>`;
    if (!vdPrint("Window Sticker " + (veh.stock || vin), html)) toast("The print window was blocked by the browser. Allow pop-ups for the DMS and try again.");
  };
  const printSpec = () => {
    const rc = recalls.state === "ok" ? recalls.data : null;
    const html = `${vdHead()}
      <div class="doc-title">VEHICLE SPECIFICATION SHEET</div>
      <div class="doc-sub">${vdEsc(vehicleLine())}${veh.stock ? " · Stock " + vdEsc(veh.stock) : ""}</div>
      <h3 class="sect">Vehicle Identity</h3>
      <div class="field-grid">
        <div class="fg-row">${vdCell("VIN", vin, true)}${vdCell("Stock #", veh.stock, true)}</div>
        <div class="fg-row">${vdCell("Year / Make", [veh.year, veh.make].filter(Boolean).join(" "))}${vdCell("Model / Trim", [veh.model, veh.trim].filter(Boolean).join(" "))}</div>
        <div class="fg-row">${vdCell("Body Style", veh.body)}${vdCell("Exterior Color", veh.color)}</div>
        <div class="fg-row">${vdCell("Odometer", veh.miles ? Number(String(veh.miles).replace(/[^0-9]/g, "")).toLocaleString("en-US") + " mi" : "", true)}${vdCell("Stock Type", veh.type === "N" ? "New" : "Pre-Owned")}</div>
        <div class="fg-row">${vdCell("WMI / Plant / Serial", vin.length === 17 ? vin.slice(0, 3) + " · " + vin[10] + " · " + vin.slice(11) : "", true)}${vdCell("Check Digit", vin.length === 17 ? vin[8] + (cdOk ? " (valid)" : " (does not pass)") : "")}</div>
      </div>
      <h3 class="sect">Powertrain &amp; Mechanical</h3>
      <div class="field-grid">
        <div class="fg-row">${vdCell("Engine", veh.engine)}${vdCell("Transmission", veh.transmission)}</div>
        <div class="fg-row">${vdCell("Cylinders", veh.cylinders)}${vdCell("Displacement", veh.displacement)}</div>
        <div class="fg-row">${vdCell("Drivetrain", veh.drive)}${vdCell("Fuel Type", veh.fuel)}</div>
      </div>
      <h3 class="sect">Compliance</h3>
      <div class="field-grid">
        <div class="fg-row">${vdCell("GVWR", veh.gvwr)}${vdCell("Assembly Plant", dec.state === "ok" ? dec.plant : "")}</div>
        <div class="fg-row">${vdCell("NHTSA Recalls", rc ? (rc.count ? rc.count + " campaign(s): " + rc.recalls.map(r => r.campaign).join(", ") : "none listed") : "not looked up")}${vdCell("Decode", decodeLine())}</div>
      </div>
      ${rc && rc.count ? `<h3 class="sect">Recall Campaigns</h3><ul style="font-size:9.5pt;margin:4px 0;padding-left:18px;">${rc.recalls.map(r => `<li><b>${vdEsc(r.campaign)}</b> ${vdEsc(r.component || "")} — ${vdEsc(r.summary || "")} <i>(${vdEsc(r.status)})</i></li>`).join("")}</ul>` : ""}
      <div class="foot"><span>${vdEsc(vdDealerName())}</span><span>Spec Sheet · ${vdEsc(veh.stock || vin)} · ${new Date().toLocaleDateString("en-US")}</span></div>`;
    if (!vdPrint("Spec Sheet " + (veh.stock || vin), html)) toast("The print window was blocked by the browser. Allow pop-ups for the DMS and try again.");
  };
  const lookupRecalls = async () => {
    setModal("recall");
    if (!api || !api.isVin(vin)) { setRecalls({ state: "err", text: "Enter a full 17-character VIN first." }); return; }
    setRecalls({ state: "busy" });
    try { const r = await api.recalls(vin, { year: veh.year, make: veh.make, model: veh.model }); setRecalls({ state: "ok", vin, data: r }); if (api.remember) { const rec = api.recent().find(x => x.vin === vin); if (rec) api.remember({ ...rec, recallCount: r.count }); } }
    catch (e) { setRecalls({ state: "err", text: e && e.text ? e.text : "The recall look-up is not available right now." }); }
  };
  const sendToStockIn = () => {
    if (!canStockIn) { toast("Stock-In is not part of your role."); return; }
    if (!isVin) { toast("Enter a full VIN first."); return; }
    const pre = { vin, type: veh.type || "U" };
    const put = (k, v) => { if (v != null && String(v).trim() !== "") pre[k] = v; };
    put("stock", veh.stock); put("yr", parseInt(veh.year, 10) || undefined); put("mk", vdS(veh.make).slice(0, 4).toUpperCase()); put("mdl", vdS(veh.model).toUpperCase()); put("trim", vdS(veh.trim).toUpperCase());
    put("body", vdS(veh.body).toUpperCase()); put("color", vdS(veh.color).toUpperCase()); put("miles", veh.miles); put("drive", veh.drive); put("engine", veh.engine); put("trans", veh.transmission); put("fuel", veh.fuel);
    if (dec.state === "ok" && dec.dollars) { const names = (dec.packages || []).concat((dec.options || []).map(o => o && (o.name || o.code)).filter(Boolean)); if (names.length) pre.vinOptions = names.join(", "); if (dec.msrp > 0) pre.msrp = Math.round(dec.msrp); }
    window.jbStockInPrefill = pre;
    toast(`${vehicleLine() || vin} sent to Stock-In.`);
    go && go("stockin");
  };
  const sendToTrade = () => {
    if (!tradeTarget) { toast("The trade screens are not part of your role."); return; }
    if (!isVin) { toast("Enter a full VIN first."); return; }
    const ptr = { leadId: "", custNum: "", name: "", vin, year: veh.year, make: veh.make, model: veh.model, trim: veh.trim, miles: vdS(veh.miles).replace(/[^0-9]/g, ""), color: veh.color, payoff: 0, lender: "" };
    if (tradeTarget === "trades") { api && api.pointerSet("jb_trade_lead", ptr); toast(`${vehicleLine() || vin} sent to Trade-In Requests.`); go && go("trades"); return; }
    api && api.pointerSet("jb_appraisal_lead", ptr); window.jbAppraisalLead = ptr;
    toast(`${vehicleLine() || vin} sent to Trade Appraisal.`);
    go && go("appraisal");
  };
  const openRecent = (row) => {
    typed.current = new Set(); wrote.current = {}; seq.current++;
    const base = VD_EMPTY();
    const { patch, filled } = api.fill(base, { vehicle: row.vehicle || {} }, new Set(), VD_KEYS, { year: (n) => String(n), cylinders: (n) => String(n) }, {});
    filled.forEach(f => { wrote.current[f.key] = f.to; wrote.current[f.key + "|from"] = ""; });
    wrote.current["|vin"] = row.vin;
    lastDecoded.current = row.vin;
    setVeh({ ...base, ...patch }); setVinRaw(row.vin); setRecalls(rc => (rc.vin === row.vin ? rc : { state: "idle" })); setConfirmVin(false);
    setDec({ state: "ok", vin: row.vin, source: row.source || "saved", cached: true, fetchedAt: row.at, ageMinutes: null, filled, warning: null, message: "Re-opened from this station's recent decodes (F5 decodes it again).", mc: null, dollars: false, msrp: undefined, options: [], packages: [], plant: "", manufacturer: "", fromStation: true });
    setModal(null);
    toast(`Re-opened ${row.vin}${row.label ? " — " + row.label : ""}.`);
  };

  // ── keyboard: the real keys ──
  React.useEffect(() => {
    const h = (e) => {
      const k = e.key;
      if (k === "Escape") { if (R.current.modal) { setModal(null); } else { onClose && onClose(); } return; }
      const map = { F1: () => setModal("help"), F2: () => setModal("lookup"), F3: buildStk, F4: printSticker, F5: () => decode(), F6: printSpec, F8: lookupRecalls };
      if (map[k] && !R.current.modal) { e.preventDefault(); map[k](); }
      else if (k === "F5" && R.current.modal) e.preventDefault();
    };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  });

  const F = ({ k, w = 200, hi, num }) => (
    <input data-vd={k} value={vdS(veh[k])} onChange={(e) => upd(k, num ? e.target.value.replace(/[^0-9,]/g, "") : e.target.value)}
           style={{ width: w, background: hi ? "var(--k2b-yellow)" : "#FFFFFF", border: "1px solid #808080", padding: "0 4px", fontFamily: "'Courier Prime', monospace", color: "var(--k2b-navy)", textTransform: /^(make|model|trim|body|color|stock)$/.test(k) ? "uppercase" : "none" }} />
  );
  const row = (label, k, w, hi, num) => <div className="fipro-row"><span className="fipro-label">{label}</span>{F({ k, w, hi, num })}</div>;
  const srcColor = dec.state === "ok" ? (dec.source === "marketcheck" ? "#1B5E20" : dec.source === "nhtsa" ? "#1B4F8A" : "#7A4B00") : "var(--k2b-navy)";
  const stripBg = dec.state === "err" ? "#FFE1E1" : dec.state === "busy" ? "#EEF2F8" : dec.state === "ok" ? (dec.partial ? "#FFF6DA" : "#EAF6EC") : "#F4F4F4";

  return (
    <div className="k2b-window" id="vd-screen" style={{ width: "100%", maxWidth: 1180, height: "min(700px, calc(100vh - 96px))", minHeight: 460, margin: "8px auto", position: "relative" }}>
      <K2BTitlebar title="VIN - VIN Decode" onClose={onClose} />

      {flash && (
        <div id="vd-flash" style={{ background: "var(--k2b-yellow)", color: "var(--k2b-navy)", borderBottom: "1px solid #808080", padding: "3px 12px", fontFamily: "'Courier Prime', monospace", fontSize: 12, fontWeight: 700 }}>
          ✓ {flash}
        </div>
      )}

      <div style={{ flex: 1, minHeight: 0, minWidth: 0, display: "flex", overflow: "hidden" }}>
      <div className="fipro-form" style={{ flex: "1 1 auto", minWidth: 0, minHeight: 0, overflow: "auto", display: "flex", flexWrap: "wrap", alignItems: "flex-start", alignContent: "flex-start", gap: "0 14px", padding: "6px 10px" }}>

        {/* VIN entry + status strip (full width) */}
        <div style={{ flex: "1 1 100%", minWidth: 0 }}>
          <div className="fipro-row" style={{ marginBottom: 4, display: "flex", flexWrap: "wrap", alignItems: "center", rowGap: 4 }}>
            <span className="fipro-label">{"VIN.........: "}</span>
            <input id="vd-vin" value={vin} autoFocus spellCheck={false} placeholder="type or paste a 17-character VIN"
                   onChange={(e) => setVin(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); decode(); } }}
                   style={{ width: 230, background: "var(--k2b-yellow)", border: "1px solid #808080", padding: "1px 6px", fontFamily: "'Courier Prime', monospace", fontWeight: 700, fontSize: 14, color: "var(--k2b-navy)", letterSpacing: 1 }} />
            <VdBtn small id="vd-decode" style={{ marginLeft: 10 }} onClick={() => decode()} disabled={dec.state === "busy"}>{dec.state === "busy" ? "Decoding…" : "F5-Decode"}</VdBtn>
            <VdBtn small id="vd-clear" style={{ marginLeft: 4 }} onClick={clearAll}>Clear</VdBtn>
            {/* Carfax ▸ — opens the VIN in the dealer's own Carfax for Dealers tab (sign in once); Carfax stays an optional link */}
            {window.AppLaunchButton
              ? <AppLaunchButton app="carfax" ctx={{ vin }} small label="Carfax ▸" style={{ marginLeft: 8 }} />
              : (window.CarfaxButton ? <CarfaxButton small vin={vin} ctx={vehicleLine()} style={{ marginLeft: 8 }} /> : null)}
            {window.CarfaxButton && <CarfaxButton small panel vin={vin} ctx={vehicleLine()} style={{ marginLeft: 4, background: "#5B6B85" }} />}
          </div>
          <div id="vd-status" data-state={dec.state} data-vin={dec.state === "ok" ? dec.vin : ""} data-source={dec.state === "ok" ? dec.source : ""} data-cached={dec.state === "ok" && dec.cached ? "1" : "0"}
               style={{ background: stripBg, border: "1px solid #B0B0B0", padding: "3px 8px", marginBottom: 6, fontSize: 11.5, lineHeight: 1.4, color: "var(--k2b-navy)", fontFamily: "var(--font-ui)" }}>
            {dec.state === "idle" && <span>Type or paste a VIN. It is decoded by MarketCheck, then by NHTSA (the free government decoder) when MarketCheck cannot answer. Fields you type are never overwritten.</span>}
            {dec.state === "busy" && <span>Looking up VIN {dec.vin}…</span>}
            {dec.state === "err" && <span id="vd-err">{dec.text}</span>}
            {dec.state === "ok" && (
              <>
                <b id="vd-source" style={{ color: srcColor }}>{dec.fromStation ? "Re-opened from this station" : "✓ " + decodeLine()}</b>
                {dec.filled && dec.filled.length > 0 && <span> — filled {dec.filled.map(f => f.label).join(", ")}. Anything already typed was left alone.<button type="button" id="vd-undo" className="k2b-button small" onClick={undo} style={{ marginLeft: 8, padding: "0 8px", fontSize: 11 }}>Undo fill</button></span>}
                {dec.undone > 0 && <span> — undone, {dec.undone} field{dec.undone === 1 ? "" : "s"} put back.<button type="button" className="k2b-button small" onClick={() => decode()} style={{ marginLeft: 8, padding: "0 8px", fontSize: 11 }}>Fill again</button></span>}
                {dec.partial && <div style={{ color: "#7A4B00" }}>{dec.message}</div>}
                {!dec.partial && dec.mc && dec.mc.status !== "ok" && dec.mc.status !== "cached" && <div id="vd-mc-note" style={{ color: "#7A4B00" }}>{dec.mc.message}</div>}
                {dec.warning && <div id="vd-warning" style={{ color: "#8A1F1F" }}>{dec.warning}{!cdOk && !confirmVin && dec.source !== "marketcheck" && <label style={{ marginLeft: 8 }}><input type="checkbox" id="vd-confirm" checked={confirmVin} onChange={(e) => { setConfirmVin(e.target.checked); if (e.target.checked) { lastDecoded.current = ""; setTimeout(() => decode({ confirm: true }), 0); } }} /> VIN is correct - decode again with MarketCheck</label>}</div>}
              </>
            )}
            {dec.state !== "ok" && isVin && !cdOk && <div id="vd-warning" style={{ color: "#8A1F1F" }}>This VIN does not pass the check-digit test - it may be mistyped.</div>}
          </div>
        </div>

        {/* LEFT — identity (read from the VIN itself) + description (editable) */}
        <div style={{ flex: "1 1 380px", minWidth: 0 }}>
          <div className="k2b-section-head" style={{ color: "var(--k2b-navy)", fontSize: 16 }}>Identity</div>
          <div className="fipro-row"><span className="fipro-label">{"WMI (Pos 1-3): "}</span><span className="fipro-field text" style={{ minWidth: 48 }}>{vin.slice(0, 3)}</span><span className="fipro-label">  </span><span className="fipro-readout" style={{ minWidth: 200 }}>{dec.state === "ok" && dec.manufacturer ? dec.manufacturer : (vin.length >= 3 ? (veh.make || "") : "")}</span></div>
          <div className="fipro-row"><span className="fipro-label">{"Year Letter.: "}</span><span className="fipro-field hi text" style={{ minWidth: 70 }}>{vdYearLetter(vin)}</span></div>
          <div className="fipro-row"><span className="fipro-label">{"Plant.......: "}</span><span className="fipro-field text" style={{ minWidth: 170 }}>{vin.length >= 11 ? vin[10] + (dec.state === "ok" && dec.plant ? " = " + dec.plant : "") : ""}</span></div>
          <div className="fipro-row"><span className="fipro-label">{"Serial......: "}</span><span className="fipro-field text" style={{ minWidth: 90 }}>{vin.slice(11)}</span></div>
          <div className="fipro-row"><span className="fipro-label">{"Check Digit.: "}</span><span className="fipro-field text" style={{ minWidth: 28 }}>{vin[8] || ""}</span><span className="fipro-label">  </span>
            {isVin && <span id="vd-check" style={{ color: cdOk ? "var(--k2b-green)" : "var(--k2b-maroon)", fontWeight: 700 }}>{cdOk ? "VALID" : "DOES NOT PASS"}</span>}
          </div>

          <div className="k2b-section-head" style={{ color: "var(--k2b-navy)", fontSize: 16, marginTop: 8 }}>Description</div>
          {row("Year........: ", "year", 70, true, true)}
          {row("Make........: ", "make", 200)}
          {row("Model.......: ", "model", 200, true)}
          {row("Trim........: ", "trim", 200)}
          {row("Body Style..: ", "body", 200)}
          {row("Color.......: ", "color", 200)}
          <div className="fipro-row"><span className="fipro-label">{"Miles.......: "}</span>{F({ k: "miles", w: 100, num: true })}<span className="fipro-label" style={{ marginLeft: 10 }}>{"New/Used: "}</span>
            {["N", "U"].map(t => <button key={t} type="button" data-vd-type={t} aria-pressed={veh.type === t} className="k2b-button small" onClick={() => upd("type", t)} style={{ background: veh.type === t ? "#D0E2F0" : "#F0F0F0", fontWeight: veh.type === t ? 700 : 400, minWidth: 48, marginRight: 4 }}>{t === "N" ? "New" : "Used"}</button>)}
          </div>
          {row("Stock #.....: ", "stock", 120, true)}
        </div>

        {/* MIDDLE — Powertrain / Compliance (editable) */}
        <div style={{ flex: "1 1 340px", minWidth: 0, borderLeft: "1px solid var(--jb-border, #D5D9DF)", paddingLeft: 12, boxSizing: "border-box" }}>
          <div className="k2b-section-head" style={{ color: "var(--k2b-navy)", fontSize: 16 }}>Powertrain</div>
          {row("Engine......: ", "engine", 240)}
          {row("Cylinders...: ", "cylinders", 60, false, true)}
          {row("Displacement: ", "displacement", 80)}
          {row("Trans.......: ", "transmission", 240)}
          {row("Drive.......: ", "drive", 80)}

          <div className="k2b-section-head" style={{ color: "var(--k2b-navy)", fontSize: 16, marginTop: 8 }}>Compliance</div>
          {row("GVWR........: ", "gvwr", 240)}
          {row("Fuel Type...: ", "fuel", 200)}
          <div className="fipro-row"><span className="fipro-label">{"NHTSA Recall: "}</span>
            <span id="vd-recall-line" style={{ color: recalls.state === "ok" ? (recalls.data.count ? "var(--k2b-maroon)" : "var(--k2b-green)") : "var(--k2b-navy)", fontWeight: 700 }}>
              {recalls.state === "ok" ? (recalls.data.count ? `${recalls.data.count} RECALL CAMPAIGN${recalls.data.count > 1 ? "S" : ""} LISTED` : "NO RECALL CAMPAIGNS LISTED") : recalls.state === "busy" ? "CHECKING…" : "NOT CHECKED - F8"}
            </span>
          </div>
          {dec.state === "ok" && dec.dollars && dec.source === "marketcheck" && (
            <>
              <div className="k2b-section-head" style={{ color: "var(--k2b-navy)", fontSize: 16, marginTop: 8 }}>Factory</div>
              <div className="fipro-row"><span className="fipro-label">{"MSRP........: "}</span><span id="vd-msrp" className="fipro-readout" style={{ minWidth: 100 }}>{dec.msrp > 0 ? "$" + Number(dec.msrp).toLocaleString("en-US") : "—"}</span></div>
              <div className="fipro-row" style={{ alignItems: "flex-start" }}><span className="fipro-label">{"Options.....: "}</span><span id="vd-options" className="fipro-readout" style={{ minWidth: 200, whiteSpace: "normal", maxWidth: 420 }}>{(dec.packages || []).concat((dec.options || []).map(o => o && (o.name || o.code)).filter(Boolean)).filter((x, i, a) => a.findIndex(y => String(y).toLowerCase() === String(x).toLowerCase()) === i).join(", ") || "—"}</span></div>
            </>
          )}
        </div>

      </div>

        {/* RIGHT — actions (own column; scrolls on short screens) */}
        <div className="jb-fkeys" style={{ flex: "0 0 auto", width: 170, boxSizing: "border-box", display: "flex", flexDirection: "column", gap: 2, padding: "6px 6px", overflowY: "auto", overflowX: "hidden", borderLeft: "1px solid var(--jb-border, #D5D9DF)" }}>
          <VdBtn style={{ minWidth: 150 }} onClick={onClose}>ESC-Finished</VdBtn>
          <VdBtn style={{ minWidth: 150 }} id="vd-help" onClick={() => setModal("help")}>F1-Help</VdBtn>
          <VdBtn style={{ minWidth: 150 }} id="vd-lookup" onClick={() => setModal("lookup")}>F2-Lookup</VdBtn>
          <VdBtn style={{ minWidth: 150 }} id="vd-stk" onClick={buildStk}>F3-Build Stk #</VdBtn>
          <VdBtn style={{ minWidth: 150 }} id="vd-sticker" onClick={printSticker} disabled={!isVin}>F4-Window Sticker</VdBtn>
          <VdBtn style={{ minWidth: 150 }} id="vd-decode-again" onClick={() => decode()} disabled={!isVin || dec.state === "busy"}>F5-Decode{dec.state === "ok" ? " Again" : ""}</VdBtn>
          <VdBtn style={{ minWidth: 150 }} id="vd-print" onClick={printSpec} disabled={!isVin}>F6-Print Spec</VdBtn>
          <VdBtn style={{ minWidth: 150 }} id="vd-recall" onClick={lookupRecalls} disabled={!isVin}>F8-Recall Lookup</VdBtn>
          {(canStockIn || tradeTarget) && <div style={{ borderTop: "1px solid var(--jb-border, #D5D9DF)", margin: "4px 0" }} />}
          {canStockIn && <VdBtn style={{ minWidth: 150, background: "var(--k2b-yellow, #FFD24A)", fontWeight: 700 }} id="vd-send-stockin" onClick={sendToStockIn} disabled={!isVin}>Send to Stock-In ▸</VdBtn>}
          {tradeTarget && <VdBtn style={{ minWidth: 150 }} id="vd-send-trade" onClick={sendToTrade} disabled={!isVin}>{tradeTarget === "trades" ? "Send to Trade-In ▸" : "Send to Appraisal ▸"}</VdBtn>}
        </div>
      </div>

      {/* ─── Modals ─────────────────────────────────────────────── */}
      {modal === "lookup" && (
        <VinModal title="VINLOOK - Recent Decodes on this Station" width={680} onClose={() => setModal(null)}>
          <div id="vd-modal-lookup">
            <div style={{ marginBottom: 8, display: "flex", alignItems: "center", gap: 8 }}><span>The last {(api ? api.recent() : []).length} VINs decoded on this station. Click one to re-open it.</span><span style={{ flex: 1 }} />
              {(api ? api.recent() : []).length > 0 && <VdBtn small onClick={() => { (api.recent() || []).forEach(r => api.forget(r.vin)); setModal(null); toast("Recent decodes cleared."); }}>Clear list</VdBtn>}</div>
            <div style={{ background: "#FFFFFF", border: "1px solid #808080", maxHeight: 360, overflow: "auto" }}>
              {(api ? api.recent() : []).length === 0 && <div style={{ padding: 10, color: "#666" }}>Nothing decoded on this station yet. Type or paste a VIN and press F5.</div>}
              {(api ? api.recent() : []).map((r, i) => (
                <div key={r.vin} data-vd-recent={r.vin} onClick={() => openRecent(r)}
                     style={{ display: "grid", gridTemplateColumns: "180px 1fr 110px 90px", gap: 10, padding: "4px 8px", background: r.vin === vin ? "var(--k2b-yellow)" : (i % 2 ? "#FFFFFF" : "#F4F4F4"), color: "var(--k2b-navy)", cursor: "pointer", borderBottom: "1px solid #D0D0D0" }}>
                  <span style={{ fontWeight: 700 }}>{r.vin}</span>
                  <span>{r.label || "(no description)"}</span>
                  <span style={{ fontSize: 11 }}>{r.source === "marketcheck" ? "MarketCheck" : r.source === "nhtsa" ? "NHTSA" : r.source === "local" ? "partial" : r.source || ""}{r.recallCount != null ? (r.recallCount ? " · " + r.recallCount + " RCL" : " · no RCL") : ""}</span>
                  <span style={{ fontSize: 11, color: "#555" }}>{vdWhen(r.at)}</span>
                </div>
              ))}
            </div>
          </div>
        </VinModal>
      )}

      {modal === "stk" && (
        <VinModal title="VINSTK - Build Stock Number" width={440} onClose={() => setModal(null)}>
          <div style={{ marginBottom: 8 }}>Stock # for VIN <b>{vin || "(no VIN yet)"}</b> — {veh.type === "N" ? "new" : "used"} unit, model year {veh.year || "(year not set)"}.</div>
          <div style={{ background: "#FFFFE1", border: "1px solid #808080", padding: "10px 12px", textAlign: "center" }}>
            <div style={{ fontSize: 11, color: "var(--k2b-maroon)", fontWeight: 700 }}>STOCK NUMBER</div>
            <div id="vd-stk-built" style={{ fontFamily: "'Courier Prime', monospace", fontSize: 24, fontWeight: 700, color: "var(--k2b-navy)", letterSpacing: 1 }}>{stkBuilt}</div>
            <div style={{ fontSize: 11, color: "var(--k2b-navy)" }}>Pattern: {veh.type === "N" ? "T" : "U"}{String(parseInt(veh.year, 10) || new Date().getFullYear()).slice(-2)}-####  ·  the same rule Stock-In uses; a number already in inventory is skipped</div>
          </div>
          <div style={{ marginTop: 10, display: "flex", gap: 6, justifyContent: "flex-end" }}>
            <VdBtn small onClick={buildStk}>Another number</VdBtn>
            <VdBtn small onClick={() => setModal(null)}>Keep it</VdBtn>
            {canStockIn && <VdBtn small onClick={() => { setModal(null); sendToStockIn(); }}>Send to Stock-In ▸</VdBtn>}
          </div>
        </VinModal>
      )}

      {modal === "recall" && (
        <VinModal title="VINRCL - NHTSA Recall Lookup" width={640} onClose={() => setModal(null)}>
          <div id="vd-modal-recall" data-state={recalls.state}>
            <div style={{ marginBottom: 6 }}>VIN <b>{vin}</b> · {vehicleLine() || "(year / make / model not set)"}</div>
            {recalls.state === "busy" && <div style={{ padding: "10px 12px", background: "#EEF2F8", border: "1px solid #B8C4D8" }}>Asking NHTSA…</div>}
            {recalls.state === "err" && <div id="vd-recall-err" style={{ padding: "10px 12px", background: "#FFE1E1", border: "1px solid var(--k2b-maroon)", color: "var(--k2b-maroon)" }}>{recalls.text}</div>}
            {recalls.state === "ok" && recalls.data.count === 0 && (
              <div id="vd-recall-none" style={{ background: "#E6F4E6", border: "1px solid var(--k2b-green)", color: "var(--k2b-green)", padding: "10px 12px", fontWeight: 700 }}>
                NO RECALL CAMPAIGNS LISTED BY NHTSA for {recalls.data.vehicle.year} {recalls.data.vehicle.make} {recalls.data.vehicle.model} · checked {vdWhen(recalls.data.fetchedAt)}{recalls.data.cached ? " (saved answer)" : ""}
              </div>
            )}
            {recalls.state === "ok" && recalls.data.count > 0 && (
              <div style={{ background: "#FFFFFF", border: "1px solid #808080", maxHeight: 340, overflow: "auto" }}>
                {recalls.data.recalls.map((r, i) => (
                  <div key={r.campaign || i} data-vd-recall={r.campaign} style={{ padding: 8, borderBottom: i === recalls.data.count - 1 ? 0 : "1px solid #D0D0D0" }}>
                    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                      <span style={{ fontWeight: 700, color: "var(--k2b-maroon)" }}>{r.campaign}</span>
                      <span style={{ color: "#555" }}>{r.component}</span>
                      <span style={{ marginLeft: "auto", color: "var(--k2b-maroon)", fontWeight: 700 }}>{r.status}</span>
                    </div>
                    <div style={{ fontSize: 11.5 }}>{r.summary}</div>
                    {r.remedy && <div style={{ fontSize: 11, color: "#555" }}>Remedy: {r.remedy}</div>}
                    {r.reportDate && <div style={{ fontSize: 10.5, color: "#777" }}>Reported {r.reportDate}</div>}
                  </div>
                ))}
              </div>
            )}
            {recalls.state === "ok" && <div style={{ fontSize: 10.5, color: "#555", marginTop: 6 }}>{recalls.data.message}{recalls.data.stale ? "" : ""} {recalls.data.note}</div>}
          </div>
          <div style={{ marginTop: 10, display: "flex", gap: 6, justifyContent: "flex-end" }}>
            <VdBtn small onClick={() => setModal(null)}>ESC-Close</VdBtn>
            <VdBtn small onClick={lookupRecalls} disabled={recalls.state === "busy"}>Check again</VdBtn>
            {recalls.state === "ok" && recalls.data.count > 0 && <VdBtn small onClick={() => { setModal(null); printSpec(); }}>F6-Print with recalls</VdBtn>}
          </div>
        </VinModal>
      )}

      {modal === "help" && (
        <VinModal title="VIN - Help" width={520} onClose={() => setModal(null)}>
          <div id="vd-modal-help" style={{ lineHeight: 1.55 }}>
            <div><b>VIN box</b> — type or paste a 17-character VIN; it is decoded as soon as it is complete (Enter or F5 decodes at once).</div>
            <div><b>Who decodes</b> — MarketCheck first (a saved answer is reused), then NHTSA, the free government decoder, then what the VIN itself says. The line under the VIN tells you which one answered.</div>
            <div><b>Fields</b> — every field is yours to edit. A decode fills only blank fields; what you typed stays. <b>Undo fill</b> puts the filled values back.</div>
            <div><b>F2-Lookup</b> — the last 20 VINs decoded on this station; click one to re-open it.</div>
            <div><b>F3-Build Stk #</b> — the next stock number, built the way Stock-In builds it (U/T + year + number).</div>
            <div><b>F4-Window Sticker</b> — prints the window sticker for the vehicle as shown (edited fields included).</div>
            <div><b>F5-Decode</b> — decode the VIN (again).</div>
            <div><b>F6-Print Spec</b> — prints the one-page spec sheet (Identity · Powertrain · Compliance · recalls when checked).</div>
            <div><b>F8-Recall Lookup</b> — NHTSA recall campaigns for this year, make and model (uses the fields as shown).</div>
            {canStockIn && <div><b>Send to Stock-In</b> — opens Stock-In with this vehicle and stock number filled in.</div>}
            {tradeTarget && <div><b>{tradeTarget === "trades" ? "Send to Trade-In" : "Send to Appraisal"}</b> — opens {tradeTarget === "trades" ? "Trade-In Requests" : "Trade Appraisal"} with this vehicle (VIN, year, make, model, trim, miles, colour).</div>}
            {!canStockIn && !tradeTarget && <div><b>Hand-offs</b> — Stock-In and the trade screens are not part of your role, so there are no Send buttons here; print the spec sheet (F6) for whoever needs it.</div>}
            <div><b>ESC</b> — finished (closes a window first when one is open).</div>
          </div>
        </VinModal>
      )}
    </div>
  );
};

// Local modal — keeps the F&I Pro look inside the K2BVIN window.
const VinModal = ({ title, width = 520, children, onClose }) => {
  React.useEffect(() => {
    const h = (e) => { if (e.key === "Escape") onClose && onClose(); };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [onClose]);
  return (
    <div style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.35)",
                  display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000 }}
         /* close only if the press STARTED on the backdrop — a selection drag ending here must not close */
         onMouseDown={(e) => { e.currentTarget.__k2bDownOnBackdrop = (e.target === e.currentTarget); }}
         onClick={(e) => { const d = e.currentTarget.__k2bDownOnBackdrop; e.currentTarget.__k2bDownOnBackdrop = false; if (d && e.target === e.currentTarget) onClose && onClose(); }}>
      <div onClick={(e) => e.stopPropagation()}
           style={{ width: "min(96%, " + width + "px)", maxHeight: "90%",
                    background: "#C0C0C0", border: "2px solid #000",
                    boxShadow: "2px 2px 0 #000", display: "flex", flexDirection: "column" }}>
        <K2BTitlebar title={title} onClose={onClose} />
        <div style={{ padding: 12, background: "#C0C0C0",
                      fontFamily: "'Courier Prime', monospace", fontSize: 12,
                      color: "var(--k2b-navy)", overflow: "auto" }}>
          {children}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { VinDecode, VinModal, VdBtn, vdNextStock, vdPrint });