/* © 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. */
/* eslint-disable */
// K2B DMS — Owner Panel > Stores (RC35, lane brd; SPEC 4.5). The owner only (the route already is). Without a fresh code: the list.
//   + Add a store  [data-store-form="new"]  a blank store: names, address, phone, license, the chart choice (required - no default),
//                                            GM franchise items (off), first RO number, tax rates (+ the required tick), two colors with a
//                                            live preview of the stripe and of the print header, a logo, who may use it.
//   Edit branding  [data-store-form="<id>"] the same fields + the document header switches + the check header ("Changes every printout")
//   Logo           [data-store-logo]        PNG / JPG / SVG, at most 1 MB (checked here first, the server checks again)
//   Who can use it [data-store-access="<id>"] one row per login: allowed (home and owner fixed)
//   Options                                 GM franchise items, kind, first RO number, the first store's integration keys, turn off / on
// The SERVER decides every rule (owner + fresh code + audited; routes /api/owner/stores...). Store names are text typed by the owner: React
// prints them as text; the print preview goes through K2BPrint.esc.

const osApi = async (path, method, body, headers) => {
  try { const d = await apiFetch("/owner" + path, { method: method || "GET", body, headers, noOwnerOverride: true }); return { ok: true, data: d || {} }; }
  catch (e) { return { ok: false, status: e.status || 0, data: e.body || {}, code: e.body && e.body.code, error: (e.body && e.body.error) || e.message || "Server unreachable" }; }
};
const OS_STATES = ["AL","AK","AZ","AR","CA","CO","CT","DE","DC","FL","GA","HI","ID","IL","IN","IA","KS","KY","LA","ME","MD","MA","MI","MN","MS","MO","MT","NE","NV","NH","NJ","NM","NY","NC","ND","OH","OK","OR","PA","RI","SC","SD","TN","TX","UT","VT","VA","WA","WV","WI","WY"];
const OS_STATE_NAME = { AL: "Alabama", AK: "Alaska", AZ: "Arizona", AR: "Arkansas", CA: "California", CO: "Colorado", CT: "Connecticut", DE: "Delaware", DC: "District of Columbia", FL: "Florida", GA: "Georgia", HI: "Hawaii", ID: "Idaho", IL: "Illinois", IN: "Indiana", IA: "Iowa", KS: "Kansas", KY: "Kentucky", LA: "Louisiana", ME: "Maine", MD: "Maryland", MA: "Massachusetts", MI: "Michigan", MN: "Minnesota", MS: "Mississippi", MO: "Missouri", MT: "Montana", NE: "Nebraska", NV: "Nevada", NH: "New Hampshire", NJ: "New Jersey", NM: "New Mexico", NY: "New York", NC: "North Carolina", ND: "North Dakota", OH: "Ohio", OK: "Oklahoma", OR: "Oregon", PA: "Pennsylvania", RI: "Rhode Island", SC: "South Carolina", SD: "South Dakota", TN: "Tennessee", TX: "Texas", UT: "Utah", VT: "Vermont", VA: "Virginia", WA: "Washington", WV: "West Virginia", WI: "Wisconsin", WY: "Wyoming" };
const osInitials = (s) => String(s || "").split(/\s+/).filter((w) => /^[A-Za-z0-9&]/.test(w)).map((w) => w[0].toUpperCase()).join("").replace(/[^A-Z0-9&]/g, "").slice(0, 3);
const osIsMobile = () => (window.innerWidth || 1000) < 768;
const OS_INPUT = { padding: "7px 9px", border: "1px solid #c0c8d4", fontSize: 13.5, fontFamily: "var(--font-ui)", borderRadius: 6, width: "100%", boxSizing: "border-box", minHeight: 36 };
const OS_LBL = { fontSize: 11.5, color: "#555", fontWeight: 700, display: "block", marginBottom: 3 };
const osKey = () => "store-create-" + Date.now().toString(36) + "-" + Math.random().toString(36).slice(2, 10);

/* the modal: a centered card on a laptop, the whole screen on a phone */
const OsModal = ({ attrs, title, onClose, children, buttons, wide }) => {
  React.useEffect(() => { const k = (e) => { if (e.key === "Escape") onClose && onClose(); }; document.addEventListener("keydown", k); return () => document.removeEventListener("keydown", k); }, [onClose]);
  return ReactDOM.createPortal(
    <div className="os-modal-bg" {...attrs}>
      <div className={"os-modal" + (wide ? " wide" : "")} role="dialog" aria-modal="true">
        <div className="os-modal-h"><b>{title}</b><span style={{ flex: 1 }} /><button type="button" className="k2b-button small" onClick={onClose} aria-label="Close">×</button></div>
        <div className="os-modal-b">{children}</div>
        {buttons ? <div className="os-modal-f">{buttons}</div> : null}
      </div>
    </div>, document.body);
};

