/* 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 — Controls (spec §8).
// Role-based permissions, audit trail, and required-field policy.
// Permissions + policy persist to localStorage; the audit trail reads the
// live engine log (every GL-affecting action is recorded automatically).

const PERMS_KEY  = "jbrews-perms-v1";
const POLICY_KEY = "jbrews-fieldpolicy-v1";

// Modules that can be gated, grouped by department.
const PERM_MODULES = [
  { group: "Sales & F&I", items: [
    { key: "deal", label: "Deals" }, { key: "desking", label: "Desking" },
    { key: "buyersorder", label: "Buyer's Order" }, { key: "creditapp", label: "Credit App" },
    { key: "finance", label: "Finance Worksheet" },
  ]},
  { group: "Inventory", items: [
    { key: "inventory", label: "Inventory" }, { key: "stockin", label: "Stock-In" },
  ]},
  { group: "Operations", items: [
    { key: "servicedept", label: "Service Dept" }, { key: "partsdept", label: "Parts Dept" },
  ]},
  { group: "Back Office", items: [
    { key: "accounting", label: "Accounting / GL" }, { key: "acctoffice", label: "Acct Office (AR/AP)" },
    { key: "docentry", label: "Doc Entry / Post JE" }, { key: "payroll", label: "Payroll" },
    { key: "gmacct", label: "GM Statement" },
  ]},
  { group: "Administration", items: [
    { key: "settings", label: "Settings / Security" }, { key: "controls", label: "Controls (this screen)" },
  ]},
];

const ROLES = ["Admin", "Sales", "F&I", "Accounting", "Service", "Parts"];

// Default permission matrix — what each role may access.
const DEFAULT_PERMS = (() => {
  const all = {};
  const allow = (role, keys) => { all[role] = {}; PERM_MODULES.forEach(g => g.items.forEach(i => all[role][i.key] = keys === "*" || keys.includes(i.key))); };
  allow("Admin", "*");
  allow("Sales", ["deal", "desking", "buyersorder", "creditapp", "finance", "inventory", "stockin"]);
  allow("F&I", ["deal", "desking", "buyersorder", "creditapp", "finance", "inventory"]);
  allow("Accounting", ["accounting", "acctoffice", "docentry", "payroll", "gmacct", "deal", "inventory"]);
  allow("Service", ["servicedept", "partsdept", "inventory"]);
  allow("Parts", ["partsdept", "servicedept", "inventory"]);
  return all;
})();

const DEFAULT_POLICY = {
  vinRequired: true, mileageRequired: true, custSigRequired: true,
  payTypeRequired: true, acctRequired: true, costRequired: true,
};

const loadPerms  = () => { try { const r = localStorage.getItem(PERMS_KEY);  return r ? JSON.parse(r) : JSON.parse(JSON.stringify(DEFAULT_PERMS)); } catch (e) { return JSON.parse(JSON.stringify(DEFAULT_PERMS)); } };
const savePerms  = (p) => { try { localStorage.setItem(PERMS_KEY, JSON.stringify(p)); } catch (e) {} };
const loadPolicy = () => { try { const r = localStorage.getItem(POLICY_KEY); return r ? { ...DEFAULT_POLICY, ...JSON.parse(r) } : { ...DEFAULT_POLICY }; } catch (e) { return { ...DEFAULT_POLICY }; } };
const savePolicy = (p) => { try { localStorage.setItem(POLICY_KEY, JSON.stringify(p)); } catch (e) {} };

const Controls = ({ onClose, go }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => DMS.subscribe(force), []);
  const [tab, setTab]   = React.useState("perms");
  const [perms, setPerms]   = React.useState(loadPerms);
  const [policy, setPolicy] = React.useState(loadPolicy);
  const [dirty, setDirty]   = React.useState(false);
  const [filter, setFilter] = React.useState("");

  const audit = DMS.audit();

  const toggle = (role, key) => {
    if (role === "Admin") return; // Admin always full access
    setPerms(p => { const next = { ...p, [role]: { ...p[role], [key]: !p[role][key] } }; return next; });
    setDirty(true);
  };
  const savePermissions = () => {
    savePerms(perms); setDirty(false);
    DMS.logAudit("Permissions Changed", "Role access matrix updated");
    window.k2bToast && window.k2bToast("Permissions saved & logged to audit trail.", "ok", 2800);
  };

  const setPol = (k, v) => { setPolicy(p => ({ ...p, [k]: v })); savePolicy({ ...policy, [k]: v }); DMS.logAudit("Field Policy Changed", `${k} = ${v}`); };

  const fmtTs = (iso) => new Date(iso).toLocaleString("en-US", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
  const auditFiltered = audit.filter(a => !filter ||
    (a.user + a.role + a.action + a.detail).toLowerCase().includes(filter.toLowerCase()));

  const TABS = [
    { k: "perms",  label: "Roles & Permissions" },
    { k: "audit",  label: `Audit Trail (${audit.length})` },
    { k: "policy", label: "Required Fields" },
    { k: "data",   label: "Data & Sync" },
  ];

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

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

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

        {/* ── ROLES & PERMISSIONS ── */}
        {tab === "perms" && (
          <>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
              <div style={{ fontSize: 12, color: "#666", flex: 1 }}>
                Toggle which modules each role can open. <b>Admin</b> always has full access. Changes are logged to the audit trail.
              </div>
              <K2BButton small onClick={savePermissions} disabled={!dirty}
                         style={{ background: dirty ? "var(--jb-yellow)" : undefined, fontWeight: 700 }}>💾 Save Permissions</K2BButton>
              {dirty && <span style={{ fontSize: 11, color: "#A26B00" }}>Unsaved</span>}
            </div>
            <table style={ctlTable}>
              <thead>
                <tr style={ctlHead}>
                  <th style={{ ...cTh, textAlign: "left", minWidth: 180 }}>Module</th>
                  {ROLES.map(r => <th key={r} style={{ ...cTh, textAlign: "center", width: 84 }}>{r}</th>)}
                </tr>
              </thead>
              <tbody>
                {PERM_MODULES.map(g => (
                  <React.Fragment key={g.group}>
                    <tr style={{ background: "#EFE7D2" }}>
                      <td colSpan={ROLES.length + 1} style={{ padding: "3px 8px", color: "var(--k2b-maroon)", fontWeight: 700, fontSize: 11, textTransform: "uppercase", letterSpacing: "0.04em" }}>{g.group}</td>
                    </tr>
                    {g.items.map(item => (
                      <tr key={item.key} style={{ borderBottom: "1px dotted #DDD" }}>
                        <td style={{ padding: "3px 8px", color: "var(--k2b-navy)", fontSize: 12 }}>{item.label}</td>
                        {ROLES.map(role => {
                          const on = perms[role] && perms[role][item.key];
                          const locked = role === "Admin";
                          return (
                            <td key={role} style={{ textAlign: "center", padding: "2px 4px" }}>
                              <button onClick={() => toggle(role, item.key)} disabled={locked}
                                      title={locked ? "Admin always has access" : (on ? "Allowed — click to deny" : "Denied — click to allow")}
                                      style={{ width: 26, height: 22, border: "1px solid " + (on ? "var(--jb-green, #16A34A)" : "#C9CED6"),
                                               background: on ? "var(--jb-green, #16A34A)" : "#FFF", color: on ? "#FFF" : "#C9CED6",
                                               borderRadius: 4, cursor: locked ? "default" : "pointer", fontWeight: 700, fontSize: 12,
                                               opacity: locked ? 0.7 : 1 }}>
                                {on ? "✓" : "·"}
                              </button>
                            </td>
                          );
                        })}
                      </tr>
                    ))}
                  </React.Fragment>
                ))}
              </tbody>
            </table>
          </>
        )}

        {/* ── AUDIT TRAIL ── */}
        {tab === "audit" && (
          <>
            <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }}>
              <span style={{ fontWeight: 700, color: "var(--k2b-maroon)" }}>Filter:</span>
              <input value={filter} onChange={(e) => setFilter(e.target.value)} placeholder="user, action, or detail"
                     style={{ flex: 1, maxWidth: 320, background: "var(--k2b-yellow, #FFFFE1)", border: "1px solid #808080", padding: "2px 6px", fontFamily: "'Courier Prime', monospace" }} />
              <span style={{ fontSize: 11, color: "#666" }}>{auditFiltered.length} of {audit.length} entries · newest first</span>
              <K2BButton small onClick={() => { const blob = new Blob([JSON.stringify(audit, null, 2)], { type: "application/json" }); const u = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = u; a.download = "jbrews-audit-" + new Date().toISOString().slice(0,10) + ".json"; a.click(); URL.revokeObjectURL(u); }}>⬇ Export</K2BButton>
            </div>
            <table style={ctlTable}>
              <thead>
                <tr style={ctlHead}>
                  <th style={{ ...cTh, width: 130 }}>When</th><th style={{ ...cTh, width: 90 }}>User</th>
                  <th style={{ ...cTh, width: 120 }}>Role</th><th style={cTh}>Action</th><th style={cTh}>Detail</th>
                </tr>
              </thead>
              <tbody>
                {auditFiltered.length === 0 && <tr><td colSpan={5} style={{ padding: 14, textAlign: "center", color: "#888" }}>No matching audit entries.</td></tr>}
                {auditFiltered.map((a, i) => (
                  <tr key={i} style={{ borderBottom: "1px dotted #DDD", background: i % 2 ? "#F4F4F4" : "#FFF" }}>
                    <td style={cTdMono}>{fmtTs(a.ts)}</td>
                    <td style={cTdMono}>{a.user}</td>
                    <td style={cTd}>{a.role}</td>
                    <td style={{ ...cTd, fontWeight: 700, color: "var(--k2b-navy)" }}>{a.action}</td>
                    <td style={cTd}>{a.detail}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </>
        )}

        {/* ── REQUIRED FIELDS ── */}
        {tab === "policy" && (
          <div style={{ maxWidth: 640 }}>
            <div style={{ fontSize: 12, color: "#666", marginBottom: 14 }}>
              Enforce that critical fields are completed before a document can be saved or posted (spec §8 — required fields).
            </div>
            {[
              { k: "vinRequired",     label: "VIN required",                 detail: "Block stock-in / deal posting without a VIN" },
              { k: "mileageRequired", label: "Mileage / odometer required",  detail: "Block RO close and deal posting without mileage" },
              { k: "custSigRequired", label: "Customer signature required",  detail: "Block delivery without a signed buyer's order" },
              { k: "payTypeRequired", label: "RO pay type required",         detail: "Block RO close without Customer / Warranty / Internal" },
              { k: "acctRequired",    label: "GL account required on JE",     detail: "Block journal posting with a blank account line" },
              { k: "costRequired",    label: "Vehicle cost required",        detail: "Block deal posting without recorded cost (protects gross)" },
            ].map(row => (
              <div key={row.k} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 14px",
                                        background: "#FFF", border: "1px solid var(--jb-border, #C0C0C0)", borderRadius: 6, marginBottom: 6 }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: "var(--jb-text)" }}>{row.label}</div>
                  <div style={{ fontSize: 11, color: "#666" }}>{row.detail}</div>
                </div>
                <CtlToggle value={policy[row.k]} onChange={(v) => setPol(row.k, v)} />
              </div>
            ))}
          </div>
        )}

        {/* ── DATA & SYNC ── */}
        {tab === "data" && <DataSyncPanel go={go} />}
      </div>

      <div style={{ borderTop: "1px solid var(--jb-border, #C0C0C0)", padding: "8px 16px", display: "flex", gap: 6, flexWrap: "wrap" }}>
        <K2BButton small onClick={onClose}>ESC-Close</K2BButton>
        <K2BButton small onClick={() => go && go("settings")}>F2-Settings</K2BButton>
        <K2BButton small onClick={() => setTab("audit")}>F3-Audit Trail</K2BButton>
        <K2BButton small onClick={() => go && go("home")}>F5-Dashboard</K2BButton>
      </div>
    </div>
  );
};

