/* 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 — Sales alerts (sales features, lane 1).
//   • SlsBell          🔔 in the top bar: unread count, the alert list, Claim / Log contact / Open customer …
//   • SalesAlertsPage  route "salesalerts" (Workspace → My Alerts): every alert, filters, dismissed ones
//   • slsLogContact    the "Log contact" dialog (call / text / email / visit keeps a claimed customer yours)
// Alerts live on the server (/api/sales-alerts, one person's rows only), so an
// alert made while someone is signed out is waiting at their next sign-in.
// Live updates arrive over the WebSocket: DMSCore hands every message type it
// does not know to the page as a window "k2b-ws" event (hunk H0). Because the
// socket is best effort, the list is ALSO fetched on start, when the
// connection comes back, when the window gets focus and every 60 seconds.
// Feature detection: GET /sales-alerts/me. A server without the sales features
// (404 / error) → the bell renders nothing and My Alerts says so.
// Every top-level name is prefixed sls / Sls and exported through window.

/* ── role class: a copy of the server's salesroles.js (contract 5) ── */
const SLS_MANAGER_RE = /^((sales|general|gm)\s*)?(manager|mgr)$|^f\s*&\s*i(\s*manager)?$|^finance(\s*manager)?$|^sales\s*director$|^owner$/i;
const slsRoleClass = (role) => {
  const r = String(role || "").trim();
  if (!r) return "other";
  if (/admin/i.test(r)) return "manager";
  if (/^sales$/i.test(r)) return "sales";
  if (SLS_MANAGER_RE.test(r)) return "manager";
  return "other";
};
// Menus and screens use the client's own rule (matches the server for every role the app knows).
const slsIsMgr = () => !!(window.DMS && ((typeof DMS.isAdmin === "function" && DMS.isAdmin())
                                     || (typeof DMS.roleIs === "function" && DMS.roleIs("Sales Manager"))));

/* ── formatting (plain English; date-only values are built from their parts) ── */
const SLS_DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const SLS_MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
// "2026-10-12" → "Mon Oct 12" (never new Date("YYYY-MM-DD"): that is the day before in Missouri)
const slsFmtDay = (day) => {
  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(day || ""));
  if (!m) return "";
  const d = new Date(Date.UTC(+m[1], +m[2] - 1, +m[3]));
  return SLS_DAYS[d.getUTCDay()] + " " + SLS_MONTHS[d.getUTCMonth()] + " " + d.getUTCDate();
};
// "08:30" → "8:30 AM"
const slsFmtTime = (hhmm) => {
  const m = /^(\d{1,2}):(\d{2})/.exec(String(hhmm || ""));
  if (!m) return "";
  let h = +m[1]; const ap = h >= 12 ? "PM" : "AM"; h = h % 12 || 12;
  return h + ":" + m[2] + " " + ap;
};
// a timestamp in this PC's local time: "Mon Nov 9" / "Mon Nov 9, 2:14 PM"
const slsFmtLocalDay = (iso) => {
  const d = new Date(iso); if (!iso || isNaN(d)) return "";
  return SLS_DAYS[d.getDay()] + " " + SLS_MONTHS[d.getMonth()] + " " + d.getDate();
};
const slsFmtStamp = (iso) => {
  const d = new Date(iso); if (!iso || isNaN(d)) return "";
  const hh = String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0");
  return slsFmtLocalDay(iso) + ", " + slsFmtTime(hh);
};
const slsFmtWhen = (iso) => {
  const t = new Date(iso).getTime(); if (!iso || !isFinite(t)) return "";
  const s = Math.round((Date.now() - t) / 1000);
  if (s < 60) return "just now";
  if (s < 3600) return Math.floor(s / 60) + " min ago";
  if (s < 6 * 3600) { const h = Math.floor(s / 3600); return h + (h === 1 ? " hour ago" : " hours ago"); }
  return slsFmtStamp(iso);
};
const slsDigits = (p) => { let d = String(p || "").replace(/\D/g, ""); if (d.length === 11 && d[0] === "1") d = d.slice(1); return d; };
// "5735550101" → "(573) 555-0101"
const slsFmtPhone = (p) => {
  const d = slsDigits(p);
  if (d.length === 10) return "(" + d.slice(0, 3) + ") " + d.slice(3, 6) + "-" + d.slice(6);
  if (d.length === 7) return d.slice(0, 3) + "-" + d.slice(3);
  return String(p || "");
};
const slsMoney = (n) => { const v = Number(n); return isFinite(v) ? "$" + Math.round(v).toLocaleString("en-US") : ""; };
const slsPlural = (n, one, many) => n + " " + (n === 1 ? one : (many || one + "s"));

/* ── server calls (the global apiFetch from DMSCore adds the sign-in token) ── */
const slsApi = (path, opts) => (typeof apiFetch === "function"
  ? apiFetch(path, opts || {})
  : Promise.reject(Object.assign(new Error("Not connected to the server."), { status: 0 })));
const slsErrText = (e, fallback) => (e && e.body && e.body.error) || (e && e.status && e.message) || fallback;
const slsToast = (msg, kind, ms) => { try { window.k2bToast && window.k2bToast(msg, kind || "info", ms); } catch (e) {} };

/* ── one shared store for the bell, My Alerts and the other sales screens ── */
const slsS = {
  tok: null,                 // the sign-in this state belongs to (a new sign-in starts clean)
  me: null, meStatus: "idle", mePromise: null,   // meStatus: idle | loading | on | off
  alerts: [], unread: 0, loaded: false, error: false, mineP: null,
  seen: new Map(),           // alert id → readAt last seen (toast rule)
  toastAt: new Map(),        // customer → {at, more, timer} (one toast per customer per minute)
  takenOverride: new Map(),  // alert id → {claimedBy, until} (a lost claim shows "Claimed by …" at once)
  firstDone: false, autoOpen: false,
  listeners: new Set(), timers: null, version: 0,
};
let slsGo = null;            // the shell's go(routeKey), set by the bell / page
const slsEmit = () => { slsS.version++; slsS.listeners.forEach((fn) => { try { fn(slsS.version); } catch (e) {} }); };
const slsTok = () => { try { return (window.DMS && typeof DMS.getAuthToken === "function" && DMS.getAuthToken()) || ""; } catch (e) { return ""; } };
const slsMyId = () => { try { const ti = window.DMS && DMS.tokenInfo && DMS.tokenInfo(); return ti && ti.sub ? String(ti.sub) : ""; } catch (e) { return ""; } };