/* ── the logo: client checks first (size, real PNG / JPEG / SVG), preview 22 / 38 / 110, upload as { mime, dataBase64 } ── */
const osReadLogo = (file) => new Promise((resolve) => {
  if (!file) return resolve({ ok: false, error: "Pick a file." });
  if (file.size > 1048576) return resolve({ ok: false, error: "That logo is too large. The limit is 1 MB." });
  const fr = new FileReader();
  fr.onerror = () => resolve({ ok: false, error: "That file could not be read." });
  fr.onload = () => {
    const bytes = new Uint8Array(fr.result);
    const png = bytes.length > 8 && bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e && bytes[3] === 0x47;
    const jpg = bytes.length > 3 && bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff;
    let svg = false, dtd = false;
    if (!png && !jpg) { try { svg = /^\s*(<\?xml[^>]*>\s*)?(<!--[\s\S]*?-->\s*)*<svg[\s>]/i.test(new TextDecoder().decode(bytes.slice(0, 4096))); } catch (e) { svg = false; } }
    // RC35 fix round (SPEC-CHANGES stc 18:20 item 1): an SVG with a DOCTYPE / ENTITY line (before <svg> or anywhere in it) is refused with
    // the server's own reason - not the general "Pick a PNG, JPG or SVG picture." - and is never previewed or sent
    if (!png && !jpg) { try { const t = new TextDecoder().decode(bytes); dtd = /^\s*(<\?xml|<!--|<!doctype|<svg)/i.test(t) && /<svg[\s>]/i.test(t) && /<!(doctype|entity)/i.test(t); } catch (e) { dtd = false; } }
    if (dtd) return resolve({ ok: false, error: "That SVG logo was refused: It has a DOCTYPE or ENTITY line (a document definition, which a logo must not have). Save it again without that line (or as a PNG) and upload that." });
    const mime = png ? "image/png" : jpg ? "image/jpeg" : svg ? "image/svg+xml" : null;
    if (!mime) return resolve({ ok: false, error: "Pick a PNG, JPG or SVG picture." });
    let bin = ""; for (let i = 0; i < bytes.length; i += 0x8000) bin += String.fromCharCode.apply(null, bytes.subarray(i, i + 0x8000));
    const b64 = btoa(bin);
    resolve({ ok: true, mime, dataBase64: b64, previewUrl: "data:" + mime + ";base64," + b64, size: bytes.length });
  };
  fr.readAsArrayBuffer(file);
});
const OsLogoPicker = ({ value, onPick, err }) => (
  <div data-store-logo="" style={{ display: "flex", flexDirection: "column", gap: 6 }}>
    <input type="file" accept="image/png,image/jpeg,image/svg+xml" data-store-logo-file="" onChange={async (e) => { const f = e.target.files && e.target.files[0]; e.target.value = ""; if (f) onPick(await osReadLogo(f)); }} />
    {value && value.previewUrl ? <div style={{ display: "flex", gap: 10, alignItems: "flex-end" }} data-store-logo-preview="">
      {[22, 38, 110].map((n) => <img key={n} src={value.previewUrl} alt="" style={{ width: n, height: "auto", border: "1px solid #E2E5EA" }} />)}
    </div> : null}
    {err ? <div style={{ color: "#A02234", fontSize: 12 }} data-store-logo-err="">⚠ {err}</div> : null}
  </div>
);

/* ── the store form (new or edit) ── */
const osBlankForm = (taxDefaults) => ({ dba: "", legalName: "", printName: "", code: "", tagline: "", street: "", city: "", state: "MO", zip: "", addr1: "", addr2: "", phone: "", fax: "",
  licenseNo: "", licenseLine: "", web: "", primary: "#1b5e20", accent: "#f9a825", chart: "", franchiseItems: false, roStart: "1001",
  servicePct: taxDefaults ? String(taxDefaults.servicePct) : "", partsPct: taxDefaults ? String(taxDefaults.partsPct) : "", taxOk: false,
  showLogo: true, showTagline: true, showGmCodes: true, footerLine: "", chkName: "", chkAddr1: "", chkAddr2: "", chkPhone: "", access: {} });
const osFormOf = (s) => { const b = s.branding || {}; const c = b.colors || {}; const d = b.docHeader || {}; const k = b.checkHeader || {};
  return Object.assign(osBlankForm(null), { dba: b.dba || "", legalName: b.legalName || "", printName: b.printName || "", code: b.code || "", tagline: b.tagline || "",
    street: b.street || "", city: b.city || "", state: b.state || "", zip: b.zip || "", addr1: b.addr1 || "", addr2: b.addr2 || "", phone: b.phone || "", fax: b.fax || "",
    licenseNo: b.licenseNo || "", licenseLine: b.licenseLine || "", web: b.web || "", primary: c.primary || "#0e1430", accent: c.accent || "#ffd24a",
    showLogo: d.showLogo !== false, showTagline: d.showTagline !== false, showGmCodes: d.showGmCodes !== false, footerLine: d.footerLine || "",
    chkName: k.name || "", chkAddr1: k.addr1 || "", chkAddr2: k.addr2 || "", chkPhone: k.phone || "", gm: b.gm || null, ein: b.ein || "", stateEmployerId: b.stateEmployerId || "" }); };
