/* © 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 */
// JBREWS DMS — Integrations.
//  • IntegrationsHub (route "integrations", everyone): read-only API-integration
//    status from the server + the vendor-site launchers (ConnectedApps.jsx.txt).
//  • IntegrationsAdminPanel (Settings → Integrations, ADMIN ONLY): per-provider
//    configuration, write-only secrets (stored encrypted on the server, never
//    sent back to a browser), enable/disable, REAL connection test, last
//    successful test, last error, activity log.
// A provider shows "Connected" only after the server's live test against that
// provider succeeded. Stored credentials, the enable switch, or server mock
// mode never count as connected.

// The old e-sign messaging settings kept a SendGrid key in this browser — purge it.
try { localStorage.removeItem("jbrews-msg-cfg"); } catch (e) {}

const IntegrationsHub = ({ onClose, go }) => {
  const admin = !!(window.DMS && window.DMS.isAdmin && window.DMS.isAdmin());
  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 1240, height: "calc(100vh - 110px)", margin: "0 auto",
                                          display: "flex", flexDirection: "column", background: "var(--jb-surface, #F4F4F4)", fontFamily: "var(--jb-font)" }}>
      <K2BTitlebar title="Integrations" icon="store" onClose={onClose} />

      <div style={{ flex: 1, overflow: "auto", padding: 18, display: "flex", flexDirection: "column", gap: 16 }}>
        <div style={{ fontSize: 12.5, color: "var(--jb-text-dim)", lineHeight: 1.5 }}>
          Two different things live here. <b>API integrations</b> are server-to-server connections (texting, email, RouteOne, CARFAX, vAuto, GM, and AI page reading for old reports) —
          an administrator configures them, and each one shows <b>Connected</b> only after a real test with the provider succeeds.
          <b> Vendor sites</b> below simply open the vendor's own website in a tab with your own login.
        </div>

        {window.IntegrationStatusStrip
          ? <window.IntegrationStatusStrip go={go} admin={admin} />
          : <div style={{ color: "#888", fontSize: 13 }}>Integration status unavailable — ConnectedApps.jsx.txt is not loaded.</div>}

        {window.ConnectedAppsPanel
          ? <window.ConnectedAppsPanel go={go} />
          : <div style={{ color: "#888", fontSize: 13 }}>Vendor site launchers unavailable — ConnectedApps.jsx.txt is not loaded.</div>}

        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          <K2BButton small onClick={() => go && go("routeone")}>⇪ RouteOne Module</K2BButton>
          <K2BButton small onClick={() => go && go("uploadtool")}>⇧ Import Legacy Data</K2BButton>
          {admin && <K2BButton small onClick={() => go && go("settings")}>Settings ▸ Integrations</K2BButton>}
        </div>
      </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>
  );
};

