/* 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 — Settings module (in-DMS).
// Workstation preferences, server user accounts (admin), staff/techs,
// integrations, dealer info, GL flow, and data/backup.
// Audit C-02c: no credentials or MFA codes are stored on the workstation —
// sign-on accounts and passwords live ONLY on the server (Users (Server) tab).

const Settings = ({ onClose, go }) => {
  const [tab, setTab]     = React.useState("security");
  const [auth, setAuth]   = React.useState(() => window.jbLoadAuth());
  const [dirty, setDirty] = React.useState(false);
  if (window.useK2BUnsaved) window.useK2BUnsaved("settings-workstation", { label: "Settings — this workstation", isDirty: () => dirty, save: () => { window.jbSaveAuth(auth); setDirty(false); return true; }, discard: () => { setAuth(window.jbLoadAuth()); setDirty(false); } });   // RC35 (brd)
  // Exact-role admin check (chrome.jsx → DMS.isAdmin when the core defines it).
  const isAdmin = window.jbIsAdmin ? window.jbIsAdmin()
    : /^(admin \/ f&i|admin)$/i.test(String((window.DMS && window.DMS.userRole) ? window.DMS.userRole() : "").trim());
  // Messaging (consent registry, history, compose): Admin, managers, Service, F&I — not Sales / Accounting / Parts.
  const canMsg = isAdmin || !!(window.jbCanMessage && window.jbCanMessage());
  const set = (k, v) => { setAuth(a => ({ ...a, [k]: v })); setDirty(true); };

  const save = () => {
    window.jbSaveAuth(auth);
    setDirty(false);
    window.k2bToast && window.k2bToast("Workstation settings saved.", "ok", 3000);
  };

  const wipeData = async () => {
    if (!isAdmin) { window.k2bToast && window.k2bToast("Only an Admin can wipe dealership data.", "warn"); return; }
    if (!window.confirm("Erase ALL dealership data — deals, ROs, customers, inventory, GL, banks, F&I products, fleet, forms — on THIS workstation AND the server (every station)?\n\nKept: sign-in accounts, dealer settings, integration credentials. This cannot be undone.")) return;
    const typed = window.prompt("Type WIPE to confirm erasing the shared dealership data:");
    if (String(typed || "").trim() !== "WIPE") { window.k2bToast && window.k2bToast("Not wiped — you must type WIPE exactly.", "warn"); return; }
    try {
      // 1. Flag a fresh start FIRST — registry stores check this and seed
      //    EMPTY instead of re-seeding their demo defaults.
      localStorage.setItem("jbrews-fresh-start", "1");
      // 2. Blank the dealership — local AND server. serverWipe resolves only
      //    when the server store is empty, so we AWAIT it before reloading
      //    (reloading early re-downloads the old data — the old bug).
      if (window.DMS && window.DMS.serverWipe) {
        window.k2bToast && window.k2bToast("Wiping dealership data — local and server…", "warn", 8000);
        const r = await window.DMS.serverWipe((col, i, n) => {
          window.k2bToast && window.k2bToast("Wiping server: " + col + " (" + i + "/" + n + ")…", "warn", 1200);
        });
        window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn", 6000);
        if (!r.ok) { if (r.refused) { try { localStorage.removeItem("jbrews-fresh-start"); } catch (e) {} } return; } // leave keys intact so a re-run can finish the job; RC36 (sec36, S4): a REFUSED wipe (owner only) changes nothing here either
      } else if (window.DMS && window.DMS.startBlank) window.DMS.startBlank();
      // 3. Data-bearing registry stores → EMPTY LIST (never remove the key —
      //    a missing key is what triggers demo defaults on stores that
      //    predate the fresh-start flag).
      // RC35 (brd): the registries of THIS store (their keys carry "@<store>" - StoreBoot.js.txt); another store's are never touched
      Object.keys(localStorage).forEach(k => {
        const m = /^(jbrews-(lenders|products|forms|fleet|fcso)-v\d+)(?:@(\d+))?$/.exec(k);
        if (m && (!m[3] || !window.K2BStore || m[3] === window.K2BStore.pageId())) localStorage.setItem(m[1], "[]");
      });
      // 4. Clear every other module key (desk scenarios, CRM notes, imports,
      //    saved form data, JE drafts…). Keep ONLY: blank core, sign-on
      //    config, user accounts, per-module settings, integration creds.
      const keep = [
        "jbrews-dms-core", "jbrews-users-", "jbrews-auth-config", "jbrews-auth-token",
        "jbrews-modsettings", "jbrews-routeone-cfg", "jbrews-carfax", "jbrews-vauto",
        "jbrews-msg-cfg", "jbrews-fresh-start",
        "jbrews-lenders-", "jbrews-products-", "jbrews-forms-", "jbrews-fleet-", "jbrews-fcso-",
        "jbrews-vault-",   // (blocker 4) encryption at rest stays ON — only "Turn Off Encryption" (audited) may downgrade
      ];
      const here = window.K2BStore && window.K2BStore.pageId();
      Object.keys(localStorage).forEach(k => {
        if (!/^(jbrews-|k2b|jb_)/i.test(k)) return;
        if (keep.some(p => k.startsWith(p))) return;
        if (/^k2b-(brand-|last-store|primary-store|store-)/.test(k)) return;   // RC35: which store / its branding - per PC
        const at = k.lastIndexOf("@"); if (at > 0 && /^\d+$/.test(k.slice(at + 1)) && k.slice(at + 1) !== here) return;   // another store's data
        if (/^jbrews-dms-core-v3-s\d+/.test(k) && !(here && k.indexOf("jbrews-dms-core-v3-s" + here) === 0)) return;
        try { localStorage.removeItem(k); } catch (e) {}
        // If removal is blocked (some environments guard it), blank the value
        // instead so nothing can be read back out of it.
        if (localStorage.getItem(k) != null) { try { localStorage.setItem(k, ""); } catch (e) {} }
      });
    } catch (e) {}
    window.k2bToast && window.k2bToast("Workstation wiped — dealership data cleared to blank. Reloading…", "warn", 3000);
    setTimeout(() => location.reload(), 900);
  };

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

      <div style={{ display: "flex", flex: 1, minHeight: 0 }}>
        {/* Tabs */}
        <div style={{ width: 200, borderRight: "1px solid var(--jb-border, #C0C0C0)",
                       padding: "16px 0", background: "#FAFAFA", display: "flex", flexDirection: "column" }}>
          {[
            { k: "security",  label: "Workstation & Sign-On", icon: "🔐" },
            { k: "team",      label: "Users (Server)", icon: "🖥", adminOnly: true },
            { k: "secpanel",  label: "Security",       icon: "🛡", adminOnly: true },
            { k: "staff",     label: "Staff & Techs",  icon: "🔧" },
            { k: "integrations", label: "Integrations (API)", icon: "🔗", adminOnly: true },
            { k: "aiapps",    label: "AI Apps (Claude)", icon: "✦", needs: "AiAppsPanel" },
            { k: "messaging", label: "Messaging & Consent", icon: "💬", msgOnly: true },
            { k: "apps",      label: "Vendor Sites",   icon: "🌐" },
            { k: "vauto", label: "vAuto & Feeds", icon: "🚗" },
            { k: "servicesetup", label: "Service Setup", icon: "🛠", needs: "ServiceSetupPanel" },
            { k: "dealer",    label: "Dealer Info",    icon: "🏬" },
            { k: "glflow",    label: "GL Flow",        icon: "🧾" },
            { k: "data",      label: "Data & Backup",  icon: "💾" },
            { k: "about",     label: "About",          icon: "ℹ" },
          ].filter(t => (!t.adminOnly || isAdmin) && (!t.msgOnly || canMsg) && (!t.needs || window[t.needs])).map(t => (
            <button key={t.k}
                     onClick={() => setTab(t.k)}
                     style={{
                       textAlign: "left", padding: "9px 18px", border: 0, cursor: "pointer",
                       background: tab === t.k ? "var(--jb-blue-tint, #E5EFFA)" : "transparent",
                       borderLeft: tab === t.k ? "3px solid var(--jb-navy, #1B66A8)" : "3px solid transparent",
                       fontWeight: tab === t.k ? 700 : 500,
                       color: tab === t.k ? "var(--jb-navy, #1B66A8)" : "#333",
                       fontFamily: "var(--font-ui)", fontSize: 13,
                       display: "flex", alignItems: "center", gap: 9,
                     }}>
              <span>{t.icon}</span>
              <span>{t.label}</span>
            </button>
          ))}
        </div>

        {/* Pane */}
        <div style={{ flex: 1, overflow: "auto", padding: "22px 28px" }}>
          {tab === "security" && (
            <div>
              <SecHead title="Workstation & Sign-On"
                        sub="Per-PC preferences. Passwords and MFA are never stored on a workstation." />

              <Group label="This Workstation">
                <Row label="Store">
                  <SetInput value={window.K2BStore ? (window.K2BStore.pageId() || "") + " · " + window.K2BStore.branding().dba : ""} readOnly width={260} />
                  <span style={{ marginLeft: 10, fontSize: 11, color: "#777" }}>The store you are in (the server decides it at sign-in).</span>
                </Row>
                <Row label="Workstation Name">
                  <SetInput value={auth.station} onChange={(v) => set("station", v.slice(0, 32))} width={220} />
                  <span style={{ marginLeft: 10, fontSize: 11, color: "#777" }}>Optional label (e.g. FRONT-DESK-1) for your own reference.</span>
                </Row>
              </Group>

              <Group label="Sign-On Accounts, Passwords & MFA">
                <div style={{ fontSize: 12, color: "#333", lineHeight: 1.7, maxWidth: 620 }}>
                  Accounts are validated by the <b>server</b> — nothing on this PC can sign anyone in.
                  {isAdmin
                    ? <> Add employees, change roles, reset passwords and manage MFA in the <b>Users (Server)</b> tab.</>
                    : <> To change your password or MFA, ask an admin (Settings → Users (Server)).</>}
                </div>
              </Group>

              <div style={{ display: "flex", gap: 8, marginTop: 22, alignItems: "center" }}>
                <button className="k2b-button"
                         style={{ padding: "8px 22px", fontWeight: 700,
                                  background: dirty ? "var(--jb-yellow, #FFE9B0)" : undefined }}
                         onClick={save} disabled={!dirty}>
                  💾  Save Workstation Settings
                </button>
                <button className="k2b-button" style={{ padding: "8px 14px" }}
                         onClick={() => {
                           setAuth(window.jbLoadAuth());
                           setDirty(false);
                         }}>
                  Discard
                </button>
                {dirty && <span style={{ fontSize: 11, color: "#A26B00" }}>Unsaved changes.</span>}
              </div>
            </div>
          )}

          {tab === "dealer" && (() => {
            // RC35 (brd): the ACTIVE store's branding, read only - the owner changes it in Owner Panel > Stores
            const B = window.K2BStore ? window.K2BStore.branding() : { gm: {} };
            const gm = window.K2BStore && window.K2BStore.franchise();
            return (
            <div data-store-settings="">
              <SecHead title="Dealership Information"
                        sub="Used on every printed form, including the Buyer's Order header." />
              <Group label="Identity">
                <Row label="Store Name"><SetInput value={B.dba} readOnly width={300} /></Row>
                <Row label="Legal Name"><SetInput value={B.legalName} readOnly width={300} /></Row>
                <Row label="Print Name"><SetInput value={B.printName} readOnly width={300} /></Row>
                <Row label="Street Address"><SetInput value={B.addr1} readOnly width={300} /></Row>
                <Row label="City / State / Zip"><SetInput value={B.addr2} readOnly width={300} /></Row>
                <Row label="Phone"><SetInput value={B.phone} readOnly width={200} /></Row>
                <Row label="Fax"><SetInput value={B.fax} readOnly width={200} /></Row>
              </Group>
              <Group label="Licensure & Codes">
                <Row label="State Dealer Lic."><SetInput value={B.licenseLine} readOnly width={300} /></Row>
                {gm ? <Row label="GM BAC Code"><SetInput value={B.gm.bac} readOnly width={200} /></Row> : null}
                {gm ? <Row label="Dealer Code"><SetInput value={B.gm.dealerCode} readOnly width={200} /></Row> : null}
              </Group>
              <p style={{ fontSize: 11, color: "#777", maxWidth: 580 }}>
                The owner changes this in Owner Panel &gt; Stores — these values appear on every legal form.
              </p>
            </div>
            );
          })()}

          {tab === "data" && (
            <div>
              <SecHead title="Data & Backup"
                        sub="The shared ledger (deals, customers, inventory, ROs, GL) lives on the server; lender / product / forms books are still per-workstation." />
              <Group label="What's in a backup">
                <ul style={{ fontSize: 12, color: "#333", lineHeight: 1.7, paddingLeft: 18 }}>
                  <li>Every live DMS collection (customers, deals, inventory, ROs, parts, GL &amp; journal, A/R, CRM leads…)</li>
                  <li>This workstation's registries: Banks / Lenders (incl. GMF titling entities), F&amp;I Products, Forms Sequencing, Fleet</li>
                  <li>Saved form drafts on this PC</li>
                  <li>Never included: passwords, MFA, integration keys</li>
                </ul>
              </Group>
              <Group label="Actions">
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                  <button className="k2b-button"
                           onClick={() => {
                             // Audit C-04b: read the LIVE DMS state + registries, not dead keys.
                             const D = window.DMS;
                             const core = (D && D.exportBackup) ? D.exportBackup() : (D && D.get ? { data: D.get() } : {});
                             const reg = jbCollectRegistries();
                             let forms = null;
                             try { forms = JSON.parse(localStorage.getItem("jbrews-form-data-v2") || "null"); } catch (e) {}
                             const all = { format: "JBREWS-DMS-STATION", version: 3, exported: new Date().toISOString(),
                                           core, registries: reg, formDrafts: forms };
                             const blob = new Blob([JSON.stringify(all, null, 2)], { type: "application/json" });
                             const url = URL.createObjectURL(blob);
                             const a = document.createElement("a");
                             a.href = url; a.download = "jbrews-backup-" + new Date().toISOString().slice(0,10) + ".json";
                             a.click(); URL.revokeObjectURL(url);
                             if (D && D.logAudit) D.logAudit("Data Backup", "Full ledger + registries downloaded");
                             window.k2bToast && window.k2bToast("Backup downloaded.", "ok");
                           }}>
                    ⬇  Download Backup (.json)
                  </button>
                  {isAdmin && (
                    <button className="k2b-button"
                             style={{ background: "#FFD2D2", borderColor: "#A02234", color: "#A02234", fontWeight: 700 }}
                             onClick={wipeData}>
                      🗑  Wipe Dealership Data (all stations)…
                    </button>
                  )}
                </div>
                {!isAdmin && <div style={{ fontSize: 11, color: "#777", marginTop: 6 }}>Wiping dealership data is an Admin action.</div>}
              </Group>
              <RegistryExchangeGroup />
              <ServerSyncGroup />
            </div>
          )}

          {tab === "team" && isAdmin && <TeamUsersPanel />}

          {tab === "secpanel" && isAdmin && (window.SecurityPanel
            ? <window.SecurityPanel go={go} />
            : <div style={{ fontSize: 12.5, color: "#777" }}>Security module not loaded (Security.jsx.txt).</div>)}

          {tab === "staff" && <StaffPanel />}

          {tab === "integrations" && isAdmin && (window.IntegrationsAdminPanel
            ? <window.IntegrationsAdminPanel go={go} onOpenMessaging={() => setTab("messaging")} />
            : <div style={{ color: "#888" }}>Integrations.jsx.txt is not loaded.</div>)}
          {tab === "aiapps" && window.AiAppsPanel && <window.AiAppsPanel go={go} />}

          {tab === "messaging" && canMsg && (window.MessagingCenter
            ? <window.MessagingCenter embedded go={go} />
            : <div style={{ color: "#888" }}>MessagingCenter.jsx.txt is not loaded.</div>)}
          {tab === "apps" && (
            <div>
              <SecHead title="Vendor Sites" sub="Open Carfax, vAuto, RouteOne, GM Global Connect and listing sites in their own tab with YOUR vendor login. This is not an API connection — API integrations are under Integrations (API), admin only." />
              {window.IntegrationStatusStrip && <div style={{ marginBottom: 14 }}><window.IntegrationStatusStrip go={isAdmin ? (() => setTab("integrations")) : null} admin={false} /></div>}
              {window.ConnectedAppsPanel ? <window.ConnectedAppsPanel go={go} /> : <div style={{ color: "#888" }}>ConnectedApps.jsx.txt is not loaded.</div>}
            </div>
          )}
          {tab === "servicesetup" && (window.ServiceSetupPanel ? <window.ServiceSetupPanel go={go} /> : null)}

          {tab === "vauto" && <VAutoPanel />}

          {tab === "glflow" && <GLFlowEditor go={go} />}

          {tab === "about" && (
            <div>
              <SecHead title="About this DMS"
                        sub={"Dealer Management System for " + (window.K2BStore ? window.K2BStore.branding().dba : "this store") + "."} />
              <div style={{ fontSize: 12, color: "#333", lineHeight: 1.7 }}>
                <div>Version <b>1.0.0</b></div>
                <div>Build <b>{new Date().toISOString().slice(0, 10)}</b></div>
                <div>Store: {window.K2BStore ? (window.K2BStore.pageId() || "") + " · " + window.K2BStore.branding().dba : ""}</div>
                <div style={{ marginTop: 10, color: "#555", maxWidth: 560 }}>
                  This build includes Desking, F&I, Inventory, Service, Parts, Accounting, Payroll
                  and the full Forms library. All data persists locally per workstation; multi-station
                  sync is available with an upgraded license.
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

const SecHead = ({ title, sub }) => (
  <div style={{ marginBottom: 18 }}>
    <div style={{ fontSize: 18, fontWeight: 700, color: "#0b1424" }}>{title}</div>
    <div style={{ fontSize: 12, color: "#555", marginTop: 3 }}>{sub}</div>
  </div>
);
const Group = ({ label, children }) => (
  <div style={{ marginBottom: 22 }}>
    <div style={{ fontSize: 10.5, fontWeight: 700, color: "#888", letterSpacing: 1.5,
                   textTransform: "uppercase", marginBottom: 8, paddingBottom: 5,
                   borderBottom: "1px solid #DDD" }}>
      {label}
    </div>
    {children}
  </div>
);
const Row = ({ label, children }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 14, padding: "6px 0", minHeight: 32 }}>
    <div style={{ width: 150, fontSize: 12, color: "#444", fontWeight: 500 }}>{label}</div>
    <div style={{ display: "flex", alignItems: "center", flex: 1 }}>{children}</div>
  </div>
);
const SetInput = ({ value, onChange, width = 200, type = "text", readOnly, disabled }) => {
  const [show, setShow] = React.useState(false);
  const realType = type === "password" && !show ? "password" : "text";
  return (
    <div style={{ position: "relative", display: "inline-flex" }}>
      <input
        type={realType}
        value={value ?? ""}
        onChange={onChange ? (e) => onChange(e.target.value) : undefined}
        readOnly={readOnly}
        disabled={disabled}
        style={{
          width, padding: "6px 10px", boxSizing: "border-box",
          border: "1px solid " + (disabled ? "#E0E0E0" : "#C8CCD2"),
          background: readOnly ? "#F4F4F4" : "#FFF", color: disabled ? "#999" : "#0b1424",
          fontFamily: "var(--font-ui)", fontSize: 13, outline: 0,
          paddingRight: type === "password" ? 56 : 10,
        }}
      />
      {type === "password" && !readOnly && (
        <button onClick={() => setShow(!show)} disabled={disabled}
                 style={{ position: "absolute", right: 4, top: 4, padding: "3px 8px",
                          border: 0, background: "transparent", cursor: "pointer",
                          color: "#1B66A8", fontSize: 10, fontWeight: 700,
                          letterSpacing: 1, textTransform: "uppercase" }}>
          {show ? "Hide" : "Show"}
        </button>
      )}
    </div>
  );
};
const Toggle = ({ value, onChange }) => (
  <button onClick={() => onChange(!value)}
           style={{
             width: 46, height: 24, padding: 0, border: 0, cursor: "pointer",
             borderRadius: 12, background: value ? "var(--jb-green, #16A34A)" : "#C9CED6",
             position: "relative", transition: "background 0.15s",
           }}>
    <span style={{ position: "absolute", top: 2, left: value ? 24 : 2,
                    width: 20, height: 20, borderRadius: "50%", background: "#FFF",
                    transition: "left 0.15s", boxShadow: "0 1px 2px rgba(0,0,0,0.3)" }} />
  </button>
);
const selectStyle = {
  padding: "6px 10px", border: "1px solid #C8CCD2", background: "#FFF",
  fontFamily: "var(--font-ui)", fontSize: 13, color: "#0b1424",
};