// A new sign-in (or a sign-off) throws away the previous person's alerts.
function slsCheckSession(silent) {
  const tok = slsTok();
  if (tok !== slsS.tok) {
    slsS.tok = tok;
    slsS.me = null; slsS.meStatus = "idle"; slsS.mePromise = null;
    slsS.alerts = []; slsS.unread = 0; slsS.loaded = false; slsS.error = false; slsS.mineP = null;
    slsS.seen = new Map(); slsS.takenOverride = new Map(); slsS.firstDone = false; slsS.autoOpen = false;
    slsS.toastAt.forEach((t) => { if (t.timer) clearTimeout(t.timer); });
    slsS.toastAt = new Map();
    if (!silent) slsEmit();
  }
  return tok;
}

// GET /sales-alerts/me — the ONLY source of the feature flags. Resolves to the
// answer, or null when the features are off (old server, error, signed out).
function slsGetMe(force) {
  const tok = slsCheckSession();
  if (!tok) return Promise.resolve(null);
  if (!force && slsS.meStatus === "on") return Promise.resolve(slsS.me);
  if (!force && slsS.meStatus === "off") return Promise.resolve(null);
  if (slsS.mePromise) return slsS.mePromise;
  if (slsS.meStatus === "idle") slsS.meStatus = "loading";
  const p = slsApi("/sales-alerts/me").then(
    (r) => { if (tok !== slsS.tok) return null; if (r && r.ok) { slsS.me = r; slsS.meStatus = "on"; } else { slsS.me = null; slsS.meStatus = "off"; } return slsS.me; },
    () => { if (tok !== slsS.tok) return null; slsS.me = null; slsS.meStatus = "off"; return null; });
  slsS.mePromise = p;
  p.then(() => { if (slsS.mePromise === p) slsS.mePromise = null; slsEmit(); });
  return p;
}

// The customer an alert is about (toast grouping + plain-English names).
const slsCustKeyOf = (a) => (a && a.customer && (a.customer.custNum || a.customer.name)) || (a && a.custKey) || (a && a.id) || "";
const slsCustName = (a) => (a && a.customer && a.customer.name) || "";

// Toast rule (contract 3.5): only for an alert id not seen before in this
// session, or one whose readAt went from a value back to empty; at most one
// toast per customer per minute (the rest become "3 new alerts for JONES, MARY").
function slsMaybeToast(a, prevReadAt, isNew) {
  if (!a || !a.unread) return;
  if (!isNew && !(prevReadAt && !a.readAt)) return;
  const key = slsCustKeyOf(a);
  const name = slsCustName(a);
  const now = Date.now();
  const t = slsS.toastAt.get(key);
  if (t && now - t.at < 60000) {
    t.more++;
    if (!t.timer) {
      t.timer = setTimeout(() => {
        const n = t.more; t.more = 0; t.timer = null; t.at = Date.now();
        if (n > 0) slsToast("🔔 " + slsPlural(n, "new alert") + (name ? " for " + name : ""), "info", 6000);
      }, Math.max(1000, 60000 - (now - t.at)));
    }
    return;
  }
  slsS.toastAt.set(key, { at: now, more: 0, timer: null });
  slsToast("🔔 " + a.title, "info", 5000);
}
// A claim this station just lost shows "Claimed by …" even if a refresh still says open for a moment.
function slsApplyOverride(a) {
  const o = slsS.takenOverride.get(a.id);
  if (!o) return a;
  if (Date.now() > o.until || a.state !== "open") { slsS.takenOverride.delete(a.id); return a; }
  return Object.assign({}, a, { state: "taken", claimedBy: o.claimedBy || a.claimedBy, actions: (a.actions || []).filter((x) => x !== "claim") });
}
const slsSort = (list) => list.slice().sort((x, y) => String(y.updatedAt || "").localeCompare(String(x.updatedAt || "")) || String(y.id).localeCompare(String(x.id)));

// A fresh list from GET /mine.
function slsApplyList(list, unread) {
  const first = !slsS.firstDone;
  for (const a of list) {
    const had = slsS.seen.has(a.id);
    if (!first) slsMaybeToast(a, had ? slsS.seen.get(a.id) : null, !had);
    slsS.seen.set(a.id, a.readAt || null);
  }
  slsS.alerts = slsSort(list.map(slsApplyOverride));
  slsS.unread = Number(unread) || 0;
  if (first) {
    slsS.firstDone = true;
    // Waiting alerts at sign-in: open the bell once and say how many (once per sign-in).
    if (slsS.unread > 0) {
      const mark = String(slsS.tok || "").slice(-24);
      let done = false;
      try { done = sessionStorage.getItem("jb_sls_welcomed") === mark; sessionStorage.setItem("jb_sls_welcomed", mark); } catch (e) {}
      if (!done) {
        slsS.autoOpen = true;
        slsToast("You have " + slsPlural(slsS.unread, "new alert") + ".", "info", 6000);
      }
    }
  }
}

function slsLoadMine() {
  const tok = slsCheckSession();
  if (!tok) return Promise.resolve();
  if (slsS.meStatus !== "on") return slsGetMe().then((me) => (me && tok === slsS.tok ? slsLoadMine() : null));
  if (slsS.mineP) return slsS.mineP;
  const p = slsApi("/sales-alerts/mine?limit=100").then(
    (r) => { if (tok !== slsS.tok) return; slsApplyList((r && r.alerts) || [], r && r.unread); slsS.loaded = true; slsS.error = false; },
    () => { if (tok !== slsS.tok) return; slsS.error = true; });
  slsS.mineP = p;
  p.then(() => { if (slsS.mineP === p) slsS.mineP = null; slsEmit(); });
  return p;
}

