/* 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 — Vehicle Stock-In (STKIN).
// The receiving workflow when a new or used vehicle arrives:
//   1. VIN / factory invoice / MSO / title
//   2. Dealer adds (prep, fuel, freight, advertising, recon for used)
//   3. Floorplan assignment & curtailment schedule
//   4. Keys / fobs / accessories
//   5. Post: DMS.stockInVehicle — DR 231/237/240/241 inventory · CR 310/314
//      floorplan · CR 202 cash for any un-floored portion (jrn 70/71).
//
// The unit lands in DMS.inventory() on commit (visible immediately in
// INVSTK, which reads the same ledger).

const SI_BANKS = [
  { id: "GMF",  name: "GM FINANCIAL",     rate: 7.85, curt: 30 },
  { id: "ALLY", name: "ALLY",             rate: 7.95, curt: 30 },
  { id: "CHASE",name: "JPMORGAN CHASE",   rate: 7.65, curt: 60 },
  { id: "WTLK", name: "WESTLAKE FLOORPLAN", rate: 8.15, curt: 30 },
];

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

// GL accounts the stock-in will post to — same rule as DMS.stockInVehicle
// (new car 231 / new truck 237 / used car 240 / used truck 241; floorplan 310 new / 314 used; cash 202).
const siAccts = (v) => {
  const isNew = String(v.type || "N").toUpperCase().startsWith("N");
  const isTruck = /truck|pickup|silverado|sierra|colorado|1500|2500|3500/i.test((v.mdl || "") + " " + (v.body || ""));
  const inv = isNew ? (isTruck ? "237" : "231") : (isTruck ? "241" : "240");
  const floor = isNew ? "310" : "314";
  const nm = (a) => (window.DMS && window.DMS.acctName && window.DMS.acctName(a)) || "";
  return { inv, floor, cash: "202", invName: nm(inv), floorName: nm(floor), cashName: nm("202") };
};
const siToday = () => new Date().toLocaleDateString("en-US", { month: "2-digit", day: "2-digit", year: "2-digit" });
const siNum = (x) => parseFloat(String(x == null ? "" : x).replace(/[^0-9.\-]/g, "")) || 0;

// Starting values that count as "empty" for the VIN decode until a person types over them.
const SI_FILL_DEFAULT = { yr: 2026, mk: "CHEV", body: "4D SUV" };
// A VIN is stored without spaces or dashes (a pasted "1gcuy-eed5nz-612345" is the same VIN): otherwise the unit never matches its market price.
const siVinClean = (x) => (typeof invMcNormVin === "function" ? invMcNormVin(x) : String(x == null ? "" : x).toUpperCase().replace(/[\s-]+/g, ""));

const SI_DEFAULT_ADDS = {
  prep:        285,
  fuel:         42,
  freight:    1395,
  advertising: 220,
  pdi:         165,
  recon:         0,
};

const VehicleStockIn = ({ onClose, go }) => {
  const [step,  setStep]  = React.useState(0); // 0..4
  const [flash, setFlash] = React.useState("");
  // Fields a person has typed in (or that arrived pre-filled from VIN Decode) — a VIN decode from MarketCheck never replaces these.
  const touched = React.useRef(null);
  const [v, setV] = React.useState(() => {
    // VIN Decode's F5-Reserve hands off the decoded vehicle here.
    const pre = (typeof window !== "undefined" && window.jbStockInPrefill) || {};
    if (typeof window !== "undefined") window.jbStockInPrefill = null;
    touched.current = new Set(Object.keys(pre));
    return {
    type:   "N",
    stock:  "",
    vin:    "",
    yr:     2026,
    mk:     "CHEV",
    mdl:    "",
    trim:   "",
    body:   "4D SUV",
    color:  "",
    intColor: "JET BLACK",
    miles:  4,
    msoNo:  "",
    poNo:   "",
    invoiceDate: siToday(),
    invoiceCost: 0,
    msrp:        0,
    asking:      0,
    description: "",
    adds:        { ...SI_DEFAULT_ADDS },
    bank:        "GMF",
    advanced:    0,
    curtDays:    30,
    rate:        7.85,
    keys:        2,
    fobs:        2,
    accessories: "Owner manual, Spare key, Floor mats",
    notes:       "",
    source:      "FACTORY",
    drive:       "",
    engine:      "",
    trans:       "",
    fuel:        "",
    vinOptions:  "",
    ...pre,
    };
  });
  const [posted, setPosted] = React.useState(null);

  const toast = (m) => { setFlash(m); setTimeout(() => setFlash(""), 2800); };

  const upd = (k, val) => { touched.current.add(k); setV(p => ({ ...p, [k]: val })); };
  // Typing / pasting a VIN fills the still-empty fields from MarketCheck (our server decodes + caches; Undo available).
  const vinFill = (typeof InvMcUseVinFill === "function") ? InvMcUseVinFill({
    vin: v.vin, keys: { ...INV_MC_KEYS_STD, options: "vinOptions" },
    read: () => v, write: (p) => setV(prev => ({ ...prev, ...p })),
    isBlank: (k, raw) => invMcBlankRaw(k, raw) || (!touched.current.has(k) && SI_FILL_DEFAULT[k] !== undefined && String(raw) === String(SI_FILL_DEFAULT[k])),
    shape: { yr: (n) => n, mk: (t) => t.slice(0, 4), msrp: (n) => n },
  }) : null;
  const updAdd = (k, val) => setV(p => ({ ...p, adds: { ...p.adds, [k]: parseFloat(val) || 0 } }));

  const totalAdds = Object.values(v.adds).reduce((s, n) => s + (n || 0), 0);
  const capitalized = siNum(v.invoiceCost) + totalAdds;
  const retail = siNum(v.asking) || siNum(v.msrp);          // retail / asking; falls back to MSRP
  const spread = retail - capitalized;

  // Auto-generate stock # when type/yr/mk set
  React.useEffect(() => {
    if (!v.stock) {
      const yy = (v.yr || 2026).toString().slice(-2);
      const seq = Math.floor(1000 + Math.random() * 8999);
      upd("stock", `${v.type === "U" ? "U" : "T"}${yy}-${seq}`);
    }
  }, [v.type, v.yr]);

  // Default advanced amount = invoice cost
  React.useEffect(() => {
    if (!v.advanced && v.invoiceCost) upd("advanced", siNum(v.invoiceCost));
  }, [v.invoiceCost]);

  // Sync rate/curt when bank changes
  React.useEffect(() => {
    const b = SI_BANKS.find(b => b.id === v.bank);
    if (b) setV(p => ({ ...p, rate: b.rate, curtDays: b.curt }));
  }, [v.bank]);

  const validate = () => {
    if (!v.vin || v.vin.replace(/\*/g, "").length < 11) return "VIN required (17 chars, * for unknowns).";
    if (!v.mdl) return "Model is required.";
    if (!v.color) return "Exterior color required.";
    if (!siNum(v.invoiceCost)) return v.type === "U" ? "Acquisition cost required (Invoice step)." : "Invoice cost required (Invoice step).";
    if (!siNum(v.asking) && !siNum(v.msrp)) return "Enter the retail / asking price (or MSRP) on the Invoice step.";
    if (v.type === "U" && !(parseInt(String(v.miles).replace(/[^0-9]/g, "")) > 0)) return "Enter the odometer mileage for a used unit.";
    return null;
  };

  const commit = async () => {   // RC33 (mpx): the stock-in is a SERVER command (the unit + its purchase entry in one step) — await the committed answer
    const err = validate();
    if (err) { toast(err); setStep(/cost|retail|MSRP/i.test(err) ? 1 : 0); return; }
    const newUnit = {
      stock: v.stock.toUpperCase(),
      vin:   siVinClean(v.vin),
      yr:    parseInt(v.yr) || 2026,
      mk:    (v.mk || "CHEV").toUpperCase().padEnd(4, " ").slice(0, 4),
      mdl:   v.mdl.toUpperCase(),
      body:  v.body.toUpperCase(),
      color: v.color.toUpperCase(),
      miles: parseInt(String(v.miles).replace(/[^0-9]/g, "")) || 0,
      cost:  capitalized,
      list:  retail,
      days:  0,
      type:  v.type,
      status:"STOCK",
    };
    const bankName = SI_BANKS.find(b => b.id === v.bank)?.name || v.bank;
    let jeRef = null, jeLines = null;
    if (window.DMS && window.DMS.stockInVehicle) {
      // Real posting: adds the unit to DMS inventory + posts the purchase JE.
      const r = await window.DMS.stockInVehicle({
        stock: newUnit.stock, vin: newUnit.vin, yr: newUnit.yr,
        mk: newUnit.mk.trim(), mdl: newUnit.mdl, body: newUnit.body,
        color: newUnit.color, miles: newUnit.miles, type: v.type,
        cost: capitalized, asking: newUnit.list,
        floorAmt: siNum(v.advanced), floorLender: bankName,
        recon: v.adds.recon || 0,
      });
      if (!r.ok) { toast(r.msg); return; }
      jeRef = r.id; jeLines = r.lines;
      // The rest of the unit schema (not GL-relevant) — recorded on the new unit as received.
      if (window.DMS.updateUnit) window.DMS.updateUnit(newUnit.stock, {
        trim: (v.trim || "").toUpperCase(), description: (v.description || "").trim(), msrp: siNum(v.msrp),
        intColor: (v.intColor || "").toUpperCase(), keyTag: newUnit.stock, options: v.accessories || "", notes: v.notes || "",
        msoNo: v.msoNo || "", poNo: v.poNo || "", source: v.source || "", invoiceDate: v.invoiceDate || "", invoiceCost: siNum(v.invoiceCost),
        keys: +v.keys || 0, fobs: +v.fobs || 0,
      });
      // From the VIN decode (all optional): powertrain for the spec sheet, factory options joined with the accessories.
      const more = {};
      ["drive", "engine", "trans", "fuel"].forEach(k => { if ((v[k] || "").trim()) more[k] = v[k].trim(); });
      if ((v.vinOptions || "").trim()) more.options = [v.vinOptions.trim(), v.accessories || ""].filter(Boolean).join(" | ");
      if (window.DMS.updateUnit && Object.keys(more).length) window.DMS.updateUnit(newUnit.stock, more);
      window.jbInvOpen = newUnit.stock;     // "View in INVSTK" opens this unit
    } else if (typeof INV_STOCK !== "undefined") {
      // Offline fallback — local list only.
      INV_STOCK.unshift(newUnit);
    }

    setPosted({
      stock: newUnit.stock,
      jeRef: jeRef || "(not posted — ledger offline)",
      lines: jeLines,
      capitalized,
      advanced: parseFloat(v.advanced) || 0,
      bank: bankName,
      curtDate: new Date(Date.now() + (parseInt(v.curtDays) || 30) * 86400 * 1000)
                  .toLocaleDateString("en-US", { month: "2-digit", day: "2-digit", year: "2-digit" }),
    });
    setStep(5);
    toast(`Unit ${newUnit.stock} stocked in.`);
  };

  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 1180, height: 700, margin: "0 auto", background: "#C0C0C0" }}>
      <K2BTitlebar title="STKIN - Vehicle Stock-In Receiving" onClose={onClose} onMin={() => {}} onMax={() => {}} />

      {flash && (
        <div 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, padding: "10px 14px", background: "#C0C0C0",
                    fontFamily: "'Courier Prime', monospace", fontSize: 13, color: "var(--k2b-navy)",
                    display: "flex", flexDirection: "column", gap: 8, minHeight: 0 }}>

        {/* Stepper */}
        <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
          {["1 Vehicle","2 Invoice","3 Dealer Adds","4 Floorplan","5 Keys"].map((label, i) => (
            <React.Fragment key={i}>
              <button onClick={() => step !== 5 && setStep(i)}
                      style={{
                        background: i === step ? "var(--k2b-navy)" : (i < step ? "var(--k2b-green)" : "#F0F0F0"),
                        color:      i === step ? "var(--k2b-yellow)" : (i < step ? "#FFFFFF" : "var(--k2b-navy)"),
                        border: "1px solid #808080", padding: "3px 12px",
                        fontFamily: "'Courier Prime', monospace", fontSize: 12,
                        fontWeight: i === step ? 700 : 400, cursor: "pointer",
                      }}>
                {i < step ? "✓ " : ""}{label}
              </button>
              {i < 4 && <span style={{ color: "#808080" }}>›</span>}
            </React.Fragment>
          ))}
          <span style={{ flex: 1 }} />
          <span style={{ color: "var(--k2b-maroon)", fontWeight: 700 }}>Capitalized:</span>
          <span style={{ background: "var(--k2b-yellow)", border: "1px solid #808080",
                          padding: "0 6px", color: "var(--k2b-navy)", fontWeight: 700 }}>
            ${si$(capitalized)}
          </span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 280px", gap: 10, flex: 1, minHeight: 0 }}>

          {/* Step body */}
          <div style={{ background: "#FFFFFF", border: "1px solid #808080", padding: "10px 14px",
                        overflow: "auto" }}>
            {step === 0 && <StepVehicle  v={v} upd={upd} fill={vinFill} />}
            {step === 1 && <StepInvoice  v={v} upd={upd} />}
            {step === 2 && <StepAdds     v={v} updAdd={updAdd} totalAdds={totalAdds} />}
            {step === 3 && <StepFloor    v={v} upd={upd} capitalized={capitalized} />}
            {step === 4 && <StepKeys     v={v} upd={upd} />}
            {step === 5 && posted && <StepPosted v={v} posted={posted} go={go} onAnother={() => { window.jbInvOpen = null; touched.current = new Set(); setStep(0); setPosted(null); setV(p => ({ ...p, stock: "", vin: "", mdl: "", trim: "", color: "", description: "", notes: "", invoiceCost: 0, msrp: 0, asking: 0, advanced: 0, drive: "", engine: "", trans: "", fuel: "", vinOptions: "", adds: { ...SI_DEFAULT_ADDS } })); }} />}
          </div>

          {/* Sticky deal summary */}
          <SiSummary v={v} totalAdds={totalAdds} capitalized={capitalized} spread={spread} />
        </div>

        {/* Footer */}
        <div style={{ display: "flex", gap: 6 }}>
          <K2BButton small onClick={onClose}>ESC-Close</K2BButton>
          <span style={{ flex: 1 }} />
          {step > 0 && step < 5 && <K2BButton small onClick={() => setStep(s => s - 1)}>‹ Back</K2BButton>}
          {step < 4 && <K2BButton small onClick={() => setStep(s => s + 1)}>Next ›</K2BButton>}
          {step === 4 && <K2BButton small onClick={commit}>F10-Post Stock-In</K2BButton>}
          {step === 5 && <K2BButton small onClick={() => go && go("inventory")}>View in INVSTK ›</K2BButton>}
        </div>
      </div>
    </div>
  );
};

