/* Sentinel — Admin: clause rules, risk tiers, routing line, kill-switch. */

function AdminConsole({ killSwitch, onKill, medHighRoute, onMedHigh }) {
  const ctx = React.useContext(SentinelCtx);
  const [autoGate, setAutoGate] = React.useState(95);
  const [perType, setPerType] = React.useState({ "Hospital Services Agreement": true, "Data Processing Agreement": true, "Service Level Agreement": false });
  return (
    <div style={{ padding: 24, maxWidth: 1040, margin: "0 auto" }}>
      {/* Kill switch */}
      <Card padding={0} style={{ overflow: "hidden", marginBottom: 16, borderColor: killSwitch ? "var(--status-danger)" : "var(--border-base)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14, padding: "18px 22px", background: killSwitch ? "var(--status-danger-bg)" : "var(--bg-surface)" }}>
          <span style={{ flex: "none", width: 40, height: 40, borderRadius: "var(--radius-md)", background: killSwitch ? "var(--status-danger)" : "var(--bg-sunken)", color: killSwitch ? "#fff" : "var(--content-muted)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="power" size={20} /></span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 16, fontWeight: 600, color: "var(--content-strong)" }}>Auto-accept kill switch</div>
            <div style={{ fontSize: 13, color: "var(--content-muted)" }}>{killSwitch ? "Auto-accept is OFF globally — every change, including cosmetic, is routed to a human." : "Auto-accept is ON for cosmetic edits within the allow-list. Substantive changes always route to a human."}</div>
          </div>
          <span style={{ fontSize: 13, fontWeight: 600, color: killSwitch ? "var(--status-danger)" : "var(--status-success)" }}>{killSwitch ? "Paused" : "Live"}</span>
          <Toggle on={!killSwitch} onChange={(v) => onKill(!v)} size={46} />
        </div>
        <div style={{ display: "flex", gap: 0, borderTop: "1px solid var(--border-base)" }}>
          {Object.entries(perType).map(([t, on], i) => (
            <div key={t} style={{ flex: 1, padding: "13px 18px", borderLeft: i ? "1px solid var(--border-subtle)" : "none", display: "flex", alignItems: "center", justifyContent: "space-between", opacity: killSwitch ? 0.5 : 1 }}>
              <span style={{ fontSize: 13, color: "var(--content-base)" }}>{t.replace(" Agreement", "")}</span>
              <Toggle on={on && !killSwitch} onChange={(v) => setPerType((p) => ({ ...p, [t]: v }))} size={36} />
            </div>
          ))}
        </div>
      </Card>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 16 }}>
        {/* Med-High routing line — the open item */}
        <Card padding={20}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
            <span style={{ fontSize: 15, fontWeight: 600, color: "var(--content-strong)" }}>Routing line</span>
            <StatusBadge tone="warning">Open item</StatusBadge>
          </div>
          <div style={{ fontSize: 13, color: "var(--content-muted)", marginBottom: 16 }}>Where Medium-High items are decided. Low / Med-Low always go to Head; High always to CEO.</div>
          {[["head_ceo", "Head of SP decides", "CEO notified by email / Slack for visibility"], ["ceo", "CEO decides", "Medium-High escalates to the CEO queue"]].map(([v, t, d]) => {
            const active = medHighRoute === v;
            return (
              <button key={v} onClick={() => onMedHigh(v)} style={{ display: "flex", gap: 11, width: "100%", textAlign: "left", padding: "12px 14px", marginBottom: 8, cursor: "pointer",
                border: `1px solid ${active ? "var(--ec-primary)" : "var(--border-base)"}`, background: active ? "var(--green-50)" : "var(--bg-surface)", borderRadius: "var(--radius-md)", fontFamily: "var(--font-body)" }}>
                <span style={{ flex: "none", width: 18, height: 18, borderRadius: "50%", border: `2px solid ${active ? "var(--ec-primary)" : "var(--border-strong)"}`, marginTop: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  {active && <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--ec-primary)" }} />}</span>
                <span><span style={{ display: "block", fontSize: 14, fontWeight: 600, color: "var(--content-strong)" }}>{t}</span>
                  <span style={{ fontSize: 12.5, color: "var(--content-muted)" }}>{d}</span></span>
              </button>
            );
          })}
        </Card>

        {/* Auto-accept gate */}
        <Card padding={20}>
          <div style={{ fontSize: 15, fontWeight: 600, color: "var(--content-strong)", marginBottom: 4 }}>Auto-accept confidence gate</div>
          <div style={{ fontSize: 13, color: "var(--content-muted)", marginBottom: 20 }}>Minimum AI confidence before a cosmetic edit may be auto-accepted. Protected clauses can never auto-accept regardless.</div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 8 }}>
            <span className="gj-money" style={{ fontSize: 36, color: "var(--content-strong)" }}>{autoGate}%</span>
            <span style={{ fontSize: 13, color: "var(--content-muted)" }}>confidence floor</span>
          </div>
          <input type="range" min="80" max="100" value={autoGate} onChange={(e) => setAutoGate(+e.target.value)} style={{ width: "100%", accentColor: "var(--ec-primary)" }} />
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11.5, color: "var(--content-faint)", marginTop: 2 }}><span>80%</span><span>100%</span></div>
          <div style={{ marginTop: 16, padding: "11px 13px", background: "var(--bg-sunken)", borderRadius: "var(--radius-md)", fontSize: 12.5, color: "var(--content-base)", display: "flex", gap: 8 }}>
            <Icon name="info" size={14} style={{ color: "var(--content-muted)", flex: "none", marginTop: 1 }} /> The eval framework must clear the §9 gates (false-auto-accept ≤1%, substantive recall ≥99%) before auto-accept goes live.</div>
        </Card>
      </div>

      {/* Clause rules table */}
      <Card style={{ overflow: "hidden" }}>
        <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border-base)", display: "flex", alignItems: "center", gap: 9 }}>
          <Icon name="sliders-horizontal" size={16} style={{ color: "var(--content-muted)" }} />
          <span style={{ fontSize: 15, fontWeight: 600, color: "var(--content-strong)" }}>Clause rules</span>
          <span style={{ fontSize: 13, color: "var(--content-muted)" }}>· deterministic; the AI cannot override these</span>
          <span style={{ flex: 1 }} />
          <Button variant="secondary" size="sm" leadingIcon="git-branch">Version 4.2</Button>
        </div>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13.5 }}>
          <thead>
            <tr style={{ background: "var(--bg-sunken)" }}>
              {["#", "Clause", "Materiality", "Protected", "Default risk", "Routes to"].map((h) => (
                <th key={h} style={{ textAlign: "left", padding: "10px 16px", fontSize: 11, fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--content-muted)", borderBottom: "1px solid var(--border-base)", whiteSpace: "nowrap" }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {Object.values(CLAUSES).map((cl) => (
              <tr key={cl.no} onMouseEnter={(e) => (e.currentTarget.style.background = "var(--bg-sunken)")} onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}>
                <td style={{ padding: "11px 16px", borderBottom: "1px solid var(--border-subtle)", fontFamily: "var(--font-mono)", color: "var(--content-muted)" }}>{cl.no}</td>
                <td style={{ padding: "11px 16px", borderBottom: "1px solid var(--border-subtle)", fontWeight: 500, color: "var(--content-strong)" }}>{cl.title}</td>
                <td style={{ padding: "11px 16px", borderBottom: "1px solid var(--border-subtle)", color: "var(--content-base)" }}>{cl.tier}</td>
                <td style={{ padding: "11px 16px", borderBottom: "1px solid var(--border-subtle)" }}>
                  {cl.protected ? <span style={{ display: "inline-flex", alignItems: "center", gap: 5, color: "var(--status-danger)", fontSize: 12.5, fontWeight: 600 }}><Icon name="lock" size={13} />Protected</span>
                    : <span style={{ color: "var(--content-faint)", fontSize: 12.5 }}>—</span>}</td>
                <td style={{ padding: "11px 16px", borderBottom: "1px solid var(--border-subtle)" }}><RiskBadge risk={cl.risk} style="badge" size="sm" /></td>
                <td style={{ padding: "11px 16px", borderBottom: "1px solid var(--border-subtle)", color: "var(--content-base)", fontSize: 13 }}>{RISK[cl.risk].routeLabel}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
}

Object.assign(window, { AdminConsole });

/* ── Users & access — role & permission designation ─────────────────────*/
const CAPABILITIES = [
  { label: "Upload provider edits", rm: "yes", head: "no", ceo: "no", admin: "no" },
  { label: "Review changes & redlines", rm: "view", head: "yes", ceo: "yes", admin: "no" },
  { label: "Decide low / medium changes", rm: "no", head: "yes", ceo: "yes", admin: "no" },
  { label: "Approve high-risk changes", rm: "no", head: "view", ceo: "yes", admin: "no" },
  { label: "Override prior decisions", rm: "no", head: "no", ceo: "yes", admin: "no" },
  { label: "Generate & send outputs", rm: "no", head: "yes", ceo: "yes", admin: "no" },
  { label: "Manage clause rules & routing", rm: "no", head: "no", ceo: "view", admin: "yes" },
  { label: "Manage users & access", rm: "no", head: "no", ceo: "view", admin: "yes" },
  { label: "View change tracker", rm: "view", head: "yes", ceo: "yes", admin: "yes" },
  { label: "View audit trail", rm: "view", head: "yes", ceo: "yes", admin: "yes" },
];
const USERS = [
  { name: "Aisha Karega", email: "aisha@edencaremedical.com", role: "rm", last: "12m ago" },
  { name: "Daniel Otieno", email: "daniel@edencaremedical.com", role: "head", last: "just now" },
  { name: "Moses Mukundi", email: "moss@ginja.ai", role: "ceo", last: "5m ago" },
  { name: "Priya Shah", email: "priya@ginja.ai", role: "admin", last: "1h ago" },
  { name: "Wanjiru Mwende", email: "wanjiru@edencaremedical.com", role: "rm", last: "2h ago" },
  { name: "Counsel (read-only)", email: "legal@ginja.ai", role: "readonly", last: "yesterday" },
];
const ROLE_LABEL = { rm: "Relationship Manager", head: "Head of SP Contracting", ceo: "CEO", admin: "Admin", readonly: "Legal / Read-only" };

function PermCell({ state }) {
  if (state === "yes") return <span style={{ display: "inline-flex", color: "var(--status-success)" }}><Icon name="check" size={16} strokeWidth={3} /></span>;
  if (state === "view") return <span style={{ display: "inline-flex", alignItems: "center", gap: 4, color: "var(--content-muted)", fontSize: 11.5, fontWeight: 600 }}><Icon name="eye" size={13} />View</span>;
  return <span style={{ color: "var(--border-strong)" }}><Icon name="minus" size={15} /></span>;
}

function AccessConsole() {
  const [domains] = React.useState(["edencaremedical.com", "ginja.ai"]);
  return (
    <div style={{ padding: 24, maxWidth: 1040, margin: "0 auto" }}>
      {/* Access policy */}
      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 16, marginBottom: 16 }}>
        <Card padding={20}>
          <div style={{ fontSize: 15, fontWeight: 600, color: "var(--content-strong)", marginBottom: 4 }}>Sign-in domains</div>
          <div style={{ fontSize: 13, color: "var(--content-muted)", marginBottom: 16 }}>Only these email domains may request a one-time code. Everything else is refused at sign-in.</div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 14 }}>
            {domains.map((d) => (
              <span key={d} style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "7px 12px", background: "var(--green-50)", border: "1px solid var(--green-100)", borderRadius: "var(--radius-full)", fontSize: 13, fontWeight: 500, color: "var(--green-800)" }}>
                <Icon name="at-sign" size={13} />{d}<Icon name="x" size={13} style={{ color: "var(--green-700)", cursor: "pointer" }} /></span>
            ))}
            <button style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "7px 12px", border: "1px dashed var(--border-strong)", borderRadius: "var(--radius-full)", background: "transparent", color: "var(--content-muted)", cursor: "pointer", fontFamily: "var(--font-body)", fontSize: 13 }}><Icon name="plus" size={13} />Add domain</button>
          </div>
        </Card>
        <Card padding={20}>
          <div style={{ fontSize: 15, fontWeight: 600, color: "var(--content-strong)", marginBottom: 14 }}>Authentication</div>
          {[["OTP 2FA on every login", true], ["Google Workspace SSO + TOTP", true], ["Re-auth on sensitive actions", true], ["Session timeout · 30 min idle", true]].map(([l, on]) => (
            <div key={l} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 0", borderTop: "1px solid var(--border-subtle)" }}>
              <Icon name="shield-check" size={15} style={{ color: "var(--status-success)" }} />
              <span style={{ flex: 1, fontSize: 13, color: "var(--content-base)" }}>{l}</span>
              <Toggle on={on} onChange={() => {}} size={34} />
            </div>
          ))}
        </Card>
      </div>

      {/* Permissions matrix */}
      <Card style={{ overflow: "hidden", marginBottom: 16 }}>
        <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border-base)", display: "flex", alignItems: "center", gap: 9 }}>
          <Icon name="shield" size={16} style={{ color: "var(--content-muted)" }} />
          <span style={{ fontSize: 15, fontWeight: 600, color: "var(--content-strong)" }}>Roles &amp; permissions</span>
          <span style={{ fontSize: 13, color: "var(--content-muted)" }}>· role-based access control</span>
        </div>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13.5 }}>
          <thead>
            <tr style={{ background: "var(--bg-sunken)" }}>
              <th style={{ textAlign: "left", padding: "10px 18px", fontSize: 11, fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--content-muted)", borderBottom: "1px solid var(--border-base)" }}>Capability</th>
              {["RM", "Head of SP", "CEO", "Admin"].map((h) => (
                <th key={h} style={{ textAlign: "center", padding: "10px 14px", fontSize: 11, fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--content-muted)", borderBottom: "1px solid var(--border-base)", whiteSpace: "nowrap" }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {CAPABILITIES.map((c) => (
              <tr key={c.label} onMouseEnter={(e) => (e.currentTarget.style.background = "var(--bg-sunken)")} onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}>
                <td style={{ padding: "11px 18px", borderBottom: "1px solid var(--border-subtle)", color: "var(--content-strong)", fontWeight: 500 }}>{c.label}</td>
                {["rm", "head", "ceo", "admin"].map((rk) => (
                  <td key={rk} style={{ padding: "11px 14px", borderBottom: "1px solid var(--border-subtle)", textAlign: "center" }}><PermCell state={c[rk]} /></td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{ display: "flex", gap: 18, padding: "12px 20px", borderTop: "1px solid var(--border-base)", fontSize: 12.5, color: "var(--content-muted)" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="check" size={14} style={{ color: "var(--status-success)" }} /> Can act</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="eye" size={13} /> View-only</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="minus" size={14} style={{ color: "var(--border-strong)" }} /> No access</span>
        </div>
      </Card>

      {/* Users */}
      <Card style={{ overflow: "hidden" }}>
        <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border-base)", display: "flex", alignItems: "center", gap: 9 }}>
          <Icon name="users" size={16} style={{ color: "var(--content-muted)" }} />
          <span style={{ fontSize: 15, fontWeight: 600, color: "var(--content-strong)" }}>Users</span>
          <span style={{ flex: 1 }} />
          <Button variant="secondary" size="sm" leadingIcon="user-plus">Invite user</Button>
        </div>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14 }}>
          <thead>
            <tr style={{ background: "var(--bg-sunken)" }}>
              {["Person", "Email", "Role", "2FA", "Last active", ""].map((h) => (
                <th key={h} style={{ textAlign: "left", padding: "10px 18px", fontSize: 11, fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--content-muted)", borderBottom: "1px solid var(--border-base)", whiteSpace: "nowrap" }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {USERS.map((u) => (
              <tr key={u.email} onMouseEnter={(e) => (e.currentTarget.style.background = "var(--bg-sunken)")} onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}>
                <td style={{ padding: "11px 18px", borderBottom: "1px solid var(--border-subtle)" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 9 }}><Avatar name={u.name} size={28} tone={(ROLES[u.role] || {}).tone || "neutral"} /><span style={{ color: "var(--content-strong)" }}>{u.name}</span></div></td>
                <td style={{ padding: "11px 18px", borderBottom: "1px solid var(--border-subtle)", fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--content-muted)" }}>{u.email}</td>
                <td style={{ padding: "11px 18px", borderBottom: "1px solid var(--border-subtle)" }}>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "5px 11px 5px 9px", border: "1px solid var(--border-strong)", borderRadius: "var(--radius-md)", fontSize: 13, color: "var(--content-base)", cursor: "pointer" }}>{ROLE_LABEL[u.role]}<Icon name="chevron-down" size={13} style={{ color: "var(--content-muted)" }} /></span></td>
                <td style={{ padding: "11px 18px", borderBottom: "1px solid var(--border-subtle)" }}><StatusBadge tone="success">On</StatusBadge></td>
                <td style={{ padding: "11px 18px", borderBottom: "1px solid var(--border-subtle)", color: "var(--content-muted)", fontSize: 13 }}>{u.last}</td>
                <td style={{ padding: "11px 18px", borderBottom: "1px solid var(--border-subtle)", textAlign: "right" }}><button style={{ background: "none", border: "none", color: "var(--content-muted)", cursor: "pointer", padding: 4 }}><Icon name="more-horizontal" size={16} /></button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
}

Object.assign(window, { AccessConsole });