// A live message from the server (the "k2b-ws" event of hunk H0).
function slsOnWs(ev) {
  const m = ev && ev.detail;
  if (!m || !m.type) return;
  if (m.type === "sales_alert") {
    if (!slsS.tok || slsS.meStatus !== "on") return;
    if (m.op === "upsert" && m.alert && m.alert.id) {
      const a = m.alert;
      const had = slsS.seen.has(a.id);
      if (slsS.firstDone) slsMaybeToast(a, had ? slsS.seen.get(a.id) : null, !had);
      slsS.seen.set(a.id, a.readAt || null);
      const rest = slsS.alerts.filter((x) => x.id !== a.id);
      slsS.alerts = slsSort([slsApplyOverride(a)].concat(rest));
      if (m.unread != null) slsS.unread = Number(m.unread) || 0;
      slsEmit();
    } else if (m.op === "remove" && m.id) {
      slsS.alerts = slsS.alerts.filter((x) => x.id !== m.id);
      if (m.unread != null) slsS.unread = Number(m.unread) || 0;
      slsEmit();
    } else if (m.op === "resync") {
      if (m.unread != null) slsS.unread = Number(m.unread) || 0;
      slsEmit();
      slsLoadMine();
    }
  }
}

// Polling + listeners run while anything on screen uses the store.
function slsStart() {
  if (slsS.timers) return;
  const onFocus = () => { slsLoadMine(); };
  const offConn = (window.DMS && typeof DMS.onConn === "function")
    ? DMS.onConn((state) => { if (state === "online") slsGetMe(true).then((me) => { if (me) slsLoadMine(); }); })
    : null;
  window.addEventListener("k2b-ws", slsOnWs);
  window.addEventListener("focus", onFocus);
  const iv = setInterval(() => { slsLoadMine(); }, 60000);
  slsS.timers = { iv, onFocus, offConn };
  slsLoadMine();
}
function slsStop() {
  const t = slsS.timers; if (!t) return;
  clearInterval(t.iv);
  window.removeEventListener("k2b-ws", slsOnWs);
  window.removeEventListener("focus", t.onFocus);
  if (t.offConn) { try { t.offConn(); } catch (e) {} }
  slsS.timers = null;
}
// React hook: re-render on store changes; keeps the store running while mounted.
function slsUseStore() {
  const [, setV] = React.useState(0);
  React.useEffect(() => {
    const fn = (v) => setV(v);
    slsS.listeners.add(fn);
    slsStart();
    return () => { slsS.listeners.delete(fn); if (slsS.listeners.size === 0) slsStop(); };
  }, []);
  slsCheckSession(true);   // during render: no emit (the other screens catch up on the next change)
  return slsS;
}

/* ── actions ── */
async function slsMarkRead(ids) {
  const list = (ids || []).filter(Boolean);
  if (!list.length) return;
  const now = new Date().toISOString();
  slsS.alerts = slsS.alerts.map((a) => (list.indexOf(a.id) >= 0 && a.unread ? Object.assign({}, a, { unread: false, readAt: now }) : a));
  list.forEach((id) => { if (slsS.seen.has(id)) slsS.seen.set(id, now); });
  slsEmit();
  try { const r = await slsApi("/sales-alerts/read", { method: "POST", body: { ids: list } }); if (r && r.unread != null) { slsS.unread = Number(r.unread) || 0; slsEmit(); } }
  catch (e) { slsLoadMine(); }
}
async function slsMarkAllRead() {
  const now = new Date().toISOString();
  slsS.alerts = slsS.alerts.map((a) => (a.unread ? Object.assign({}, a, { unread: false, readAt: now }) : a));
  slsS.alerts.forEach((a) => slsS.seen.set(a.id, a.readAt));
  slsS.unread = 0; slsEmit();
  try { await slsApi("/sales-alerts/read", { method: "POST", body: { all: true } }); } catch (e) { slsToast(slsErrText(e, "Could not mark the alerts as read. Try again."), "warn", 4000); }
  slsLoadMine();
}
async function slsDismiss(a) {
  if (!a) return;
  slsS.alerts = slsS.alerts.filter((x) => x.id !== a.id); slsEmit();
  try { const r = await slsApi("/sales-alerts/dismiss", { method: "POST", body: { ids: [a.id] } }); if (r && r.unread != null) { slsS.unread = Number(r.unread) || 0; slsEmit(); } }
  catch (e) { slsToast(slsErrText(e, "Could not dismiss that alert. Try again."), "warn", 4000); slsLoadMine(); }
  try { window.dispatchEvent(new CustomEvent("sls-alerts-changed")); } catch (e) {}
}
const slsOwnerChanged = (custKeys) => { try { window.dispatchEvent(new CustomEvent("sls-owner-changed", { detail: { custKeys: (custKeys || []).filter(Boolean) } })); } catch (e) {} };
async function slsClaim(a) {
  if (!a) return { ok: false };
  const name = slsCustName(a) || "This customer";
  try {
    await slsApi("/sales-alerts/" + encodeURIComponent(a.id) + "/claim", { method: "POST", body: {} });
    const days = (slsS.me && slsS.me.claimDays) || 30;
    slsToast(name + " is your customer now. Log a call, text, email or visit within " + days + " days to keep them.", "ok", 7000);
    slsLoadMine(); slsOwnerChanged([a.custKey]);
    return { ok: true };
  } catch (e) {
    const b = (e && e.body) || {};
    if (e && e.status === 409 && b.code === "taken") {
      const who = (b.claimedBy && b.claimedBy.name) || "";
      slsToast(b.error || ("Someone else claimed this customer first: " + (who || "another salesperson") + "."), "warn", 7000);
      slsS.takenOverride.set(a.id, { claimedBy: b.claimedBy || null, until: Date.now() + 20000 });
      slsS.alerts = slsS.alerts.map(slsApplyOverride); slsEmit();
      slsLoadMine(); slsOwnerChanged([a.custKey]);
    } else if (e && e.status === 409 && b.code === "closed") {
      // Lost by a hair: the winner's claim already marked this alert "taken" before ours was read.
      // Say who got the customer (same words as a lost race), not just "no longer open".
      await slsLoadMine();
      const cur = slsS.alerts.find((x) => x.id === a.id);
      if (cur && cur.state === "taken" && cur.claimedBy && cur.claimedBy.name) slsToast("Someone else claimed this customer first: " + cur.claimedBy.name + ".", "warn", 7000);
      else slsToast(b.error || "This alert is no longer open.", "warn", 7000);
      slsOwnerChanged([a.custKey]);
    } else {
      slsToast(slsErrText(e, "Could not claim this customer. Try again."), "warn", 7000);
      slsLoadMine();
    }
    return { ok: false, code: b.code || null };
  }
}
function slsOpenCustomer(custNum) {
  if (!custNum) return;
  try { localStorage.setItem("jb_cust_focus", String(custNum)); } catch (e) {}
  try { window.dispatchEvent(new CustomEvent("sls-cust-focus", { detail: { custNum: String(custNum) } })); } catch (e) {}
  if (slsGo) slsGo("customers");
}
function slsOpenTrade(tradeId) {
  if (!tradeId) return;
  if (typeof window.TradeEval !== "function") { slsToast("Trade-In Requests is not on this PC yet. Ask your administrator.", "warn", 5000); return; }
  try { localStorage.setItem("jb_trade_focus", String(tradeId)); } catch (e) {}
  if (slsGo) slsGo("trades");
}
function slsOpenAliases() {
  try { localStorage.setItem("jb_co_tab", "aliases"); } catch (e) {}
  try { window.dispatchEvent(new CustomEvent("sls-co-tab", { detail: { tab: "aliases" } })); } catch (e) {}
  if (slsGo) slsGo("custowners");
}