const osBrandingOf = (f, keepGm) => {
  const addr1 = f.addr1 || f.street;
  const addr2 = f.addr2 || (f.city ? f.city + ", " + f.state + "  " + f.zip : "");
  const b = { dba: f.dba.trim(), legalName: f.legalName.trim(), printName: (f.printName || f.dba.toUpperCase()).trim(), code: (f.code || osInitials(f.dba)).trim().toUpperCase(),
    tagline: f.tagline.trim(), addr1, addr2, street: f.street.trim(), city: f.city.trim(), state: f.state.trim().toUpperCase(), zip: f.zip.trim(), phone: f.phone.trim(), fax: f.fax.trim(),
    web: f.web.trim(), licenseNo: f.licenseNo.trim(), licenseLine: (f.licenseLine || ((OS_STATE_NAME[f.state] || f.state) + " Dealer Lic. #" + f.licenseNo)).trim(),
    colors: { primary: String(f.primary).toLowerCase(), accent: String(f.accent).toLowerCase() },
    docHeader: { showLogo: !!f.showLogo, showTagline: !!f.showTagline, showGmCodes: !!f.showGmCodes, footerLine: f.footerLine.trim() },
    checkHeader: (f.chkName || f.chkAddr1 || f.chkAddr2 || f.chkPhone) ? { name: f.chkName.trim(), addr1: f.chkAddr1.trim(), addr2: f.chkAddr2.trim(), phone: f.chkPhone.trim() } : null };
  if (keepGm && f.gm) b.gm = f.gm;
  if (keepGm) { b.ein = f.ein || ""; b.stateEmployerId = f.stateEmployerId || ""; }
  return b;
};
const OsField = ({ label, k, f, set, ph, w, type, maxLength }) => (
  <label style={{ display: "block", minWidth: 0, flex: w ? "0 0 " + w : "1 1 200px" }}>
    <span style={OS_LBL}>{label}</span>
    <input type={type || "text"} value={f[k]} placeholder={ph || ""} maxLength={maxLength || 100} data-store-field={k} onChange={(e) => set(k, e.target.value)} style={OS_INPUT} />
  </label>
);