Object.assign(window, { Settings });

/* ─── Registry exchange (audit C-04) ────────────────────────────────────
   The lender/ACAR book, F&I product prices, forms sequencing and fleet
   accounts are still localStorage-only (window.jbLenders / jbProducts /
   jbForms / jbFleet). Until DMSCore gains shared `lenders` / `products` /
   `forms` / `fleet` collections, this lets an admin export the book from one
   station and merge it into the others so every desk prices the same. */
const JB_REGISTRIES = [
  ["lenders",  "Banks / Lenders (incl. GMF titling entities)", "jbLenders"],
  ["products", "F&I Products & prices",                        "jbProducts"],
  ["forms",    "Forms Sequencing",                             "jbForms"],
  ["fleet",    "GM Fleet Accounts",                            "jbFleet"],
];
const jbCollectRegistries = () => {
  const out = {};
  JB_REGISTRIES.forEach(([key, , w]) => { const s = window[w]; if (s && s.list) { try { out[key] = s.list(); } catch (e) {} } });
  return out;
};
const RegistryExchangeGroup = () => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => {
    const offs = JB_REGISTRIES.map(([, , w]) => (window[w] && window[w].subscribe) ? window[w].subscribe(force) : null);
    return () => offs.forEach(off => off && off());
  }, []);
  const [msg, setMsg] = React.useState("");
  const counts = JB_REGISTRIES.map(([key, label, w]) => [label, (window[w] && window[w].list) ? window[w].list().length : 0]);
  const exportBook = () => {
    const payload = { format: "JBREWS-REGISTRIES", version: 1, exported: new Date().toISOString(), registries: jbCollectRegistries() };
    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
    const url = URL.createObjectURL(blob); const a = document.createElement("a");
    a.href = url; a.download = "jbrews-lender-book-" + new Date().toISOString().slice(0, 10) + ".json"; a.click(); URL.revokeObjectURL(url);
    setMsg("Lender / product / forms book exported. Import it on each other workstation.");
  };
  const importBook = (file) => {
    if (!file) return;
    const rd = new FileReader();
    rd.onload = () => {
      let p = null;
      try { p = JSON.parse(String(rd.result || "")); } catch (e) { setMsg("That file is not valid JSON."); return; }
      const reg = (p && p.registries) || (p && p.core && p.registries) || null;
      if (!reg || typeof reg !== "object") { setMsg("No registry data found in that file (export one from Settings → Data & Backup first)."); return; }
      const done = [];
      JB_REGISTRIES.forEach(([key, label, w]) => {
        const store = window[w]; const rows = reg[key];
        if (!store || !store.upsert || !Array.isArray(rows)) return;
        let n = 0;
        rows.forEach(r => { if (r && r.id) { try { store.upsert(r); n++; } catch (e) {} } });
        done.push(`${n} ${label.split(" (")[0].toLowerCase()}`);
      });
      setMsg(done.length ? "Merged: " + done.join(", ") + ". Existing records with the same id were updated." : "Nothing to import.");
      window.k2bToast && window.k2bToast("Registry book imported.", "ok");
    };
    rd.readAsText(file);
  };
  return (
    <Group label="Lender / Product / Forms Book (per-workstation)">
      <div style={{ fontSize: 12, color: "#333", lineHeight: 1.7, marginBottom: 8, maxWidth: 620 }}>
        These books are stored on <b>this PC only</b>. After editing Banks / Lenders, F&amp;I Products or Forms Sequencing,
        export the book here and import it on every other workstation so all desks quote the same rates, prices and packets.
        <div style={{ fontSize: 11, color: "#777", marginTop: 4 }}>
          On this PC: {counts.map(([l, n]) => `${n} ${l.split(" (")[0].toLowerCase()}`).join(" · ")}
        </div>
      </div>
      <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
        <button className="k2b-button" style={{ fontWeight: 700, background: "var(--jb-yellow, #FFD24A)" }} onClick={exportBook}>⇧ Export Book (.json)</button>
        <label className="k2b-button" style={{ fontWeight: 700, cursor: "pointer" }}>⇩ Import / Merge Book…
          <input type="file" accept=".json,application/json" style={{ display: "none" }}
                 onChange={(e) => { importBook(e.target.files && e.target.files[0]); e.target.value = ""; }} />
        </label>
      </div>
      {msg && <div style={{ fontSize: 12, color: "#0E7A37", marginTop: 8 }}>{msg}</div>}
    </Group>
  );
};
Object.assign(window, { RegistryExchangeGroup, jbCollectRegistries });