/* ─── Admin: one provider card ─────────────────────────────────────────── */
const intInp = { width: "100%", boxSizing: "border-box", padding: "6px 8px", border: "1px solid #C8CCD2", borderRadius: 4, fontSize: 12.5 };
// What a pasted key will look like after the SERVER cleans it (quotes, "Bearer ", header names, spaces and line breaks).
// Used only for the hint under the key box — the key itself is never shown, stored or logged here.
const intKeyHint = (raw) => {
  const t = String(raw || "");
  if (!t.trim()) return null;
  const cleaned = t.replace(/^\s*(x-api-key|authorization)\s*:\s*/i, "").replace(/\s+/g, "").replace(/^["'`]+|["'`]+$/g, "").replace(/^bearer/i, "").replace(/^["'`]+|["'`]+$/g, "");
  const notes = [];
  if (cleaned !== t.trim()) notes.push({ bad: false, t: "Spaces, line breaks, quotes and the word \"Bearer\" are removed for you." });
  if (!/^sk-ant-/.test(cleaned)) notes.push({ bad: true, t: "This does not look like an Anthropic key - they start with sk-ant-. Copy it again from console.anthropic.com > API keys." });
  else if (cleaned.length < 40) notes.push({ bad: true, t: "This key looks cut off (too short). Copy the whole key again." });
  return notes;
};
const IntProviderCard = ({ p, onChanged, onOpenMessaging, onShowLog, embedded, onOpenOldReports }) => {
  const api = window.k2bIntApi;
  const isAi = p.id === "anthropic";
  const [cfg, setCfg] = React.useState(p.config || {});
  const [sec, setSec] = React.useState({});         // typed secrets — never pre-filled
  const [busy, setBusy] = React.useState("");
  const [msg, setMsg] = React.useState(null);
  const [showMap, setShowMap] = React.useState(false);
  const [confirmRemove, setConfirmRemove] = React.useState(null);   // secret field name awaiting "Remove stored key" confirmation
  const aiv = isAi && window.useK2BAiStatus ? window.useK2BAiStatus() : null;
  React.useEffect(() => { setCfg(p.config || {}); }, [p.updatedAt]);
  const ftype = (f) => f.type || "text";
  const same = (f, a, b) => ftype(f) === "checkbox" ? (a === true || a === "true") === (b === true || b === "true") : String(a == null ? "" : a) === String(b == null ? "" : b);
  const dirty = Object.keys(sec).some(k => sec[k]) || p.fields.some(f => !f.secret && ftype(f) !== "readonly" && !same(f, cfg[f.f], (p.config || {})[f.f]));
  if (window.useK2BUnsaved) window.useK2BUnsaved("integration-" + p.id, { label: "Integrations — " + p.label.split(" —")[0], isDirty: () => dirty, discard: () => { setSec({}); setCfg(p.config || {}); } });   // RC35 (brd)
  const fmt = (d) => d ? new Date(d).toLocaleString([], { month: "short", day: "numeric", year: "numeric", hour: "numeric", minute: "2-digit" }) : "never";
  const shortName = p.label.split(" —")[0];
  const refreshAi = () => { if (isAi && window.K2BAiStatus) window.K2BAiStatus.refresh(); };
  const changed = (np) => { onChanged && onChanged(np); refreshAi(); };

  const save = async () => {
    setBusy("save"); setMsg(null);
    const secrets = {}; Object.keys(sec).forEach(k => { if (sec[k] && sec[k].trim()) secrets[k] = sec[k].trim(); });
    const config = {}; p.fields.forEach(f => { if (!f.secret && ftype(f) !== "readonly" && f.f in cfg) config[f.f] = cfg[f.f]; });
    const r = await api("/admin/" + p.id, "POST", { config, secrets });
    setBusy("");
    if (!r.ok) { setMsg({ bad: true, t: r.error || "Save failed" }); return; }
    setSec({});
    const miss = r.data.missing || [];
    const np = r.data.provider || p;
    const hint = np.secretHints && np.secretHints.apiKey ? " Key stored encrypted (" + np.secretHints.apiKey + ")." : "";
    setMsg({ bad: false, t: miss.length ? "Saved. Still missing: " + miss.join(", ") + "." : isAi ? "Saved." + hint + " Next: press Test connection - AI reading is not usable until a test succeeds." : "Saved (secrets encrypted on the server). Run Test connection — it is not connected until a test succeeds." });
    changed(np);
  };
  const toggle = async (on, quiet) => {
    setBusy("enable");
    const r = await api("/admin/" + p.id + "/enable", "POST", { enabled: on });
    setBusy("");
    if (!r.ok) { setMsg({ bad: true, t: r.error }); if (r.data && r.data.provider) changed(r.data.provider); return null; }
    changed(r.data.provider);
    return r.data.provider;
  };
  const test = async () => {
    setBusy("test"); setMsg(null);
    const r = await api("/admin/" + p.id + "/test", "POST", {});
    setBusy("");
    if (!r.ok) { setMsg({ bad: true, t: r.error || "Test failed" }); return; }
    const d = r.data;
    let text = (d.connected ? "Connected — " : "Not connected — ") + d.detail;
    if (d.stale) text += " (The settings changed while the test ran - press Test connection again.)";
    let np = d.provider;
    // AI Import has no other job than reading pages: a passing test with consent ticked switches it on, so "Connected" really means "usable".
    if (isAi && d.connected && np && !np.enabled && (np.config || {}).consent) {
      const after = await toggle(true, true);
      if (after) { np = after; text += " AI reading is now ON."; } else text += " It is still switched off - see the message above.";
    }
    setMsg({ bad: !d.connected, t: text });
    window.k2bToast && window.k2bToast(shortName + (d.connected ? ": connection test passed." : ": not connected — see the card."), d.connected ? "ok" : "warn", 3600);
    changed(np);
  };
  const removeSecret = async (field) => {
    setConfirmRemove(null); setBusy("remove"); setMsg(null);
    const r = await api("/admin/" + p.id + "/clear-secret", "POST", { field });
    setBusy("");
    if (!r.ok) { setMsg({ bad: true, t: r.error || "Could not remove the stored key" }); return; }
    setSec(s => { const n = { ...s }; delete n[field]; return n; });
    setMsg({ bad: false, t: "The stored key was removed and " + shortName + " was switched off. Paste a new key and press Save to use it again." });
    changed(r.data.provider);
  };

  const lab = { fontSize: 11.5, fontWeight: 600, color: "#555" };
  const helpSt = { fontSize: 11, color: "#777", lineHeight: 1.45, fontWeight: 400 };
  const renderField = (f) => {
    const t = ftype(f);
    const help = f.help ? <span data-help={p.id + "." + f.f} style={helpSt}>{f.help}</span> : null;
    if (t === "readonly") {
      const v = cfg[f.f]; if (!v) return null;
      return <div key={f.f} data-readonly={p.id + "." + f.f} style={{ fontSize: 11.5, color: "#555" }}><span style={{ color: "#888" }}>{f.label}:</span> <b>{/^\d{4}-\d{2}-\d{2}T/.test(String(v)) ? fmt(v) : String(v)}</b></div>;
    }
    if (t === "checkbox") {
      return (
        <label key={f.f} style={{ gridColumn: "1 / -1", display: "flex", gap: 8, alignItems: "flex-start", padding: "8px 10px", border: "1px solid " + (cfg[f.f] === true || cfg[f.f] === "true" ? "#9ED9B1" : "#E0C98A"), background: cfg[f.f] === true || cfg[f.f] === "true" ? "#F2FBF5" : "#FFFBEF", borderRadius: 6, cursor: "pointer" }}>
          <input type="checkbox" data-field={p.id + "." + f.f} name={p.id + "-" + f.f} checked={cfg[f.f] === true || cfg[f.f] === "true"} onChange={(e) => setCfg(c => ({ ...c, [f.f]: e.target.checked }))} style={{ marginTop: 2 }} />
          <span style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={{ ...lab, color: "#333", fontSize: 12.5 }}>{f.label}</span>{help}</span>
        </label>
      );
    }
    if (f.secret) {
      const stored = !!p.secretsSet[f.f];
      const hintTxt = (p.secretHints || {})[f.f];
      const kh = isAi && f.f === "apiKey" ? intKeyHint(sec[f.f]) : null;
      return (
        <div key={f.f} style={{ display: "flex", flexDirection: "column", gap: 3, gridColumn: f.removable ? "1 / -1" : undefined }}>
          <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
            <span style={lab}>{f.label}{f.req ? <span style={{ color: "#B23A2E" }}> *</span> : null}
              {stored
                ? <span data-stored={p.id + "." + f.f} style={{ marginLeft: 6, color: "#0E7A37", fontWeight: 700 }}>stored ✓{hintTxt ? <span data-hint={p.id + "." + f.f} style={{ marginLeft: 6, fontFamily: "var(--jb-mono, monospace)", fontWeight: 700 }}>{hintTxt}</span> : null}</span>
                : <span style={{ marginLeft: 6, color: "#999", fontWeight: 400 }}>not set</span>}
            </span>
            <input type="password" autoComplete={f.removable ? "off" : "new-password"} spellCheck={false} autoCapitalize="off" autoCorrect="off" data-secret={p.id + "." + f.f} name={p.id + "-" + f.f} value={sec[f.f] || ""}
                   placeholder={stored ? (f.removable ? "Paste a new key here to replace the stored one" : "•••••• stored — type to replace, blank keeps it") : (f.ph || "enter " + f.label)}
                   onChange={(e) => setSec(s => ({ ...s, [f.f]: e.target.value }))} style={intInp} />
          </label>
          {kh && kh.map((n, i) => <span key={i} data-keyhint={n.bad ? "bad" : "info"} style={{ fontSize: 11, color: n.bad ? "#B23A2E" : "#0E5A2A" }}>{n.bad ? "⚠ " : "✓ "}{n.t}</span>)}
          {help}
          {f.removable && stored && (
            <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
              <button type="button" className="k2b-button small" data-remove-secret={p.id + "." + f.f} disabled={!!busy} onClick={() => setConfirmRemove(f.f)} style={{ color: "#B23A2E" }}>Remove stored key</button>
              <span style={helpSt}>Switches {shortName} off until a new key is saved.</span>
            </div>
          )}
        </div>
      );
    }
    if (t === "select") {
      const cur = cfg[f.f] != null && cfg[f.f] !== "" ? cfg[f.f] : (f.default || "");
      return (
        <label key={f.f} style={{ display: "flex", flexDirection: "column", gap: 3, gridColumn: "1 / -1" }}>
          <span style={lab}>{f.label}{f.req ? <span style={{ color: "#B23A2E" }}> *</span> : null}</span>
          <select name={p.id + "-" + f.f} data-field={p.id + "." + f.f} value={cur} onChange={(e) => setCfg(c => ({ ...c, [f.f]: e.target.value }))} style={intInp}>
            {(f.options || []).map(o => <option key={o.value} value={o.value}>{o.label}{o.value === f.default ? "  (default)" : ""}</option>)}
          </select>
          {help}
        </label>
      );
    }
    if (t === "number") {
      return (
        <label key={f.f} style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={lab}>{f.label}{f.req ? <span style={{ color: "#B23A2E" }}> *</span> : null}</span>
          <input type="number" inputMode="numeric" min={f.min} max={f.max} step={1} name={p.id + "-" + f.f} data-field={p.id + "." + f.f} value={cfg[f.f] == null ? "" : cfg[f.f]} placeholder={f.default || f.ph || ""}
                 onChange={(e) => setCfg(c => ({ ...c, [f.f]: e.target.value }))} style={intInp} />
          {help}
        </label>
      );
    }
    return (
      <label key={f.f} style={{ display: "flex", flexDirection: "column", gap: 3 }}>
        <span style={lab}>{f.label}{f.req ? <span style={{ color: "#B23A2E" }}> *</span> : null}</span>
        <input name={p.id + "-" + f.f} value={cfg[f.f] || ""} placeholder={f.ph || ""}
               onChange={(e) => setCfg(c => ({ ...c, [f.f]: e.target.value }))} style={{ ...intInp, fontFamily: "var(--jb-mono, monospace)" }} />
        {help}
      </label>
    );
  };

  return (
    <div data-provider={p.id} style={{ border: "1px solid #E2E5EA", borderRadius: 8, overflow: "hidden", background: "#FFF" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", background: "var(--jb-navy, #11337A)", flexWrap: "wrap" }}>
        <span style={{ color: "#fff", fontWeight: 800, fontSize: 14 }}>{p.label}</span>
        <div style={{ flex: 1 }} />
        {window.K2BIntChip && <span data-chip={p.id}><window.K2BIntChip p={p} /></span>}
        <label style={{ display: "flex", alignItems: "center", gap: 5, color: "#fff", fontSize: 12, cursor: "pointer" }} title={isAi ? "AI reading is only used while this is on and the connection test has passed." : "Enabled providers are used by the DMS once they are connected. Disabled = never used."}>
          <input type="checkbox" data-enable={p.id} checked={!!p.enabled} disabled={busy === "enable"} onChange={(e) => toggle(e.target.checked)} /> {isAi ? "AI reading on" : "Enabled"}
        </label>
      </div>
      <div style={{ padding: "12px 14px", display: "flex", flexDirection: "column", gap: 10 }}>
        <div style={{ fontSize: 11.5, color: "#666", lineHeight: 1.5 }}>
          {embedded ? null : <><b>Method:</b> {p.auth}.<br /></>}{p.docs}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          {p.fields.map(renderField)}
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
          <button className="k2b-button" data-save={p.id} style={{ fontWeight: 700, background: dirty ? "var(--jb-yellow, #FFD24A)" : undefined }} disabled={!!busy} onClick={save}>{busy === "save" ? "Saving…" : "Save"}</button>
          <button className="k2b-button" data-test={p.id} disabled={!!busy || dirty} title={dirty ? "Save first" : ""} onClick={test}>{busy === "test" ? "Testing…" : "Test connection"}</button>
          {dirty && <span style={{ fontSize: 11.5, color: "#9A6700" }}>You have unsaved changes - press Save first.</span>}
          {p.id === "twilio" && onOpenMessaging && <button className="k2b-button" onClick={onOpenMessaging}>Open Messaging Center ▸</button>}
          {p.id === "email" && onOpenMessaging && <button className="k2b-button" onClick={onOpenMessaging}>Consent & templates ▸</button>}
          {isAi && onOpenOldReports && <button className="k2b-button" data-testid="int-open-oldreports" onClick={onOpenOldReports}>Open Old reports ▸</button>}
          {!embedded && <button className="k2b-button small" onClick={() => onShowLog && onShowLog(p.id)}>Log</button>}
          {!embedded && <button className="k2b-button small" onClick={() => setShowMap(v => !v)}>{showMap ? "Data mapping ▴" : "Data mapping ▾"}</button>}
        </div>
        {msg && <div data-msg={p.id} style={{ fontSize: 12, padding: "7px 10px", borderRadius: 5, background: msg.bad ? "#FDECEA" : "#E6F7EC", color: msg.bad ? "#8A2A20" : "#0E5A2A", border: "1px solid " + (msg.bad ? "#F3B8B0" : "#9ED9B1") }}>{msg.t}</div>}
        {isAi && aiv && aiv.limits && (
          <div data-ai-usage="1" style={{ fontSize: 12, padding: "6px 10px", background: "#F4F8FC", border: "1px solid #C9D6E3", borderRadius: 5 }}>
            <b>Used today:</b> {aiv.limits.pagesToday} of {aiv.limits.maxPagesPerDay} pages
            {aiv.pricing ? <span style={{ color: "#555" }}> · about ${aiv.pricing.estPerPageUsd.toFixed(2)} a page on {aiv.modelName || aiv.model} (${aiv.pricing.inputPerMTok} in / ${aiv.pricing.outputPerMTok} out per million tokens)</span> : null}
          </div>
        )}
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "3px 12px", fontSize: 11.5, color: "#555" }}>
          <span style={{ color: "#888" }}>Last test</span><span>{fmt(p.lastTestAt)}</span>
          <span style={{ color: "#888" }}>Last successful test / sync</span><span data-lastok={p.id}>{fmt(p.lastOkAt)}</span>
          <span style={{ color: "#888" }}>{p.status === "error" || !p.lastError ? "Last error" : "Last test note"}</span><span data-lasterr={p.id} style={{ color: p.lastError && p.status === "error" ? "#B23A2E" : "#555", overflowWrap: "anywhere" }}>{p.lastError || "—"}</span>
          <span style={{ color: "#888" }}>Settings changed</span><span>{p.updatedAt ? fmt(p.updatedAt) + (p.updatedBy ? " by " + p.updatedBy : "") : "—"}</span>
        </div>
        {p.enabled && p.status !== "connected" && (
          <div style={{ fontSize: 11.5, color: "#9A6700" }}>Enabled, but nothing is sent or synced through {shortName} until a connection test succeeds.</div>
        )}
        {showMap && (
          <div style={{ border: "1px dashed #C8CCD2", borderRadius: 6, padding: "8px 10px", background: "#FAFBFC" }}>
            <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", color: "#888", marginBottom: 4 }}>Prepared data mapping (activates with credentials + provider approval)</div>
            <table style={{ fontSize: 11.5, borderCollapse: "collapse", width: "100%" }}><tbody>
              {(p.mapping || []).map(([a, b], i) => <tr key={i}><td style={{ padding: "2px 6px", fontFamily: "var(--jb-mono, monospace)" }}>{a}</td><td style={{ padding: "2px 6px", color: "#888" }}>→</td><td style={{ padding: "2px 6px", fontFamily: "var(--jb-mono, monospace)" }}>{b}</td></tr>)}
            </tbody></table>
          </div>
        )}
      </div>
      {confirmRemove && (
        <K2BModal title="Remove the stored key?" width={460} onClose={() => setConfirmRemove(null)}
          buttons={<>
            <K2BButton small onClick={() => setConfirmRemove(null)}>Cancel</K2BButton>
            <button className="k2b-button small" data-testid="int-remove-confirm" onClick={() => removeSecret(confirmRemove)} style={{ fontWeight: 700, background: "#F3B8B0" }}>Remove stored key</button>
          </>}>
          <div style={{ fontSize: 12.5, lineHeight: 1.55 }}>
            The stored key is deleted from the server and {shortName} is switched off. Nothing that was already imported changes.
            To use it again, paste a key and press Save, then Test connection.
          </div>
        </K2BModal>
      )}
    </div>
  );
};

/* ─── AI Import settings (window opened from Upload & Import > Old reports; same card as Settings > Integrations) ── */
const AiImportSettingsPanel = ({ onClose }) => {
  const v = window.useK2BAiStatus ? window.useK2BAiStatus() : null;
  const [prov, setProv] = React.useState(null);
  const [err, setErr] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const admin = !!(v && v.admin);
  const load = React.useCallback(async () => {
    setLoading(true);
    const r = await window.k2bIntApi("/admin");
    setLoading(false);
    if (r.ok) { setProv(((r.data && r.data.providers) || []).find(x => x.id === "anthropic") || null); setErr(r.data && (r.data.providers || []).some(x => x.id === "anthropic") ? "" : "This server does not have AI Import installed yet (no \"anthropic\" provider). Run the AI Import server update."); }
    else setErr(r.status === 403 ? "Administrator access is required." : (r.error || "Server unreachable"));
  }, []);
  React.useEffect(() => { if (admin) load(); }, [admin]);
  const lim = v && v.limits;
  return (
    <div data-testid="ai-settings" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
        {!admin && window.K2BAiChip && <window.K2BAiChip />}
        <span data-testid="ai-settings-headline" style={{ fontSize: 12.5, fontWeight: 700, color: "var(--jb-navy, #11337A)" }}>{v ? v.headline : ""}</span>
        <div style={{ flex: 1 }} />
        <button className="k2b-button small" onClick={() => { window.K2BAiStatus && window.K2BAiStatus.refresh(); if (admin) load(); }}>↻ Refresh</button>
      </div>
      {v && (admin ? v.step : v.next) && <div data-testid="ai-settings-next" style={{ fontSize: 12, padding: "6px 10px", background: "#FFF8E6", border: "1px solid #E7D49A", borderRadius: 5 }}><b>Next:</b> {admin ? v.step : v.next}</div>}
      {!admin && lim && <div style={{ fontSize: 12, color: "#555" }}>Pages read today: <b>{lim.pagesToday}</b> of {lim.maxPagesPerDay}{v.modelName ? " · model: " + v.modelName : ""}.</div>}
      {!admin && v && !v.loading && (
        <div data-testid="ai-settings-ask-admin" style={{ fontSize: 12.5, padding: "8px 12px", background: "#F4F8FC", border: "1px solid #C9D6E3", borderRadius: 6, lineHeight: 1.5 }}>
          Only an administrator can change the key, the model or the consent. <b>Ask an administrator</b> to open <b>Upload &amp; Import &gt; Old reports &gt; AI Import settings</b> (or Settings &gt; Integrations (API) &gt; AI Import).
        </div>
      )}
      {admin && err && <div style={{ padding: 10, background: "#FDECEA", color: "#8A2A20", borderRadius: 6, fontSize: 12.5 }}>{err}</div>}
      {admin && loading && !prov && <div style={{ color: "#888", fontSize: 12.5 }}>Loading the settings…</div>}
      {admin && prov && <IntProviderCard p={prov} embedded onChanged={(np) => setProv(np)} />}
    </div>
  );
};

/* ─── Admin: activity log viewer ───────────────────────────────────────── */
const IntLogViewer = ({ provider, setProvider, providers, tick }) => {
  const [rows, setRows] = React.useState(null);
  const [err, setErr] = React.useState("");
  React.useEffect(() => {
    let alive = true;
    (async () => {
      const r = await window.k2bIntApi("/admin/log?limit=200" + (provider ? "&provider=" + encodeURIComponent(provider) : ""));
      if (!alive) return;
      if (r.ok) { setRows(r.data.log || []); setErr(""); } else setErr(r.error);
    })();
    return () => { alive = false; };
  }, [provider, tick]);
  return (
    <div id="int-log" style={{ border: "1px solid #E2E5EA", borderRadius: 8, background: "#FFF", overflow: "hidden" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 14px", background: "var(--jb-surface-2, #F1F3F6)" }}>
        <span style={{ fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.4, color: "var(--jb-text-dim)" }}>Sync & activity log</span>
        <select value={provider} onChange={(e) => setProvider(e.target.value)} style={{ fontSize: 12, padding: "3px 6px" }}>
          <option value="">All providers</option>
          {providers.map(p => <option key={p.id} value={p.id}>{p.label}</option>)}
        </select>
        <span style={{ fontSize: 11, color: "#888" }}>Failures are logged here — no pop-ups on other workstations.</span>
      </div>
      <div style={{ maxHeight: 260, overflow: "auto" }}>
        {err && <div style={{ padding: 10, color: "#B23A2E", fontSize: 12 }}>{err}</div>}
        {rows && !rows.length && <div style={{ padding: 10, color: "#888", fontSize: 12 }}>No activity yet.</div>}
        {rows && rows.length > 0 && (
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 11.5 }}>
            <thead><tr style={{ textAlign: "left", color: "#888" }}><th style={{ padding: "4px 10px" }}>When</th><th>Provider</th><th>Action</th><th>Result</th><th>Detail</th></tr></thead>
            <tbody>{rows.map(r => (
              <tr key={r.id} style={{ borderTop: "1px solid #F0F1F4" }}>
                <td style={{ padding: "4px 10px", whiteSpace: "nowrap" }}>{new Date(r.ts).toLocaleString([], { month: "short", day: "numeric", hour: "numeric", minute: "2-digit", second: "2-digit" })}</td>
                <td>{r.provider}</td><td>{r.action}</td>
                <td style={{ color: r.ok === false ? "#B23A2E" : r.ok ? "#0E7A37" : "#888", fontWeight: 700 }}>{r.ok === false ? "fail" : r.ok ? "ok" : "—"}</td>
                <td style={{ padding: "4px 10px", overflowWrap: "anywhere" }}>{r.detail}</td>
              </tr>))}</tbody>
          </table>
        )}
      </div>
    </div>
  );
};

/* ─── Admin panel (Settings → Integrations) ────────────────────────────── */
const IntegrationsAdminPanel = ({ go, onOpenMessaging }) => {
  const [data, setData] = React.useState(null);
  const [err, setErr] = React.useState("");
  const [logProv, setLogProv] = React.useState("");
  const [logTick, setLogTick] = React.useState(0);
  const load = React.useCallback(async () => {
    const r = await window.k2bIntApi("/admin");
    if (r.ok) { setData(r.data); setErr(""); } else setErr(r.status === 403 ? "Administrator access is required." : (r.error || "Server unreachable"));
  }, []);
  React.useEffect(() => { load(); }, [load]);
  if (!window.k2bIntApi) return <div style={{ color: "#888" }}>ConnectedApps.jsx.txt (integration client) is not loaded.</div>;
  const onChanged = (np) => { setData(d => d ? { ...d, providers: d.providers.map(x => x.id === np.id ? np : x) } : d); setLogTick(t => t + 1); };
  const provs = (data && data.providers) || [];
  const order = window.K2B_INT_ORDER || [];
  const sorted = provs.slice().sort((a, b) => order.indexOf(a.id) - order.indexOf(b.id));
  const count = (f) => provs.filter(f).length;
  const connected = provs.filter(p => p.status === "connected");
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <div>
        <div style={{ fontSize: 18, fontWeight: 800, color: "var(--jb-navy, #11337A)" }}>Integrations (API)</div>
        <div style={{ fontSize: 12, color: "#666", lineHeight: 1.5, marginTop: 4 }}>
          Administrator only. Credentials are stored encrypted on the DMS server and are never sent back to any browser — a stored secret shows as <b>stored ✓</b>.
          A provider shows <b>Connected</b> only after <b>Test connection</b> reaches the provider and succeeds. RouteOne, CARFAX, vAuto and GM require partner
          onboarding/approval from the vendor before any live test is possible; until then the best status is <b>Ready — waiting on provider</b>.
          <b> AI Import (Claude)</b> reads scanned old reports for <b>Upload &amp; Import › Old reports</b>: paste the Anthropic key, tick the consent box, press Save, then Test connection — it turns itself on when the test passes.
        </div>
      </div>
      {err && <div style={{ padding: 10, background: "#FDECEA", color: "#8A2A20", borderRadius: 6, fontSize: 12.5 }}>{err}</div>}
      {data && (
        <div data-summary="1" style={{ display: "flex", gap: 14, flexWrap: "wrap", padding: "10px 14px", background: "#FFF", border: "1px solid #E2E5EA", borderRadius: 8, fontSize: 12.5 }}>
          <span><b style={{ color: "#0E7A37" }}>Genuinely connected:</b> {connected.length ? connected.map(p => p.label.split(" —")[0]).join(", ") : "none"}</span>
          <span><b style={{ color: "#9A6700" }}>Ready — credentials stored, waiting on provider/test:</b> {count(p => p.status === "ready")}</span>
          <span><b style={{ color: "#B23A2E" }}>Error:</b> {count(p => p.status === "error")}</span>
          <span><b style={{ color: "#6B3FA0" }}>Mock:</b> {count(p => p.status === "mock")}</span>
          <span><b style={{ color: "#666" }}>Not configured:</b> {count(p => p.status === "not_configured")}</span>
          <div style={{ flex: 1 }} />
          <button className="k2b-button small" onClick={() => { load(); setLogTick(t => t + 1); }}>↻ Refresh</button>
        </div>
      )}
      {data && data.mock && (
        <div style={{ padding: "8px 12px", background: "#F8F4FD", border: "1px solid #D9C8F0", borderRadius: 6, fontSize: 12, color: "#4E2C7A" }}>
          The server is in <b>mock mode</b> (INTEGRATIONS_MOCK=1 in the server .env). The existing RouteOne / CARFAX / vAuto / e-sign routes return simulated
          results; those providers test as <b>Mock mode — not connected</b>. Remove the flag on the server when real partner credentials are in place.
        </div>
      )}
      {sorted.map(p => <IntProviderCard key={p.id} p={p} onChanged={onChanged} onOpenMessaging={onOpenMessaging}
                                         onOpenOldReports={p.id === "anthropic" && go ? () => { try { localStorage.setItem("jbrews-upload-mode", "oldreports"); } catch (e) {} go("uploadtool"); } : null}
                                         onShowLog={(id) => { setLogProv(id); setLogTick(t => t + 1); try { document.getElementById("int-log").scrollIntoView({ behavior: "smooth" }); } catch (e) {} }} />)}
      {data && <IntLogViewer provider={logProv} setProvider={setLogProv} providers={sorted} tick={logTick} />}
    </div>
  );
};

Object.assign(window, { IntegrationsHub, IntegrationsAdminPanel, AiImportSettingsPanel, IntProviderCard });