const OsStoreForm = ({ mode, store, taxDefaults, primaryDba, users, ownerId, onClose, onSaved }) => {
  const isNew = mode === "new";
  const [f, setF] = React.useState(() => isNew ? osBlankForm(taxDefaults) : osFormOf(store));
  const [logo, setLogo] = React.useState(null);
  const [logoErr, setLogoErr] = React.useState("");
  const [err, setErr] = React.useState(""); const [fields, setFields] = React.useState({});
  const [busy, setBusy] = React.useState(false);
  const [dirty, setDirty] = React.useState(false);
  const keyRef = React.useRef(osKey());
  const revRef = React.useRef(isNew ? 0 : store.brandingRev);   // the revision this form last saw (a refused logo after a saved branding keeps working)
  const set = (k, v) => { setDirty(true); setF((o) => Object.assign({}, o, { [k]: v })); };
  if (window.useK2BUnsaved) window.useK2BUnsaved("owner-stores-form", { label: "Owner Panel — " + (isNew ? "the new store" : "the store's branding"), isDirty: () => dirty });
  const draft = osBrandingOf(f, !isNew);
  if (logo && logo.previewUrl) draft.logo = { kind: "preview", previewUrl: logo.previewUrl };
  else if (!isNew && store.branding && store.branding.logo) draft.logo = store.branding.logo.kind === "asset" ? store.branding.logo : { kind: "preview", previewUrl: (store.logo && store.logo.large) ? (store.logo.large.indexOf("/api/") === 0 ? location.origin + store.logo.large : store.logo.large) : null };
  const preview = window.K2BPrint ? window.K2BPrint.header({ brand: draft, franchise: isNew ? f.franchiseItems : !!(store.options && store.options.franchiseItems) }) : "";
  const canCreate = !isNew || (f.chart && f.taxOk && f.dba.trim() && f.legalName.trim());
  const save = async () => {
    if (busy) return; setBusy(true); setErr(""); setFields({});
    let r;
    if (isNew) {
      const access = Object.keys(f.access).filter((u) => f.access[u]);
      r = await osApi("/stores", "POST", { branding: draft.logo ? Object.assign({}, draft, { logo: undefined }) : draft, kind: "used+collision", franchiseItems: !!f.franchiseItems, chart: f.chart,
        roStart: parseInt(f.roStart, 10) || 1001, tax: { servicePct: Number(f.servicePct), partsPct: Number(f.partsPct), confirmed: !!f.taxOk }, access }, { "Idempotency-Key": keyRef.current });
    } else {
      const b = Object.assign({}, draft); delete b.logo;
      r = await osApi("/stores/" + encodeURIComponent(store.id) + "/branding", "POST", { branding: b, rev: revRef.current });
      if (r.ok && r.data && r.data.brandingRev != null) revRef.current = r.data.brandingRev;
    }
    if (!r.ok) {
      setBusy(false);
      if (r.code === "rev_conflict") setErr("Someone changed this store just now - reload the form.");
      else setErr(r.error);
      if (r.data && r.data.fields) setFields(r.data.fields);
      return;
    }
    const id = isNew ? r.data.store && r.data.store.id : store.id;
    if (logo && logo.dataBase64 && id) {
      const lr = await osApi("/stores/" + encodeURIComponent(id) + "/logo", "POST", { mime: logo.mime, dataBase64: logo.dataBase64 });
      if (!lr.ok) {
        setBusy(false); setLogoErr(lr.error); setLogo(null);
        if (isNew) { setDirty(false); onSaved && onSaved(id, { logoFailed: true, created: true, store: r.data.store }); }   // the store exists: say the logo was not taken
        return;                                                                                                          // edit: the form stays open with the server's words
      }
    }
    setBusy(false); setDirty(false);
    onSaved && onSaved(id, { created: isNew, store: r.data.store });
  };
  const box = (title, children, attrs) => <div className="os-box" {...(attrs || {})}><div className="os-box-h">{title}</div>{children}</div>;
  const fieldErr = Object.keys(fields).length ? <div style={{ color: "#A02234", fontSize: 12 }}>⚠ Check: {Object.keys(fields).map((k) => k + " (" + fields[k] + ")").join(", ")}</div> : null;
  return (
    <OsModal attrs={{ "data-store-form": isNew ? "new" : String(store.id) }} wide title={isNew ? "Add a store" : "Branding — " + (store.branding && store.branding.dba)} onClose={onClose}
      buttons={<>
        {err ? <span style={{ color: "#A02234", fontSize: 12.5, flex: "1 1 100%" }} data-store-form-err="">⚠ {err}</span> : null}
        <button type="button" className="k2b-button" onClick={onClose}>Cancel</button>
        <button type="button" className="k2b-button primary" data-store-save="" disabled={busy || !canCreate} onClick={save} style={{ fontWeight: 700 }}>{busy ? "Saving…" : isNew ? "Create the store" : "Save branding"}</button>
      </>}>
      {!isNew ? <div className="os-note">Changes every printout from now on. Papers already printed do not change.</div> : null}
      {box("Names", <div className="os-row">
        <OsField label="Store name (everyday)" k="dba" f={f} set={set} maxLength={60} ph="e.g. the name on the sign" />
        <OsField label="Legal name (on documents)" k="legalName" f={f} set={set} />
        <OsField label="Print name (big, on printouts)" k="printName" f={f} set={set} maxLength={60} ph={f.dba.toUpperCase()} />
        <OsField label="Short code" k="code" f={f} set={set} w="110px" maxLength={6} ph={osInitials(f.dba)} />
        <OsField label="Tagline" k="tagline" f={f} set={set} maxLength={80} />
      </div>)}
      {box("Address, phone, license", <div className="os-row">
        <OsField label="Street" k="street" f={f} set={set} />
        <OsField label="City" k="city" f={f} set={set} maxLength={60} />
        <label style={{ display: "block", flex: "0 0 90px" }}><span style={OS_LBL}>State</span>
          <select value={f.state} data-store-field="state" onChange={(e) => set("state", e.target.value)} style={OS_INPUT}>{OS_STATES.map((s) => <option key={s} value={s}>{s}</option>)}</select></label>
        <OsField label="ZIP" k="zip" f={f} set={set} w="110px" maxLength={10} />
        <OsField label="Address line 1 (as printed)" k="addr1" f={f} set={set} ph={f.street} />
        <OsField label="Address line 2 (as printed)" k="addr2" f={f} set={set} ph={f.city ? f.city + ", " + f.state + "  " + f.zip : ""} />
        <OsField label="Phone" k="phone" f={f} set={set} maxLength={30} />
        <OsField label="Fax" k="fax" f={f} set={set} maxLength={30} />
        <OsField label="Dealer license number" k="licenseNo" f={f} set={set} maxLength={20} />
        <OsField label="License line (as printed)" k="licenseLine" f={f} set={set} ph={(OS_STATE_NAME[f.state] || f.state) + " Dealer Lic. #" + f.licenseNo} />
      </div>)}
      {isNew ? box("Chart of accounts (pick one)", <div data-store-chart="" style={{ display: "flex", flexDirection: "column", gap: 6 }}>
        {[["copy", "Copy " + (primaryDba || "the first store") + "'s accounts (no balances)"], ["starter", "Starter used-car + collision chart"], ["import", "I will import a chart"]].map(([v, lbl]) =>
          <label key={v} className="os-check"><input type="radio" name="os-chart" value={v} data-store-chart-choice={v} checked={f.chart === v} onChange={() => set("chart", v)} /> {lbl}</label>)}
        {f.chart === "import" ? <div className="os-note">The store has no accounts until a chart import is approved (Imports). Nothing can be posted before that.</div> : null}
      </div>) : null}
      {isNew ? box("Store setup", <div className="os-row">
        <label className="os-check" style={{ flex: "1 1 260px" }}><input type="checkbox" checked={!!f.franchiseItems} data-store-field="franchiseItems" onChange={(e) => set("franchiseItems", e.target.checked)} /> Show GM franchise items (factory incentives, holdback, GM warranty, GM forms)</label>
        <OsField label="First RO number" k="roStart" f={f} set={set} w="140px" maxLength={9} />
        <OsField label="Service tax %" k="servicePct" f={f} set={set} w="130px" maxLength={8} />
        <OsField label="Parts tax %" k="partsPct" f={f} set={set} w="130px" maxLength={8} />
        <label className="os-check" style={{ flex: "1 1 100%" }}><input type="checkbox" checked={!!f.taxOk} data-store-tax-ok="" onChange={(e) => set("taxOk", e.target.checked)} /> These tax rates are right for this store</label>
      </div>) : null}
      {box("Colors and the print header", <div>
        <div className="os-row" style={{ alignItems: "flex-end" }}>
          <label style={{ flex: "0 0 150px" }}><span style={OS_LBL}>Main color</span><input type="color" value={f.primary} data-store-color="primary" onChange={(e) => set("primary", e.target.value)} style={{ width: 120, height: 36 }} /></label>
          <label style={{ flex: "0 0 150px" }}><span style={OS_LBL}>Accent color</span><input type="color" value={f.accent} data-store-color="accent" onChange={(e) => set("accent", e.target.value)} style={{ width: 120, height: 36 }} /></label>
          {!isNew ? <>
            <label className="os-check"><input type="checkbox" checked={!!f.showLogo} onChange={(e) => set("showLogo", e.target.checked)} /> Logo on printouts</label>
            <label className="os-check"><input type="checkbox" checked={!!f.showTagline} onChange={(e) => set("showTagline", e.target.checked)} /> Tagline</label>
            <label className="os-check"><input type="checkbox" checked={!!f.showGmCodes} onChange={(e) => set("showGmCodes", e.target.checked)} /> GM codes</label>
          </> : null}
        </div>
        <div className="os-band-preview" data-store-band-preview="" style={{ background: f.primary }} />
        <div className="os-print-preview" data-store-print-preview="" dangerouslySetInnerHTML={{ __html: "<style>.os-print-preview .dealer-head{display:flex;gap:14px;align-items:center;border-bottom:2px solid " + window.K2BPrint.esc(f.primary) + ";padding-bottom:8px}.os-print-preview .dealer-logo{width:70px;height:auto}.os-print-preview .name{font-family:Georgia,serif;font-size:18px;font-weight:700;color:" + window.K2BPrint.esc(f.primary) + "}.os-print-preview .tag{font-size:10px;color:#555;letter-spacing:2px;text-transform:uppercase}.os-print-preview .info{margin-left:auto;text-align:right;font-size:10.5px;line-height:1.4;color:#222}</style>" + preview }} />
      </div>)}
      {box("Logo (optional)", <OsLogoPicker value={logo} err={logoErr} onPick={(r) => { if (!r.ok) { setLogo(null); setLogoErr(r.error); } else { setLogoErr(""); setLogo(r); setDirty(true); } }} />)}
      {!isNew ? box("Check header and footer line", <div className="os-row">
        <OsField label="Check company name (blank = print name)" k="chkName" f={f} set={set} />
        <OsField label="Check line 1" k="chkAddr1" f={f} set={set} />
        <OsField label="Check line 2" k="chkAddr2" f={f} set={set} />
        <OsField label="Check phone" k="chkPhone" f={f} set={set} maxLength={30} />
        <OsField label="Footer line on documents" k="footerLine" f={f} set={set} maxLength={120} />
      </div>) : null}
      {isNew ? box("Who may use it", <div className="os-access-list">
        {(users || []).map((u) => { const own = String(u.id) === String(ownerId); return (
          <label key={u.id} className="os-check os-user"><input type="checkbox" data-store-new-access={u.id} disabled={own} checked={own || !!f.access[u.id]} onChange={(e) => set("access", Object.assign({}, f.access, { [u.id]: e.target.checked }))} />
            <span><b>{u.name || u.id}</b> <span style={{ color: "#777" }}>{u.id} · {u.role || "no role"}{own ? " · the owner: every store" : ""}</span></span></label>); })}
      </div>) : null}
      {fieldErr}
    </OsModal>
  );
};