/* ─── (Removed — audit C-02c) ────────────────────────────────────────────
   The parallel local "Users & Logins" panel (UsersPanel / UserEditor) that
   kept plaintext passwords in window.jbUsers has been deleted. The server
   Users tab (TeamUsersPanel below) is the ONLY place accounts are managed. */

/* ─── Server Sync (Data & Backup) — visible state + force-push recovery ──
   The recovery path for workstations that worked offline: pushes EVERY
   record saved on this computer to the shared server via DMS.pushAll(). */
const ServerSyncGroup = () => {
  const D = window.DMS;
  const readCs = () => (D && D.connState) ? D.connState() : "offline";
  const [cs, setCs] = React.useState(readCs);
  const [modal, setModal] = React.useState(null);   // {busy:true} | {result:{ok,pushed,errors}}
  // Per-record permanent sync failures (poison records) — DMS.syncIssues().
  const readIssues = () => (D && D.syncIssues) ? D.syncIssues() : [];
  const [issues, setIssues] = React.useState(readIssues);
  const [showIssues, setShowIssues] = React.useState(false);
  React.useEffect(() => {
    const refresh = () => { setCs(readCs()); setIssues(readIssues()); };
    window.addEventListener("k2b-conn", refresh);
    const off = (D && D.subscribe) ? D.subscribe(refresh) : null;
    const t = setInterval(refresh, 5000);
    return () => { window.removeEventListener("k2b-conn", refresh); if (off) off(); clearInterval(t); };
  }, []);
  const ti = (D && D.tokenInfo) ? D.tokenInfo() : null;
  const LABELS = {
    online:        ["#16A34A", "ONLINE — shared data"],
    offline:       ["#A02234", "WORKING LOCALLY — changes NOT shared"],
    "auth-expired":["#B26A00", "SESSION EXPIRED — sign off and sign back in"],
    connecting:    ["#666",    "CONNECTING…"],
  };
  const [dotColor, stateText] = LABELS[cs] || LABELS.offline;
  const runSync = async () => {
    if (!(D && D.pushAll)) {
      setModal({ result: { ok: false, pushed: 0, errors: ["DMS core not loaded — cannot sync."] } });
      return;
    }
    setModal({ busy: true });
    let r;
    try { r = await D.pushAll(); }
    catch (e) { r = { ok: false, pushed: 0, errors: [e.message || "Sync failed"] }; }
    setModal({ result: r || { ok: false, pushed: 0, errors: ["No result returned"] } });
  };
  return (
    <Group label="Server Sync">
      <div style={{ fontSize: 12, color: "#333", marginBottom: 10, lineHeight: 1.7 }}>
        <div>
          <span style={{ color: dotColor, fontWeight: 700 }}>● {stateText}</span>
        </div>
        <div style={{ color: "#555" }}>
          {ti
            ? <>Signed in as <b>{ti.name || ti.sub}</b>{ti.role ? <> ({ti.role})</> : null} — session {ti.expired
                ? <b style={{ color: "#B26A00" }}>EXPIRED</b>
                : <>expires <b>{ti.exp ? new Date(ti.exp * 1000).toLocaleString() : "n/a"}</b></>}</>
            : "Not signed in to the server."}
        </div>
      </div>
      <button className="k2b-button"
              style={{ background: "var(--jb-yellow, #F5C518)", fontWeight: 700 }}
              onClick={runSync}>
        ⇧  Sync This Workstation to Server
      </button>
      <div style={{ fontSize: 11, color: "#666", marginTop: 6 }}>
        Use after working offline — pushes everything saved on this computer to the shared server.
      </div>
      {issues.length > 0 && (
        <div style={{ fontSize: 12, marginTop: 10 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ color: "#B26A00", fontWeight: 700 }}>
              ⚠ {issues.length} record{issues.length === 1 ? "" : "s"} could not be saved to the server
            </span>
            <button className="k2b-button" style={{ fontSize: 11, padding: "2px 8px" }}
                    onClick={() => setShowIssues(v => !v)}>
              {showIssues ? "Hide" : "Details"}
            </button>
            <button className="k2b-button" style={{ fontSize: 11, padding: "2px 8px" }}
                    onClick={() => { if (D && D.clearSyncIssues) D.clearSyncIssues(); setIssues(readIssues()); setShowIssues(false); }}>
              Clear
            </button>
          </div>
          {showIssues && (
            <ul style={{ marginTop: 6, paddingLeft: 18, fontSize: 11, color: "#A02234", maxHeight: 160, overflow: "auto" }}>
              {issues.map((x, i) => (
                <li key={i}>
                  <b>{x.collection}/{String(x.id)}</b> — {String(x.error || ("HTTP " + x.status))}
                  {x.at ? <span style={{ color: "#666" }}> · {new Date(x.at).toLocaleString()}</span> : null}
                </li>
              ))}
            </ul>
          )}
          <div style={{ fontSize: 11, color: "#666", marginTop: 4 }}>
            The server rejected these records permanently — they were set aside so the rest of your work keeps syncing.
          </div>
        </div>
      )}
      {modal && modal.busy && (
        <K2BModal title="Server Sync" onClose={() => {}}>
          <div style={{ fontSize: 13, padding: "6px 0" }}>
            ⇧ Pushing every record on this workstation to the server… keep this window open.
          </div>
        </K2BModal>
      )}
      {modal && modal.result && (
        <K2BModal title="Server Sync — Result" onClose={() => setModal(null)}
                  buttons={<K2BButton onClick={() => setModal(null)}>Close</K2BButton>}>
          <div style={{ fontSize: 13, lineHeight: 1.7 }}>
            <div style={{ fontWeight: 700, color: modal.result.ok ? "#16A34A" : "#A02234" }}>
              {modal.result.ok ? "✔ Sync complete" : "⚠ Sync finished with problems"}
            </div>
            <div>Pushed <b>{modal.result.pushed}</b> records; <b>{(modal.result.errors || []).length}</b> errors.</div>
            {(modal.result.errors || []).length > 0 && (
              <ul style={{ marginTop: 6, paddingLeft: 18, fontSize: 11, color: "#A02234", maxHeight: 160, overflow: "auto" }}>
                {(modal.result.errors || []).slice(0, 12).map((e, i) => <li key={i}>{String(e)}</li>)}
                {(modal.result.errors || []).length > 12 && <li>…and {(modal.result.errors || []).length - 12} more</li>}
              </ul>
            )}
          </div>
        </K2BModal>
      )}
    </Group>
  );
};