// ─── Step 1: Vehicle ───────────────────────────────────────────────────────
const StepVehicle = ({ v, upd, fill }) => (
  <div>
    <div className="k2b-section-head" style={{ color: "var(--k2b-navy)", fontSize: 15, marginBottom: 6 }}>
      Vehicle Identification
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "4px 18px" }}>
      <div>
        <div className="fipro-row">
          <span className="fipro-label" style={{ width: 110 }}>Type........:</span>
          {["N","U"].map(t => (
            <button key={t} className="k2b-button small" onClick={() => { upd("type", t); if (t === "U" && +v.miles <= 20) upd("miles", ""); if (t === "N" && !v.miles) upd("miles", 4); }}
                    style={{ background: v.type === t ? "#D0E2F0" : "#F0F0F0", minWidth: 56, marginRight: 4 }}>
              {t === "N" ? "New" : "Used"}
            </button>
          ))}
        </div>
        <SiF label="Stock #....." v={v.stock} onChange={(x) => upd("stock", x)} w={140} hi />
        <SiF label="Source......" v={v.source} onChange={(x) => upd("source", x)} w={180} options={["FACTORY","AUCTION","TRADE-IN","DEALER TRADE","WHOLESALE"]} />
        <SiF label="Year........" v={v.yr} onChange={(x) => upd("yr", parseInt(x) || 0)} w={70} field="yr" />
        <SiF label="Make........" v={v.mk} onChange={(x) => upd("mk", x)} w={80} field="mk" />
        <SiF label="Model......." v={v.mdl} onChange={(x) => upd("mdl", x)} w={220} hi field="mdl" />
        <SiF label="Trim........" v={v.trim} onChange={(x) => upd("trim", x)} w={140} field="trim" />
        <SiF label="Body........" v={v.body} onChange={(x) => upd("body", x)} w={120} field="body" />
      </div>
      <div>
        <SiF label="VIN........." v={v.vin} onChange={(x) => upd("vin", siVinClean(x))} w={220} hi field="vin" onBlur={fill ? fill.onBlur : undefined} />
        {fill && typeof InvMcVinNote === "function" && <InvMcVinNote fill={fill} />}
        <SiF label="Ext. Color.." v={v.color} onChange={(x) => upd("color", x)} w={180} />
        <SiF label="Int. Color.." v={v.intColor} onChange={(x) => upd("intColor", x)} w={140} />
        <SiF label={v.type === "U" ? "Odometer...." : "Miles......."} v={v.miles} onChange={(x) => upd("miles", x.replace(/[^0-9,]/g, ""))} w={100} hi={v.type === "U"} field="miles" />
        <SiF label="Drivetrain.." v={v.drive} onChange={(x) => upd("drive", x)} w={90} field="drive" />
        <SiF label="Engine......" v={v.engine} onChange={(x) => upd("engine", x)} w={200} field="engine" />
        <SiF label="Trans......." v={v.trans} onChange={(x) => upd("trans", x)} w={170} field="trans" />
        <SiF label="Fuel........" v={v.fuel} onChange={(x) => upd("fuel", x)} w={110} field="fuel" />
        {v.type === "N" && (
          <div style={{ marginTop: 6, padding: 8, background: "#FFFFE1", border: "1px solid #808080", fontSize: 11 }}>
            <strong style={{ color: "var(--k2b-maroon)" }}>Tip:</strong> for factory units, miles are typically 4–20 (transport mileage).
          </div>
        )}
        {v.type === "U" && (
          <div style={{ marginTop: 6, padding: 8, background: "#FFFFE1", border: "1px solid #808080", fontSize: 11 }}>
            <strong style={{ color: "var(--k2b-maroon)" }}>Reminder:</strong> request CarFax (F4 in INVSTK) before retail.
          </div>
        )}
      </div>
    </div>
    <div style={{ marginTop: 8 }}>
      <div style={{ color: "var(--k2b-maroon)", fontWeight: 700 }}>Description (shows on the unit, spec sheet and listings)</div>
      <textarea value={v.description || ""} onChange={(e) => upd("description", e.target.value)} rows={2}
                placeholder="e.g. One owner, clean Carfax, heated seats, tow package"
                style={{ width: "100%", boxSizing: "border-box", background: "#FFFFFF", border: "1px solid #808080", padding: 4,
                         fontFamily: "'Courier Prime', monospace", color: "var(--k2b-navy)", fontSize: 12, resize: "vertical" }} />
    </div>
    <div style={{ marginTop: 6 }}>
      <div style={{ color: "var(--k2b-maroon)", fontWeight: 700 }}>Factory options (filled from the VIN when MarketCheck is on)</div>
      <textarea data-field="vinOptions" value={v.vinOptions || ""} onChange={(e) => upd("vinOptions", e.target.value)} rows={2}
                placeholder="e.g. Z71 Off-Road Package, Trailering Package"
                style={{ width: "100%", boxSizing: "border-box", background: "#FFFFFF", border: "1px solid #808080", padding: 4,
                         fontFamily: "'Courier Prime', monospace", color: "var(--k2b-navy)", fontSize: 12, resize: "vertical" }} />
    </div>
  </div>
);

