/* global React, Icon, StatusChip, Avatar, PageHeader, Banner, Drawer, DrawerHead, Meta, PEOPLE, useActionDrawer */
const { useState: useStateAD } = React;

/* ============================================================
   Admin & Governance — Pack 11
   Audit trail · maker-checker register · users & roles · GRC (RCSA/KRI/incidents)
   The governance home where traceability ties together.
   ============================================================ */

const AUDIT = [
  { t: "14:22", actor: "meron", act: "Submitted stress assumptions", obj: "Capital · WD 145% · RWA +6.7%", kind: "submit", module: "Capital Adequacy" },
  { t: "13:58", actor: "hana", act: "Approved mapping", obj: "DEP_ACCT_BAL → LCR retail stable", kind: "approve", module: "Data Harmonizer" },
  { t: "13:30", actor: "sara", act: "Attached rule evidence", obj: "NBE LRM §5.2 · retail run-off", kind: "evidence", module: "LCR / NSFR" },
  { t: "12:47", actor: "yonas", act: "Waived exception", obj: "E-122 · mapping confidence", kind: "waive", module: "Credit Risk", note: "Justified: counterparty confirmed manually" },
  { t: "11:39", actor: "dawit", act: "Rejected failed rows", obj: "Loans ledger · 312 rows", kind: "reject", module: "Data Harmonizer" },
  { t: "11:04", actor: "dawit", act: "Prepared workpaper", obj: "ALM / Liquidity · maturity ladder", kind: "edit", module: "ALM / Liquidity" },
  { t: "10:18", actor: "abel", act: "Reconciled source", obj: "FX position blotter → NOP", kind: "approve", module: "Market / FX" },
  { t: "09:12", actor: "system", act: "Captured source snapshot", obj: "Deposits ledger · hash 9f3c·a21e", kind: "system", module: "Data Harmonizer" },
];
const KIND = {
  submit: ["arrowR", "var(--indigo)", "var(--indigo-soft)"], approve: ["check", "var(--green-ink)", "var(--green-soft)"],
  evidence: ["clipboard", "var(--amber)", "var(--amber-soft)"], waive: ["flag", "var(--amber)", "var(--amber-soft)"],
  reject: ["x", "var(--red)", "var(--red-soft)"], edit: ["fileText", "var(--slate)", "var(--slate-soft)"],
  system: ["database", "var(--ink-3)", "var(--surface-2)"],
};

const MAKER_CHECKER = [
  { id: "MC-218", item: "Stress assumptions · Capital", maker: "meron", checker: "hana", state: "REVIEW_PENDING", age: "2h" },
  { id: "MC-217", item: "LCR outflow factor evidence", maker: "sara", checker: "hana", state: "REVIEW_PENDING", age: "4h" },
  { id: "MC-216", item: "Maturity-ladder mapping", maker: "dawit", checker: "sara", state: "APPROVED_INTERNAL", age: "1d" },
  { id: "MC-215", item: "Tier-2 deduction bridge", maker: "meron", checker: "hana", state: "REVIEW_PENDING", age: "1d" },
  { id: "MC-214", item: "NOP reconciliation", maker: "abel", checker: "hana", state: "APPROVED_INTERNAL", age: "2d" },
];

const USERS = [
  { who: "hana", roles: ["Treasury Head", "Approver"], modules: "All", mfa: true },
  { who: "dawit", roles: ["Maker", "Liquidity Risk"], modules: "ALM, LCR, IRRBB", mfa: true },
  { who: "sara", roles: ["Maker", "Checker", "Reg Reporting"], modules: "LCR, Reg Reporting", mfa: true },
  { who: "meron", roles: ["Maker", "Finance Control"], modules: "Capital, Credit", mfa: true },
  { who: "yonas", roles: ["Maker", "Credit Risk"], modules: "Credit Risk", mfa: false },
  { who: "abel", roles: ["Maker", "Market Risk"], modules: "Market / FX", mfa: true },
];

