/* © 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 — Settings › AI Apps (Claude connector).
//  • How to connect (the connector address) and this user's permission.
//  • Admin: AI Connector permission per user — None / Read / Update.
//  • Connected apps — Disconnect (own; admin sees everyone's).
//  • Changes made through Claude — Undo (own; admin/office see all).
//  • Drafts Claude saved (commission plans, budgets, journal entries) — a
//    person applies or rejects them here; nothing is ever activated by Claude.
// All data comes from the server (/api/ai/...). Nothing is kept in the browser.

const aiApi = async (path, method, body) => {
  try {
    const d = await apiFetch("/ai" + path, { method: method || "GET", body });
    return { ok: true, data: d || {} };
  } catch (e) {
    return { ok: false, status: e.status || 0, data: e.body || {}, error: (e.body && e.body.error) || e.message || "Server unreachable" };
  }
};
const aiFmt = (d) => d ? new Date(d).toLocaleString([], { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }) : "—";
const aiMoney = (n) => "$" + (+n || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const AI_ACCESS_LABEL = { none: "None", read: "Read", update: "Update" };
const aiCard = { background: "#FFF", border: "1px solid #E2E5EA", borderRadius: 8, padding: "12px 14px" };
const aiTh = { textAlign: "left", fontSize: 11, color: "#666", fontWeight: 700, padding: "6px 8px", borderBottom: "1px solid #E2E5EA", whiteSpace: "nowrap" };
const aiTd = { fontSize: 12.5, padding: "6px 8px", borderBottom: "1px solid #F0F1F4", verticalAlign: "top" };
const aiToast = (m, t) => window.k2bToast && window.k2bToast(m, t || "ok");

const AiSection = ({ title, sub, right, children }) => (
  <div style={aiCard}>
    <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginBottom: sub ? 2 : 8 }}>
      <div style={{ fontSize: 14.5, fontWeight: 800, color: "var(--jb-navy, #11337A)" }}>{title}</div>
      <div style={{ flex: 1 }} />{right}
    </div>
    {sub && <div style={{ fontSize: 12, color: "#666", lineHeight: 1.5, marginBottom: 10 }}>{sub}</div>}
    {children}
  </div>
);

const AiDraftView = ({ d }) => {
  const c = d.content || {};
  if (d.kind === "commission-plan") {
    const p = c.plan || {};
    return (
      <div style={{ fontSize: 12, color: "#333", lineHeight: 1.6 }}>
        New {Math.round((+p.newPct || 0) * 100)}% · Used {Math.round((+p.usedPct || 0) * 100)}% of front gross · Mini {aiMoney(p.miniFloor)} ·
        VSC {aiMoney(p.vscBonus)} · GAP {aiMoney(p.gapBonus)} · Appearance {aiMoney(p.appearanceBonus)} ·
        {p.fundedOnly ? " paid when funded" : " paid at delivery"} · pack {p.packCounts ? "counts" : "ignored"}
        {Array.isArray(p.volumeBonus) && p.volumeBonus.length > 0 && <> · volume bonus {p.volumeBonus.map(t => `${t.units}+ units ${aiMoney(t.bonus)}`).join(", ")}</>}
      </div>
    );
  }
  if (d.kind === "journal-entry") {
    return (
      <table style={{ borderCollapse: "collapse", fontSize: 12, marginTop: 4 }}>
        <thead><tr><th style={aiTh}>Acct</th><th style={aiTh}>Name</th><th style={{ ...aiTh, textAlign: "right" }}>Debit</th><th style={{ ...aiTh, textAlign: "right" }}>Credit</th></tr></thead>
        <tbody>{(c.lines || []).map((l, i) => (
          <tr key={i}><td style={aiTd}>{l.acct}</td><td style={aiTd}>{l.name || l.desc || ""}</td>
            <td style={{ ...aiTd, textAlign: "right" }}>{l.dr ? aiMoney(l.dr) : ""}</td><td style={{ ...aiTd, textAlign: "right" }}>{l.cr ? aiMoney(l.cr) : ""}</td></tr>))}</tbody>
      </table>
    );
  }
  if (d.kind === "budget") {
    const lines = c.lines || [];
    const total = lines.reduce((s, l) => s + (+l.total || 0), 0);
    return (
      <div style={{ fontSize: 12, color: "#333" }}>
        {c.year} · {lines.length} account lines · total {aiMoney(total)}
        {(c.unknownAccounts || []).length > 0 && <span style={{ color: "#9A6700" }}> · not in chart of accounts: {c.unknownAccounts.join(", ")}</span>}
      </div>
    );
  }
  return null;
};

const aiBudgetCsv = (d) => {
  const c = d.content || {};
  const mon = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  const q = (v) => /[",\n]/.test(String(v)) ? `"${String(v).replace(/"/g, '""')}"` : String(v);
  const rows = [["Account", "Name", ...mon, "Total", "Basis"], ...(c.lines || []).map(l => [l.acct, l.name || "", ...(l.months || []), l.total, l.basis || ""])];
  const blob = new Blob([rows.map(r => r.map(q).join(",")).join("\n") + "\n"], { type: "text/csv" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a"); a.href = url; a.download = `budget-${c.year || "draft"}-${d.id}.csv`; a.click(); URL.revokeObjectURL(url);
};

const AiAppsPanel = ({ go }) => {
  const D = window.DMS;
  const [status, setStatus] = React.useState(null);
  const [users, setUsers] = React.useState(null);
  const [conns, setConns] = React.useState([]);
  const [changes, setChanges] = React.useState([]);
  const [drafts, setDrafts] = React.useState([]);
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState("");
  const [open, setOpen] = React.useState(null);

  const load = React.useCallback(async () => {
    const s = await aiApi("/status");
    if (!s.ok) { setErr(s.status === 404 ? "The DMS server does not have the AI connector installed yet." : (s.error || "Server unreachable")); return; }
    setErr(""); setStatus(s.data);
    const [c, ch, dr, us] = await Promise.all([aiApi("/connections"), aiApi("/changes?limit=200"), aiApi("/drafts"),
      s.data.isAdmin ? aiApi("/users") : Promise.resolve(null)]);
    if (c.ok) setConns(c.data.connections || []);
    if (ch.ok) setChanges(ch.data.changes || []);
    if (dr.ok) setDrafts(dr.data.drafts || []);
    if (us && us.ok) setUsers(us.data.users || []);
  }, []);
  React.useEffect(() => { load(); const t = setInterval(load, 30000); return () => clearInterval(t); }, [load]);

  const act = async (key, fn) => { setBusy(key); try { await fn(); } finally { setBusy(""); load(); } };
  const setAccess = (u, access) => act("acc-" + u.id, async () => {
    const r = await aiApi(`/users/${encodeURIComponent(u.id)}/access`, "POST", { access });
    aiToast(r.ok ? `${u.name || u.id}: AI access ${AI_ACCESS_LABEL[access]}${access === "none" ? " — any connection was cut" : ""}.` : r.error, r.ok ? "ok" : "warn");
  });
  const revoke = (c) => act("rev-" + c.id, async () => {
    if (!confirm(`Disconnect ${c.app} for ${c.userName || c.user}? It will have to sign in again.`)) return;
    const r = await aiApi(`/connections/${c.id}/revoke`, "POST", {});
    aiToast(r.ok ? `${c.app} disconnected.` : r.error, r.ok ? "ok" : "warn");
  });
  const undo = (c) => act("undo-" + c.id, async () => {
    if (!confirm(`Undo this change?\n\n${c.summary}`)) return;
    const r = await aiApi(`/changes/${c.id}/undo`, "POST", {});
    aiToast(r.ok ? "Change undone." : r.error, r.ok ? "ok" : "warn");
  });
  const decide = (d, st) => act("dr-" + d.id, async () => {
    if (st === "Applied") {
      if (d.kind === "commission-plan") {
        if (!confirm(`Make "${d.name}" the live pay plan?`)) return;
        // RC28 (fx, finding 3): applying the draft saves a NEW server pay plan version (the owner, Admin / F&I or the Office Manager) — never a per-station copy
        const r = D && D.setPayPlanConfig ? await D.setPayPlanConfig((d.content || {}).plan || {}, { reason: `AI Apps draft "${d.name}" applied` }) : { ok: false, msg: "Pay plan module not loaded." };
        if (!r.ok) { aiToast(r.msg, "warn"); return; }
      } else if (d.kind === "journal-entry") {
        const c = d.content || {};
        if (!confirm(`Post this journal entry (${aiMoney(c.total)}) to the GL now?`)) return;
        const r = D && D.postJournalEntry ? D.postJournalEntry({ date: c.date ? new Date(c.date + "T12:00:00") : undefined, desc: c.desc, ref: d.id, lines: c.lines, src: "Manual" }) : { ok: false, msg: "Accounting module not loaded." };
        if (!r.ok) { aiToast(r.msg, "warn"); return; }
      } else if (!confirm(`Accept the ${d.name} budget?`)) return;
    }
    const r = await aiApi(`/drafts/${encodeURIComponent(d.id)}/status`, "POST", { status: st });
    aiToast(r.ok ? `Draft ${st.toLowerCase()}.` : r.error, r.ok ? "ok" : "warn");
  });

  if (err) return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <AiHeader status={null} />
      <div style={{ padding: 10, background: "#FDECEA", color: "#8A2A20", borderRadius: 6, fontSize: 12.5 }}>{err}</div>
    </div>
  );
  if (!status) return <div style={{ color: "#888", fontSize: 13 }}>Loading…</div>;
  const isAdmin = status.isAdmin;
  const pending = drafts.filter(d => d.status === "Draft (inactive)");

  return (
    <div data-ai-apps="1" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <AiHeader status={status} />

      {isAdmin && users && (
        <AiSection title="AI Connector permission"
          sub={<>Who may connect Claude to K2B. <b>Read</b> lets it look things up. <b>Update</b> also lets it make changes the person approves first (next steps on leads, bank-rec notes, drafts). It always works inside the person's own role — a salesperson still only sees their own leads. Setting <b>None</b> cuts any open connection at once.</>}>
          <table style={{ borderCollapse: "collapse", width: "100%" }}>
            <thead><tr><th style={aiTh}>User</th><th style={aiTh}>Role</th><th style={aiTh}>AI access</th></tr></thead>
            <tbody>{users.filter(u => u.active).map(u => (
              <tr key={u.id}>
                <td style={aiTd}><b>{u.name || u.id}</b> <span style={{ color: "#888" }}>{u.id}</span></td>
                <td style={aiTd}>{u.role}</td>
                <td style={aiTd}>
                  <div style={{ display: "inline-flex", border: "1px solid #C8CCD2", borderRadius: 6, overflow: "hidden" }}>
                    {["none", "read", "update"].map(a => (
                      <button key={a} data-ai-access={u.id + ":" + a} disabled={busy === "acc-" + u.id}
                        onClick={() => u.access !== a && setAccess(u, a)}
                        style={{ border: 0, padding: "4px 12px", fontSize: 12, cursor: "pointer", fontWeight: u.access === a ? 800 : 500,
                                 background: u.access === a ? (a === "none" ? "#EEF0F3" : a === "read" ? "#E5EFFA" : "#E6F7EC") : "#FFF",
                                 color: u.access === a ? (a === "update" ? "#0E7A37" : "var(--jb-navy, #11337A)") : "#555" }}>{AI_ACCESS_LABEL[a]}</button>
                    ))}
                  </div>
                </td>
              </tr>))}</tbody>
          </table>
        </AiSection>
      )}

      <AiSection title="Connected apps" right={<button className="k2b-button small" onClick={load}>↻ Refresh</button>}
        sub={isAdmin ? "Every AI app anyone has connected. Disconnect ends it immediately." : "AI apps connected with your sign-in. Disconnect ends it immediately."}>
        {conns.length === 0 ? <div style={{ fontSize: 12.5, color: "#888" }}>Nothing connected.</div> : (
          <table style={{ borderCollapse: "collapse", width: "100%" }}>
            <thead><tr><th style={aiTh}>App</th>{isAdmin && <th style={aiTh}>User</th>}<th style={aiTh}>Access</th><th style={aiTh}>Connected</th><th style={aiTh}>Last used</th><th style={aiTh}></th></tr></thead>
            <tbody>{conns.map(c => (
              <tr key={c.id}>
                <td style={aiTd}><b>{c.app}</b></td>{isAdmin && <td style={aiTd}>{c.userName || c.user}</td>}
                <td style={aiTd}>{c.access === "update" ? "Read + approved changes" : "Read only"}</td>
                <td style={aiTd}>{aiFmt(c.connectedAt)}</td><td style={aiTd}>{aiFmt(c.lastUsed)}</td>
                <td style={{ ...aiTd, textAlign: "right" }}><button className="k2b-button small" data-ai-revoke={c.id} disabled={busy === "rev-" + c.id} onClick={() => revoke(c)}>Disconnect</button></td>
              </tr>))}</tbody>
          </table>
        )}
      </AiSection>

      {(pending.length > 0 || drafts.length > 0) && (
        <AiSection title="Drafts from Claude" sub="Claude can only save these as inactive drafts. Nothing here takes effect until a person applies it.">
          {drafts.slice(0, 40).map(d => (
            <div key={d.id} data-ai-draft={d.id} style={{ borderTop: "1px solid #F0F1F4", padding: "8px 0", display: "flex", gap: 10, alignItems: "flex-start" }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5 }}>
                  <b>{d.name}</b> <span style={{ color: "#888" }}>· {d.kind.replace("-", " ")} · {d.createdByName || d.createdBy} · {aiFmt(d.createdAt)}</span>
                  <span style={{ marginLeft: 8, fontSize: 11, fontWeight: 700, borderRadius: 999, padding: "1px 8px",
                                 background: d.status === "Applied" ? "#E6F7EC" : d.status === "Rejected" ? "#EEF0F3" : "#FBF3E0",
                                 color: d.status === "Applied" ? "#0E7A37" : d.status === "Rejected" ? "#666" : "#9A6700" }}>{d.status}</span>
                </div>
                <AiDraftView d={d} />
                {d.notes && (open === d.id
                  ? <div style={{ fontSize: 12, color: "#444", whiteSpace: "pre-wrap", marginTop: 4 }}>{d.notes}</div>
                  : <button style={{ border: 0, background: "none", color: "var(--jb-navy, #1B66A8)", fontSize: 12, padding: 0, cursor: "pointer" }} onClick={() => setOpen(d.id)}>Show notes</button>)}
              </div>
              <div style={{ display: "flex", gap: 6, flexShrink: 0 }}>
                {d.kind === "budget" && <button className="k2b-button small" onClick={() => aiBudgetCsv(d)}>⬇ CSV</button>}
                {d.status === "Draft (inactive)" && <>
                  <button className="k2b-button small" disabled={busy === "dr-" + d.id} onClick={() => decide(d, "Rejected")}>Reject</button>
                  <button className="k2b-button small" style={{ background: "var(--jb-navy, #1B66A8)", color: "#FFF", fontWeight: 700, borderColor: "var(--jb-navy, #1B66A8)" }} data-ai-apply={d.id} disabled={busy === "dr-" + d.id} onClick={() => decide(d, "Applied")}>
                    {d.kind === "commission-plan" ? "Make live pay plan" : d.kind === "journal-entry" ? "Post to GL" : "Accept"}</button>
                </>}
              </div>
            </div>
          ))}
        </AiSection>
      )}

      <AiSection title="Changes made through Claude" sub={`${isAdmin || /office/i.test(status.me.role || "") ? "Everyone's" : "Your"} changes, newest first. Undo puts the record back exactly as it was — unless someone has edited it since, in which case fix it by hand.`}>
        {changes.length === 0 ? <div style={{ fontSize: 12.5, color: "#888" }}>No changes yet.</div> : (
          <table style={{ borderCollapse: "collapse", width: "100%" }}>
            <thead><tr><th style={aiTh}>When</th><th style={aiTh}>Who</th><th style={aiTh}>Change</th><th style={aiTh}></th></tr></thead>
            <tbody>{changes.map(c => (
              <tr key={c.id} data-ai-change={c.id} style={{ opacity: c.undoneAt ? 0.55 : 1 }}>
                <td style={{ ...aiTd, whiteSpace: "nowrap" }}>{aiFmt(c.at)}</td>
                <td style={aiTd}>{c.userName || c.user}<div style={{ fontSize: 11, color: "#888" }}>via {c.app}</div></td>
                <td style={aiTd}>{c.summary}{c.undoneAt && <div style={{ fontSize: 11, color: "#888" }}>Undone {aiFmt(c.undoneAt)} by {c.undoneBy}</div>}</td>
                <td style={{ ...aiTd, textAlign: "right" }}>{!c.undoneAt && (isAdmin || c.user === status.me.id) &&
                  <button className="k2b-button small" data-ai-undo={c.id} disabled={busy === "undo-" + c.id} onClick={() => undo(c)}>Undo</button>}</td>
              </tr>))}</tbody>
          </table>
        )}
      </AiSection>
    </div>
  );
};

const AiHeader = ({ status }) => {
  const url = status ? status.connectUrl : (location.origin + "/api/mcp");
  const access = status ? status.me.access : "none";
  const copy = () => { try { navigator.clipboard.writeText(url); aiToast("Connector address copied."); } catch (e) {} };
  return (
    <div>
      <div style={{ fontSize: 18, fontWeight: 800, color: "var(--jb-navy, #11337A)" }}>AI Apps — Claude</div>
      <div style={{ fontSize: 12, color: "#666", lineHeight: 1.55, marginTop: 4 }}>
        Claude can work in K2B as <b>you</b>: chase cold leads, work the bank rec, check month-end, draft pay plans and budgets. It signs in with your
        own K2B login (no API keys), sees only what your role sees, asks before every change, and can never send messages, post or delete records,
        pay bills or switch on plans and budgets.
      </div>
      <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap", marginTop: 10, ...aiCard, padding: "8px 12px" }}>
        <span style={{ fontSize: 12, color: "#666" }}>Connector address</span>
        <code data-ai-url="1" style={{ fontSize: 12.5, background: "#F4F6F9", padding: "3px 8px", borderRadius: 4 }}>{url}</code>
        <button className="k2b-button small" onClick={copy}>Copy</button>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 12 }}>Your AI access: <b style={{ color: access === "update" ? "#0E7A37" : access === "read" ? "var(--jb-navy, #11337A)" : "#B23A2E" }}>{AI_ACCESS_LABEL[access] || "None"}</b></span>
      </div>
      {access === "none" && status && !status.isAdmin && <div style={{ fontSize: 12, color: "#9A6700", marginTop: 6 }}>Ask an administrator to turn on AI access for you before connecting.</div>}
    </div>
  );
};

// RC28 (fx, the reviewer's finding 3): a pay plan applied here is saved ONCE on the server as a new version (decide() above) — every
// station reads the server's plan (DMSCore.payPlanConfig); the old per-station copy (each PC applying the draft to itself) is gone.

// Sidebar route "aiapps" — every role (Settings is admin-only).
const AiAppsWindow = ({ onClose, go }) => (
  <div className="k2b-window" style={{ width: "100%", maxWidth: 1100, height: "calc(100vh - 110px)", margin: "0 auto",
                                        display: "flex", flexDirection: "column", background: "var(--jb-surface, #F4F4F4)", fontFamily: "var(--jb-font)" }}>
    <K2BTitlebar title="AI Apps" icon="store" onClose={onClose} />
    <div style={{ flex: 1, overflow: "auto", padding: 18 }}><AiAppsPanel go={go} /></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>
);

Object.assign(window, { AiAppsPanel, AiAppsWindow });