/* eslint-disable */
/* © 2026 K2B NETWORK SOLUTIONS LLC. All rights reserved.
   Proprietary and confidential. Unauthorized copying, distribution, or use of
   this file, via any medium, is strictly prohibited. Original work product. */
// K2B DMS — RC37 (lane tpl37): "Set up your dealership" — the FIRST-RUN setup of a brand-new DMS.
//
// window.K2BFirstRunGate wraps the sign-in screen (app.jsx). It asks the server once (GET /api/setup/status):
//   • the server says the setup is OPEN (its database has no store and no login yet: a new dealer's server) -> this screen;
//   • anything else (a dealership that is set up, an older server, no answer) -> the normal sign-in, exactly as before.
// The screen: the setup code (the installer has it), the dealership (name, legal name, address, phone, dealer license #, logo,
// two colors), the store type + the chart of accounts (GM dealer chart / starter used-car + collision / import later), the tax
// rates, the first RO number, and YOU (the first admin login = the owner: login, name, password, cell phone for sign-in codes;
// a text-message code when the server already has its text-message service). One button saves it all in ONE step on the
// server (POST /api/setup) — then "Sign in". Works on a laptop and on a phone (one column, nothing wider than the screen).
// Nothing typed here is kept in the browser.

(function () {
  const C = { navy: "#0e1430", gold: "#ffd24a", line: "#c8cfdb", bg: "#f4f6fa", ink: "#16202e", soft: "#5a6577", red: "#a02234", redBg: "#fbe9ec", green: "#1b5e20", greenBg: "#e8f3ea" };
  const api = async (method, p, body) => {
    const h = Object.assign({ "Content-Type": "application/json" }, (window.K2BStore && window.K2BStore.stamp) ? window.K2BStore.stamp({}) : {});
    delete h["X-K2B-Store"];
    try {
      const r = await fetch(location.origin + "/api/setup" + p, { method, headers: h, body: body === undefined ? undefined : JSON.stringify(body), cache: "no-store" });
      let j = null; try { j = await r.json(); } catch (e) { j = null; }
      return { status: r.status, body: j || {} };
    } catch (e) { return { status: 0, body: { ok: false, error: "The server did not answer. Check the connection and try again." } }; }
  };
  const fileB64 = (file) => new Promise((res, rej) => { const fr = new FileReader(); fr.onload = () => res(String(fr.result || "")); fr.onerror = () => rej(new Error("read")); fr.readAsDataURL(file); });

  const Field = ({ label, hint, err, children, id }) => (
    <label htmlFor={id} style={{ display: "block", marginBottom: 12 }}>
      <div style={{ fontSize: 12, fontWeight: 700, color: C.ink, marginBottom: 4 }}>{label}</div>
      {children}
      {hint && !err && <div style={{ fontSize: 11, color: C.soft, marginTop: 3, lineHeight: 1.4 }}>{hint}</div>}
      {err && <div data-k2b-err={id} style={{ fontSize: 11.5, color: C.red, marginTop: 3, lineHeight: 1.4 }}>{err}</div>}
    </label>
  );
  const inp = { width: "100%", boxSizing: "border-box", padding: "10px 11px", border: "1px solid " + C.line, borderRadius: 4, fontSize: 15, fontFamily: "var(--font-ui, system-ui)", background: "#fff", color: C.ink, minHeight: 42 };
  const Sect = ({ n, title, children }) => (
    <div style={{ background: "#fff", border: "1px solid " + C.line, borderRadius: 6, padding: "14px 16px 6px", marginBottom: 14 }}>
      <div style={{ fontSize: 14, fontWeight: 800, color: C.navy, marginBottom: 10 }}><span style={{ display: "inline-block", minWidth: 22, height: 22, lineHeight: "22px", textAlign: "center", borderRadius: 11, background: C.navy, color: C.gold, fontSize: 12, marginRight: 8 }}>{n}</span>{title}</div>
      {children}
    </div>
  );
  const row2 = { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", columnGap: 12 };

  const KIND_LABEL = { "franchise": "New-car franchise (GM dealer)", "used": "Used-car lot", "collision": "Collision / body shop", "used+collision": "Used-car lot + collision" };
  const CHART_FOR = { "franchise": "gm", "used": "starter", "collision": "starter", "used+collision": "starter" };

  function FirstRunSetup({ status, onDone }) {
    const [f, setF] = React.useState({
      setupCode: "", dba: "", legalName: "", addr1: "", city: "", state: "", zip: "", phone: "", licenseNo: "", web: "",
      primary: "#0e1430", accent: "#ffd24a", kind: "used+collision", chart: "starter", chartTouched: false,
      servicePct: "", partsPct: "", taxOk: false, roStart: "1001",
      adminId: "", adminName: "", pw: "", pw2: "", cell: "", phoneCode: "",
    });
    const [logo, setLogo] = React.useState(null);    // { mime, dataBase64, name, preview }
    const [errs, setErrs] = React.useState({});
    const [msg, setMsg] = React.useState("");
    const [busy, setBusy] = React.useState(false);
    const [sms, setSms] = React.useState({ sent: false, note: "" });
    const set = (k) => (e) => { const v = e && e.target ? (e.target.type === "checkbox" ? e.target.checked : e.target.value) : e; setF((o) => Object.assign({}, o, { [k]: v })); };
    const setKind = (e) => { const k = e.target.value; setF((o) => Object.assign({}, o, { kind: k, chart: o.chartTouched ? o.chart : CHART_FOR[k] })); };
    const setChart = (c) => setF((o) => Object.assign({}, o, { chart: c, chartTouched: true }));
    const pickLogo = async (e) => {
      const file = e.target.files && e.target.files[0];
      if (!file) { setLogo(null); return; }
      if (file.size > 1048576) { setErrs((o) => Object.assign({}, o, { logo: "That logo is larger than 1 MB. Pick a smaller picture (PNG, JPG or SVG)." })); setLogo(null); return; }
      try { const d = await fileB64(file); setLogo({ mime: file.type || "image/png", dataBase64: d, name: file.name, preview: d }); setErrs((o) => Object.assign({}, o, { logo: "" })); }
      catch (x) { setErrs((o) => Object.assign({}, o, { logo: "That file could not be read." })); }
    };
    const fieldMap = { "store.dba": "dba", "store.legalName": "legalName", "store.addr1": "addr1", "store.street": "addr1", "store.city": "city", "store.state": "state", "store.zip": "zip", "store.phone": "phone",
      "store.licenseNo": "licenseNo", "store.licenseLine": "licenseNo", "store.colors.primary": "primary", "store.colors.accent": "accent", "store.roStart": "roStart", "store.tax": "servicePct", "store.web": "web",
      "chart": "chart", "admin.id": "adminId", "admin.name": "adminName", "admin.password": "pw", "admin.phone": "cell", "logo": "logo", "store.kind": "kind" };
    const sendCode = async () => {
      setSms({ sent: false, note: "" });
      const r = await api("POST", "/phone-code", { setupCode: f.setupCode, phone: f.cell });
      if (r.status === 200) setSms({ sent: true, note: "A code was texted to " + (r.body.sentTo || "your phone") + ". Type it below." });
      else setSms({ sent: false, note: r.body.error || "The code could not be sent." });
    };
    const submit = async () => {
      if (busy) return;
      const e = {};
      if (!f.setupCode.trim()) e.setupCode = "Type the setup code from the person who installed the DMS.";
      if (f.pw !== f.pw2) e.pw2 = "The two passwords are not the same.";
      if (!f.taxOk) e.taxOk = "Tick the box once the two tax rates are right.";
      setErrs(e); setMsg("");
      if (Object.keys(e).length) { setMsg("Some details need a look (marked in red)."); return; }
      setBusy(true);
      const body = {
        setupCode: f.setupCode, chart: f.chart,
        store: { kind: f.kind, roStart: f.roStart, tax: { servicePct: f.servicePct, partsPct: f.partsPct, confirmed: !!f.taxOk },
          branding: { dba: f.dba, legalName: f.legalName, addr1: f.addr1, street: f.addr1, city: f.city, state: f.state, zip: f.zip, phone: f.phone, licenseNo: f.licenseNo, web: f.web, colors: { primary: f.primary, accent: f.accent } } },
        logo: logo ? { mime: logo.mime, dataBase64: logo.dataBase64 } : null,
        admin: { id: f.adminId, name: f.adminName, password: f.pw, phone: f.cell, phoneCode: f.phoneCode },
      };
      const r = await api("POST", "", body);
      setBusy(false);
      if (r.status === 200 && r.body.ok) { onDone(r.body); return; }
      if (r.status === 426) { setMsg(r.body.error || "This page is older than the server. Reload the page (Ctrl+F5)."); return; }
      const fe = {};
      for (const [k, v] of Object.entries(r.body.fields || {})) fe[fieldMap[k] || k] = v;
      if (r.body.code === "bad_setup_code" || r.body.code === "no_setup_code") fe.setupCode = r.body.error;
      if (r.body.code === "bad_phone_code") fe.phoneCode = r.body.error;
      if (r.body.code === "tax_not_confirmed") fe.taxOk = r.body.error;
      setErrs(fe);
      setMsg(r.status === 410 ? (r.body.error || "This DMS is already set up.") : (r.body.error || "The setup was not saved."));
      if (r.status === 410) setTimeout(() => onDone(null), 1500);
    };
    const E = (k) => errs[k] || "";
    const charts = (status && status.charts) || [];
    const kinds = (status && status.kinds) || Object.keys(KIND_LABEL);
    return (
      <div className="k2b-firstrun" data-k2b-firstrun="form" style={{ position: "absolute", inset: 0, overflowY: "auto", overflowX: "hidden", background: C.bg, fontFamily: "var(--font-ui, system-ui)" }}>
        <div style={{ background: C.navy, color: "#fff", padding: "14px 16px", borderBottom: "3px solid " + C.gold }}>
          <div style={{ maxWidth: 680, margin: "0 auto", display: "flex", alignItems: "center", gap: 12 }}>
            <img src="../../assets/k2b-logo-mark.svg" alt="K2B" style={{ width: 38, height: 38 }} onError={(e) => { e.target.style.display = "none"; }} />
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 19, fontWeight: 800 }}>Set up your dealership</div>
              <div style={{ fontSize: 12, color: "#c9d2e3" }}>K2B DMS · first-run setup (one time only)</div>
            </div>
          </div>
        </div>
        <div style={{ maxWidth: 680, margin: "0 auto", padding: "14px 16px 40px", boxSizing: "border-box" }}>
          <div style={{ fontSize: 13, color: C.soft, lineHeight: 1.5, marginBottom: 14 }}>
            This DMS is brand new: it has no store and no login yet. Fill this in once — it makes your store, its chart of accounts and your own login (you become the owner). Everything can be changed later in Owner panel &gt; Stores.
          </div>
          <Sect n="1" title="Setup code">
            <Field id="setupCode" label="Setup code" hint="The person who installed the DMS has it (it was printed on the server)." err={E("setupCode")}>
              <input id="setupCode" style={inp} value={f.setupCode} onChange={set("setupCode")} autoComplete="off" spellCheck={false} placeholder="xxxx-xxxx-xxxx" />
            </Field>
          </Sect>
          <Sect n="2" title="Your dealership">
            <Field id="dba" label="Store name (as customers know it)" err={E("dba")}><input id="dba" style={inp} value={f.dba} onChange={set("dba")} autoComplete="off" /></Field>
            <Field id="legalName" label="Legal name (on contracts and checks)" err={E("legalName")}><input id="legalName" style={inp} value={f.legalName} onChange={set("legalName")} autoComplete="off" /></Field>
            <Field id="addr1" label="Street address" err={E("addr1")}><input id="addr1" style={inp} value={f.addr1} onChange={set("addr1")} autoComplete="off" /></Field>
            <div style={row2}>
              <Field id="city" label="City" err={E("city")}><input id="city" style={inp} value={f.city} onChange={set("city")} autoComplete="off" /></Field>
              <Field id="state" label="State" hint="Two letters" err={E("state")}><input id="state" style={inp} value={f.state} maxLength={2} onChange={(e) => set("state")(e.target.value.toUpperCase())} autoComplete="off" /></Field>
              <Field id="zip" label="ZIP" err={E("zip")}><input id="zip" style={inp} value={f.zip} onChange={set("zip")} inputMode="numeric" autoComplete="off" /></Field>
            </div>
            <div style={row2}>
              <Field id="phone" label="Store phone" err={E("phone")}><input id="phone" style={inp} value={f.phone} onChange={set("phone")} inputMode="tel" autoComplete="off" /></Field>
              <Field id="licenseNo" label="Dealer license #" err={E("licenseNo")}><input id="licenseNo" style={inp} value={f.licenseNo} onChange={set("licenseNo")} autoComplete="off" /></Field>
            </div>
            <Field id="web" label="Website (optional)" err={E("web")}><input id="web" style={inp} value={f.web} onChange={set("web")} autoComplete="off" /></Field>
            <Field id="logo" label="Logo (optional — PNG, JPG or SVG, up to 1 MB)" hint="Without a logo the screens and printouts show your store's initials." err={E("logo")}>
              <input id="logo" type="file" accept="image/png,image/jpeg,image/svg+xml" onChange={pickLogo} style={{ fontSize: 13, maxWidth: "100%" }} />
              {logo && <div style={{ marginTop: 6 }}><img src={logo.preview} alt="your logo" style={{ maxWidth: 160, maxHeight: 60, border: "1px solid " + C.line, background: "#fff" }} /></div>}
            </Field>
            <div style={row2}>
              <Field id="primary" label="Main color" err={E("primary")}><input id="primary" type="color" value={f.primary} onChange={set("primary")} style={Object.assign({}, inp, { padding: 2 })} /></Field>
              <Field id="accent" label="Accent color" err={E("accent")}><input id="accent" type="color" value={f.accent} onChange={set("accent")} style={Object.assign({}, inp, { padding: 2 })} /></Field>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, margin: "0 0 12px", padding: "8px 10px", background: f.primary, color: "#fff", borderBottom: "3px solid " + f.accent, borderRadius: 4, fontWeight: 700, fontSize: 13, overflow: "hidden" }}>
              {logo ? <img src={logo.preview} alt="" style={{ height: 22 }} /> : null}<span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{f.dba || "Your store name"}</span>
            </div>
          </Sect>
          <Sect n="3" title="Store type and chart of accounts">
            <Field id="kind" label="What kind of store is this?" err={E("kind")}>
              <select id="kind" style={inp} value={f.kind} onChange={setKind}>{kinds.map((k) => <option key={k} value={k}>{KIND_LABEL[k] || k}</option>)}</select>
            </Field>
            <div style={{ fontSize: 12, fontWeight: 700, color: C.ink, marginBottom: 6 }}>Chart of accounts</div>
            {charts.map((c) => (
              <label key={c.id} data-k2b-chart={c.id} style={{ display: "flex", gap: 9, alignItems: "flex-start", padding: "9px 10px", marginBottom: 6, border: "1px solid " + (f.chart === c.id ? C.navy : C.line), background: f.chart === c.id ? "#eef1f8" : "#fff", borderRadius: 4, cursor: "pointer" }}>
                <input type="radio" name="k2b-chart" checked={f.chart === c.id} onChange={() => setChart(c.id)} style={{ marginTop: 3 }} />
                <span style={{ fontSize: 13, color: C.ink, lineHeight: 1.4 }}>{c.label}</span>
              </label>
            ))}
            {E("chart") && <div style={{ fontSize: 11.5, color: C.red, marginBottom: 8 }}>{E("chart")}</div>}
            <div style={{ fontSize: 11, color: C.soft, margin: "2px 0 12px", lineHeight: 1.4 }}>Every balance starts at 0. Your accountant can add, rename or turn off accounts later (Accounting &gt; Chart of accounts), and opening balances come in through Upload tool &gt; templates.</div>
          </Sect>
          <Sect n="4" title="Tax rates and RO numbers">
            <div style={row2}>
              <Field id="servicePct" label="Service (labor) tax %" hint="Like 7.5 — 0 when labor is not taxed" err={E("servicePct")}><input id="servicePct" style={inp} value={f.servicePct} onChange={set("servicePct")} inputMode="decimal" autoComplete="off" /></Field>
              <Field id="partsPct" label="Parts tax %" err={E("partsPct")}><input id="partsPct" style={inp} value={f.partsPct} onChange={set("partsPct")} inputMode="decimal" autoComplete="off" /></Field>
            </div>
            <label style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 13, marginBottom: 6 }}><input id="taxOk" type="checkbox" checked={f.taxOk} onChange={set("taxOk")} /> These tax rates are right for this store</label>
            {E("taxOk") && <div style={{ fontSize: 11.5, color: C.red, marginBottom: 8 }}>{E("taxOk")}</div>}
            <Field id="roStart" label="First repair order number" hint="Your first RO will be RO-this number." err={E("roStart")}><input id="roStart" style={inp} value={f.roStart} onChange={set("roStart")} inputMode="numeric" autoComplete="off" /></Field>
          </Sect>
          <Sect n="5" title="You — the first login (the owner)">
            <div style={row2}>
              <Field id="adminId" label="Your login" hint="1 to 10 letters or digits" err={E("adminId")}><input id="adminId" style={inp} value={f.adminId} onChange={set("adminId")} autoComplete="off" spellCheck={false} /></Field>
              <Field id="adminName" label="Your name" err={E("adminName")}><input id="adminName" style={inp} value={f.adminName} onChange={set("adminName")} autoComplete="off" /></Field>
            </div>
            <div style={row2}>
              <Field id="pw" label="Password" hint={"At least " + ((status && status.pwMin) || 10) + " characters (a short phrase works well)"} err={E("pw")}><input id="pw" type="password" style={inp} value={f.pw} onChange={set("pw")} autoComplete="new-password" /></Field>
              <Field id="pw2" label="Password again" err={E("pw2")}><input id="pw2" type="password" style={inp} value={f.pw2} onChange={set("pw2")} autoComplete="new-password" /></Field>
            </div>
            <Field id="cell" label="Your cell phone (for sign-in codes)" hint={status && status.sms ? "Press Send a code, then type the code you get." : "Saved now; you confirm it later in Owner panel > Sign-in codes, after the text-message service is set up on the server."} err={E("cell")}>
              <input id="cell" style={inp} value={f.cell} onChange={set("cell")} inputMode="tel" autoComplete="off" />
            </Field>
            {status && status.sms && (
              <div style={{ marginBottom: 12 }}>
                <button type="button" data-k2b-sendcode="1" onClick={sendCode} style={{ padding: "9px 14px", border: "1px solid " + C.navy, background: "#fff", color: C.navy, borderRadius: 4, fontWeight: 700, fontSize: 13, minHeight: 40 }}>Send a code to my phone</button>
                {sms.note && <div style={{ fontSize: 12, color: sms.sent ? C.green : C.red, marginTop: 6 }}>{sms.note}</div>}
                {sms.sent && <Field id="phoneCode" label="Code from the text message" err={E("phoneCode")}><input id="phoneCode" style={inp} value={f.phoneCode} onChange={set("phoneCode")} inputMode="numeric" autoComplete="one-time-code" /></Field>}
              </div>
            )}
          </Sect>
          {msg && <div data-k2b-setupmsg="1" style={{ color: C.red, background: C.redBg, border: "1px solid " + C.red, padding: "8px 10px", fontSize: 13, marginBottom: 12, borderRadius: 4 }}>{msg}</div>}
          <button type="button" data-k2b-setup="go" onClick={submit} disabled={busy} style={{ width: "100%", padding: "13px 16px", background: C.navy, color: C.gold, border: 0, borderRadius: 5, fontSize: 16, fontWeight: 800, minHeight: 48, opacity: busy ? 0.6 : 1, cursor: busy ? "wait" : "pointer" }}>
            {busy ? "Setting up…" : "Set up my dealership"}
          </button>
          <div style={{ fontSize: 10.5, color: C.soft, marginTop: 16, textAlign: "center" }}>© 2026 K2B NETWORK SOLUTIONS LLC · K2B DMS</div>
        </div>
      </div>
    );
  }

  function FirstRunDone({ result, onSignIn }) {
    return (
      <div className="k2b-firstrun" data-k2b-firstrun="done" style={{ position: "absolute", inset: 0, overflowY: "auto", overflowX: "hidden", background: C.bg, fontFamily: "var(--font-ui, system-ui)" }}>
        <div style={{ maxWidth: 680, margin: "0 auto", padding: "24px 16px 40px", boxSizing: "border-box" }}>
          <div style={{ background: C.greenBg, border: "1px solid " + C.green, borderRadius: 6, padding: "16px 16px 8px", marginBottom: 14 }}>
            <div style={{ fontSize: 18, fontWeight: 800, color: C.green, marginBottom: 8 }}>✓ {result.store && result.store.dba} is set up</div>
            <div style={{ fontSize: 13, color: C.ink, lineHeight: 1.6 }}>
              <div>Store number {result.store && result.store.id} · chart of accounts: {result.chart && result.chart.accounts} accounts</div>
              <div>Your login: <b>{result.admin && result.admin.id}</b> ({result.admin && result.admin.name}) — you are the owner</div>
              <div>Sign-in phone: {result.phone && result.phone.masked} {result.phone && result.phone.confirmed ? "(confirmed)" : "(to confirm later)"}</div>
            </div>
            <ol style={{ fontSize: 13, color: C.ink, lineHeight: 1.6, paddingLeft: 20 }}>{(result.next || []).map((t, i) => <li key={i}>{t}</li>)}</ol>
          </div>
          {Array.isArray(result.backupCodes) && result.backupCodes.length > 0 && (
            <div data-k2b-backupcodes="1" style={{ background: "#fff", border: "2px solid " + C.navy, borderRadius: 6, padding: 14, marginBottom: 14 }}>
              <div style={{ fontWeight: 800, color: C.navy, marginBottom: 6 }}>Your 10 backup codes — write them down now</div>
              <div style={{ fontSize: 12, color: C.soft, marginBottom: 8 }}>Each works once, when your phone is not with you. They are shown only now. Keep them somewhere safe (not on this computer).</div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))", gap: 6, fontFamily: "monospace", fontSize: 15 }}>{result.backupCodes.map((c) => <div key={c}>{c}</div>)}</div>
            </div>
          )}
          <button type="button" data-k2b-setup="signin" onClick={onSignIn} style={{ width: "100%", padding: "13px 16px", background: C.navy, color: C.gold, border: 0, borderRadius: 5, fontSize: 16, fontWeight: 800, minHeight: 48 }}>Sign in</button>
        </div>
      </div>
    );
  }

  /** wraps the sign-in screen: shows the setup ONLY when the server says it is open */
  function K2BFirstRunGate({ children }) {
    const [st, setSt] = React.useState({ phase: "check", status: null, result: null });
    React.useEffect(() => {
      let gone = false;
      (async () => {
        const r = await api("GET", "/status");
        if (gone) return;
        if (r.status === 200 && r.body && r.body.open === true) setSt({ phase: "form", status: r.body, result: null });
        else setSt({ phase: "signin", status: null, result: null });
      })();
      return () => { gone = true; };
    }, []);
    if (st.phase === "form") return <FirstRunSetup status={st.status} onDone={(res) => setSt(res ? { phase: "done", status: st.status, result: res } : { phase: "signin", status: null, result: null })} />;
    if (st.phase === "done") return <FirstRunDone result={st.result} onSignIn={() => setSt({ phase: "signin", status: null, result: null })} />;
    return children;   // "check" shows the sign-in at once (a set-up dealership never waits for this question)
  }

  window.K2BFirstRunGate = K2BFirstRunGate;
})();