/* ── Log contact dialog (opened from the bell, Customers, or any screen via window.slsLogContact) ── */
const SLS_CONTACT_KINDS = [["call", "Call"], ["text", "Text"], ["email", "Email"], ["visit", "Visit"]];
const SlsContactModal = ({ custKey, name, presetKind, leadId, onClose, onDone }) => {
  const [kind, setKind] = React.useState(SLS_CONTACT_KINDS.some((k) => k[0] === presetKind) ? presetKind : "call");
  const [note, setNote] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState("");
  const save = async () => {
    if (busy) return;
    setBusy(true); setErr("");
    try {
      const body = { custKey, kind };
      if (note.trim()) body.note = note.trim().slice(0, 500);
      if (leadId) body.leadId = leadId;
      const r = await slsApi("/customer-owners/contact", { method: "POST", body });
      const who = name || "This customer";
      if (r && r.claim && r.claim.expiresAt) slsToast("Contact logged. " + who + " stays yours until " + slsFmtLocalDay(r.claim.expiresAt) + ".", "ok", 6000);
      else slsToast("Contact logged for " + who + ".", "ok", 4000);
      slsOwnerChanged([custKey]);
      slsLoadMine();
      onDone && onDone(r);
      onClose();
    } catch (e) {
      setErr(slsErrText(e, "Could not log the contact. Try again."));
      setBusy(false);
    }
  };
  // the dialog's own buttons sit in the K2BModal footer (without them K2BModal adds an "OK" there that closes WITHOUT saving)
  const buttons = (
    <>
      <button type="button" className="k2b-button" id="sls-contact-cancel" onClick={onClose}>Cancel</button>
      <button type="button" className="k2b-button" id="sls-contact-save" disabled={busy} onClick={save}
              style={{ background: "var(--jb-yellow)", fontWeight: 700 }}>{busy ? "Saving…" : "Save contact"}</button>
    </>
  );
  return (
    <K2BModal title="Log contact" onClose={onClose} width={420} buttons={buttons}>
      <div id="sls-contact-modal" data-custkey={custKey} style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 13 }}>
        <div style={{ color: "var(--jb-text)" }}>
          {name ? <b>{name}</b> : null}
          <div style={{ fontSize: 12, color: "var(--jb-text-dim)", marginTop: 2 }}>
            A call, text, email or visit keeps a customer you claimed yours for another {(slsS.me && slsS.me.claimDays) || 30} days.
          </div>
        </div>
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, fontWeight: 700, color: "var(--jb-text-dim)" }}>How did you reach them?</span>
          <select id="sls-contact-kind" value={kind} onChange={(e) => setKind(e.target.value)} style={{ padding: "5px 6px", fontSize: 13 }}>
            {SLS_CONTACT_KINDS.map((k) => <option key={k[0]} value={k[0]}>{k[1]}</option>)}
          </select>
        </label>
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, fontWeight: 700, color: "var(--jb-text-dim)" }}>Note (optional)</span>
          <textarea id="sls-contact-note" value={note} maxLength={500} rows={3} autoFocus onChange={(e) => setNote(e.target.value)}
                    placeholder="What did you talk about?" style={{ fontSize: 13, padding: 6, resize: "vertical", fontFamily: "inherit" }} />
        </label>
        {err && <div id="sls-contact-error" style={{ color: "var(--jb-red, #A02234)", fontWeight: 600, fontSize: 12 }}>{err}</div>}
      </div>
    </K2BModal>
  );
};
let slsContactRoot = null;
// window.slsLogContact(custKey, presetKind, {name, leadId, onDone}) — usable from any screen.
function slsLogContact(custKey, presetKind, opts) {
  if (!custKey) return;
  const o = opts || {};
  let name = o.name || "";
  if (!name) {
    try { const c = window.DMS && DMS.customers && DMS.customers()[custKey]; if (c) name = c.name || [c.lastName, c.firstName].filter(Boolean).join(", "); } catch (e) {}
    if (!name) { const a = slsS.alerts.find((x) => x.custKey === custKey && x.customer); if (a) name = a.customer.name || ""; }
  }
  try {
    let el = document.getElementById("sls-contact-root");
    if (!el) { el = document.createElement("div"); el.id = "sls-contact-root"; document.body.appendChild(el); }
    if (!slsContactRoot) slsContactRoot = ReactDOM.createRoot(el);
    const close = () => { try { slsContactRoot.render(null); } catch (e) {} };
    slsContactRoot.render(<SlsContactModal key={custKey + ":" + Date.now()} custKey={custKey} name={name} presetKind={presetKind}
                                           leadId={o.leadId} onClose={close} onDone={o.onDone} />);
  } catch (e) { slsToast("Could not open the contact form.", "warn", 4000); }
}