// ─── Step 2: Invoice / MSO ────────────────────────────────────────────────
const StepInvoice = ({ v, upd }) => (
  <div>
    <div className="k2b-section-head" style={{ color: "var(--k2b-navy)", fontSize: 15, marginBottom: 6 }}>
      Factory Invoice / Title Documents
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "4px 18px" }}>
      <div>
        <SiF label="MSO / Title #" v={v.msoNo} onChange={(x) => upd("msoNo", x)} w={200} hi />
        <SiF label="PO / DLR Ord#" v={v.poNo} onChange={(x) => upd("poNo", x)} w={200} />
        <SiF label="Invoice Date." v={v.invoiceDate} onChange={(x) => upd("invoiceDate", x)} w={100} />
      </div>
      <div>
        <SiF label={v.type === "U" ? "Acq. Cost...." : "Invoice Cost."} v={v.invoiceCost} onChange={(x) => upd("invoiceCost", x)} w={140} money hi />
        <SiF label={v.type === "U" ? "MSRP (opt.).." : "MSRP........."} v={v.msrp} onChange={(x) => upd("msrp", x)} w={140} money field="msrp" />
        <SiF label="Retail/Asking" v={v.asking} onChange={(x) => upd("asking", x)} w={140} money hi />
        <div style={{ fontSize: 11, color: "#555", marginLeft: 116 }}>{siNum(v.asking) ? "" : (siNum(v.msrp) ? "blank = MSRP" : "")}</div>
        <div className="fipro-row" style={{ marginTop: 4 }}>
          <span className="fipro-label" style={{ width: 110 }}>Spread......:</span>
          <span style={{ color: "var(--k2b-green)", fontWeight: 700 }}>
            {siNum(v.invoiceCost) && (siNum(v.asking) || siNum(v.msrp)) ? `$${si$((siNum(v.asking) || siNum(v.msrp)) - siNum(v.invoiceCost))}` : "—"}
          </span>
        </div>
      </div>
    </div>

    <div style={{ marginTop: 12, padding: 8, background: "#F4F4F4", border: "1px solid #808080" }}>
      <div style={{ color: "var(--k2b-maroon)", fontWeight: 700, marginBottom: 4 }}>Document Checklist</div>
      {[
        ["Manufacturer Statement of Origin (MSO)", v.type === "N"],
        ["Factory Invoice — confirmed against MSRP", true],
        ["Bill of Lading from transporter",         v.source === "FACTORY"],
        ["Title (used)",                             v.type === "U"],
        ["Odometer Disclosure",                      v.type === "U" || (v.miles && v.miles > 100)],
      ].filter(([, on]) => on).map(([label]) => (
        <div key={label}>
          <span style={{ color: "var(--k2b-green)", fontWeight: 700 }}>□</span> {label}
        </div>
      ))}
    </div>
  </div>
);

