/* © 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 — Messaging Center (texting + email, consent-gated).
//   window.MessagingCenter({ onClose, go, embedded })   route suggestion: "messaging"
//   window.jbCanMessage()                                who may send (Admin, managers, Service, F&I)
//
// • Consent registry — per phone/email, channel, transactional vs marketing,
//   status, SOURCE and TIMESTAMP of consent, who recorded it. Stored in
//   DMS msgConsents (DMS._mutate) AND on the server (authoritative for sending).
//   Opt-outs go on the server suppression list.
// • STOP / STOPALL / UNSUBSCRIBE / CANCEL / END / QUIT texts are handled by the
//   server's Twilio webhook → suppression list; START / UNSTOP re-allows
//   transactional texts only.
// • Compose — the server refuses suppressed addresses, marketing without
//   recorded consent or without an approved marketing template, and never
//   reports "sent" unless a CONNECTED provider accepted the message.
// • History — server message log (incl. inbound keywords) + DMS messageLog.
// • Templates — approved transactional / marketing templates; admin edits.

const MC_SOURCES = ["Signed paper form", "Website form", "Credit application / buyer's order", "Text keyword (customer texted in)", "Verbal — recorded call", "Customer email request", "Other"];
const mcCanMessage = () => {
  const D = window.DMS; if (!D) return false;
  if (D.isAdmin && D.isAdmin()) return true;
  const r = String((D.userRole && D.userRole()) || "");
  return /manager|service|f\s*&\s*i/i.test(r);
};
const mcIsAdmin = () => !!(window.DMS && window.DMS.isAdmin && window.DMS.isAdmin());
const mcNorm = (channel, a) => {
  const s = String(a == null ? "" : a).trim();
  if (channel === "email") return s.toLowerCase();
  const digits = s.replace(/\D/g, "");
  if (/^\+[1-9][0-9]{7,14}$/.test(s.replace(/[^0-9+]/g, ""))) return s.replace(/[^0-9+]/g, "");
  if (digits.length === 10) return "+1" + digits;
  if (digits.length === 11 && digits[0] === "1") return "+" + digits;
  return digits ? "+" + digits : "";
};
const mcFmt = (d) => d ? new Date(d).toLocaleString([], { month: "short", day: "numeric", year: "2-digit", hour: "numeric", minute: "2-digit" }) : "—";
const mcTypeTag = (t) => t === "marketing"
  ? <span style={{ background: "#FFF1E0", color: "#A65300", border: "1px solid #F5C58A", fontSize: 10.5, fontWeight: 800, borderRadius: 4, padding: "1px 6px", letterSpacing: 0.4 }}>MARKETING</span>
  : <span style={{ background: "#E5EFFA", color: "#1B4D8A", border: "1px solid #A9C6EA", fontSize: 10.5, fontWeight: 800, borderRadius: 4, padding: "1px 6px", letterSpacing: 0.4 }}>TRANSACTIONAL</span>;
const mcStatusTag = (s) => {
  const m = { "opted-in": ["#E6F7EC", "#0E7A37", "Opted in"], "opted-out": ["#FDECEA", "#B23A2E", "Opted out"], suppressed: ["#FDECEA", "#B23A2E", "Suppressed"] }[s] || ["#EEF0F3", "#666", "Unknown"];
  return <span style={{ background: m[0], color: m[1], fontSize: 11, fontWeight: 700, borderRadius: 999, padding: "1px 8px" }}>{m[2]}</span>;
};
const mcInp = { boxSizing: "border-box", padding: "6px 8px", border: "1px solid #C8CCD2", borderRadius: 4, fontSize: 12.5 };
const mcTh = { padding: "5px 8px", textAlign: "left", color: "#888", fontWeight: 600, fontSize: 11 };
const mcTd = { padding: "5px 8px", borderTop: "1px solid #F0F1F4", fontSize: 12, verticalAlign: "top" };

// mirror a consent into DMS msgConsents (shared, synced collection)
const mcMirrorConsent = (rec) => {
  const D = window.DMS; if (!D || !D._mutate) return;
  D._mutate((state) => {
    state.msgConsents = state.msgConsents || [];
    const id = rec.channel + ":" + rec.address + ":" + rec.type;
    const i = state.msgConsents.findIndex(x => x.id === id);
    const row = { ...(i >= 0 ? state.msgConsents[i] : {}), ...rec, id };
    if (i >= 0) state.msgConsents[i] = row; else state.msgConsents.unshift(row);
  });
};
const mcLogLocal = (entry) => {
  const D = window.DMS; if (!D || !D._mutate) return;
  D._mutate((state) => {
    state.messageLog = state.messageLog || [];
    state.messageLog.unshift({ id: (D._uid ? D._uid("MSG") : "MSG-" + Date.now()), ts: new Date().toISOString(), by: D.userId ? D.userId() : "", ...entry });
    if (state.messageLog.length > 2000) state.messageLog.length = 2000;
  });
};

const MessagingCenter = ({ onClose, go, embedded }) => {
  const api = window.k2bIntApi;
  const D = window.DMS;
  const canSend = mcCanMessage();
  const admin = mcIsAdmin();
  const [tab, setTab] = React.useState("compose");
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => (D && D.subscribe ? D.subscribe(force) : undefined), []);
  const [srv, setSrv] = React.useState({ consent: [], suppression: [], templates: [], log: [], providers: [], err: "" });
  const reload = React.useCallback(async () => {
    if (!api) return;
    const [c, s, t, l, st] = await Promise.all([api("/messages/consent"), api("/messages/suppression"), api("/messages/templates"), api("/messages/log?limit=300"), api("/status-summary")]);
    const err = [c, s, t, l].filter(r => !r.ok).map(r => r.error)[0] || "";
    setSrv({ consent: c.ok ? c.data.consent : [], suppression: s.ok ? s.data.suppression : [], templates: t.ok ? t.data.templates : [], log: l.ok ? l.data.log : [], providers: st.ok ? st.data.providers : [], err });
  }, []);
  React.useEffect(() => { reload(); }, [reload]);

  if (!canSend) {
    return <div style={{ padding: 20, fontSize: 13, color: "#666" }}>Messaging is limited to managers, service and F&amp;I. Ask a manager to text or email a customer.</div>;
  }
  if (!api) return <div style={{ padding: 20, color: "#888" }}>ConnectedApps.jsx.txt (integration client) is not loaded.</div>;

  const supKey = (ch, a) => ch + "|" + a;
  const supSet = new Set((srv.suppression || []).map(x => supKey(x.channel, x.address)));
  const consentOf = (ch, addr, type) => {
    if (supSet.has(supKey(ch, addr))) return "suppressed";
    const r = (srv.consent || []).find(x => x.channel === ch && x.address === addr && x.msg_type === type);
    return r ? r.status : "unknown";
  };
  const provFor = (ch) => (srv.providers || []).find(p => p.id === (ch === "sms" ? "twilio" : "email")) || { status: "not_configured" };

  const tabs = [["compose", "Compose"], ["consent", "Consent registry"], ["history", "Message history"], ["templates", "Approved templates"], ["suppression", "Suppression list"]];
  const body = (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div data-mc-note="1" style={{ fontSize: 11.5, color: "#5A4A00", background: "#FFF8DB", border: "1px solid #F0DC8A", borderRadius: 6, padding: "7px 10px", lineHeight: 1.5 }}>
        This tool helps you follow your consent policy — it records consent (source, time, who), honors STOP-style opt-outs and the suppression list,
        and keeps transactional and marketing messages separate. <b>It does not by itself make the dealership legally compliant</b> (TCPA, CAN-SPAM, carrier/A2P rules, state law) — have counsel review your policy, templates and consent language.
      </div>
      <div style={{ display: "flex", gap: 4, borderBottom: "1px solid #E2E5EA", flexWrap: "wrap" }}>
        {tabs.map(([k, l]) => (
          <button key={k} data-mc-tab={k} onClick={() => setTab(k)}
                  style={{ border: 0, borderBottom: tab === k ? "3px solid var(--jb-navy, #11337A)" : "3px solid transparent", background: "transparent", padding: "7px 12px", cursor: "pointer",
                           fontWeight: tab === k ? 800 : 500, color: tab === k ? "var(--jb-navy, #11337A)" : "#444", fontSize: 13 }}>{l}</button>
        ))}
        <div style={{ flex: 1 }} />
        <button className="k2b-button small" onClick={reload}>↻ Refresh</button>
      </div>
      {srv.err && <div style={{ fontSize: 12, color: "#B23A2E" }}>Server: {srv.err}</div>}
      {tab === "compose" && <McCompose srv={srv} consentOf={consentOf} provFor={provFor} reload={reload} />}
      {tab === "consent" && <McConsent srv={srv} reload={reload} />}
      {tab === "history" && <McHistory srv={srv} />}
      {tab === "templates" && <McTemplates srv={srv} admin={admin} reload={reload} />}
      {tab === "suppression" && <McSuppression srv={srv} admin={admin} reload={reload} />}
    </div>
  );
  if (embedded) return (
    <div>
      <div style={{ fontSize: 18, fontWeight: 800, color: "var(--jb-navy, #11337A)", marginBottom: 8 }}>Messaging &amp; Consent</div>
      {body}
    </div>
  );
  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 1180, height: "calc(100vh - 110px)", margin: "0 auto", display: "flex", flexDirection: "column", background: "var(--jb-surface, #F4F4F4)", fontFamily: "var(--jb-font)" }}>
      <K2BTitlebar title="Messaging Center" icon="store" onClose={onClose} />
      <div style={{ flex: 1, overflow: "auto", padding: 18 }}>{body}</div>
      <div style={{ borderTop: "1px solid var(--jb-border)", padding: "8px 16px", display: "flex", gap: 6 }}>
        <K2BButton small onClick={onClose}>ESC-Close</K2BButton>
      </div>
    </div>
  );
};

/* ─── customer picker (DMS customers) ─────────────────────────────────── */
const mcCustName = (c) => [c.lastName, c.firstName].filter(Boolean).join(", ") || c.name || c.custNum || "";
const McCustomerPick = ({ onPick }) => {
  const [q, setQ] = React.useState("");
  const list = React.useMemo(() => {
    const t = q.trim().toLowerCase(); if (t.length < 2) return [];
    const all = Object.values((window.DMS && window.DMS.customers && window.DMS.customers()) || {});
    return all.filter(c => (window.DMS && window.DMS.custQueryHit ? window.DMS.custQueryHit(q, c.custNum, [c.phone, c.cell]) : false) || [c.lastName, c.firstName, c.name, c.custNum, c.phone, c.cell, c.email].concat(Array.isArray(c.aliases) ? c.aliases : [], Array.isArray(c.names) ? c.names.map((n) => n && [n.first, n.last].filter(Boolean).join(" ")) : []).filter(Boolean).join(" ").toLowerCase().includes(t)).slice(0, 8);   // RC30 (cn): + old numbers, household names
  }, [q]);
  return (
    <div style={{ position: "relative" }}>
      <input autoComplete="off" data-lpignore="true" data-1p-ignore="true" data-form-type="other" name="k2b-find-messagingcenter-1" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Find customer (name / phone / email)…" style={{ ...mcInp, width: 260 }} />
      {list.length > 0 && (
        <div style={{ position: "absolute", zIndex: 5, top: "100%", left: 0, width: 360, background: "#FFF", border: "1px solid #C8CCD2", borderRadius: 4, boxShadow: "0 4px 12px rgba(0,0,0,0.12)" }}>
          {list.map(c => (
            <div key={c.custNum} onClick={() => { onPick(c); setQ(""); }} style={{ padding: "6px 9px", cursor: "pointer", fontSize: 12, borderTop: "1px solid #F0F1F4" }}>
              <b>{mcCustName(c)}</b> · #{c.custNum}{c.cell || c.phone ? " · " + (c.cell || c.phone) : ""} {c.email ? "· " + c.email : ""}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

/* ─── Compose ─────────────────────────────────────────────────────────── */
const McCompose = ({ srv, consentOf, provFor, reload }) => {
  const [channel, setChannel] = React.useState("sms");
  const [to, setTo] = React.useState("");
  const [cust, setCust] = React.useState(null);
  const [type, setType] = React.useState("transactional");
  const [tplId, setTplId] = React.useState("");
  const [subject, setSubject] = React.useState("");
  const [text, setText] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [res, setRes] = React.useState(null);
  const addr = mcNorm(channel, to);
  const tpls = (srv.templates || []).filter(t => t.approved && t.channel === channel && t.msg_type === type);
  const consent = addr ? consentOf(channel, addr, type) : "unknown";
  const prov = provFor(channel);
  const blocks = [];
  if (!addr) blocks.push("Enter a " + (channel === "sms" ? "mobile number" : "email address") + ".");
  if (consent === "suppressed") blocks.push("This address is on the suppression list (opted out) — nothing can be sent.");
  if (consent === "opted-out") blocks.push("Customer opted out of " + type + " " + (channel === "sms" ? "texts" : "email") + ".");
  if (type === "marketing" && consent === "unknown") blocks.push("No recorded marketing consent — record it in the Consent registry first.");
  if (type === "marketing" && !tplId) blocks.push("Marketing messages must use an approved marketing template.");
  if (!text.trim()) blocks.push("Message is empty.");
  const pickTpl = (id) => {
    setTplId(id);
    const t = (srv.templates || []).find(x => x.id === id);
    if (t) {
      const dealer = (window.K2BStore && window.K2BStore.branding().dba) || "";   // RC35 (brd, D52): the store's everyday name
      setText(String(t.body || "").split("{dealer}").join(dealer)); setSubject(String(t.subject || "").split("{dealer}").join(dealer));
    }
  };
  const send = async () => {
    setBusy(true); setRes(null);
    const r = await window.k2bIntApi("/messages/send", "POST", { channel, to, msg_type: type, templateId: tplId || undefined, body: text, subject: subject || undefined, customer: cust ? cust.custNum : undefined });
    setBusy(false);
    const d = r.data || {};
    const status = d.sent ? "sent" : d.reason === "provider-not-connected" ? "not-sent" : r.status === 409 ? "refused" : "failed";
    setRes({ sent: !!d.sent, t: d.sent ? "Sent" + (d.providerRef ? " (ref " + d.providerRef + ")" : "") + "." : (d.error || r.error || "Not sent.") });
    mcLogLocal({ channel, to: addr, custNum: cust ? cust.custNum : "", type, templateId: tplId || "", body: text.slice(0, 500), status, reason: d.reason || "", serverLogId: d.logId || null });
    window.k2bToast && window.k2bToast(d.sent ? "Message sent." : "Not sent — " + String(d.reason || "see details").replace(/-/g, " "), d.sent ? "ok" : "warn", 3600);
    reload();
  };
  const provChip = window.K2BIntChip ? <window.K2BIntChip p={{ ...prov, id: channel === "sms" ? "twilio" : "email", kind: "messaging" }} /> : prov.status;
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 16, alignItems: "start" }}>
      <div style={{ background: "#FFF", border: "1px solid #E2E5EA", borderRadius: 8, padding: 14, display: "flex", flexDirection: "column", gap: 10 }}>
        <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
          <select value={channel} onChange={(e) => { setChannel(e.target.value); setTplId(""); }} style={mcInp}><option value="sms">Text (SMS)</option><option value="email">Email</option></select>
          <McCustomerPick onPick={(c) => { setCust(c); setTo(channel === "sms" ? (c.cell || c.phone || "") : (c.email || "")); }} />   {/* RC30 (cn): a customer # is never a phone to text */}
          {cust && <span style={{ fontSize: 12 }}>{mcCustName(cust)}</span>}
        </div>
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11.5, fontWeight: 600, color: "#555" }}>To</span>
          <input data-mc="to" value={to} onChange={(e) => setTo(e.target.value)} placeholder={channel === "sms" ? "(573) 555-0100" : "customer@example.com"} style={mcInp} />
        </label>
        <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
          <span style={{ fontSize: 11.5, fontWeight: 600, color: "#555" }}>Message type</span>
          <label style={{ fontSize: 12.5 }}><input type="radio" data-mc="transactional" checked={type === "transactional"} onChange={() => { setType("transactional"); setTplId(""); }} /> {mcTypeTag("transactional")} about their vehicle / deal / RO</label>
          <label style={{ fontSize: 12.5 }}><input type="radio" data-mc="marketing" checked={type === "marketing"} onChange={() => { setType("marketing"); setTplId(""); }} /> {mcTypeTag("marketing")} offers / promotions</label>
        </div>
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11.5, fontWeight: 600, color: "#555" }}>Approved template {type === "marketing" ? <b style={{ color: "#A65300" }}>(required for marketing)</b> : "(optional)"}</span>
          <select data-mc="tpl" value={tplId} onChange={(e) => pickTpl(e.target.value)} style={mcInp}>
            <option value="">{tpls.length ? "— choose —" : "— no approved " + type + " " + channel + " templates —"}</option>
            {tpls.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
          </select>
        </label>
        {channel === "email" && <input value={subject} onChange={(e) => setSubject(e.target.value)} placeholder="Subject" style={mcInp} />}
        <textarea data-mc="body" value={text} onChange={(e) => setText(e.target.value)} rows={5} style={{ ...mcInp, fontFamily: "var(--jb-font)", resize: "vertical" }}
                  placeholder="Replace {placeholders} before sending." />
        {/\{[a-z]+\}/i.test(text) && <div style={{ fontSize: 11.5, color: "#9A6700" }}>Fill in the {"{placeholders}"} before sending.</div>}
        <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
          <button className="k2b-button" data-mc="send" style={{ flex: "none", whiteSpace: "nowrap", fontWeight: 700, background: blocks.length ? undefined : "var(--jb-yellow, #FFD24A)" }} disabled={busy || blocks.length > 0} onClick={send}>
            {busy ? "Sending…" : "Send " + (type === "marketing" ? "marketing " : "transactional ") + (channel === "sms" ? "text" : "email")}
          </button>
          <span style={{ fontSize: 11.5, color: "#888" }}>The server re-checks consent, suppression and provider status before anything goes out.</span>
        </div>
        {res && <div data-mc="result" style={{ fontSize: 12.5, padding: "7px 10px", borderRadius: 5, background: res.sent ? "#E6F7EC" : "#FDECEA", color: res.sent ? "#0E5A2A" : "#8A2A20" }}>{res.t}</div>}
      </div>
      <div style={{ background: "#FFF", border: "1px solid #E2E5EA", borderRadius: 8, padding: 14, display: "flex", flexDirection: "column", gap: 8, fontSize: 12.5 }}>
        <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", color: "#888" }}>Pre-send checks</div>
        <div>Provider: {provChip}</div>
        <div>Consent for {type}: {addr ? mcStatusTag(consent) : "—"}</div>
        {blocks.length > 0
          ? <ul data-mc="blocks" style={{ margin: 0, paddingLeft: 18, color: "#8A2A20" }}>{blocks.map((b, i) => <li key={i}>{b}</li>)}</ul>
          : <div style={{ color: "#0E7A37" }}>Consent checks pass.</div>}
        {prov.status !== "connected" && <div style={{ color: "#9A6700", fontSize: 11.5 }}>The {channel === "sms" ? "texting" : "email"} provider is not connected — a send will be refused as "not sent", never faked.</div>}
        <div style={{ fontSize: 11, color: "#888", lineHeight: 1.45 }}>
          <b>Transactional</b> = information the customer expects about their own vehicle, RO, appointment or deal. <b>Marketing</b> = offers, specials, promotions —
          requires recorded marketing consent and an approved marketing template; texts carry "Reply STOP to opt out".
        </div>
      </div>
    </div>
  );
};

/* ─── Consent registry ────────────────────────────────────────────────── */
const mcSupHas = (srv, r) => (srv.suppression || []).some(s => s.channel === r.channel && s.address === r.address);
const McConsent = ({ srv, reload }) => {
  const [f, setF] = React.useState({ channel: "sms", address: "", type: "transactional", status: "opted-in", source: MC_SOURCES[0], detail: "", suppressAll: false });
  const [cust, setCust] = React.useState(null);
  const [msg, setMsg] = React.useState(null);
  const [filter, setFilter] = React.useState("");
  const set = (k, v) => setF(x => ({ ...x, [k]: v }));
  const record = async () => {
    setMsg(null);
    const source = f.source + (f.detail.trim() ? " — " + f.detail.trim() : "");
    const r = await window.k2bIntApi("/messages/consent", "POST", { channel: f.channel, address: f.address, msg_type: f.type, status: f.status, source, customer: cust ? cust.custNum : undefined, suppressAll: f.suppressAll });
    const address = mcNorm(f.channel, f.address);
    if (!r.ok) { setMsg({ bad: true, t: r.error }); return; }
    mcMirrorConsent({ custNum: cust ? cust.custNum : "", name: cust ? mcCustName(cust) : "", channel: f.channel, address, type: f.type, status: f.status, source, at: new Date().toISOString(), by: window.DMS && window.DMS.userId ? window.DMS.userId() : "", server: true });
    setMsg({ bad: false, t: "Recorded: " + f.status + " for " + f.type + " " + (f.channel === "sms" ? "texts" : "email") + " (" + address + ")." + (f.status === "opted-out" && (f.type === "transactional" || f.suppressAll) ? " Added to the suppression list." : "") });
    setF(x => ({ ...x, address: "", detail: "" })); setCust(null);
    reload();
  };
  // merged view: server rows (authoritative) + DMS msgConsents not yet on the server + suppression-only rows
  const local = (window.DMS && window.DMS.msgConsents && window.DMS.msgConsents()) || [];
  const rows = (srv.consent || []).map(r => ({ channel: r.channel, address: r.address, type: r.msg_type, status: r.status, source: r.source, at: r.at, by: r.recorded_by, custNum: r.customer || "", server: true }));
  local.forEach(l => { if (!rows.some(r => r.channel === l.channel && r.address === l.address && r.type === l.type)) rows.push({ ...l, server: false }); });
  (srv.suppression || []).forEach(s => { if (!rows.some(r => r.channel === s.channel && r.address === s.address)) rows.push({ channel: s.channel, address: s.address, type: "—", status: "suppressed", source: s.reason + " · " + (s.source || ""), at: s.at, by: "", server: true }); });
  const custs = (window.DMS && window.DMS.customers && window.DMS.customers()) || {};
  const t = filter.trim().toLowerCase();
  const shown = rows.filter(r => !t || [r.address, r.source, r.by, (custs[r.custNum] ? mcCustName(custs[r.custNum]) : "")].join(" ").toLowerCase().includes(t) || (window.DMS && window.DMS.custQueryHit ? window.DMS.custQueryHit(t, r.custNum, r.channel === "sms" ? [r.address] : []) : false));   // RC31 (fx31, F6)
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ background: "#FFF", border: "1px solid #E2E5EA", borderRadius: 8, padding: 14, display: "flex", flexDirection: "column", gap: 8 }}>
        <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", color: "#888" }}>Record consent or an opt-out</div>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
          <McCustomerPick onPick={(c) => { setCust(c); set("address", f.channel === "sms" ? (c.cell || c.phone || "") : (c.email || "")); }} />   {/* RC30 (cn): a customer # is never an address */}
          <select value={f.channel} onChange={(e) => set("channel", e.target.value)} style={mcInp}><option value="sms">Text (SMS)</option><option value="email">Email</option></select>
          <input data-mcc="address" value={f.address} onChange={(e) => set("address", e.target.value)} placeholder={f.channel === "sms" ? "mobile number" : "email"} style={{ ...mcInp, width: 200 }} />
          <select data-mcc="type" value={f.type} onChange={(e) => set("type", e.target.value)} style={mcInp}><option value="transactional">Transactional</option><option value="marketing">Marketing</option></select>
          <select data-mcc="status" value={f.status} onChange={(e) => set("status", e.target.value)} style={mcInp}><option value="opted-in">Opted in</option><option value="opted-out">Opted out</option></select>
        </div>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
          <span style={{ fontSize: 11.5, fontWeight: 600, color: "#555" }}>Source</span>
          <select data-mcc="source" value={f.source} onChange={(e) => set("source", e.target.value)} style={mcInp}>{MC_SOURCES.map(s => <option key={s}>{s}</option>)}</select>
          <input value={f.detail} onChange={(e) => set("detail", e.target.value)} placeholder="detail (form #, call ID, URL…)" style={{ ...mcInp, flex: 1, minWidth: 180 }} />
          {f.status === "opted-out" && f.type === "marketing" && <label style={{ fontSize: 12 }}><input type="checkbox" checked={f.suppressAll} onChange={(e) => set("suppressAll", e.target.checked)} /> stop ALL messages to this address</label>}
          <button className="k2b-button" data-mcc="record" style={{ fontWeight: 700, background: "var(--jb-yellow, #FFD24A)" }} disabled={!f.address.trim()} onClick={record}>Record</button>
        </div>
        {cust && <div style={{ fontSize: 12 }}>Customer: <b>{mcCustName(cust)}</b> (Customer # {cust.custNum})</div>}
        {msg && <div data-mcc="msg" style={{ fontSize: 12, color: msg.bad ? "#B23A2E" : "#0E7A37" }}>{msg.t}</div>}
      </div>
      <div style={{ background: "#FFF", border: "1px solid #E2E5EA", borderRadius: 8, overflow: "hidden" }}>
        <div style={{ display: "flex", gap: 8, padding: "8px 12px", alignItems: "center", background: "var(--jb-surface-2, #F1F3F6)" }}>
          <span style={{ fontSize: 12, fontWeight: 700, textTransform: "uppercase", color: "var(--jb-text-dim)" }}>Consent registry</span>
          <span style={{ fontSize: 11, color: "#888" }}>{rows.length} record(s)</span>
          <div style={{ flex: 1 }} />
          <input autoComplete="off" data-lpignore="true" data-1p-ignore="true" data-form-type="other" name="k2b-find-messagingcenter-2" value={filter} onChange={(e) => setFilter(e.target.value)} placeholder="filter" style={{ ...mcInp, width: 180 }} />
        </div>
        <table style={{ width: "100%", borderCollapse: "collapse" }}>
          <thead><tr><th style={mcTh}>Customer</th><th style={mcTh}>Address</th><th style={mcTh}>Channel</th><th style={mcTh}>Type</th><th style={mcTh}>Status</th><th style={mcTh}>Source</th><th style={mcTh}>When</th><th style={mcTh}>Recorded by</th><th style={mcTh}>Server</th></tr></thead>
          <tbody>
            {shown.map((r, i) => (
              <tr key={i} data-consent-row={r.address}>
                <td style={mcTd}>{custs[r.custNum] ? mcCustName(custs[r.custNum]) : (r.name || "")}</td>
                <td style={{ ...mcTd, fontFamily: "var(--jb-mono, monospace)" }}>{r.address}</td>
                <td style={mcTd}>{r.channel === "sms" ? "Text" : "Email"}</td>
                <td style={mcTd}>{r.type === "—" ? "all" : mcTypeTag(r.type)}</td>
                <td style={mcTd}>{mcStatusTag(r.status === "suppressed" || mcSupHas(srv, r) ? "suppressed" : r.status)}</td>
                <td style={mcTd}>{r.source}</td>
                <td style={mcTd}>{mcFmt(r.at)}</td>
                <td style={mcTd}>{r.by}</td>
                <td style={mcTd}>{r.server ? "✓" : <span title="Only in this DMS — not yet on the server; sending checks the server copy" style={{ color: "#B23A2E" }}>✕</span>}</td>
              </tr>
            ))}
            {!shown.length && <tr><td style={mcTd} colSpan={9}>No consent records yet.</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
};

/* ─── History ─────────────────────────────────────────────────────────── */
const McHistory = ({ srv }) => {
  const [q, setQ] = React.useState("");
  const t = q.trim().toLowerCase();
  const local = (window.DMS && window.DMS.messageLog && window.DMS.messageLog()) || [];
  // RC31 (fx31, F6): an old number / a phone in any format finds the customer's messages (the account's phones)
  const srvRows = (srv.log || []).filter(r => !t || [r.address, r.body, r.status, r.sent_by].join(" ").toLowerCase().includes(t) || (window.DMS && window.DMS.custQueryHit ? window.DMS.custQueryHit(t, null, [r.address]) : false));
  const locRows = local.filter(r => !t || [r.to, r.body, r.status, r.by].join(" ").toLowerCase().includes(t) || (window.DMS && window.DMS.custQueryHit ? window.DMS.custQueryHit(t, r.custNum, [r.to]) : false)).slice(0, 300);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <input autoComplete="off" data-lpignore="true" data-1p-ignore="true" data-form-type="other" name="k2b-find-messagingcenter-3" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Filter by number, email, text, status…" style={{ ...mcInp, width: 320 }} />
      <div style={{ background: "#FFF", border: "1px solid #E2E5EA", borderRadius: 8, overflow: "auto", maxHeight: 360 }}>
        <div style={{ padding: "8px 12px", fontSize: 12, fontWeight: 700, textTransform: "uppercase", color: "var(--jb-text-dim)", background: "var(--jb-surface-2, #F1F3F6)" }}>Server message log — outbound attempts and inbound texts (STOP / START)</div>
        <table style={{ width: "100%", borderCollapse: "collapse" }}>
          <thead><tr><th style={mcTh}>When</th><th style={mcTh}>Dir</th><th style={mcTh}>Address</th><th style={mcTh}>Type</th><th style={mcTh}>Status</th><th style={mcTh}>Message</th><th style={mcTh}>By</th></tr></thead>
          <tbody>{srvRows.map(r => (
            <tr key={r.id} data-log-row={r.status}>
              <td style={mcTd}>{mcFmt(r.ts)}</td><td style={mcTd}>{r.direction === "in" ? "⇦ in" : "⇨ out"}</td>
              <td style={{ ...mcTd, fontFamily: "var(--jb-mono, monospace)" }}>{r.address}</td>
              <td style={mcTd}>{r.msg_type ? mcTypeTag(r.msg_type) : ""}</td>
              <td style={{ ...mcTd, fontWeight: 700, color: r.status === "sent" ? "#0E7A37" : /refused|failed|not-sent|opt-out/.test(r.status) ? "#B23A2E" : "#555" }}>{r.status}{r.error ? <div style={{ fontWeight: 400, color: "#888" }}>{r.error}</div> : null}</td>
              <td style={{ ...mcTd, maxWidth: 360, overflowWrap: "anywhere" }}>{r.body}</td><td style={mcTd}>{r.sent_by}</td>
            </tr>))}
            {!srvRows.length && <tr><td style={mcTd} colSpan={7}>No messages yet.</td></tr>}
          </tbody>
        </table>
      </div>
      <div style={{ background: "#FFF", border: "1px solid #E2E5EA", borderRadius: 8, overflow: "auto", maxHeight: 260 }}>
        <div style={{ padding: "8px 12px", fontSize: 12, fontWeight: 700, textTransform: "uppercase", color: "var(--jb-text-dim)", background: "var(--jb-surface-2, #F1F3F6)" }}>DMS message log (linked to customers)</div>
        <table style={{ width: "100%", borderCollapse: "collapse" }}>
          <thead><tr><th style={mcTh}>When</th><th style={mcTh}>To</th><th style={mcTh}>Customer</th><th style={mcTh}>Type</th><th style={mcTh}>Status</th><th style={mcTh}>By</th></tr></thead>
          <tbody>{locRows.map(r => (
            <tr key={r.id}><td style={mcTd}>{mcFmt(r.ts)}</td><td style={{ ...mcTd, fontFamily: "var(--jb-mono, monospace)" }}>{r.to}</td><td style={mcTd}>{r.custNum}</td>
              <td style={mcTd}>{r.type ? mcTypeTag(r.type) : ""}</td><td style={mcTd}>{r.status}{r.reason ? " — " + r.reason : ""}</td><td style={mcTd}>{r.by}</td></tr>))}
            {!locRows.length && <tr><td style={mcTd} colSpan={6}>No entries.</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
};

/* ─── Templates ───────────────────────────────────────────────────────── */
const McTemplates = ({ srv, admin, reload }) => {
  const blank = { id: "", name: "", channel: "sms", msg_type: "transactional", subject: "", body: "", approved: false };
  const [ed, setEd] = React.useState(null);
  const [err, setErr] = React.useState("");
  const save = async () => {
    setErr("");
    const r = await window.k2bIntApi("/messages/templates", "POST", ed);
    if (!r.ok) { setErr(r.error); return; }
    window.k2bToast && window.k2bToast("Template saved" + (ed.approved ? " and approved." : " (not approved — staff cannot use it yet)."), "ok");
    setEd(null); reload();
  };
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ fontSize: 12, color: "#666" }}>Only <b>approved</b> templates can be picked in Compose. Marketing always requires one. {admin ? "You can edit and approve templates." : "Templates are managed by an administrator."}</div>
      <div style={{ background: "#FFF", border: "1px solid #E2E5EA", borderRadius: 8, overflow: "hidden" }}>
        <table style={{ width: "100%", borderCollapse: "collapse" }}>
          <thead><tr><th style={mcTh}>Name</th><th style={mcTh}>Channel</th><th style={mcTh}>Type</th><th style={mcTh}>Text</th><th style={mcTh}>Status</th>{admin && <th style={mcTh}></th>}</tr></thead>
          <tbody>{(srv.templates || []).map(t => (
            <tr key={t.id} data-tpl={t.id}>
              <td style={mcTd}><b>{t.name}</b></td><td style={mcTd}>{t.channel === "sms" ? "Text" : "Email"}</td><td style={mcTd}>{mcTypeTag(t.msg_type)}</td>
              <td style={{ ...mcTd, maxWidth: 420 }}>{t.subject ? <div><i>{t.subject}</i></div> : null}{t.body}</td>
              <td style={mcTd}>{t.approved ? <span style={{ color: "#0E7A37", fontWeight: 700 }}>Approved{t.approved_by ? " · " + t.approved_by : ""}</span> : <span style={{ color: "#9A6700" }}>Draft — not approved</span>}</td>
              {admin && <td style={mcTd}><button className="k2b-button small" onClick={() => setEd({ id: t.id, name: t.name, channel: t.channel, msg_type: t.msg_type, subject: t.subject || "", body: t.body, approved: !!t.approved })}>Edit</button></td>}
            </tr>))}</tbody>
        </table>
      </div>
      {admin && !ed && <div><button className="k2b-button" onClick={() => setEd(blank)}>+ New template</button></div>}
      {admin && ed && (
        <div style={{ background: "#FFF", border: "1px solid #E2E5EA", borderRadius: 8, padding: 14, display: "flex", flexDirection: "column", gap: 8 }}>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            <input value={ed.name} onChange={(e) => setEd({ ...ed, name: e.target.value })} placeholder="Template name" style={{ ...mcInp, width: 260 }} />
            <select value={ed.channel} onChange={(e) => setEd({ ...ed, channel: e.target.value })} style={mcInp}><option value="sms">Text</option><option value="email">Email</option></select>
            <select value={ed.msg_type} onChange={(e) => setEd({ ...ed, msg_type: e.target.value })} style={mcInp}><option value="transactional">Transactional</option><option value="marketing">Marketing</option></select>
            {ed.channel === "email" && <input value={ed.subject} onChange={(e) => setEd({ ...ed, subject: e.target.value })} placeholder="Subject" style={{ ...mcInp, flex: 1 }} />}
          </div>
          <textarea value={ed.body} onChange={(e) => setEd({ ...ed, body: e.target.value })} rows={4} style={{ ...mcInp, fontFamily: "var(--jb-font)" }} placeholder="Use {dealer}, {ro}, {date}, {time}, {link}, {offer} placeholders." />
          <label style={{ fontSize: 12.5 }}><input type="checkbox" checked={ed.approved} onChange={(e) => setEd({ ...ed, approved: e.target.checked })} /> Approved for use (reviewed against the dealership's messaging policy)</label>
          {err && <div style={{ color: "#B23A2E", fontSize: 12 }}>{err}</div>}
          <div style={{ display: "flex", gap: 8 }}>
            <button className="k2b-button" style={{ fontWeight: 700, background: "var(--jb-yellow, #FFD24A)" }} onClick={save}>Save template</button>
            <button className="k2b-button" onClick={() => setEd(null)}>Cancel</button>
          </div>
        </div>
      )}
    </div>
  );
};

/* ─── Suppression list ────────────────────────────────────────────────── */
const McSuppression = ({ srv, admin, reload }) => {
  const [ch, setCh] = React.useState("sms");
  const [addr, setAddr] = React.useState("");
  const [reason, setReason] = React.useState("");
  const [err, setErr] = React.useState("");
  const add = async () => {
    setErr("");
    const r = await window.k2bIntApi("/messages/suppression", "POST", { channel: ch, address: addr, reason: reason || "do-not-contact request" });
    if (!r.ok) { setErr(r.error); return; }
    mcMirrorConsent({ channel: ch, address: mcNorm(ch, addr), type: "transactional", status: "opted-out", source: "suppression list: " + (reason || "do-not-contact request"), at: new Date().toISOString(), by: window.DMS && window.DMS.userId ? window.DMS.userId() : "", server: true });
    setAddr(""); setReason(""); reload();
  };
  const remove = async (s) => {
    const why = window.prompt("Remove " + s.address + " from the suppression list?\n\nOnly do this with the customer's documented request to receive messages again. Reason:");
    if (!why || !why.trim()) return;
    const r = await window.k2bIntApi("/messages/suppression/remove", "POST", { channel: s.channel, address: s.address, reason: why.trim() });
    if (!r.ok) { window.k2bToast && window.k2bToast(r.error, "warn"); return; }
    reload();
  };
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ fontSize: 12, color: "#666", lineHeight: 1.5 }}>
        Nothing — transactional or marketing — is sent to a suppressed address. Customers who text <b>STOP, STOPALL, UNSUBSCRIBE, CANCEL, END or QUIT</b> are added automatically;
        texting <b>START</b> or <b>UNSTOP</b> removes the block for transactional texts only (marketing consent must be recorded again).
      </div>
      <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap", background: "#FFF", border: "1px solid #E2E5EA", borderRadius: 8, padding: 12 }}>
        <select value={ch} onChange={(e) => setCh(e.target.value)} style={mcInp}><option value="sms">Text</option><option value="email">Email</option></select>
        <input value={addr} onChange={(e) => setAddr(e.target.value)} placeholder="number or email" style={{ ...mcInp, width: 200 }} />
        <input value={reason} onChange={(e) => setReason(e.target.value)} placeholder="reason (e.g. asked not to be contacted)" style={{ ...mcInp, flex: 1, minWidth: 200 }} />
        <button className="k2b-button" style={{ fontWeight: 700 }} disabled={!addr.trim()} onClick={add}>Add to suppression list</button>
        {err && <span style={{ color: "#B23A2E", fontSize: 12 }}>{err}</span>}
      </div>
      <div style={{ background: "#FFF", border: "1px solid #E2E5EA", borderRadius: 8, overflow: "hidden" }}>
        <table style={{ width: "100%", borderCollapse: "collapse" }}>
          <thead><tr><th style={mcTh}>Address</th><th style={mcTh}>Channel</th><th style={mcTh}>Reason</th><th style={mcTh}>Source</th><th style={mcTh}>Since</th>{admin && <th style={mcTh}></th>}</tr></thead>
          <tbody>{(srv.suppression || []).map((s, i) => (
            <tr key={i} data-sup={s.address}><td style={{ ...mcTd, fontFamily: "var(--jb-mono, monospace)" }}>{s.address}</td><td style={mcTd}>{s.channel === "sms" ? "Text" : "Email"}</td>
              <td style={mcTd}>{s.reason}</td><td style={mcTd}>{s.source}</td><td style={mcTd}>{mcFmt(s.at)}</td>
              {admin && <td style={mcTd}><button className="k2b-button small" onClick={() => remove(s)}>Remove…</button></td>}</tr>))}
            {!(srv.suppression || []).length && <tr><td style={mcTd} colSpan={6}>No suppressed addresses.</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
};

window.jbCanMessage = mcCanMessage;
Object.assign(window, { MessagingCenter });