/* ── one alert (bell panel and My Alerts page) ── */
const SLS_ACT_LABEL = { claim: "Claim customer", contact: "Log contact", "open-customer": "Open customer", "open-trade": "Open trade", "open-aliases": "Match the name", dismiss: "Dismiss" };
const SLS_STATUS_WORD = { scheduled: "Booked for", in_shop: "In service now", done: "Done", missed: "Missed", cancelled: "Cancelled" };
const slsKindLabel = (k, state) => (k === "service_pool" && state && state !== "open"
  ? ({ claimed: "Your claim", taken: "Claimed by someone else", closed: "Has a salesperson now" }[state] || "Up for grabs")
  : k === "service_mine" && state === "closed" ? "Not your customer now" : null) || ({ service_mine: "Your customer", service_pool: "Up for grabs", trade_submitted: "Trade to value", trade_offer: "Trade offer",
  trade_declined: "Trade not taken", claim_expiring: "Claim running out", claim_expired: "Claim ended", customer_assigned: "New customer for you",
  name_unmapped: "Old salesperson name" }[k] || "Alert");
function slsOwnerLine(a) {
  if (a.claimedBy && a.claimedBy.name && (a.state === "taken" || a.state === "closed")) return "Claimed by " + a.claimedBy.name;
  const o = a.owner; if (!o) return "";
  const me = slsMyId();
  if (o.status === "orphan") return o.soldBy ? "Sold by " + o.soldBy + " (no longer here)" : "No salesperson on the deal";
  if (o.status === "claimed") {
    if (o.userId && o.userId === me) return "Claimed by you - log a call, text, email or visit to keep them";
    return "Claimed by " + (o.userName || "another salesperson");
  }
  if (o.status === "assigned") return o.userId === me ? "A manager gave you this customer" : (o.userName ? o.userName + "'s customer (set by a manager)" : "");
  if (o.status === "owned") {
    if (o.userId === me) return "Your customer" + (o.soldBy && o.soldBy !== o.userName ? " (sold by " + o.soldBy + ")" : "");
    return o.userName ? o.userName + "'s customer" : "";
  }
  if (o.status === "unreviewed") return o.soldBy ? "Sold by " + o.soldBy + " - waiting for a manager to match that name" : "";
  return "";
}
const SlsAlertItem = ({ a, compact, fresh }) => {
  const [busy, setBusy] = React.useState(false);
  const act = async (x) => {
    if (busy) return;
    if (x === "claim") { setBusy(true); await slsClaim(a); setBusy(false); return; }
    if (x === "contact") { slsLogContact(a.custKey, "call", { name: slsCustName(a) }); return; }
    if (x === "open-customer") { slsOpenCustomer(a.customer && a.customer.custNum); return; }
    if (x === "open-trade") { slsOpenTrade(a.tradeId); return; }
    if (x === "open-aliases") { slsOpenAliases(); return; }
    if (x === "dismiss") { slsDismiss(a); return; }
  };
  const sv = a.service;
  const svLine = sv ? [sv.type || "Service", (SLS_STATUS_WORD[sv.status] || "") + (sv.status === "scheduled" || sv.status === "missed" || sv.status === "cancelled" || sv.status === "done"
    ? " " + slsFmtDay(sv.date) + (sv.time && sv.status === "scheduled" ? ", " + slsFmtTime(sv.time) : "") : ""),
    sv.roIds && sv.roIds.length ? "RO " + sv.roIds.map((x) => String(x).replace(/^RO-?/i, "")).join(", ") : ""].filter((s) => String(s).trim()).join(" · ") : "";
  const owner = slsOwnerLine(a);
  const tr = a.trade;
  const unreadLook = a.unread || fresh;
  return (
    <div className={"sls-alert" + (unreadLook ? " sls-unread" : "")} data-alert-id={a.id} data-kind={a.kind} data-state={a.state} data-unread={a.unread ? "1" : "0"}>
      <div className="sls-alert-top">
        <span className="sls-alert-kind">{slsKindLabel(a.kind, a.state)}</span>
        <span className="sls-alert-when" title={slsFmtStamp(a.updatedAt || a.createdAt)}>{slsFmtWhen(a.updatedAt || a.createdAt)}</span>
      </div>
      <div className="sls-alert-title">{a.title}</div>
      {a.customer && (a.customer.name || a.customer.phone) ? (
        <div className="sls-alert-line">
          {a.customer.name ? <b>{a.customer.name}</b> : null}
          {a.customer.phone ? <> · <a className="sls-tel" href={"tel:" + slsDigits(a.customer.phone)}>{slsFmtPhone(a.customer.phone)}</a></> : null}
        </div>) : null}
      {a.vehicle && a.vehicle.label ? <div className="sls-alert-line">{a.vehicle.label}{a.vehicle.vinLast8 ? " · VIN …" + a.vehicle.vinLast8 : ""}</div> : null}
      {svLine ? <div className="sls-alert-line">{svLine}</div> : null}
      {owner ? <div className="sls-alert-line sls-owner">{owner}</div> : null}
      {a.nameMatch ? <div className="sls-alert-line">“{a.nameMatch.display}” · {slsPlural(a.nameMatch.deals || 0, "deal")}{a.nameMatch.waitingVisits ? " · customer in service now" : ""}</div> : null}
      {tr ? (
        <div className="sls-alert-line">
          {tr.vehicle || "Trade"}{tr.miles != null ? " · " + Number(tr.miles).toLocaleString("en-US") + " mi" : ""}
          {tr.offer != null ? <div className="sls-offer">Offer to present: {slsMoney(tr.offer)}</div> : null}
          {tr.offerNote ? <div className="sls-note">Note: {tr.offerNote}</div> : null}
          {tr.valuedBy && tr.valuedBy.name ? <div className="sls-note">From {tr.valuedBy.name}</div> : null}
        </div>) : null}
      {(a.actions || []).length ? (
        <div className="sls-alert-actions">
          {(a.actions || []).map((x) => (
            <button key={x} type="button" data-act={x} disabled={busy && x === "claim"}
                    className={"k2b-button sls-act sls-act-" + x} onClick={(e) => { e.stopPropagation(); act(x); }}>
              {x === "claim" && busy ? "Claiming…" : (SLS_ACT_LABEL[x] || x)}
            </button>
          ))}
        </div>) : null}
    </div>
  );
};