// ─── Step 3: Dealer Adds ──────────────────────────────────────────────────
const StepAdds = ({ v, updAdd, totalAdds }) => (
  <div>
    <div className="k2b-section-head" style={{ color: "var(--k2b-navy)", fontSize: 15, marginBottom: 6 }}>
      Dealer-Adds &amp; Inventory Cost Loading
    </div>
    <div style={{ background: "#F4F4F4", border: "1px solid #808080", padding: 10 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 140px", rowGap: 4 }}>
        <span>Lot Prep / Detail</span>          <SiNum v={v.adds.prep}        onChange={(x) => updAdd("prep", x)} />
        <span>Fuel</span>                       <SiNum v={v.adds.fuel}        onChange={(x) => updAdd("fuel", x)} />
        <span>Freight / Transportation</span>   <SiNum v={v.adds.freight}     onChange={(x) => updAdd("freight", x)} />
        <span>Advertising Allocation</span>     <SiNum v={v.adds.advertising} onChange={(x) => updAdd("advertising", x)} />
        <span>Pre-Delivery Inspection (PDI)</span><SiNum v={v.adds.pdi}       onChange={(x) => updAdd("pdi", x)} />
        {v.type === "U" && (
          <>
            <span style={{ color: "var(--k2b-maroon)" }}>Recon / Reconditioning</span>
            <SiNum v={v.adds.recon} onChange={(x) => updAdd("recon", x)} />
          </>
        )}
      </div>
      <div style={{ borderTop: "1px solid #808080", marginTop: 8, paddingTop: 6,
                    display: "flex", justifyContent: "space-between", fontWeight: 700 }}>
        <span style={{ color: "var(--k2b-maroon)" }}>Total Adds → capitalized into inventory {siAccts(v).inv}</span>
        <span style={{ color: "var(--k2b-green)" }}>${si$(totalAdds)}</span>
      </div>
    </div>

    <div style={{ marginTop: 10, padding: 8, background: "#FFFFE1", border: "1px solid #808080", fontSize: 11 }}>
      <strong style={{ color: "var(--k2b-maroon)" }}>How this posts:</strong> Adds capitalize into the unit's cost.
      One purchase entry: DR {siAccts(v).inv} {siAccts(v).invName} for invoice + adds · CR {siAccts(v).floor} floorplan for the amount advanced ·
      CR {siAccts(v).cash} cash for the rest.
    </div>
  </div>
);

// ─── Step 4: Floorplan ────────────────────────────────────────────────────
const StepFloor = ({ v, upd, capitalized }) => {
  const advanced = parseFloat(v.advanced) || 0;
  const rate = parseFloat(v.rate) || 0;
  const monthlyInterest = (advanced * (rate / 100)) / 12;
  const curt = parseInt(v.curtDays) || 30;
  return (
    <div>
      <div className="k2b-section-head" style={{ color: "var(--k2b-navy)", fontSize: 15, marginBottom: 6 }}>
        Floorplan Assignment
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "4px 18px" }}>
        <div>
          <div className="fipro-row">
            <span className="fipro-label" style={{ width: 110 }}>Bank........:</span>
            <select value={v.bank} onChange={(e) => upd("bank", e.target.value)}
                    style={{ background: "var(--k2b-yellow)", border: "1px solid #808080",
                              fontFamily: "'Courier Prime', monospace", color: "var(--k2b-navy)",
                              padding: "0 4px", minWidth: 200 }}>
              {SI_BANKS.map(b => <option key={b.id} value={b.id}>{b.name}</option>)}
            </select>
          </div>
          <SiF label="Rate (APR)..." v={v.rate} onChange={(x) => upd("rate", parseFloat(x) || 0)} w={80} />
          <SiF label="Curtail (dy).." v={v.curtDays} onChange={(x) => upd("curtDays", parseInt(x) || 30)} w={80} />
          <SiF label="Advanced...."  v={v.advanced} onChange={(x) => upd("advanced", x)} w={140} money hi />
        </div>
        <div style={{ background: "var(--k2b-navy)", color: "#FFFFFF", padding: 10 }}>
          <div style={{ color: "var(--k2b-yellow)", fontWeight: 700, marginBottom: 6 }}>Floorplan Math</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 120px", rowGap: 2 }}>
            <span>Inventory cost:</span>     <span style={{ textAlign: "right" }}>${si$(capitalized)}</span>
            <span>Bank advances:</span>      <span style={{ textAlign: "right", color: "var(--k2b-yellow)" }}>${si$(advanced)}</span>
            <span>Dealer cash difference:</span><span style={{ textAlign: "right", color: advanced < capitalized ? "#FF8A8A" : "#7CFC8A" }}>
              ${si$(capitalized - advanced)}
            </span>
            <span>Daily interest:</span>     <span style={{ textAlign: "right" }}>${si$(monthlyInterest / 30)}</span>
            <span>Monthly carry:</span>      <span style={{ textAlign: "right", color: "var(--k2b-yellow)", fontWeight: 700 }}>${si$(monthlyInterest)}</span>
            <span>1st curtailment:</span>    <span style={{ textAlign: "right" }}>{curt} days</span>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 10, padding: 8, background: "#F4F4F4", border: "1px solid #808080", fontSize: 11 }}>
        <strong style={{ color: "var(--k2b-maroon)" }}>GL impact:</strong>{" "}
        DR {siAccts(v).inv} {siAccts(v).invName} ${si$(capitalized)} ·{" "}
        CR {siAccts(v).floor} {siAccts(v).floorName} ${si$(Math.min(advanced, capitalized))}
        {capitalized - advanced > 0 ? ` · CR ${siAccts(v).cash} ${siAccts(v).cashName || "operating cash"} $${si$(capitalized - advanced)}` : ""}
      </div>
    </div>
  );
};