const CtlToggle = ({ 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>
);

/* ── Data & Sync: live stations, encryption, backups, reset/wipe ── */
const DataSyncPanel = ({ go }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => {
    if (!window.DMS) return;
    const offP = window.DMS.onPresence(force);
    const id = setInterval(force, 4000);
    return () => { offP(); clearInterval(id); };
  }, []);

  const live = window.DMS ? window.DMS.presence() : [];
  const mySession = window.DMS ? window.DMS.session() : { station: "—" };
  const vault = window.JBVault;
  const encOn = vault && vault.isEnabled();
  const [confirm, setConfirm] = React.useState(null); // 'reset' | 'wipe'
  const [encForm, setEncForm] = React.useState({ open: false, p1: "", p2: "" });
  const [pwForm, setPwForm]   = React.useState({ open: false, old: "", n1: "" });

  const card = { background: "#FFF", border: "1px solid var(--jb-border, #C0C0C0)", borderRadius: 8, padding: "14px 16px", marginBottom: 14 };
  const head = { fontSize: 13, fontWeight: 700, color: "var(--jb-navy, #1B66A8)", marginBottom: 8, display: "flex", alignItems: "center", gap: 8 };

  const doEnable = async () => {
    if (encForm.p1.length < 6) { window.k2bToast && window.k2bToast("Passphrase must be at least 6 characters.", "warn"); return; }
    if (encForm.p1 !== encForm.p2) { window.k2bToast && window.k2bToast("Passphrases do not match.", "warn"); return; }
    const r = await window.DMS.enableEncryption(encForm.p1, "browser");
    window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn", 3400);
    setEncForm({ open: false, p1: "", p2: "" }); force();
  };
  const doChangePw = async () => {
    // (blocker 4) DMS re-encrypts this PC's copy with the new key at once
    const r = window.DMS && window.DMS.changePassphrase ? await window.DMS.changePassphrase(pwForm.old, pwForm.n1, "browser") : await window.JBVault.changePassphrase(pwForm.old, pwForm.n1, "browser");
    window.k2bToast && window.k2bToast(r.ok ? "Passphrase changed." : r.msg, r.ok ? "ok" : "warn", 3200);
    if (r.ok) setPwForm({ open: false, old: "", n1: "" }); force();
  };
  const doDisable = async () => { const r = await window.DMS.disableEncryption(); window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn", r.ok ? undefined : 6000); force(); };
  const vaultLocked = !!(encOn && vault && vault.isUnlocked && !vault.isUnlocked());

  return (
    <div style={{ maxWidth: 720 }}>
      {/* Live stations */}
      <div style={card}>
        <div style={head}><span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--jb-green, #16A34A)", display: "inline-block" }} /> Live Stations · {live.length} online</div>
        <div style={{ fontSize: 11.5, color: "#666", marginBottom: 10, lineHeight: 1.5 }}>
          Every signed-in window on this workstation shares one ledger and syncs in real time. You are <b>{mySession.station}</b>. Open this URL in another window to add a station.
        </div>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
          <thead><tr style={{ textAlign: "left", color: "#666", borderBottom: "1px solid #DDD" }}>
            <th style={{ padding: "4px 6px" }}>Station</th><th style={{ padding: "4px 6px" }}>User</th><th style={{ padding: "4px 6px" }}>Screen</th><th style={{ padding: "4px 6px" }}>Heartbeat</th></tr></thead>
          <tbody>
            {live.map(s => (
              <tr key={s.sessionId} style={{ borderBottom: "1px dotted #EEE" }}>
                <td style={{ padding: "4px 6px", fontWeight: 700 }}>{s.station}{s.sessionId === mySession.sessionId ? " (you)" : ""}</td>
                <td style={{ padding: "4px 6px", fontFamily: "'Courier Prime', monospace" }}>{s.user}</td>
                <td style={{ padding: "4px 6px" }}>{(window.ROUTE_LABELS && window.ROUTE_LABELS[s.route]) || s.route || "—"}</td>
                <td style={{ padding: "4px 6px", color: "var(--jb-green)" }}>● {Math.max(0, Math.round((Date.now() - (s.ts || 0)) / 1000))}s ago</td>
              </tr>
            ))}
            {live.length === 0 && <tr><td colSpan={4} style={{ padding: 8, color: "#999" }}>Connecting…</td></tr>}
          </tbody>
        </table>
      </div>

      {/* Encryption */}
      <div style={card}>
        <div style={head}>🔐 Encryption at Rest {encOn ? <span style={{ fontSize: 10, color: "#FFF", background: vaultLocked ? "#B26A00" : "var(--jb-green)", padding: "1px 8px", borderRadius: 9 }}>{vaultLocked ? "ON · LOCKED — changes are not saved on this PC until it is unlocked" : "ON · AES-256-GCM"}</span> : <span style={{ fontSize: 10, color: "#FFF", background: "#999", padding: "1px 8px", borderRadius: 9 }}>OFF</span>}</div>
        <div style={{ fontSize: 11.5, color: "#666", marginBottom: 10, lineHeight: 1.5 }}>
          {encOn
            ? "Dealership data is stored as AES-256-GCM ciphertext. A passphrase is required to decrypt it when this browser is opened fresh."
            : "Data is currently stored in readable form. Turn on encryption to protect it at rest with a dealership passphrase."}
        </div>
        {!vault || !vault.supported()
          ? <div style={{ fontSize: 11.5, color: "#A02234" }}>This browser does not support Web Crypto — encryption unavailable.</div>
          : !encOn ? (
            !encForm.open
              ? <K2BButton small style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => setEncForm({ open: true, p1: "", p2: "" })}>Enable Encryption…</K2BButton>
              : (
                <div style={{ display: "grid", gridTemplateColumns: "160px 1fr", rowGap: 8, columnGap: 8, alignItems: "center", maxWidth: 420 }}>
                  <span>New passphrase:</span><input type="password" value={encForm.p1} onChange={(e) => setEncForm({ ...encForm, p1: e.target.value })} />
                  <span>Confirm:</span><input type="password" value={encForm.p2} onChange={(e) => setEncForm({ ...encForm, p2: e.target.value })} />
                  <span></span>
                  <div style={{ display: "flex", gap: 6 }}>
                    <K2BButton small style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={doEnable}>Encrypt Data</K2BButton>
                    <K2BButton small onClick={() => setEncForm({ open: false, p1: "", p2: "" })}>Cancel</K2BButton>
                  </div>
                  <div style={{ gridColumn: "1 / -1", fontSize: 10.5, color: "#A02234" }}>⚠ Store this passphrase safely — encrypted data cannot be recovered without it.</div>
                </div>
              )
          ) : (
            !pwForm.open
              ? <div style={{ display: "flex", gap: 6 }}>
                  <K2BButton small onClick={() => setPwForm({ open: true, old: "", n1: "" })}>Change Passphrase…</K2BButton>
                  <K2BButton small onClick={() => { window.JBVault.lock(); window.k2bToast && window.k2bToast("Vault locked. Changes are no longer saved on this PC until you reload and enter the passphrase (they still go to the server).", "info", 6000); force(); }}>Lock Now</K2BButton>
                  <K2BButton small onClick={doDisable}>Turn Off Encryption</K2BButton>
                </div>
              : (
                <div style={{ display: "grid", gridTemplateColumns: "160px 1fr", rowGap: 8, columnGap: 8, alignItems: "center", maxWidth: 420 }}>
                  <span>Current passphrase:</span><input type="password" value={pwForm.old} onChange={(e) => setPwForm({ ...pwForm, old: e.target.value })} />
                  <span>New passphrase:</span><input type="password" value={pwForm.n1} onChange={(e) => setPwForm({ ...pwForm, n1: e.target.value })} />
                  <span></span>
                  <div style={{ display: "flex", gap: 6 }}>
                    <K2BButton small style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={doChangePw}>Save</K2BButton>
                    <K2BButton small onClick={() => setPwForm({ open: false, old: "", n1: "" })}>Cancel</K2BButton>
                  </div>
                </div>
              )
          )}
      </div>

      {/* Backup */}
      <div style={card}>
        <div style={head}>💾 Backup &amp; Restore</div>
        <div style={{ fontSize: 11.5, color: "#666", marginBottom: 10 }}>Download a full backup of the ledger, or restore one. Encrypted backups (.jbz) require their passphrase to import.</div>
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
          <K2BButton small style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => {
            const payload = window.DMS.exportBackup();
            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-${(window.K2BStore && window.K2BStore.pageId()) || "store"}-backup-${new Date().toISOString().slice(0,10)}.json`; a.click(); URL.revokeObjectURL(url);
            window.DMS.logAudit("Data Backup", "Full ledger downloaded");
            window.k2bToast && window.k2bToast("Backup downloaded.", "ok");
          }}>⬇ Download Backup</K2BButton>
          <K2BButton small onClick={() => { localStorage.setItem("jbrews-upload-mode", "restore"); go && go("uploadtool"); }}>⬆ Restore from File…</K2BButton>
        </div>
      </div>

      {/* Reset / Wipe — audit C-01 / C-05: admin-only. These replace or erase
          the SHARED ledger for every station. */}
      {!(window.jbIsAdmin ? window.jbIsAdmin() : false) ? (
        <div style={{ ...card, border: "1px solid #E0A0A0", background: "#FFF8F8" }}>
          <div style={{ ...head, color: "#A02234" }}>⚠ Data Lifecycle</div>
          <div style={{ fontSize: 11.5, color: "#666", lineHeight: 1.5 }}>
            Wipe, sample-data and legacy-import actions are available to <b>Admin</b> users only.
          </div>
        </div>
      ) : (
      <div style={{ ...card, border: "1px solid #E0A0A0", background: "#FFF8F8" }}>
        <div style={{ ...head, color: "#A02234" }}>⚠ Data Lifecycle (admin)</div>
        <div style={{ fontSize: 11.5, color: "#666", marginBottom: 10, lineHeight: 1.5 }}>
          The dealership starts <b>blank</b> — you enter your own records and they persist until you change them here.
          Nothing is ever auto-discarded. <b>These actions replace the SHARED ledger and broadcast to every station instantly.</b>
          <br /><b>Load Sample Data</b> replaces everything with the fictional demo dealership (deals, ROs, parts, GL balances and demo journal entries) — only for training before real work starts.
          <br /><b>Import Legacy Data</b> merges the real parts master + service history recovered from the old Btrieve files (PTL/SSM) — it adds records without wiping what's there.
        </div>
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
          {((window.DMS && ((window.DMS.deals && window.DMS.deals().some(d => d.postedToGL)) || (window.DMS.journalEntries && window.DMS.journalEntries().length > 0) || (window.DMS.customers && Object.keys(window.DMS.customers()).length > 0))) && !(window.DMS.isDemo && window.DMS.isDemo())) ? null : confirm !== "blank"
            ? <K2BButton small style={{ color: "#A02234" }} onClick={() => setConfirm("blank")}>Start Blank / Wipe All Data</K2BButton>
            : <span style={{ display: "inline-flex", gap: 6, alignItems: "center", fontSize: 11.5 }}><b style={{ color: "#A02234" }}>Erase all records on EVERY station and start empty?</b> <K2BButton small style={{ background: "#E0A0A0", fontWeight: 700 }} onClick={() => { window.DMS.startBlank(); setConfirm(null); window.k2bToast && window.k2bToast("Started blank — all records cleared.", "ok"); }}>Confirm</K2BButton> <K2BButton small onClick={() => setConfirm(null)}>Cancel</K2BButton></span>}
          {((window.DMS && ((window.DMS.deals && window.DMS.deals().some(d => d.postedToGL)) || (window.DMS.journalEntries && window.DMS.journalEntries().length > 0) || (window.DMS.customers && Object.keys(window.DMS.customers()).length > 0))) && !(window.DMS.isDemo && window.DMS.isDemo()))
            ? <span style={{ fontSize: 11.5, color: "#A02234", fontWeight: 700, alignSelf: "center" }}>🔒 Sample data &amp; wipe are locked — this dealership has live records.</span>
            : confirm !== "sample"
            ? <K2BButton small onClick={() => setConfirm("sample")}>Load Sample Data</K2BButton>
            : <span style={{ display: "inline-flex", gap: 6, alignItems: "center", fontSize: 11.5 }}>Replace the SHARED ledger (all stations) with the demo dataset? <K2BButton small style={{ background: "#FFE9B0", fontWeight: 700 }} onClick={() => {
                const typed = window.prompt("Type LOAD to replace the shared dealership ledger with the demo dataset:");
                if (String(typed || "").trim() !== "LOAD") { window.k2bToast && window.k2bToast("Not loaded — you must type LOAD exactly.", "warn"); return; }
                const r = window.DMS.loadSampleData();
                // Demo GL journal and demo fleet accounts are explicit too
                // (Accounting / Registry no longer seed them on their own).
                if (window.__k2bJEStore && window.__k2bJEStore.loadDemoJournal) window.__k2bJEStore.loadDemoJournal();
                if (window.jbFleet && window.jbFleet.loadDemo) window.jbFleet.loadDemo();
                setConfirm(null); window.k2bToast && window.k2bToast((r && r.msg) || "Sample data loaded.", "ok", 5000);
              }}>Confirm</K2BButton> <K2BButton small onClick={() => setConfirm(null)}>Cancel</K2BButton></span>}
          {confirm !== "legacy"
            ? <K2BButton small style={{ background: "#E6F0E6" }} onClick={() => setConfirm("legacy")}>Import Legacy Data (PTL/SSM)</K2BButton>
            : <span style={{ display: "inline-flex", gap: 6, alignItems: "center", fontSize: 11.5 }}>Merge real parts + service history from the old Btrieve files? <K2BButton small style={{ background: "#BFE3BF", fontWeight: 700 }} onClick={() => {
                const run = () => { const r = window.DMS.importLegacy(); setConfirm(null); window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "err"); };
                // legacy_seed.js is no longer in the boot load order — fetch on demand.
                window.jbLoadLegacySeed ? window.jbLoadLegacySeed().then(run) : run();
              }}>Confirm</K2BButton> <K2BButton small onClick={() => setConfirm(null)}>Cancel</K2BButton></span>}
        </div>
      </div>
      )}
    </div>
  );
};

const ctlTable = { width: "100%", borderCollapse: "collapse", fontFamily: "'Courier Prime', monospace", fontSize: 12 };
const ctlHead = { background: "#C0C0C0", color: "var(--k2b-maroon, #8a1c1c)", borderBottom: "1px solid #808080", position: "sticky", top: 0 };
const cTh = { padding: "3px 8px", textAlign: "left", whiteSpace: "nowrap" };
const cTd = { padding: "3px 8px", color: "var(--k2b-navy, #11337A)" };
const cTdMono = { ...cTd, fontFamily: "'Courier Prime', monospace", fontWeight: 700, color: "var(--k2b-blue-data-dk, #11337A)" };

// Expose a permission checker other modules / the shell can use.
window.jbCan = function(role, moduleKey) {
  try {
    const p = loadPerms();
    if (!p[role]) return true;
    return !!p[role][moduleKey];
  } catch (e) { return true; }
};

Object.assign(window, { Controls });