/* ── who can use a store ── */
const OsAccess = ({ store, onClose, onChanged }) => {
  const [rows, setRows] = React.useState(null); const [err, setErr] = React.useState(""); const [busy, setBusy] = React.useState("");
  const load = async () => { const r = await osApi("/stores/" + encodeURIComponent(store.id) + "/access"); if (r.ok) setRows(r.data.users || []); else setErr(r.error); };
  React.useEffect(() => { load(); }, []);
  const toggle = async (u, on) => {
    setBusy(u.id); setErr("");
    const r = await osApi("/stores/" + encodeURIComponent(store.id) + "/access", "POST", { set: { [u.id]: on } });
    setBusy("");
    if (!r.ok) { setErr(r.error); return; }
    setRows(r.data.users || []); onChanged && onChanged();
  };
  const makeHome = async (u) => {
    setBusy(u.id); setErr("");
    const r0 = await osApi("/users");
    const cur = r0.ok ? ((r0.data.users || []).find((x) => String(x.id) === String(u.id)) || {}) : {};
    const stores = Array.from(new Set((cur.stores || []).concat([store.id])));
    const r = await osApi("/users/" + encodeURIComponent(u.id) + "/stores", "POST", { stores, home: store.id });
    setBusy("");
    if (!r.ok) { setErr(r.error); return; }
    await load(); onChanged && onChanged();
  };
  return (
    <OsModal attrs={{ "data-store-access": String(store.id) }} title={"Who can use " + ((store.branding && store.branding.dba) || "this store")} onClose={onClose}
             buttons={<button type="button" className="k2b-button primary" onClick={onClose}>Done</button>}>
      <div className="os-note">A login's home store is always allowed (change the home store first). The owner may use every store. A change works at once: a login that loses this store is stopped on its next click.</div>
      {err ? <div style={{ color: "#A02234", fontSize: 12.5 }} data-store-access-err="">⚠ {err}</div> : null}
      {!rows ? <div>Loading…</div> : <div className="os-access-list">{rows.map((u) => (
        <div key={u.id} className="os-user-card" data-store-access-row={u.id} style={{ opacity: u.active ? 1 : 0.6 }}>
          <label className="os-check"><input type="checkbox" data-store-access-user={u.id} checked={!!u.allowed} disabled={!!u.fixed || busy === u.id} onChange={(e) => toggle(u, e.target.checked)} />
            <span><b>{u.name || u.id}</b> <span style={{ color: "#777" }}>{u.id} · {u.role || "no role"}</span></span></label>
          <span className="os-tags">{u.owner ? <span className="os-tag">owner — every store</span> : u.home === store.id ? <span className="os-tag">home store</span> :
            <button type="button" className="k2b-button small" data-store-make-home={u.id} disabled={busy === u.id} onClick={() => makeHome(u)}>Make this the home store</button>}</span>
        </div>))}</div>}
    </OsModal>
  );
};