// ─── Step 5: Keys / accessories ───────────────────────────────────────────
const StepKeys = ({ v, upd }) => (
  <div>
    <div className="k2b-section-head" style={{ color: "var(--k2b-navy)", fontSize: 15, marginBottom: 6 }}>
      Keys, Fobs &amp; Accessories
    </div>

    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "4px 18px" }}>
      <div>
        <SiF label="Keys........" v={v.keys} onChange={(x) => upd("keys", parseInt(x) || 0)} w={50} />
        <SiF label="Key Fobs...." v={v.fobs} onChange={(x) => upd("fobs", parseInt(x) || 0)} w={50} />
      </div>
      <div style={{ background: "#FFFFE1", border: "1px solid #808080", padding: 8, fontSize: 11 }}>
        <strong style={{ color: "var(--k2b-maroon)" }}>Key tag:</strong> {v.stock}<br/>
        Tag location: <span style={{ color: "var(--k2b-blue-data-dk)" }}>Key board · Row {v.stock.charCodeAt(0) % 6 + 1}</span>
      </div>
    </div>

    <div style={{ marginTop: 8 }}>
      <div style={{ color: "var(--k2b-maroon)", fontWeight: 700 }}>Accessories / Included Items</div>
      <textarea value={v.accessories} onChange={(e) => upd("accessories", e.target.value)}
                style={{ width: "100%", height: 50, background: "var(--k2b-yellow)",
                          border: "1px solid #808080", padding: 4,
                          fontFamily: "'Courier Prime', monospace", color: "var(--k2b-navy)",
                          fontSize: 12, resize: "vertical" }} />
    </div>
    <div style={{ marginTop: 6 }}>
      <div style={{ color: "var(--k2b-maroon)", fontWeight: 700 }}>Receiving Notes</div>
      <textarea value={v.notes} onChange={(e) => upd("notes", e.target.value)}
                placeholder="Damage on transport? Chip recall? Salesperson assigned?"
                style={{ width: "100%", height: 50, background: "#FFFFFF",
                          border: "1px solid #808080", padding: 4,
                          fontFamily: "'Courier Prime', monospace", color: "var(--k2b-navy)",
                          fontSize: 12, resize: "vertical" }} />
    </div>
  </div>
);