/* ── styles (injected once) + phone-width shell rules ── */
const SLS_CSS = `
#sls-bell { position: relative; padding: 0 10px !important; min-width: 40px; font-size: 16px; line-height: 1; }
#sls-bell-count { position: absolute; top: -3px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; background: var(--jb-red, #C0392B); color: #FFF; font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center; }
#sls-bell-panel { position: fixed; z-index: 9100; background: var(--jb-surface, #FFF); border: 1px solid var(--jb-border, #D5DAE3);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(10, 20, 50, 0.22); display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; }
#sls-bell-panel .sls-bell-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--jb-border, #D5DAE3);
  font-weight: 700; color: var(--jb-navy, #0E1430); font-size: 14px; }
#sls-bell-panel .sls-bell-list { overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; }
#sls-bell-panel .sls-bell-foot { padding: 8px 12px; border-top: 1px solid var(--jb-border, #D5DAE3); display: flex; justify-content: center; }
.sls-linkbtn { background: none; border: 0; color: var(--jb-blue, #1B66A8); font-weight: 600; cursor: pointer; font-size: 12.5px; padding: 2px 4px; }
.sls-alert { padding: 10px 12px; border-bottom: 1px solid var(--jb-border, #E3E7EE); font-size: 12.5px; color: var(--jb-text, #1D2433);
  overflow-wrap: anywhere; min-width: 0; }
.sls-alert.sls-unread { background: var(--jb-blue-tint, #EEF4FB); }
.sls-alert-top { display: flex; align-items: center; gap: 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--jb-text-dim, #5B6578); font-weight: 700; }
.sls-alert.sls-unread .sls-alert-kind::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--jb-blue, #1B66A8); margin-right: 6px; vertical-align: 1px; }
.sls-alert-when { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; white-space: nowrap; }
.sls-alert-title { font-weight: 700; margin: 3px 0 2px; font-size: 13px; line-height: 1.35; }
.sls-alert-line { margin-top: 2px; line-height: 1.4; color: var(--jb-text, #1D2433); }
.sls-alert-line.sls-owner { color: var(--jb-text-dim, #5B6578); }
.sls-tel { color: var(--jb-blue, #1B66A8); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sls-offer { font-weight: 800; color: var(--jb-green, #16803A); margin-top: 2px; }
.sls-note { color: var(--jb-text-dim, #5B6578); }
.sls-alert-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.sls-alert-actions .k2b-button { height: 26px !important; min-height: 26px; padding: 0 10px !important; font-size: 11.5px; border-radius: 999px !important; }
.sls-alert-actions .sls-act-claim { background: var(--jb-yellow, #FFD24A) !important; border-color: var(--jb-yellow-2, #E8B820) !important; font-weight: 800; color: var(--jb-navy, #0E1430) !important; }
.sls-alert-actions .sls-act-dismiss { background: transparent !important; color: var(--jb-text-dim, #5B6578) !important; }
#sls-alerts-page { padding: 16px 18px; box-sizing: border-box; min-width: 0; }
#sls-alerts-page .sls-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 12px; }
.sls-chip { border: 1px solid var(--jb-border-strong, #C3CAD6); background: var(--jb-surface, #FFF); color: var(--jb-text, #1D2433); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.sls-chip.on { background: var(--jb-navy, #0E1430); color: #FFF; border-color: var(--jb-navy, #0E1430); }
#sls-alerts-page .sls-page-list { background: var(--jb-surface, #FFF); border: 1px solid var(--jb-border, #D5DAE3); border-radius: 10px; overflow: hidden; max-width: 860px; }
@media screen and (max-width: 640px) {
  /* phone width: the sidebar becomes an icon rail so the screen gets the room */
  .jb-shell { grid-template-columns: 52px minmax(0, 1fr) !important; }
  .jb-sidebar { overflow-x: hidden !important; }
  .jb-sidebar .brand > div, .jb-sidebar .section-label, .jb-sidebar .nav-item .lbl, .jb-sidebar .nav-item .jb-nav-pop { display: none !important; }
  .jb-sidebar .brand { padding: 10px 4px !important; justify-content: center; }
  .jb-sidebar .brand img { width: 30px !important; }
  .jb-sidebar .nav-item { margin: 1px 4px !important; padding: 0 !important; justify-content: center; }
  .jb-sidebar > div[style*="border-top"] { flex-direction: column; align-items: stretch !important; padding: 8px 3px !important; gap: 6px !important; }
  .jb-sidebar > div[style*="border-top"] > div { display: none !important; }
  .jb-sidebar > div[style*="border-top"] > span { align-self: center; }
  .jb-sidebar > div[style*="border-top"] .k2b-button { padding: 2px 1px !important; font-size: 9px !important; white-space: normal; height: auto !important; min-height: 22px; }
  .jb-sidebar > div:last-child:not([style*="border-top"]) { display: none !important; }
  .jb-main { min-width: 0; }
  .jb-topbar { padding: 0 6px !important; gap: 4px !important; min-width: 0; overflow: hidden; }
  .jb-topbar .crumbs { min-width: 0; overflow: hidden; flex: 1 1 auto; }
  .jb-topbar .crumbs > span:not(.here) { display: none !important; }
  .jb-topbar .crumbs .here { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .jb-topbar > .k2b-button:not(#sls-bell) { display: none !important; }
  #sls-alerts-page { padding: 10px 8px; }
}
`;
/* Phones (slfix F11): index.html has no viewport tag, so a phone shows the whole app as a shrunken 980 px desktop page and
   the phone layout above (max-width 640px) never applies. On a TOUCH device with a SMALL screen (a phone - not a tablet,
   not a PC) the page gets the standard phone viewport, so the bell, My Alerts, Customers and the trade form with photos
   fit the phone at normal text size. Tablets and PCs are untouched. When index.html gets its own viewport tag (lead's
   merge), this does nothing. */