/* ─── Users (Server) — admin-only server sign-in accounts (/api/team) ── */
const TEAM_ROLES = ["Admin / F&I", "Office Manager", "Sales Manager", "Service Advisor", "Sales", "Accounting", "Service", "Parts"];
const TEAM_ADMIN_ROLE = "Admin / F&I";
// Temp-password policy (audit C-02b): the server enforces ≥ 10 characters (RC36);
// the client mirrors it and adds a readable hint.
const TEAM_PW_MIN = 10;   // RC36 (sec36, S3): the server rule is 10 characters, not the login id, not the name
const teamPwHint = `at least ${TEAM_PW_MIN} characters — a short phrase works well (e.g. blue-truck-2026)`;
const teamPwCheck = (pw) => (String(pw || "").length < TEAM_PW_MIN ? `Password must be ${teamPwHint}.` : "");
// Full policy (Security.jsx.txt → window.jbPasswordPolicy: ≥10 chars, upper +
// lower + digit, not the user name, not a common password). Falls back to the
// server minimum when the security module is not loaded.
const teamPwPolicyErr = (pw, id, confirm) => {
  if (window.jbPasswordPolicy) {
    const r = window.jbPasswordPolicy(pw, id);
    if (!r.ok) return "Password needs: " + r.problems.join("; ") + ".";
  } else {
    const e = teamPwCheck(pw); if (e) return e;
  }
  if (confirm !== undefined && String(confirm) !== String(pw)) return "The two passwords do not match — re-type the new password.";
  return "";
};
const teamPwRules = "at least 10 characters with an uppercase letter, a lowercase letter and a digit — not the employee # and not a common word";
const teamBlank = { id: "", name: "", role: "Sales", password: "", confirm: "" };
const TeamUsersPanel = () => {
  const D = window.DMS;
  const [users, setUsers]   = React.useState(null);   // null = loading
  const [offline, setOffline] = React.useState("");
  const [form, setForm]     = React.useState({ ...teamBlank });
  const [formErr, setFormErr] = React.useState("");
  const [busy, setBusy]     = React.useState(false);
  const [resetFor, setResetFor] = React.useState(null); // user record being reset
  const setF = (k, v) => { setForm(f => ({ ...f, [k]: v })); setFormErr(""); };

  const refresh = async () => {
    if (!D || !D.teamList) { setOffline("DMS core not loaded."); setUsers([]); return; }
    const r = await D.teamList();
    if (r && r.ok) { setUsers(r.users || []); setOffline(""); }
    else { setUsers([]); setOffline((r && r.error) || "No response from server."); }
  };
  React.useEffect(() => { refresh(); }, []);

  const create = async () => {
    const id = (form.id || "").trim();
    if (!/^[A-Za-z0-9]{1,10}$/.test(id)) { setFormErr("Employee # must be 1-10 letters/digits."); return; }
    const pwErr = teamPwPolicyErr(form.password, id, form.confirm);
    if (pwErr) { setFormErr("Temporary " + pwErr.charAt(0).toLowerCase() + pwErr.slice(1)); return; }
    setBusy(true);
    const r = await D.teamCreate({ id, name: (form.name || "").trim(), role: form.role, password: form.password });
    setBusy(false);
    if (r && r.ok) {
      setForm({ ...teamBlank });
      try { D.logAudit && D.logAudit("Password Set", "#" + id + " · new employee (" + form.role + ")"); } catch (e) {}
      window.k2bToast && window.k2bToast(`Employee #${id} created.`, "ok");
      refresh();
    } else setFormErr((r && r.error) || "Create failed.");
  };
  const pwPolicyOk = !form.password || !teamPwPolicyErr(form.password, (form.id || "").trim(), form.confirm);

  const me = (D && D.userId) ? D.userId() : "";
  const isAdminRole = (r) => String(r || "").trim().toLowerCase() === TEAM_ADMIN_ROLE.toLowerCase();
  const activeAdmins = (users || []).filter(u => u.active && isAdminRole(u.role));
  // Client-side mirror of the server's self / last-admin guards (audit C-02b)
  // so the user gets a friendly message instead of a bare 4xx.
  const guardChange = (u, next) => {
    const isMe = String(u.id) === String(me);
    const wasAdmin = u.active && isAdminRole(u.role);
    const staysAdmin = (next.active !== undefined ? next.active : u.active) && isAdminRole(next.role !== undefined ? next.role : u.role);
    if (isMe && next.active === false) return "You can't deactivate your own account — ask another admin.";
    if (isMe && wasAdmin && !staysAdmin) return "You can't remove your own Admin role — ask another admin.";
    if (wasAdmin && !staysAdmin && activeAdmins.length <= 1) return "That is the last active Admin — promote someone else first.";
    return "";
  };

  const toggleActive = async (u) => {
    const g = guardChange(u, { active: !u.active });
    if (g) { window.k2bToast && window.k2bToast(g, "warn", 4200); return; }
    if (u.active && !window.confirm(`Deactivate ${u.name || "employee"} #${u.id}? They will no longer be able to sign in.`)) return;
    const r = await D.teamUpdate({ id: u.id, active: !u.active });
    if (r && r.ok) window.k2bToast && window.k2bToast(`Employee #${u.id} ${u.active ? "deactivated" : "reactivated"}.`, u.active ? "warn" : "ok");
    else window.k2bToast && window.k2bToast((r && r.error) || "Update failed.", "warn", 4200);
    refresh();
  };

  // Role edit after create (audit C-02b) → DMS.teamUpdate({ id, role }).
  const changeRole = async (u, role) => {
    if (role === u.role) return;
    const g = guardChange(u, { role });
    if (g) { window.k2bToast && window.k2bToast(g, "warn", 4200); refresh(); return; }
    if (!window.confirm(`Change ${u.name || "employee"} #${u.id} from "${u.role}" to "${role}"? Takes effect at their next sign-in.`)) { refresh(); return; }
    const r = (D && D.teamUpdate) ? await D.teamUpdate({ id: u.id, role }) : { ok: false, error: "DMS core not loaded." };
    if (r && r.ok) window.k2bToast && window.k2bToast(`Employee #${u.id} is now ${role}.`, "ok");
    else window.k2bToast && window.k2bToast((r && r.error) || "Role update failed.", "warn", 4200);
    refresh();
  };

  const cellStyle = { padding: "8px 12px" };
  const inp = { padding: "6px 9px", border: "1px solid #C8CCD2", background: "#FFF", fontFamily: "var(--font-ui)", fontSize: 13, boxSizing: "border-box" };

  return (
    <div>
      <SecHead title="Users (Server)"
               sub="Manage the server sign-in accounts (employee numbers) shared by every workstation. Changes here apply to the whole dealership, not just this PC." />

      {offline && (
        <div style={{ background: "#FFF4E0", border: "1px solid #E0A400", borderRadius: 6,
                      padding: "10px 14px", fontSize: 12.5, color: "#7A5800", marginBottom: 16 }}>
          <b>Server unavailable</b> — user management requires the server connection.
          <span style={{ color: "#A08040" }}> ({offline})</span>
        </div>
      )}

      {users === null && <div style={{ fontSize: 12.5, color: "#777" }}>Loading users…</div>}

      {!offline && users !== null && (
        <div style={{ border: "1px solid #DDD", borderRadius: 6, overflow: "hidden", marginBottom: 22 }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
            <thead><tr style={{ background: "#FAFAFA", color: "#888", textAlign: "left" }}>
              {["Employee #", "Name", "Role", "Status", ""].map((h, i) => <th key={i} style={{ ...cellStyle, fontWeight: 600 }}>{h}</th>)}
            </tr></thead>
            <tbody>
              {users.map((u) => (
                <tr key={u.id} style={{ borderTop: "1px solid #EEE", opacity: u.active ? 1 : 0.55 }}>
                  <td style={{ ...cellStyle, fontWeight: 700, color: "var(--jb-navy)", fontFamily: "var(--jb-mono, monospace)" }}>
                    {u.id}{u.id === me && <span style={{ marginLeft: 6, fontSize: 10, color: "#999", fontWeight: 400 }}>(you)</span>}
                  </td>
                  <td style={cellStyle}>{u.name}</td>
                  <td style={cellStyle}>
                    <select value={TEAM_ROLES.includes(u.role) ? u.role : ""} onChange={(e) => changeRole(u, e.target.value)}
                            title="Change role (applies at next sign-in)"
                            style={{ ...selectStyle, padding: "3px 6px", fontSize: 12, fontWeight: 600, color: "var(--jb-blue, #1B66A8)" }}>
                      {!TEAM_ROLES.includes(u.role) && <option value="">{u.role || "(no role)"}</option>}
                      {TEAM_ROLES.map(r => <option key={r} value={r}>{r}</option>)}
                    </select>
                  </td>
                  <td style={{ ...cellStyle, fontWeight: 700, color: u.active ? "var(--jb-green, #16A34A)" : "#999" }}>{u.active ? "Active" : "Inactive"}</td>
                  <td style={{ ...cellStyle, textAlign: "right", whiteSpace: "nowrap" }}>
                    <button className="k2b-button small" onClick={() => setResetFor(u)}>Reset Password</button>{" "}
                    <button className="k2b-button small" onClick={() => toggleActive(u)}>{u.active ? "Deactivate" : "Activate"}</button>
                  </td>
                </tr>
              ))}
              {!users.length && <tr><td colSpan={5} style={{ ...cellStyle, color: "#999" }}>No users on the server yet.</td></tr>}
            </tbody>
          </table>
        </div>
      )}

      {!offline && users !== null && (
        <Group label="Add Employee">
          <div style={{ display: "flex", gap: 10, alignItems: "flex-end", flexWrap: "wrap" }}>
            <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
              <span style={{ fontSize: 11, color: "#666", fontWeight: 600 }}>Employee #</span>
              <input value={form.id} onChange={(e) => setF("id", e.target.value.replace(/[^A-Za-z0-9]/g, "").slice(0, 10))} style={{ ...inp, width: 100, fontFamily: "var(--jb-mono, monospace)" }} />
            </label>
            <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
              <span style={{ fontSize: 11, color: "#666", fontWeight: 600 }}>Name</span>
              <input value={form.name} onChange={(e) => setF("name", e.target.value)} style={{ ...inp, width: 200 }} />
            </label>
            <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
              <span style={{ fontSize: 11, color: "#666", fontWeight: 600 }}>Role</span>
              <select value={form.role} onChange={(e) => setF("role", e.target.value)} style={selectStyle}>
                {TEAM_ROLES.map(r => <option key={r}>{r}</option>)}
              </select>
            </label>
            <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
              <span style={{ fontSize: 11, color: "#666", fontWeight: 600 }}>Temporary Password <span style={{ color: "#999", fontWeight: 400 }}>· 10+ chars, Aa1</span></span>
              <input type="password" autoComplete="new-password" value={form.password} onChange={(e) => setF("password", e.target.value)} style={{ ...inp, width: 180 }} title={teamPwRules} />
            </label>
            <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
              <span style={{ fontSize: 11, color: "#666", fontWeight: 600 }}>Re-type Password</span>
              <input type="password" autoComplete="new-password" value={form.confirm} onChange={(e) => setF("confirm", e.target.value)}
                     style={{ ...inp, width: 160, borderColor: form.confirm && form.confirm !== form.password ? "var(--jb-red, #C03546)" : undefined }} />
            </label>
            <button className="k2b-button" style={{ fontWeight: 700, background: "var(--jb-yellow, #FFD24A)", opacity: pwPolicyOk ? 1 : 0.55 }}
                    disabled={busy || !pwPolicyOk} title={pwPolicyOk ? "" : "Fix the password problems first"} onClick={create}>+ Create</button>
          </div>
          {form.password && (
            <div style={{ maxWidth: 360, marginTop: 4 }}>
              {window.JbPasswordMeter
                ? <window.JbPasswordMeter pw={form.password} username={(form.id || "").trim()} confirm={form.confirm} showConfirm />
                : (teamPwCheck(form.password) && <span style={{ fontSize: 10.5, color: "var(--jb-red, #C03546)" }}>{teamPwCheck(form.password)}</span>)}
            </div>
          )}
          {formErr && <div style={{ fontSize: 11.5, color: "var(--jb-red, #C03546)", marginTop: 6 }}>{formErr}</div>}
          <p style={{ fontSize: 11.5, color: "#777", marginTop: 10 }}>
            The new employee signs in with their employee # and the temporary password ({teamPwRules}); an admin can reset it here any time.
            Roles can be changed in the table above. The system always keeps at least one active admin — the last one cannot be
            deactivated or demoted, and you cannot deactivate or demote yourself.
          </p>
        </Group>
      )}

      {resetFor && <TeamResetPassword user={resetFor} onClose={() => setResetFor(null)} onDone={() => { setResetFor(null); refresh(); }} />}
    </div>
  );
};

const TeamResetPassword = ({ user, onClose, onDone }) => {
  const [pw, setPw] = React.useState("");
  const [confirm, setConfirm] = React.useState("");
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const policyOk = !!pw && !teamPwPolicyErr(pw, user.id, confirm);
  const apply = async () => {
    const pwErr = teamPwPolicyErr(pw, user.id, confirm);
    if (pwErr) { setErr(pwErr); return; }
    setBusy(true);
    const r = await window.DMS.teamSetPassword(user.id, pw);
    setBusy(false);
    if (r && r.ok) {
      try { window.DMS.logAudit && window.DMS.logAudit("Password Reset", "#" + user.id + " · by admin"); } catch (e) {}
      window.k2bToast && window.k2bToast(`Password reset for #${user.id}.`, "ok"); onDone();
    }
    else setErr((r && r.error) || "Reset failed.");
  };
  return (
    <K2BModal title={`Reset Password — #${user.id}`} width={420} onClose={onClose}
      buttons={<>
        <K2BButton onClick={onClose}>Cancel</K2BButton>
        <K2BButton primary onClick={policyOk && !busy ? apply : () => setErr(teamPwPolicyErr(pw, user.id, confirm) || "Enter the new password twice.")}
                   style={{ opacity: policyOk ? 1 : 0.6 }}>{busy ? "Saving…" : "Set Password"}</K2BButton>
      </>}>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        <div style={{ fontSize: 12.5 }}>New password for <b>{user.name || "employee"} (#{user.id})</b>:</div>
        <SetInput value={pw} onChange={(v) => { setPw(v); setErr(""); }} width={260} type="password" />
        <div style={{ fontSize: 11, color: "#666", marginTop: -2 }}>Re-type the new password:</div>
        <SetInput value={confirm} onChange={(v) => { setConfirm(v); setErr(""); }} width={260} type="password" />
        {window.JbPasswordMeter && <window.JbPasswordMeter pw={pw} username={user.id} confirm={confirm} showConfirm />}
        <div style={{ fontSize: 11, color: "#888" }}>Must be {teamPwRules}. The employee should change it after signing in.</div>
        {err && <div style={{ fontSize: 11.5, color: "var(--jb-red, #C03546)" }}>{err}</div>}
      </div>
    </K2BModal>
  );
};
Object.assign(window, { TeamUsersPanel });

/* ─── Staff & Techs — payroll employees + service technicians ──────── */
// Audit A-01: the labelled-field wrapper lives at MODULE scope. Declared
// inside StaffPanel it was a brand-new component type on every keystroke, so
// React unmounted/remounted every input and the autoFocus Name box stole the
// caret after one character.
const staffInp = { fontSize: 13, padding: "5px 7px", border: "1px solid #C8CCD2", borderRadius: 4 };
const StaffField = ({ label, children }) => (
  <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
    <span style={{ fontSize: 11, color: "#666", fontWeight: 600 }}>{label}</span>{children}
  </label>
);
const StaffPanel = () => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => (window.DMS && DMS.subscribe) ? DMS.subscribe(force) : undefined, []);
  const act = (r) => { window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn"); force(); return r; };
  const emps = (window.DMS && DMS.employees) ? DMS.employees() : [];
  const techs = (window.DMS && DMS.technicians) ? DMS.technicians() : [];
  const [empEdit, setEmpEdit] = React.useState(null);
  const [techEdit, setTechEdit] = React.useState(null);

  const inp = staffInp;
  const F = StaffField;   // stable module-scope component — never remounts inputs
  // autoFocus applies only on the editor's FIRST mount (the modal opening) —
  // the input is keyed by the record so a new record gets one initial focus.

  return (
    <div>
      <SecHead title="Staff & Technicians"
               sub="Payroll employees (Payroll module) and service technicians (RO dispatch, scheduler). Both save to the dealership store — wiped data starts empty here." />

      {/* ── Employees ── */}
      <div style={{ display: "flex", alignItems: "center", margin: "14px 0 8px" }}>
        <span style={{ fontWeight: 700, fontSize: 13.5 }}>Payroll Employees ({emps.length})</span>
        <span style={{ flex: 1 }} />
        <button className="k2b-button small" style={{ background: "var(--jb-yellow, #FFD24A)", fontWeight: 700 }}
                onClick={() => setEmpEdit({ id: "", name: "", dept: "SAL", type: "Hourly", rate: 0, comm: 0, deductions: [] })}>+ Add Employee</button>
      </div>
      <div style={{ border: "1px solid #DDD", borderRadius: 6, overflow: "hidden" }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
          <thead><tr style={{ background: "#F2F2F2", color: "#666", textAlign: "left" }}>
            {["ID", "Name", "Dept", "Type", "Rate", ""].map((h, i) => <th key={i} style={{ padding: "7px 10px", fontWeight: 600 }}>{h}</th>)}
          </tr></thead>
          <tbody>
            {emps.map((e, i) => (
              <tr key={e.id} style={{ background: i % 2 ? "#FAFAFA" : "#FFF", cursor: "pointer" }} onClick={() => setEmpEdit({ ...e })}>
                <td style={{ padding: "6px 10px", fontFamily: "monospace" }}>{e.id}</td>
                <td style={{ padding: "6px 10px", fontWeight: 600 }}>{e.name}</td>
                <td style={{ padding: "6px 10px" }}>{e.dept}</td>
                <td style={{ padding: "6px 10px" }}>{e.type}</td>
                <td style={{ padding: "6px 10px", fontFamily: "monospace" }}>{(+e.rate || 0).toLocaleString("en-US", { minimumFractionDigits: 2 })}{e.type === "Salary" ? "/mo" : "/hr"}</td>
                <td style={{ padding: "6px 10px", textAlign: "right", color: "#bbb" }}>edit ›</td>
              </tr>
            ))}
            {!emps.length && <tr><td colSpan={6} style={{ padding: 16, textAlign: "center", color: "#999" }}>No employees yet — add your staff here; they appear in Payroll.</td></tr>}
          </tbody>
        </table>
      </div>

      {/* ── Technicians ── */}
      <div style={{ display: "flex", alignItems: "center", margin: "20px 0 8px" }}>
        <span style={{ fontWeight: 700, fontSize: 13.5 }}>Service Technicians ({techs.length})</span>
        <span style={{ flex: 1 }} />
        <button className="k2b-button small" style={{ background: "var(--jb-yellow, #FFD24A)", fontWeight: 700 }}
                onClick={() => setTechEdit({ id: "", name: "", skill: "B — Journeyman", rate: 25 })}>+ Add Technician</button>
      </div>
      <div style={{ border: "1px solid #DDD", borderRadius: 6, overflow: "hidden" }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
          <thead><tr style={{ background: "#F2F2F2", color: "#666", textAlign: "left" }}>
            {["ID", "Name", "Skill", "Rate/hr", ""].map((h, i) => <th key={i} style={{ padding: "7px 10px", fontWeight: 600 }}>{h}</th>)}
          </tr></thead>
          <tbody>
            {techs.map((t, i) => (
              <tr key={t.id} style={{ background: i % 2 ? "#FAFAFA" : "#FFF", cursor: "pointer" }} onClick={() => setTechEdit({ ...t })}>
                <td style={{ padding: "6px 10px", fontFamily: "monospace" }}>{t.id}</td>
                <td style={{ padding: "6px 10px", fontWeight: 600 }}>{t.name}</td>
                <td style={{ padding: "6px 10px" }}>{t.skill}</td>
                <td style={{ padding: "6px 10px", fontFamily: "monospace" }}>{(+t.rate || 0).toFixed(2)}</td>
                <td style={{ padding: "6px 10px", textAlign: "right", color: "#bbb" }}>edit ›</td>
              </tr>
            ))}
            {!techs.length && <tr><td colSpan={5} style={{ padding: 16, textAlign: "center", color: "#999" }}>No technicians yet — add techs here; they appear in RO dispatch and the scheduler.</td></tr>}
          </tbody>
        </table>
      </div>

      {/* ── Employee editor ── */}
      {empEdit && (
        <K2BModal title={empEdit.name ? "Edit Employee" : "Add Employee"} width={480} onClose={() => setEmpEdit(null)}
          buttons={<>
            {empEdit.id && emps.some(x => x.id === empEdit.id) &&
              <K2BButton onClick={() => { if (window.confirm("Remove " + empEdit.name + "?")) { act(DMS.removeEmployee(empEdit.id)); setEmpEdit(null); } }}>Delete</K2BButton>}
            <K2BButton onClick={() => setEmpEdit(null)}>Cancel</K2BButton>
            <K2BButton primary onClick={() => { const r = act(DMS.upsertEmployee(empEdit)); if (r.ok) setEmpEdit(null); }}>Save</K2BButton>
          </>}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <F label="Name (LAST, FIRST)"><input value={empEdit.name} onChange={(e) => setEmpEdit(p => ({ ...p, name: e.target.value.toUpperCase() }))} style={{ ...inp, textTransform: "uppercase" }} autoFocus /></F>
            <F label="Employee ID (blank = auto)"><input value={empEdit.id} onChange={(e) => setEmpEdit(p => ({ ...p, id: e.target.value.toUpperCase() }))} style={inp} /></F>
            <F label="Department">
              <select value={empEdit.dept} onChange={(e) => setEmpEdit(p => ({ ...p, dept: e.target.value }))} style={inp}>
                {["SAL", "F&I", "SVC", "PRT", "BDY", "ADM"].map(d => <option key={d}>{d}</option>)}
              </select></F>
            <F label="Pay Type">
              <select value={empEdit.type} onChange={(e) => setEmpEdit(p => ({ ...p, type: e.target.value }))} style={inp}>
                {["Hourly", "Salary", "Flat Rate", "Commission"].map(d => <option key={d}>{d}</option>)}
              </select></F>
            <F label={empEdit.type === "Salary" ? "Salary / month $" : "Rate / hour $"}>
              <input value={empEdit.rate} onChange={(e) => setEmpEdit(p => ({ ...p, rate: e.target.value.replace(/[^0-9.]/g, "") }))} style={{ ...inp, fontFamily: "monospace" }} /></F>
          </div>
          <div style={{ fontSize: 11.5, color: "#888", marginTop: 10 }}>Deductions (child support, garnishments, insurance) are edited per-employee in Payroll → Edit.</div>
        </K2BModal>
      )}

      {/* ── Technician editor ── */}
      {techEdit && (
        <K2BModal title={techEdit.name ? "Edit Technician" : "Add Technician"} width={440} onClose={() => setTechEdit(null)}
          buttons={<>
            {techEdit.id && techs.some(x => x.id === techEdit.id) &&
              <K2BButton onClick={() => { if (window.confirm("Remove " + techEdit.name + "?")) { act(DMS.removeTechnician(techEdit.id)); setTechEdit(null); } }}>Delete</K2BButton>}
            <K2BButton onClick={() => setTechEdit(null)}>Cancel</K2BButton>
            <K2BButton primary onClick={() => { const r = act(DMS.upsertTechnician(techEdit)); if (r.ok) setTechEdit(null); }}>Save</K2BButton>
          </>}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <F label="Name"><input value={techEdit.name} onChange={(e) => setTechEdit(p => ({ ...p, name: e.target.value }))} style={inp} autoFocus /></F>
            <F label="Tech ID (blank = auto)"><input value={techEdit.id} onChange={(e) => setTechEdit(p => ({ ...p, id: e.target.value.toUpperCase() }))} style={inp} /></F>
            <F label="Skill Level">
              <select value={techEdit.skill} onChange={(e) => setTechEdit(p => ({ ...p, skill: e.target.value }))} style={inp}>
                {["A — Master", "B — Journeyman", "C — Lube / Apprentice", "Body", "Paint"].map(s => <option key={s}>{s}</option>)}
              </select></F>
            <F label="Cost Rate / hr $"><input value={techEdit.rate} onChange={(e) => setTechEdit(p => ({ ...p, rate: e.target.value.replace(/[^0-9.]/g, "") }))} style={{ ...inp, fontFamily: "monospace" }} /></F>
          </div>
          <div style={{ fontSize: 11.5, color: "#888", marginTop: 10 }}>Techs show up in RO dispatch, the scheduler, and tech-productivity reporting.</div>
        </K2BModal>
      )}
    </div>
  );
};
Object.assign(window, { StaffPanel });

/* ─── (removed) Carfax / RouteOne browser-stored credential panels.
   They kept API keys/passwords in this browser and showed "Connected" without any
   test. Credentials now live encrypted on the server: Settings → Integrations (API). */

/* ─── vAuto & marketplace feeds ───────────────────────────────── */
// The old vAuto card kept the vAuto username / API key in this browser — purge it.
try { localStorage.removeItem("jbrews-vauto-cfg"); } catch (e) {}
const vaInp = { width: "100%", boxSizing: "border-box", padding: "7px 9px", border: "1px solid #C8CCD2", borderRadius: 4, fontSize: 13 };
const VAutoPanel = () => {
  const [result, setResult] = React.useState("");
  const exportCsv = () => {
    const units = (window.DMS && window.DMS.inventory && window.DMS.inventory()) || [];
    if (!units.length) { setResult("No inventory to export — stock units in first."); return; }
    const cols = ["Stock #", "VIN", "Year", "Make", "Model", "Body", "Color", "Odometer", "New/Used", "Price", "Cost", "Days In Stock", "Certified"];
    const esc = (v) => { const s = String(v == null ? "" : v); return /[",\n]/.test(s) ? '"' + s.split('"').join('""') + '"' : s; };
    const lines = [cols.join(",")].concat(units.map(u => [u.stock, u.vin, u.yr, u.mk, u.mdl, u.body || "", u.color || "", u.miles || 0,
      /^n/i.test(u.type || "") ? "New" : "Used", (+u.asking || +u.list || 0), (+u.cost || 0), u.age || 0, u.certified ? "Y" : "N"].map(esc).join(",")));
    const blob = new Blob([lines.join("\r\n")], { type: "text/csv" });
    const a = document.createElement("a"); a.href = URL.createObjectURL(blob);
    a.download = "vauto-inventory-" + new Date().toISOString().slice(0, 10) + ".csv"; a.click();
    setTimeout(() => URL.revokeObjectURL(a.href), 5000);
    setResult(units.length + " unit(s) exported — upload the file in vAuto (or any marketplace bulk-upload tool).");
  };
  const importPricing = (file) => {
    if (!file) return;
    const rd = new FileReader();
    rd.onload = () => {
      const rows = String(rd.result || "").split(/\r?\n/).map(l => l.split(",").map(c => c.replace(/^"|"$/g, "").trim())).filter(r => r.length >= 2 && r[0]);
      if (!rows.length) { setResult("Could not read any rows from " + file.name + "."); return; }
      let hdr = 0, stockI = 0, priceI = 1;
      const h = rows[0].map(c => c.toLowerCase());
      if (h.some(c => /stock|vin/.test(c))) { hdr = 1; stockI = Math.max(0, h.findIndex(c => /stock|vin/.test(c))); const pi = h.findIndex(c => /price|ask|internet/.test(c)); if (pi >= 0) priceI = pi; }
      let n = 0, miss = 0;
      rows.slice(hdr).forEach(r => { const price = parseFloat(String(r[priceI]).replace(/[^0-9.]/g, "")); if (!r[stockI] || !price) return;
        const res = window.DMS.updateUnit(r[stockI], { asking: price }); res.ok ? n++ : miss++; });
      setResult(n + " unit price(s) updated from " + file.name + (miss ? " · " + miss + " not matched by stock/VIN" : "") + ".");
      window.k2bToast && window.k2bToast(n + " unit prices updated.", n ? "ok" : "warn");
    };
    rd.readAsText(file);
  };
  return (
    <div>
      <SecHead title="vAuto & Marketplace Feeds" sub="Push inventory out to pricing/appraisal tools and listing sites, and pull vAuto price changes back in (CSV)." />
      <div style={{ maxWidth: 620, display: "flex", flexDirection: "column", gap: 14 }}>
        <div style={{ border: "1px solid #E2E5EA", borderRadius: 8, padding: "10px 14px", fontSize: 12, color: "#555", lineHeight: 1.5, background: "#FFF" }}>
          <b>vAuto API credentials</b> are no longer stored on this workstation. An administrator enters them in <b>Settings → Integrations (API) → vAuto</b>
          (stored encrypted on the server; the API feed goes live only after Cox Automotive partner approval and a successful test). The CSV export/import below works today.
        </div>
        <div style={{ border: "1px solid #E2E5EA", borderRadius: 8, padding: 14, display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
          <div style={{ flex: 1, minWidth: 220 }}>
            <div style={{ fontWeight: 700, fontSize: 13.5 }}>Send inventory OUT</div>
            <div style={{ fontSize: 12, color: "#777" }}>CSV with stock #, VIN, year/make/model, mileage, price — accepted by vAuto, CarGurus, AutoTrader, Cars.com bulk tools.</div>
          </div>
          <button className="k2b-button" style={{ background: "var(--jb-yellow, #FFD24A)", fontWeight: 700 }} onClick={exportCsv}>⇧ Export Inventory CSV</button>
        </div>
        <div style={{ border: "1px solid #E2E5EA", borderRadius: 8, padding: 14, display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
          <div style={{ flex: 1, minWidth: 220 }}>
            <div style={{ fontWeight: 700, fontSize: 13.5 }}>Bring pricing IN</div>
            <div style={{ fontSize: 12, color: "#777" }}>Drop a vAuto pricing export (columns: stock or VIN + price) — asking prices update across the whole DMS instantly.</div>
          </div>
          <label className="k2b-button" style={{ fontWeight: 700, cursor: "pointer" }}>⇩ Import Pricing CSV
            <input type="file" accept=".csv,.txt" style={{ display: "none" }} onChange={(e) => { importPricing(e.target.files && e.target.files[0]); e.target.value = ""; }} />
          </label>
        </div>
        {result && <div style={{ background: "#E6F7EC", border: "1px solid #16A34A", borderRadius: 6, padding: "8px 12px", fontSize: 12.5, color: "#0E7A37" }}>{result}</div>}
      </div>
    </div>
  );
};
Object.assign(window, { VAutoPanel });

/* ─── GL Flow editor — remap which account each posting flow hits ─────── */
const GLFlowEditor = ({ go }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => (window.DMS && window.DMS.subscribe) ? window.DMS.subscribe(force) : undefined, []);
  const rows = (window.DMS && window.DMS.getAcctMap) ? window.DMS.getAcctMap() : [];
  const [draft, setDraft] = React.useState({});
  const [coaOpen, setCoaOpen] = React.useState(false);

  const valOf = (r) => (r.key in draft ? draft[r.key] : r.acct);
  const dirty = Object.keys(draft).some(k => {
    const r = rows.find(x => x.key === k); return r && draft[k] !== r.acct;
  });
  const coa = (typeof window !== "undefined" && window.GM_COA) || [];
  const coaName = (acct) => {
    const hit = coa.find(e => String(Array.isArray(e) ? e[0] : e.acct) === String(acct));
    return hit ? (Array.isArray(hit) ? hit[1] : hit.name) : "";
  };

  const save = () => {
    const r = window.DMS.setAcctMap(draft);
    setDraft({});
    window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn", 3600);
  };
  const reset = () => {
    if (!window.confirm("Reset every GL account mapping back to the standard GM chart?")) return;
    const r = window.DMS.resetAcctMap();
    setDraft({});
    window.k2bToast && window.k2bToast(r.msg, "ok", 3200);
  };

  const groups = {};
  rows.forEach(r => { (groups[r.group] = groups[r.group] || []).push(r); });

  return (
    <div>
      <SecHead title="General Ledger Flow"
                sub="Set which GL account each posting flow lands in. Changing a mapping changes where every FUTURE posting (deals, ROs, parts, stock-in) is recorded — already-posted entries are unchanged." />

      <div style={{ display: "flex", gap: 8, marginBottom: 14, alignItems: "center" }}>
        <button className="k2b-button" onClick={save} disabled={!dirty}
                style={{ fontWeight: 700, background: dirty ? "var(--jb-yellow, #FFD24A)" : undefined }}>Save Mappings</button>
        <button className="k2b-button" onClick={reset}>Reset to GM Standard</button>
        <button className="k2b-button" onClick={() => setCoaOpen(o => !o)}>{coaOpen ? "Hide" : "Browse"} Chart of Accounts</button>
        {go && <button className="k2b-button" onClick={() => go("fixedopsgl")}>View Posting Map ▸</button>}
        <span style={{ flex: 1 }} />
        {dirty && <span style={{ fontSize: 12, color: "var(--k2b-maroon)", fontWeight: 700 }}>● unsaved changes</span>}
      </div>

      {coaOpen && (
        <div style={{ maxHeight: 180, overflow: "auto", border: "1px solid #DDD", marginBottom: 16, background: "#FAFAFA" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 11, fontFamily: "var(--jb-mono, monospace)" }}>
            <tbody>
              {coa.map((e, i) => {
                const acct = Array.isArray(e) ? e[0] : e.acct;
                const name = Array.isArray(e) ? e[1] : e.name;
                const type = Array.isArray(e) ? e[2] : e.type;
                return (
                  <tr key={i} style={{ background: i % 2 ? "#FFF" : "transparent" }}>
                    <td style={{ padding: "1px 8px", fontWeight: 700, color: "var(--jb-navy)", width: 70 }}>{acct}</td>
                    <td style={{ padding: "1px 8px" }}>{name}</td>
                    <td style={{ padding: "1px 8px", color: "#888", width: 50 }}>{type}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      {Object.keys(groups).map(g => (
        <Group key={g} label={g}>
          {groups[g].map(r => {
            const v = valOf(r);
            return (
              <div key={r.key} style={{ display: "flex", alignItems: "center", gap: 12, padding: "5px 0", minHeight: 30 }}>
                <div style={{ flex: 1, fontSize: 12.5, color: "#333" }}>
                  {r.label}
                  {r.changed && <span style={{ marginLeft: 8, fontSize: 10, color: "var(--k2b-maroon)", fontWeight: 700 }}>remapped from {r.def}</span>}
                </div>
                <input value={v}
                       onChange={(e) => setDraft(d => ({ ...d, [r.key]: e.target.value }))}
                       style={{ width: 88, padding: "5px 8px", border: "1px solid #C8CCD2",
                                fontFamily: "var(--jb-mono, monospace)", fontSize: 13, fontWeight: 700,
                                color: "var(--jb-navy)", textAlign: "center",
                                background: (r.key in draft && draft[r.key] !== r.acct) ? "#FFFBEA" : "#FFF" }} />
                <div style={{ width: 200, fontSize: 11, color: "#888" }}>{coaName(v) || "—"}</div>
              </div>
            );
          })}
        </Group>
      ))}
    </div>
  );
};
Object.assign(window, { GLFlowEditor });