// ─── Step 6: Posted confirmation ──────────────────────────────────────────
const StepPosted = ({ v, posted, go, onAnother }) => (
  <div style={{ textAlign: "center", padding: 10 }}>
    <div style={{ fontSize: 56, color: "var(--k2b-green)" }}>✓</div>
    <div style={{ color: "var(--k2b-maroon)", fontWeight: 700, fontSize: 16, marginBottom: 6 }}>
      Stock-In Complete
    </div>
    <div style={{ fontSize: 13 }}>
      Unit <strong>{posted.stock}</strong> is now in inventory.
    </div>
    <div style={{ background: "var(--k2b-navy)", color: "#FFFFFF", margin: "12px auto",
                  padding: 10, maxWidth: 420, fontFamily: "'Courier Prime', monospace", fontSize: 12 }}>
      <div style={{ color: "var(--k2b-yellow)", fontWeight: 700, marginBottom: 4 }}>Journal Entry · {posted.jeRef}</div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 110px", rowGap: 2 }}>
        {posted.lines ? posted.lines.map((l, i) => (
          <React.Fragment key={i}>
            <span>{l.dr ? "DR" : "CR"} {l.acct} {l.desc}</span>
            <span style={{ textAlign: "right" }}>{l.dr ? "$" + si$(l.dr) : "($" + si$(l.cr) + ")"}</span>
          </React.Fragment>
        )) : (
          <>
            <span>DR {siAccts(v).inv} Inventory</span><span style={{ textAlign: "right" }}>${si$(posted.capitalized)}</span>
            <span>CR {siAccts(v).floor} Floorplan ({posted.bank})</span><span style={{ textAlign: "right" }}>(${si$(posted.advanced)})</span>
            {posted.capitalized - posted.advanced > 0 && (
              <>
                <span>CR 202 Bank — Operating</span><span style={{ textAlign: "right" }}>(${si$(posted.capitalized - posted.advanced)})</span>
              </>
            )}
          </>
        )}
      </div>
      <div style={{ borderTop: "1px solid var(--k2b-yellow)", marginTop: 6, paddingTop: 4 }}>
        First curtailment due: <span style={{ color: "var(--k2b-yellow)", fontWeight: 700 }}>{posted.curtDate}</span>
      </div>
    </div>
    <div style={{ display: "flex", gap: 6, justifyContent: "center" }}>
      <K2BButton small onClick={onAnother}>Stock Another Unit</K2BButton>
      <K2BButton small onClick={() => go && go("inventory")}>Open INVSTK</K2BButton>
      <K2BButton small onClick={() => go && go("accounting")}>View GL Entry</K2BButton>
    </div>
  </div>
);