const GRC_KRI = [
  { name: "Open critical exceptions", val: "9", limit: "≤ 5", state: "red" },
  { name: "Evidence-gated cells", val: "37", limit: "≤ 20", state: "red" },
  { name: "Overdue maker-checker tasks", val: "2", limit: "0", state: "amber" },
  { name: "Failed model backtests", val: "1", limit: "0", state: "amber" },
  { name: "Sources reconciled", val: "5 / 8", limit: "8 / 8", state: "amber" },
  { name: "MFA coverage", val: "5 / 6", limit: "6 / 6", state: "amber" },
];
const GRC_RCSA = [
  { risk: "Source data integrity", owner: "dawit", inherent: "High", control: "Validation + reconciliation", residual: "Medium", state: "REVIEW_PENDING" },
  { risk: "Unsupported regulatory factor", owner: "sara", inherent: "High", control: "Rule-evidence register", residual: "High", state: "EVIDENCE_NEEDED" },
  { risk: "Stress contaminating official figures", owner: "hana", inherent: "High", control: "Analysis-only segregation", residual: "Low", state: "RECONCILED" },
  { risk: "Model assumption drift", owner: "meron", inherent: "Medium", control: "Backtesting + approval", residual: "Medium", state: "REVIEW_PENDING" },
];

function Admin({ go, info }) {
  const [tab, setTab] = useStateAD("Audit trail");
  const [sel, setSel] = useStateAD(null);
  const [actionNode, openAction] = useActionDrawer();
  return (
    <div className="main-inner">
      <PageHeader eyebrow="Governance" title="Admin & Governance"
        onInfo={() => info({ title: "Admin & Governance", purpose: "The governance home: a complete audit trail of every action, the maker-checker register, users & roles, and the GRC surface (KRIs, RCSA, incidents). This is where the platform's traceability promise is enforced and inspected.", first: "The audit trail is append-only — every submit, approve, attach, waive and reject across all modules lands here with actor, object, and time.", terms: [["Audit trail", "Append-only log of every governed action."], ["Maker-checker", "Dual-control: a maker acts, a different checker approves."], ["RCSA", "Risk & control self-assessment."], ["KRI", "Key risk indicator vs its limit."]], next: ["Filter the audit trail by module or action.", "Review the maker-checker register.", "Check KRI breaches and RCSA residual ratings."], connections: ["Every screen's submit/approve/attach/waive writes here.", "Maker-checker tasks mirror the Control Room queue."], guardrail: "The audit trail is append-only and cannot be edited — it is the system of record for who did what, when." })}
        right={<button className="btn btn-ghost btn-sm" onClick={() => openAction({
          title: "Export audit log",
          sub: "Internal audit preview",
          chip: <StatusChip s="INTERNAL_WP" />,
          banner: <span><b>Audit log preview prepared.</b> It contains the append-only events currently rendered in this workspace.</span>,
          rows: [["Events", AUDIT.length], ["Scope", "Current fixture cycle"], ["Format", "Internal review preview"], ["System of record", "Audit trail screen"]],
          guardrail: "No file is written and no external GRC system is connected in Sprint 1.",
        })}><Icon name="download" size={15} /> Export audit log</button>} />

      <div className="seg-ctl mb20">
        {["Audit trail", "Maker-checker", "Users & roles", "GRC / Resilience"].map(t => (
          <button key={t} className={tab === t ? "on" : ""} onClick={() => setTab(t)}>{t}</button>
        ))}
      </div>

      {tab === "Audit trail" && <React.Fragment>
        <div style={{ marginBottom: 14 }}><Banner kind="green" icon="lock"><b>Append-only.</b> Every governed action across all modules is logged here with actor, object and timestamp — the immutable system of record.</Banner></div>
        <div className="card">
          {AUDIT.map((a, i) => { const k = KIND[a.kind]; const p = a.actor === "system" ? null : PEOPLE[a.actor]; return (
            <div key={i} className="center gap12" style={{ padding: "13px 18px", borderBottom: i < AUDIT.length - 1 ? "1px solid var(--border)" : "none" }}>
              <span style={{ width: 30, height: 30, borderRadius: 8, background: k[2], color: k[1], display: "grid", placeItems: "center", flex: "0 0 auto" }}><Icon name={k[0]} size={15} /></span>
              <div className="grow" style={{ minWidth: 0 }}>
                <div style={{ fontSize: 13.5 }}><b>{p ? p.name : "System"}</b> · {a.act} <span className="muted">— {a.obj}</span></div>
                <div className="muted" style={{ fontSize: 11.5, marginTop: 1 }}>{a.module}{a.note && <span> · <i>{a.note}</i></span>}</div>
              </div>
              <span className="mono muted" style={{ fontSize: 12, flex: "0 0 auto" }}>{a.t}</span>
            </div>
          ); })}
        </div>
      </React.Fragment>}

      {tab === "Maker-checker" && <div className="card">
        <table className="tbl">
          <thead><tr><th>ID</th><th>Item</th><th>Maker</th><th>Checker</th><th>Age</th><th>State</th><th></th></tr></thead>
          <tbody>
            {MAKER_CHECKER.map(m => { const mk = PEOPLE[m.maker], ck = PEOPLE[m.checker]; return (
              <tr key={m.id} className="click" onClick={() => setSel(m)}>
                <td className="mono" style={{ fontSize: 12.5 }}>{m.id}</td>
                <td style={{ fontWeight: 600 }}>{m.item}</td>
                <td><span className="center gap6" style={{ fontSize: 12.5 }}><Avatar name={mk.name} size={20} /> {mk.name.split(" ")[0]}</span></td>
                <td><span className="center gap6" style={{ fontSize: 12.5 }}><Avatar name={ck.name} size={20} /> {ck.name.split(" ")[0]}</span></td>
                <td className="muted">{m.age}</td>
                <td><StatusChip s={m.state} /></td>
                <td className="num">{m.state === "REVIEW_PENDING" ? <button className="btn btn-dark btn-sm" onClick={(e) => { e.stopPropagation(); setSel(m); }}>Review</button> : <Icon name="checkCirc" size={17} style={{ color: "var(--green)" }} />}</td>
              </tr>
            ); })}
          </tbody>
        </table>
      </div>}

      {tab === "Users & roles" && <React.Fragment>
        <div style={{ marginBottom: 14 }}><Banner kind="amber" icon="users"><b>Segregation of duties.</b> A maker can never check their own work. One user (Yonas) has MFA disabled — flagged below.</Banner></div>
        <div className="card">
          <table className="tbl">
            <thead><tr><th>User</th><th>Roles</th><th>Module access</th><th>MFA</th><th></th></tr></thead>
            <tbody>
              {USERS.map(u => { const p = PEOPLE[u.who]; return (
                <tr key={u.who} className="click">
                  <td><span className="center gap8"><Avatar name={p.name} size={24} /><div><div style={{ fontWeight: 600, fontSize: 13 }}>{p.name}</div><div className="muted" style={{ fontSize: 11 }}>{p.role}</div></div></span></td>
                  <td><span className="center gap6 wrap">{u.roles.map(r => <span key={r} className="chip chip-neutral" style={{ fontSize: 10.5 }}>{r}</span>)}</span></td>
                  <td className="muted" style={{ fontSize: 12.5 }}>{u.modules}</td>
                  <td>{u.mfa ? <span className="chip chip-green"><span className="dot" />On</span> : <span className="chip chip-red"><span className="dot" />Off</span>}</td>
                  <td className="num"><button className="btn btn-quiet btn-sm" onClick={() => openAction({
                    title: "Manage user",
                    sub: p.name,
                    chip: <span className={"chip " + (u.mfa ? "chip-green" : "chip-red")}><span className="dot" />MFA {u.mfa ? "on" : "off"}</span>,
                    banner: <span><b>User role drawer opened.</b> This is an internal role review; permissions are not persisted to a backend.</span>,
                    rows: [["User", p.name], ["Roles", u.roles.join(", ")], ["Module access", u.modules], ["MFA", u.mfa ? "Enabled" : "Disabled"]],
                    items: u.mfa ? [] : [{ title: "MFA gap", body: "Flagged for admin follow-up before production use.", icon: "alert" }],
                    guardrail: "Role changes are not executed in this build.",
                  })}>Manage</button></td>
                </tr>
              ); })}
            </tbody>
          </table>
        </div>
      </React.Fragment>}

      {tab === "GRC / Resilience" && <React.Fragment>
        <div className="panel-h"><h3 style={{ fontSize: 15 }}>Key risk indicators</h3><span className="sub">vs limit · current cycle</span></div>
        <div className="grid g3 mb24">
          {GRC_KRI.map((k, i) => (
            <div key={i} className="card card-pad" style={{ padding: "14px 16px" }}>
              <div className="between"><div className="section-label">{k.name}</div><span className={"chip chip-" + (k.state === "red" ? "red" : "amber")}><span className="dot" />{k.state === "red" ? "Breach" : "Watch"}</span></div>
              <div className="big-num tnum" style={{ fontSize: 24, marginTop: 6, color: k.state === "red" ? "var(--red)" : "var(--amber)" }}>{k.val}</div>
              <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>Limit {k.limit}</div>
            </div>
          ))}
        </div>
        <div className="panel-h"><h3 style={{ fontSize: 15 }}>Risk &amp; control self-assessment (RCSA)</h3></div>
        <div className="card">
          <table className="tbl">
            <thead><tr><th>Risk</th><th>Owner</th><th>Inherent</th><th>Key control</th><th>Residual</th><th>State</th></tr></thead>
            <tbody>
              {GRC_RCSA.map((r, i) => { const p = PEOPLE[r.owner]; const rc = { High: "chip-red", Medium: "chip-amber", Low: "chip-green" }; return (
                <tr key={i} className="click">
                  <td style={{ fontWeight: 600 }}>{r.risk}</td>
                  <td><span className="center gap6" style={{ fontSize: 12.5 }}><Avatar name={p.name} size={20} /> {p.name.split(" ")[0]}</span></td>
                  <td><span className={"chip " + rc[r.inherent]}>{r.inherent}</span></td>
                  <td className="muted" style={{ fontSize: 12.5 }}>{r.control}</td>
                  <td><span className={"chip " + rc[r.residual]}>{r.residual}</span></td>
                  <td><StatusChip s={r.state} /></td>
                </tr>
              ); })}
            </tbody>
          </table>
        </div>
      </React.Fragment>}

      {sel && <Drawer open={!!sel} onClose={() => setSel(null)}>
        <DrawerHead title={sel.id + " · " + sel.item} chip={<StatusChip s={sel.state} />} onClose={() => setSel(null)} />
        <div className="drawer-body">
          <Banner kind="indigo" icon="info">Dual control — the checker must be different from the maker. Approving here records an immutable audit entry.</Banner>
          <div className="mt16"><Meta rows={[
            ["Maker", <span className="center gap8"><Avatar name={PEOPLE[sel.maker].name} size={20} /> {PEOPLE[sel.maker].name}</span>],
            ["Checker", <span className="center gap8"><Avatar name={PEOPLE[sel.checker].name} size={20} /> {PEOPLE[sel.checker].name}</span>],
            ["Age", sel.age],
            ["Audit", "Will append on decision"],
          ]} /></div>
        </div>
        <div className="drawer-foot">
          {sel.state === "REVIEW_PENDING"
            ? <React.Fragment><button className="btn btn-ghost" style={{ color: "var(--red)", borderColor: "var(--red-line)" }} onClick={() => setSel(null)}>Reject</button><button className="btn btn-green" style={{ marginLeft: "auto" }} onClick={() => setSel(null)}><Icon name="check" size={15} /> Approve</button></React.Fragment>
            : <span className="center gap6" style={{ color: "var(--green-ink)", fontWeight: 600, marginLeft: "auto" }}><Icon name="checkCirc" size={16} /> Approved internal</span>}
        </div>
      </Drawer>}
      {actionNode}
    </div>
  );
}
window.Admin = Admin;