function slsPhoneViewport() {
  try {
    if (document.querySelector('meta[name="viewport"]')) return false;
    const coarse = !!(window.matchMedia && window.matchMedia("(pointer: coarse)").matches);
    const sw = Number(window.screen && window.screen.width) || 9999, sh = Number(window.screen && window.screen.height) || 9999;
    if (!coarse || Math.min(sw, sh) > 600) return false;
    const m = document.createElement("meta");
    m.name = "viewport"; m.id = "sls-viewport"; m.content = "width=device-width, initial-scale=1";
    document.head.appendChild(m);
    return true;
  } catch (e) { return false; }
}
function slsInjectCss() {
  try {
    slsPhoneViewport();
    if (document.getElementById("sls-css")) return;
    const st = document.createElement("style"); st.id = "sls-css"; st.textContent = SLS_CSS;
    document.head.appendChild(st);
  } catch (e) {}
}
if (typeof document !== "undefined") slsInjectCss();

/* ── 🔔 the bell (top bar) ── */
const SlsBell = ({ go }) => {
  const st = slsUseStore();
  slsGo = go || slsGo;
  const [open, setOpen] = React.useState(false);
  const [freshIds, setFreshIds] = React.useState([]);   // unread when the panel opened: keep them highlighted until it closes
  const btnRef = React.useRef(null);
  const panelRef = React.useRef(null);
  const [pos, setPos] = React.useState(null);
  const on = st.meStatus === "on";
  // waiting alerts at sign-in: open once by itself
  React.useEffect(() => { if (on && st.autoOpen) { st.autoOpen = false; setOpen(true); } });
  const place = React.useCallback(() => {
    const b = btnRef.current; if (!b) return;
    const r = b.getBoundingClientRect();
    const vw = window.innerWidth, vh = window.innerHeight;
    const width = Math.min(400, vw - 16);
    let left = Math.min(r.right - width, vw - width - 8); left = Math.max(8, left);
    const top = Math.min(r.bottom + 6, vh - 120);
    let maxHeight = Math.max(160, vh - top - 12);
    // Desking (DeskingTool.jsx.txt sets body.dkc-desk-on while the desk or the Sales view-only desk is open): the panel never
    // covers the Payment square - the ★ payment, the option payments, Push - it stops above that square (the list scrolls) and
    // never straddles the Trade / Down column on its left. The desk's own menus keep the same rule.
    try {
      const pay = document.body.classList.contains("dkc-desk-on") && document.querySelector('.dkc-root .dkc-quad[data-quad="pay"]');
      if (pay) {
        const q = pay.getBoundingClientRect();
        if (q.width > 0) {
          maxHeight = Math.max(150, Math.min(maxHeight, Math.floor(q.top) - 8 - top));
          left = Math.min(Math.max(left, Math.ceil(q.left) + 8), vw - width - 8);
        }
      }
    } catch (e) {}
    setPos({ left, top, width, maxHeight });
  }, []);
  React.useLayoutEffect(() => { if (open) place(); }, [open, place]);
  React.useEffect(() => {
    if (!open) return;
    const ids = slsS.alerts.filter((a) => a.unread).map((a) => a.id);
    setFreshIds((prev) => Array.from(new Set(prev.concat(ids))));
    if (ids.length) slsMarkRead(ids);   // opening the panel marks the shown alerts read
  }, [open, st.version]);
  React.useEffect(() => {
    if (!open) { setFreshIds([]); return; }
    const onDown = (e) => {
      const p = panelRef.current, b = btnRef.current;
      if ((p && p.contains(e.target)) || (b && b.contains(e.target))) return;
      if (e.target && e.target.closest && e.target.closest("[data-k2b-modal]")) return;   // the contact dialog
      setOpen(false);
    };
    const onKey = (e) => { if (e.key === "Escape" && !document.querySelector("[data-k2b-modal]")) setOpen(false); };
    const onResize = () => place();
    document.addEventListener("mousedown", onDown, true);
    document.addEventListener("keydown", onKey, true);
    window.addEventListener("resize", onResize);
    return () => { document.removeEventListener("mousedown", onDown, true); document.removeEventListener("keydown", onKey, true); window.removeEventListener("resize", onResize); };
  }, [open, place]);
  if (!on) return null;
  const n = st.unread;
  const list = st.alerts.slice(0, 30);
  const panel = open && pos ? (
    <div id="sls-bell-panel" ref={panelRef} role="dialog" aria-label="Alerts"
         style={{ left: pos.left, top: pos.top, width: pos.width, maxHeight: pos.maxHeight }}>
      <div className="sls-bell-head">
        <span>🔔 Alerts</span>
        <span style={{ fontSize: 11.5, fontWeight: 500, color: "var(--jb-text-dim)" }}>{n ? n + " unread" : ""}</span>
        <span style={{ flex: 1 }} />
        <button type="button" id="sls-bell-readall" className="sls-linkbtn" onClick={() => slsMarkAllRead()}>Mark all read</button>
      </div>
      <div className="sls-bell-list">
        {st.error && !st.loaded ? (
          <div id="sls-bell-error" style={{ padding: 18, fontSize: 12.5, color: "var(--jb-red, #A02234)" }}>Alerts are not available right now.</div>
        ) : list.length === 0 ? (
          <div id="sls-bell-empty" style={{ padding: 18, fontSize: 12.5, color: "var(--jb-text-dim)", lineHeight: 1.5 }}>
            No alerts. You will see one here when a customer of yours books service or a trade gets an offer.
          </div>
        ) : list.map((a) => <SlsAlertItem key={a.id} a={a} compact fresh={freshIds.indexOf(a.id) >= 0} />)}
        {st.error && st.loaded ? <div id="sls-bell-error" style={{ padding: "8px 12px", fontSize: 11.5, color: "var(--jb-red, #A02234)" }}>Alerts are not available right now.</div> : null}
      </div>
      <div className="sls-bell-foot">
        <button type="button" id="sls-bell-all" className="sls-linkbtn" onClick={() => { setOpen(false); if (go) go("salesalerts"); }}>See all alerts ›</button>
      </div>
    </div>
  ) : null;
  return (
    <>
      <button ref={btnRef} id="sls-bell" type="button" className="k2b-button" aria-label="Alerts" data-unread={String(n)}
              aria-expanded={open ? "true" : "false"} title={n ? n + " unread alert" + (n === 1 ? "" : "s") : "Alerts"}
              onClick={() => { if (!open) slsLoadMine(); setOpen(!open); }}>
        <span aria-hidden="true">🔔</span>
        <span id="sls-bell-count" style={{ display: n > 0 ? "inline-block" : "none" }}>{n > 9 ? "9+" : String(n)}</span>
      </button>
      {panel ? ReactDOM.createPortal(panel, document.body) : null}
    </>
  );
};