// ─── Sticky summary card (right rail) ─────────────────────────────────────
const SiSummary = ({ v, totalAdds, capitalized, spread }) => (
  <div style={{ background: "var(--k2b-navy)", color: "#FFFFFF", padding: "10px 12px",
                fontFamily: "'Courier Prime', monospace", fontSize: 12,
                display: "flex", flexDirection: "column", gap: 4 }}>
    <div style={{ color: "var(--k2b-yellow)", fontWeight: 700 }}>
      {v.type === "N" ? "NEW UNIT" : "USED UNIT"} · {v.stock || "(auto)"}
    </div>
    <div style={{ fontSize: 11 }}>
      {v.yr} {v.mk} {v.mdl || "(model)"} {v.trim || ""}
    </div>
    <div style={{ fontSize: 11 }}>{(parseInt(String(v.miles).replace(/[^0-9]/g, "")) || 0).toLocaleString()} mi</div>
    <div style={{ fontSize: 11, color: "var(--k2b-yellow)" }}>{v.color || "(color)"}</div>
    <div style={{ fontSize: 11 }}>{v.vin || "VIN: —"}</div>

    <div style={{ borderTop: "1px solid var(--k2b-yellow)", marginTop: 4, paddingTop: 4 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 90px", rowGap: 2 }}>
        <span>Invoice cost:</span>     <span style={{ textAlign: "right" }}>{v.invoiceCost ? "$" + si$(v.invoiceCost) : "—"}</span>
        <span>Dealer adds:</span>      <span style={{ textAlign: "right" }}>${si$(totalAdds)}</span>
        <span style={{ color: "var(--k2b-yellow)", fontWeight: 700 }}>Capitalized:</span>
        <span style={{ textAlign: "right", color: "var(--k2b-yellow)", fontWeight: 700 }}>${si$(capitalized)}</span>
        <span>MSRP:</span>             <span style={{ textAlign: "right" }}>{siNum(v.msrp) ? "$" + si$(siNum(v.msrp)) : "—"}</span>
        <span>Retail / asking:</span>  <span style={{ textAlign: "right" }}>{siNum(v.asking) || siNum(v.msrp) ? "$" + si$(siNum(v.asking) || siNum(v.msrp)) : "—"}</span>
        <span style={{ color: spread >= 0 ? "#7CFC8A" : "#FF8A8A", fontWeight: 700 }}>Spread:</span>
        <span style={{ textAlign: "right", color: spread >= 0 ? "#7CFC8A" : "#FF8A8A", fontWeight: 700 }}>
          ${si$(spread)}
        </span>
      </div>
    </div>

    <div style={{ borderTop: "1px solid var(--k2b-yellow)", marginTop: 4, paddingTop: 4 }}>
      <div>Bank: <span style={{ color: "var(--k2b-yellow)" }}>{SI_BANKS.find(b => b.id === v.bank)?.name}</span></div>
      <div>Advanced: ${si$(v.advanced)} @ {v.rate}%</div>
      <div>Curtail: {v.curtDays} days</div>
    </div>
  </div>
);

// ─── Small input atoms ────────────────────────────────────────────────────
const SiF = ({ label, v, onChange, w = 160, hi, money, options, field, onBlur }) => (
  <div className="fipro-row">
    <span className="fipro-label" style={{ width: 110 }}>{label}:</span>
    {options ? (
      <select value={v} onChange={(e) => onChange(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)" }}>
        {options.map(o => <option key={o}>{o}</option>)}
      </select>
    ) : (
      <input data-field={field} value={v} onBlur={onBlur} onChange={(e) => onChange(money ? 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)",
                      textAlign: money ? "right" : "left" }} />
    )}
  </div>
);

const SiNum = ({ v, onChange }) => (
  <input value={v} onChange={(e) => onChange(e.target.value)}
         style={{ width: 130, textAlign: "right", background: "var(--k2b-yellow)",
                   border: "1px solid #808080", padding: "0 4px",
                   fontFamily: "'Courier Prime', monospace", color: "var(--k2b-navy)" }} />
);

Object.assign(window, { VehicleStockIn });