/* ── a login's stores (the Users table's "Stores…" button) ── */
const OsUserStores = ({ user, stores, onClose, onChanged }) => {
  const [sel, setSel] = React.useState(() => { const m = {}; (user.stores || []).forEach((s) => { m[s] = true; }); return m; });
  const [home, setHome] = React.useState(user.home || (stores[0] && stores[0].id));
  const [err, setErr] = React.useState(""); const [busy, setBusy] = React.useState(false);
  const save = async () => {
    setBusy(true); setErr("");
    const list = stores.filter((s) => sel[s.id] || s.id === home).map((s) => s.id);
    const r = await osApi("/users/" + encodeURIComponent(user.id) + "/stores", "POST", { stores: list, home });
    setBusy(false);
    if (!r.ok) { setErr(r.error); return; }
    onChanged && onChanged(); onClose();
  };
  return (
    <OsModal attrs={{ "data-store-user": String(user.id) }} title={"Stores — " + (user.name || user.id)} onClose={onClose}
             buttons={<><button type="button" className="k2b-button" onClick={onClose}>Cancel</button><button type="button" className="k2b-button primary" data-store-user-save="" disabled={busy} onClick={save}>Save</button></>}>
      <div className="os-note">Tick the stores this login may use; pick its home store (where it lands when no other store is chosen).</div>
      {err ? <div style={{ color: "#A02234", fontSize: 12.5 }}>⚠ {err}</div> : null}
      <div className="os-access-list">{stores.filter((s) => s.status === "active").map((s) => (
        <div key={s.id} className="os-user-card">
          <label className="os-check"><input type="checkbox" data-store-user-store={s.id} checked={!!sel[s.id] || s.id === home} disabled={s.id === home} onChange={(e) => setSel(Object.assign({}, sel, { [s.id]: e.target.checked }))} />
            <span><span className="k2b-store-dot" style={{ background: (s.branding && s.branding.colors && s.branding.colors.primary) || "#0E1430" }} /> {(s.branding && s.branding.dba) || s.id} <span style={{ color: "#777" }}>#{s.id}</span></span></label>
          <label className="os-check"><input type="radio" name="os-home" data-store-user-home={s.id} checked={home === s.id} onChange={() => setHome(s.id)} /> home</label>
        </div>))}</div>
    </OsModal>
  );
};