/* ── My Alerts page (route "salesalerts") ── */
const SLS_FILTERS = [["unread", "Unread"], ["all", "All"], ["service", "Service"], ["trades", "Trades"]];
const slsIsTrade = (a) => /^trade_/.test(a.kind);
const SalesAlertsPage = ({ onClose, go }) => {
  const st = slsUseStore();
  slsGo = go || slsGo;
  const [filter, setFilter] = React.useState("all");
  const [showDismissed, setShowDismissed] = React.useState(false);
  const [withDismissed, setWithDismissed] = React.useState(null);   // list incl. dismissed (fetched when the toggle is on)
  React.useEffect(() => { slsLoadMine(); }, []);
  React.useEffect(() => {
    if (!showDismissed || st.meStatus !== "on") { setWithDismissed(null); return; }
    let alive = true;
    slsApi("/sales-alerts/mine?includeDismissed=1&limit=200").then((r) => { if (alive) setWithDismissed(((r && r.alerts) || []).map(slsApplyOverride)); }, () => { if (alive) setWithDismissed([]); });
    return () => { alive = false; };
  }, [showDismissed, st.version, st.meStatus]);
  if (st.meStatus === "off") {
    return (
      <div id="sls-alerts-page">
        <div style={{ fontSize: 22, fontWeight: 700, color: "var(--jb-navy)" }}>My Alerts</div>
        <div id="sls-alerts-unavailable" style={{ marginTop: 12, padding: 14, background: "var(--jb-surface)", border: "1px solid var(--jb-border)", borderRadius: 8, fontSize: 13 }}>
          This needs the latest server update. Ask your administrator.
        </div>
      </div>
    );
  }
  const base = showDismissed && withDismissed ? withDismissed : st.alerts;
  const list = base.filter((a) => filter === "all" ? true : filter === "unread" ? a.unread : filter === "trades" ? slsIsTrade(a) : !slsIsTrade(a));
  const empty = {
    unread: "No unread alerts. You are all caught up.",
    all: "No alerts. You will see one here when a customer of yours books service or a trade gets an offer.",
    service: "No service alerts. You will see one when a customer of yours, or a customer up for grabs, books service.",
    trades: "No trade alerts. You will see one when a manager sets an offer on a trade you sent.",
  }[filter];
  return (
    <div id="sls-alerts-page">
      <div style={{ display: "flex", alignItems: "flex-start", gap: 12, flexWrap: "wrap" }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 22, fontWeight: 700, color: "var(--jb-navy)" }}>My Alerts</div>
          <div style={{ fontSize: 12, color: "var(--jb-text-dim)", maxWidth: 620, lineHeight: 1.45 }}>
            Service visits of your customers and of customers up for grabs, trade offers and claim reminders. New ones also show on the 🔔 at the top.
          </div>
        </div>
        <div style={{ flex: 1 }} />
        <button type="button" id="sls-alerts-readall" className="k2b-button" onClick={() => slsMarkAllRead()} disabled={!st.unread}>Mark all read</button>
      </div>
      <div className="sls-chips">
        {SLS_FILTERS.map((f) => (
          <button key={f[0]} type="button" data-filter={f[0]} className={"sls-chip" + (filter === f[0] ? " on" : "")} onClick={() => setFilter(f[0])}>
            {f[1]}{f[0] === "unread" && st.unread ? " (" + st.unread + ")" : ""}
          </button>
        ))}
        <label style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 12, marginLeft: 6, color: "var(--jb-text-dim)" }}>
          <input type="checkbox" id="sls-alerts-dismissed" checked={showDismissed} onChange={(e) => setShowDismissed(e.target.checked)} />
          Show dismissed
        </label>
      </div>
      {st.error && !st.loaded ? (
        <div id="sls-alerts-error" style={{ padding: 14, color: "var(--jb-red, #A02234)", fontSize: 13 }}>Alerts are not available right now. They will load when the server answers.</div>
      ) : !st.loaded && st.meStatus !== "on" ? (
        <div style={{ padding: 14, color: "var(--jb-text-dim)", fontSize: 13 }}>Loading…</div>
      ) : (
        <div className="sls-page-list">
          {list.length === 0
            ? <div className="sls-alerts-empty" data-filter={filter} style={{ padding: 22, fontSize: 13, color: "var(--jb-text-dim)" }}>{empty}</div>
            : list.map((a) => <SlsAlertItem key={a.id} a={a} />)}
        </div>
      )}
    </div>
  );
};

// slsGetMe lets other screens read the feature flags (Customers, Customer Ownership).
// (Export the SAME functions: a global function declaration IS the window property.)
Object.assign(window, {
  SlsBell, SalesAlertsPage, SlsAlertItem, slsOpenCustomer, slsIsMgr, slsLogContact, slsRoleClass,
  slsGetMe, slsFmtDay, slsFmtTime, slsFmtPhone, slsFmtLocalDay, slsFmtStamp, slsPhoneViewport,
});