/* ── a store's options ── */
const OsOptions = ({ store, primary, primaryDba, current, onClose, onChanged }) => {
  const o = store.options || {};
  const [err, setErr] = React.useState(""); const [roStart, setRoStart] = React.useState(String((o.roNumber && o.roNumber.floor) || ""));
  const post = async (path, body) => { setErr(""); const r = await osApi("/stores/" + encodeURIComponent(store.id) + path, "POST", body); if (!r.ok) { setErr(r.error); return false; } onChanged && onChanged(); return true; };
  return (
    <OsModal attrs={{ "data-store-options": String(store.id) }} title={"Options — " + ((store.branding && store.branding.dba) || store.id)} onClose={onClose}
             buttons={<button type="button" className="k2b-button primary" onClick={onClose}>Done</button>}>
      {err ? <div style={{ color: "#A02234", fontSize: 12.5 }} data-store-options-err="">⚠ {err}</div> : null}
      <label className="os-check"><input type="checkbox" data-store-opt="franchiseItems" checked={!!o.franchiseItems} onChange={(e) => post("/options", { franchiseItems: e.target.checked })} /> Show GM franchise items (factory incentives, holdback, GM warranty, GM forms and codes)</label>
      <div className="os-row" style={{ alignItems: "flex-end" }}>
        <label style={{ flex: "0 0 200px" }}><span style={OS_LBL}>Kind</span>
          <select value={o.kind || ""} data-store-opt="kind" onChange={(e) => post("/options", { kind: e.target.value })} style={OS_INPUT}>
            {[["franchise", "Franchise dealer"], ["used", "Used cars"], ["collision", "Collision / body shop"], ["used+collision", "Used cars + collision"]].map(([v, l]) => <option key={v} value={v}>{l}</option>)}
          </select></label>
        <label style={{ flex: "0 0 160px" }}><span style={OS_LBL}>First RO number</span><input value={roStart} data-store-opt="roStart" onChange={(e) => setRoStart(e.target.value.replace(/[^0-9]/g, "").slice(0, 9))} style={OS_INPUT} /></label>
        <button type="button" className="k2b-button" onClick={() => post("/options", { roStart: parseInt(roStart, 10) })}>Save RO number</button>
      </div>
      {window.K2BFormsSettings ? <window.K2BFormsSettings store={store} post={post} /> : null}{/* RC37 (forms37): Form wording (the dealership forms) */}
      {!store.primary ? <label className="os-check"><input type="checkbox" data-store-opt="keysFrom" checked={o.keysFrom === primary} onChange={(e) => post("/options", { keysFrom: e.target.checked ? primary : null })} /> Use {primaryDba || "the first store"}'s integration keys (texting, AI, MarketCheck, Sunbit, maintenance data)</label> : null}
      <div className="os-row" style={{ alignItems: "center" }}>
        <span style={{ fontSize: 13 }}>Status: <b>{store.status === "off" ? "turned off" : "on"}</b></span>
        {store.primary ? <span className="os-note">The first store can never be turned off.</span> : store.id === current ? <span className="os-note">You are in this store - switch to another store to turn it off.</span> :
          <button type="button" className="k2b-button" data-store-status={store.status === "off" ? "on" : "off"} onClick={() => { if (store.status === "off" || window.confirm("Turn " + ((store.branding && store.branding.dba) || "this store") + " off? Nobody can use it until it is turned on again. Nothing is deleted.")) post("/status", { status: store.status === "off" ? "active" : "off" }); }}>{store.status === "off" ? "Turn on" : "Turn off"}</button>}
      </div>
    </OsModal>
  );
};

/* ── the Stores card ── */
const OwnStores = ({ fresh, ownerId, onUsersChanged }) => {
  const [data, setData] = React.useState(null); const [users, setUsers] = React.useState([]);
  const [err, setErr] = React.useState(""); const [open, setOpen] = React.useState(null); const [done, setDone] = React.useState(null);
  const load = async () => {
    const r = await osApi("/stores"); if (r.ok) setData(r.data); else setErr(r.error);
    const u = await osApi("/users"); if (u.ok) setUsers(u.data.users || []);
    try { const a = await apiFetch("/stores"); window.K2BStore && window.K2BStore._answer(a); } catch (e) { /* the list stays */ }
  };
  React.useEffect(() => { load(); }, []);
  const here = window.K2BStore ? window.K2BStore.pageId() : null;
  const stores = (data && data.stores) || [];
  const primary = data && data.primary;
  const primaryDba = ((stores.find((s) => s.id === primary) || {}).branding || {}).dba || "";
  const logoOf = (s) => { const l = s.logo; const src = l && l.small ? (l.small.indexOf("/api/") === 0 ? location.origin + l.small : l.small) : null;
    return src ? <img src={src} alt="" style={{ width: 30, height: "auto" }} /> : <span className="os-mono" style={{ background: (s.branding && s.branding.colors && s.branding.colors.primary) || "#0E1430" }}>{osInitials(s.branding && s.branding.dba)}</span>; };
  const changed = async () => { await load(); onUsersChanged && onUsersChanged(); };
  return (
    <OwnSection tag="stores" title="Stores" sub={fresh ? "Each store is completely separate: its own books, cars, deals, repair orders, parts, customers, settings and printouts." : "Confirm it is you (above) to add a store or change one."}
                right={fresh ? <button type="button" className="k2b-button small" data-store-add="" style={{ fontWeight: 700 }} onClick={() => setOpen({ kind: "new" })}>+ Add a store</button> : null}>
      {err ? <div style={{ color: "#A02234", fontSize: 12 }}>⚠ {err}</div> : null}
      {!data ? <div>Loading…</div> : <div className="os-store-list">{stores.map((s) => (
        <div key={s.id} className="os-store-row" data-store-row={s.id} style={{ opacity: s.status === "off" ? 0.6 : 1 }}>
          <span className="k2b-store-dot" style={{ background: (s.branding && s.branding.colors && s.branding.colors.primary) || "#0E1430" }} />
          {logoOf(s)}
          <span className="os-store-nm"><b>{(s.branding && s.branding.dba) || s.name}</b> <span style={{ color: "#777" }}>#{s.id}</span>
            {s.id === here ? <span className="os-tag">You are here</span> : null}{s.primary ? <span className="os-tag">Primary</span> : null}{s.status === "off" ? <span className="os-tag off">turned off</span> : null}
            <span style={{ color: "#666", fontSize: 11.5, marginLeft: 6 }}>{s.logins} login{s.logins === 1 ? "" : "s"} may use it</span></span>
          {fresh ? <span className="os-store-acts">
            <button type="button" className="k2b-button small" data-store-edit={s.id} onClick={() => setOpen({ kind: "edit", store: s })}>Branding…</button>
            <button type="button" className="k2b-button small" data-store-access-open={s.id} onClick={() => setOpen({ kind: "access", store: s })}>Who can use it…</button>
            <button type="button" className="k2b-button small" data-store-options-open={s.id} onClick={() => setOpen({ kind: "options", store: s })}>Options…</button>
            {s.logo && s.logo.kind === "upload" ? <button type="button" className="k2b-button small" data-store-logo-remove={s.id} onClick={async () => { const r = await osApi("/stores/" + encodeURIComponent(s.id) + "/logo/remove", "POST", {}); if (!r.ok) setErr(r.error); else load(); }}>Remove logo</button> : null}
          </span> : null}
        </div>))}</div>}
      {open && open.kind === "new" ? <OsStoreForm mode="new" taxDefaults={data && data.taxDefaults} primaryDba={primaryDba} users={users} ownerId={ownerId} onClose={() => setOpen(null)}
        onSaved={(id, x) => { setOpen(null); load(); setDone({ id, name: (x && x.store && x.store.branding && x.store.branding.dba) || ("store " + id), logoFailed: x && x.logoFailed }); }} /> : null}
      {open && open.kind === "edit" ? <OsStoreForm mode="edit" store={open.store} onClose={() => setOpen(null)} onSaved={() => { setOpen(null); load(); }} /> : null}
      {open && open.kind === "access" ? <OsAccess store={open.store} onClose={() => { setOpen(null); load(); }} onChanged={changed} /> : null}
      {open && open.kind === "options" ? <OsOptions store={(stores.find((x) => x.id === open.store.id)) || open.store} primary={primary} primaryDba={primaryDba} current={here} onClose={() => { setOpen(null); load(); }} onChanged={load} /> : null}
      {done ? <OsModal attrs={{ "data-store-created": String(done.id) }} title="The store is ready" onClose={() => setDone(null)}
        buttons={<><button type="button" className="k2b-button" data-store-switch-later="" onClick={() => setDone(null)}>Not now</button>
          <button type="button" className="k2b-button primary" data-store-switch-now="" onClick={() => { const id = done.id; setDone(null); window.K2BStore && window.K2BStore.switchTo(id); }}>Switch to {done.name} now</button></>}>
        <p>{done.name} was created{done.logoFailed ? " (the logo was not accepted - add it again from Branding…)" : ""}. Switch to {done.name} now?</p>
      </OsModal> : null}
    </OwnSection>
  );
};

/* the Users table's store column + "Stores…" button (OwnerPanel.jsx.txt shows them) */
const OwnUserStoreChips = ({ user }) => {
  const st = window.K2BStore; const list = (st && st.list()) || [];
  const nm = (id) => { const s = list.find((x) => x.id === id); return s ? s.dba : "#" + id; };
  const ids = user.stores || (user.home ? [user.home] : []);
  return <span data-store-chips={user.id}>{ids.map((id) => <span key={id} className="os-tag" title={id === user.home ? "home store" : ""}>{nm(id)}{id === user.home ? " ⌂" : ""}</span>)}</span>;
};

Object.assign(window, { OwnStores, OsUserStores, OwnUserStoreChips });