/* global React, HashBadge, AttestationStatePill, ReasonCodeChip, LatencyBudgetMeter, MerkleProofTree, TimelineAxis, ThresholdGateIndicator, PartyAttestationRow, Spark */

const { useState: useS, useMemo: useM } = React;

/* =========================================================
   FRAUD DECISION AUDIT CONSOLE — hero screen
   ========================================================= */
function FraudConsole() {
  const decisions = [
    { id: "ATT-7F4A2C91", t: "14:22:07.384921", mcc: "5411", amt: "€82.40", outcome: "APPROVE",  state: "finalized", model: "v4.2.1", lat: 2.14, codes: ["F00"], risk: 0.08 },
    { id: "ATT-7F4A2C90", t: "14:22:07.312044", mcc: "7995", amt: "€1,240.00", outcome: "DECLINE", state: "finalized", model: "v4.2.1", lat: 3.41, codes: ["F14","F22"], risk: 0.91 },
    { id: "ATT-7F4A2C8F", t: "14:22:07.294113", mcc: "5732", amt: "€340.10", outcome: "STEP_UP", state: "witnessed", model: "v4.2.1", lat: 2.88, codes: ["F07"], risk: 0.52 },
    { id: "ATT-7F4A2C8E", t: "14:22:07.201770", mcc: "5411", amt: "€12.19", outcome: "APPROVE",  state: "finalized", model: "v4.2.1", lat: 1.94, codes: [], risk: 0.04 },
    { id: "ATT-7F4A2C8D", t: "14:22:07.140219", mcc: "6011", amt: "€500.00", outcome: "DECLINE", state: "finalized", model: "v4.2.1", lat: 2.63, codes: ["F02"], risk: 0.77 },
    { id: "ATT-7F4A2C8C", t: "14:22:07.098001", mcc: "4829", amt: "€2,500.00", outcome: "STEP_UP", state: "signed", model: "v4.2.0", lat: 3.86, codes: ["F11","F07"], risk: 0.63 },
    { id: "ATT-7F4A2C8B", t: "14:22:07.001220", mcc: "5812", amt: "€44.90", outcome: "APPROVE",  state: "finalized", model: "v4.2.1", lat: 1.72, codes: [], risk: 0.02 },
    { id: "ATT-7F4A2C8A", t: "14:22:06.982147", mcc: "5944", amt: "€180.00", outcome: "APPROVE",  state: "finalized", model: "v4.2.1", lat: 2.05, codes: ["F00"], risk: 0.11 },
    { id: "ATT-7F4A2C89", t: "14:22:06.870311", mcc: "5999", amt: "€8,200.00", outcome: "DECLINE", state: "failed", model: "v4.2.1", lat: 3.12, codes: ["F22","F14","F07"], risk: 0.96 },
    { id: "ATT-7F4A2C88", t: "14:22:06.811400", mcc: "5411", amt: "€29.00", outcome: "APPROVE",  state: "finalized", model: "v4.2.1", lat: 1.58, codes: [], risk: 0.06 },
  ];
  const [selected, setSelected] = useS(1); // the €1,240 decline — interesting
  const d = decisions[selected];

  const rcMap = {
    F00: ["velocity", "low"], F02: ["device reputation", "high"], F07: ["geo mismatch", "med"],
    F11: ["merchant risk", "med"], F14: ["BIN risk + amount", "high"], F22: ["graph cluster", "high"],
  };

  return (
    <div style={{ display: "grid", gridTemplateColumns: "420px 1fr 360px", height: "100%" }}>
      {/* LEFT — decision timeline */}
      <div style={{ borderRight: "1px solid var(--ak-line)", display: "grid", gridTemplateRows: "auto 1fr" }}>
        <div style={{ padding: "12px 14px", borderBottom: "1px solid var(--ak-line)" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
            <div className="cap">decision stream</div>
            <div className="mono" style={{ fontSize: "var(--ak-fs-9)", color: "var(--ak-fg-3)" }}>
              <span style={{ color: "var(--ak-state-finalized-fg)" }}>● live</span> · 14:22:07 UTC
            </div>
          </div>
          <div style={{ display: "flex", gap: 6, marginBottom: 8 }}>
            <input className="ak-input" placeholder="  /  filter · att:* outcome:decline risk:>0.8" style={{ fontSize: "var(--ak-fs-11)" }}/>
          </div>
          <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
            <Chip label="ALL" active />
            <Chip label="APPROVE" />
            <Chip label="DECLINE" />
            <Chip label="STEP_UP" />
            <Chip label="disputed" count={3} />
          </div>
        </div>
        <div style={{ overflow: "auto" }}>
          <table className="ak-table">
            <thead>
              <tr>
                <th style={{ width: 110 }}>timestamp</th>
                <th>outcome</th>
                <th style={{ width: 80 }}>risk</th>
                <th style={{ width: 60 }}>lat</th>
                <th style={{ width: 56 }}>state</th>
              </tr>
            </thead>
            <tbody>
              {decisions.map((x, i) => (
                <tr key={x.id} data-selected={i === selected} onClick={() => setSelected(i)}>
                  <td className="mono" style={{ color: "var(--ak-fg-2)", fontSize: 10 }}>{x.t.slice(6)}</td>
                  <td>
                    <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                      <OutcomeDot kind={x.outcome}/>
                      <span style={{ color: "var(--ak-fg-0)" }}>{x.outcome}</span>
                      <span style={{ color: "var(--ak-fg-3)", fontSize: 10 }} className="mono">{x.amt}</span>
                    </div>
                    <div style={{ display: "flex", gap: 4, marginTop: 3 }}>
                      {x.codes.map(c => <span key={c} className="mono" style={{ fontSize: 9, color: "var(--ak-fg-3)" }}>{c}</span>)}
                    </div>
                  </td>
                  <td>
                    <RiskBar v={x.risk} />
                  </td>
                  <td className="mono num" style={{ color: x.lat > 3 ? "var(--ak-latency-warn)" : "var(--ak-fg-1)" }}>{x.lat.toFixed(2)}</td>
                  <td><StateDot state={x.state}/></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* CENTER — decision detail + replay */}
      <div style={{ overflow: "auto" }}>
        <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 16 }}>
          {/* header */}
          <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16 }}>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span className="mono" style={{ fontSize: "var(--ak-fs-20)", color: "var(--ak-fg-0)", letterSpacing: "-0.01em" }}>{d.id}</span>
                <AttestationStatePill state={d.state}/>
                <span className="mono" style={{ color: "var(--ak-fg-3)", fontSize: "var(--ak-fs-10)" }}>capsule #884,219,304</span>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 6, color: "var(--ak-fg-2)", fontSize: "var(--ak-fs-11)" }}>
                <span className="mono">{d.t} UTC</span>
                <Dot2/>
                <span>Tokenized PAN <HashBadge value="0xd41a9b76e3c2" kind="TOK" ver="verified" short={3}/></span>
                <Dot2/>
                <span>BIN 4147·MCC {d.mcc}</span>
                <Dot2/>
                <span>{d.amt}</span>
              </div>
            </div>
            <div style={{ display: "flex", gap: 6 }}>
              <button className="ak-btn">replay <kbd>R</kbd></button>
              <button className="ak-btn">re-verify proof <kbd>V</kbd></button>
              <button className="ak-btn" data-variant="primary">build evidence pack <kbd>E</kbd></button>
            </div>
          </div>

          {/* PCI-free banner */}
          <div style={{
            border: "1px solid color-mix(in srgb, var(--ak-state-finalized-fg) 30%, var(--ak-line))",
            background: "color-mix(in srgb, var(--ak-state-finalized-bg) 60%, var(--ak-bg-1))",
            borderRadius: "var(--ak-r-2)",
            padding: "8px 12px",
            display: "flex", alignItems: "center", gap: 10,
            fontFamily: "var(--ak-font-mono)", fontSize: "var(--ak-fs-10)",
            color: "var(--ak-fg-1)",
          }}>
            <span style={{ color: "var(--ak-state-finalized-fg)" }}>◉</span>
            <span>PCI_SCOPE = ∅</span>
            <span style={{ color: "var(--ak-fg-3)" }}>· no raw PAN · no CVV · no cardholder PII · only hashes + tokens</span>
            <span style={{ flex: 1 }}/>
            <span style={{ color: "var(--ak-fg-3)" }}>attested by HSM signer</span>
            <HashBadge value="0x7a1c9e44b2f8d031" kind="KEY" short={3}/>
          </div>

          {/* replay: input → model → output */}
          <div className="ak-panel">
            <div className="ak-panel__h">
              <span>decision replay</span>
              <span className="mono" style={{ color: "var(--ak-fg-3)", fontSize: "var(--ak-fs-9)" }}>deterministic · model v4.2.1 · seed 0x88af</span>
            </div>
            <div className="ak-panel__b" style={{ display: "grid", gridTemplateColumns: "1fr 40px 1fr 40px 1fr", alignItems: "center" }}>
              {/* input */}
              <ReplayCard title="FEATURE VECTOR" sub="hash-only · 412 dims">
                <HashBadge value="0x9c3f1ab44de8cc02a71fb6" kind="FEATURE" short={6}/>
                <div style={{ marginTop: 8, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 4, fontFamily: "var(--ak-font-mono)", fontSize: 10, color: "var(--ak-fg-2)" }}>
                  <div>velocity_24h <span style={{ color: "var(--ak-fg-0)" }}>8.2σ</span></div>
                  <div>amount_z <span style={{ color: "var(--ak-fg-0)" }}>3.1σ</span></div>
                  <div>geo_entropy <span style={{ color: "var(--ak-fg-0)" }}>0.88</span></div>
                  <div>device_age <span style={{ color: "var(--ak-fg-0)" }}>4d</span></div>
                  <div>graph_cluster <span style={{ color: "var(--ak-state-failed-fg)" }}>C-772</span></div>
                  <div>mcc_bin_risk <span style={{ color: "var(--ak-state-signed-fg)" }}>0.71</span></div>
                </div>
              </ReplayCard>
              <Arrow/>
              <ReplayCard title="MODEL" sub="GBM + graph head">
                <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 6, fontFamily: "var(--ak-font-mono)", fontSize: 11, color: "var(--ak-fg-0)" }}>
                    <span style={{ color: "var(--ak-fg-3)" }}>version</span> v4.2.1
                  </div>
                  <HashBadge value="0x0c2d9a1b77ef48" kind="WEIGHTS" short={4}/>
                  <div style={{ fontFamily: "var(--ak-font-mono)", fontSize: 10, color: "var(--ak-fg-2)", marginTop: 4 }}>
                    <div>score <span style={{ color: "var(--ak-state-failed-fg)" }} className="num">0.91</span></div>
                    <div>threshold <span style={{ color: "var(--ak-fg-0)" }} className="num">0.80</span></div>
                    <div>explain gain Σ <span style={{ color: "var(--ak-fg-0)" }} className="num">+0.42</span></div>
                  </div>
                </div>
              </ReplayCard>
              <Arrow/>
              <ReplayCard title="OUTCOME" sub="signed · EIP-712">
                <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                  <div style={{ fontSize: "var(--ak-fs-16)", fontWeight: 600, color: "var(--ak-state-failed-fg)" }}>DECLINE</div>
                  <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
                    {d.codes.map(c => <ReasonCodeChip key={c} code={c} label={rcMap[c]?.[0] || ""} weight={rcMap[c]?.[1] || "low"}/>)}
                  </div>
                  <HashBadge value="0x4a7b8c92ef13c01a98b4cd7f3921" kind="SIG" short={5}/>
                </div>
              </ReplayCard>
            </div>
          </div>

          {/* latency */}
          <div className="ak-panel">
            <div className="ak-panel__h"><span>latency budget · 200ms card-auth window</span><span className="mono" style={{ color: "var(--ak-fg-3)", fontSize: "var(--ak-fs-9)" }}>p99 @ c=24</span></div>
            <div className="ak-panel__b">
              <TimelineAxis
                mode="submillisecond"
                startMs={0} endMs={210}
                title="kernel capsule chain"
                height={96}
                events={[
                  { t: 0, label: "rx auth", state: "signed" },
                  { t: 0.42, label: "feature capsule", state: "signed" },
                  { t: 1.18, label: "model capsule", state: "signed" },
                  { t: 2.04, label: "reason capsule", state: "signed" },
                  { t: 3.41, label: "attestation signed", state: "finalized" },
                  { t: 3.62, label: "emit", state: "finalized" },
                ]}
              />
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10, marginTop: 14 }}>
                <StatBox label="kernel total" value="3.41ms" sub="1.7% of SLA" tone="ok"/>
                <StatBox label="network rt" value="18.2ms" sub="issuer → acquirer" tone="warn"/>
                <StatBox label="merchant stack" value="84ms" sub="gateway + proc" tone="hot"/>
                <StatBox label="budget left" value="94.4ms" sub="47.2% of 200ms" tone="ok"/>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* RIGHT — Merkle proof + ancestry */}
      <div style={{ borderLeft: "1px solid var(--ak-line)", padding: 16, overflow: "auto", background: "var(--ak-bg-0)" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
          <div className="cap">attestation artifact</div>
          <div style={{ display: "flex", gap: 4 }}>
            <button className="ak-btn" style={{ padding: "3px 6px", fontSize: "var(--ak-fs-9)" }}>copy</button>
            <button className="ak-btn" style={{ padding: "3px 6px", fontSize: "var(--ak-fs-9)" }}>json</button>
          </div>
        </div>
        <MerkleProofTree
          leaf="0x9c3f1ab44de8cc02a71fb6412a93ee"
          siblings={[
            { side: "R", hash: "0x77aa0c1e..." },
            { side: "L", hash: "0x4b29e301..." },
            { side: "R", hash: "0xd8910bcc..." },
            { side: "L", hash: "0x0c2d9a1b..." },
            { side: "R", hash: "0x6fe14422..." },
          ]}
          root="0xa1b2c3d4e5f67890fedcba012345"
        />
        <div style={{ marginTop: 18 }}>
          <div className="cap" style={{ marginBottom: 8 }}>ancestry chain</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 2, fontFamily: "var(--ak-font-mono)", fontSize: 10 }}>
            {["feature.capsule", "model.capsule", "reason.capsule", "attestation.capsule"].map((k, i) => (
              <div key={k} style={{ display: "grid", gridTemplateColumns: "16px 1fr auto", gap: 8, alignItems: "center", padding: "5px 0", borderBottom: "1px dashed var(--ak-line)" }}>
                <span style={{ color: "var(--ak-fg-3)" }}>{String(i + 1).padStart(2, "0")}</span>
                <span style={{ color: "var(--ak-fg-1)" }}>{k}</span>
                <HashBadge value={["0x9c3f1ab44de","0x1f228a91bb2","0x88cc01ab99","0x4a7b8c92ef1"][i]} kind="" short={3}/>
              </div>
            ))}
          </div>
        </div>
        <div style={{ marginTop: 18 }}>
          <div className="cap" style={{ marginBottom: 8 }}>applicable exports</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 11 }}>
            <ExportRow name="Visa CE 3.0" bytes="4.2 KB" status="ready" />
            <ExportRow name="Mastercard Compelling Evidence 3.0" bytes="4.4 KB" status="ready" />
            <ExportRow name="CFPB §1005.11 dispute pack" bytes="12 KB" status="ready" />
            <ExportRow name="EU AI Act Art.14 log" bytes="28 KB" status="pending" />
          </div>
        </div>
      </div>
    </div>
  );
}

function Chip({ label, active, count }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 4,
      padding: "2px 7px",
      border: "1px solid " + (active ? "var(--ak-line-3)" : "var(--ak-line)"),
      background: active ? "var(--ak-bg-3)" : "transparent",
      color: active ? "var(--ak-fg-0)" : "var(--ak-fg-2)",
      fontFamily: "var(--ak-font-mono)", fontSize: "var(--ak-fs-9)",
      textTransform: "uppercase", letterSpacing: ".08em",
      borderRadius: 2, cursor: "pointer",
    }}>
      {label}{count && <span style={{ color: "var(--ak-fg-3)" }}>{count}</span>}
    </span>
  );
}
function OutcomeDot({ kind }) {
  const c = kind === "APPROVE" ? "var(--ak-state-finalized-fg)" : kind === "DECLINE" ? "var(--ak-state-failed-fg)" : "var(--ak-state-signed-fg)";
  return <span style={{ width: 6, height: 6, borderRadius: "50%", background: c, flex: "0 0 auto" }}/>;
}
function RiskBar({ v }) {
  const color = v > 0.8 ? "var(--ak-state-failed-fg)" : v > 0.5 ? "var(--ak-state-signed-fg)" : "var(--ak-state-finalized-fg)";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
      <div style={{ flex: 1, height: 4, background: "var(--ak-bg-inset)", border: "1px solid var(--ak-line)", borderRadius: 1, overflow: "hidden" }}>
        <div style={{ width: (v * 100) + "%", height: "100%", background: color }}/>
      </div>
      <span className="mono num" style={{ fontSize: 9, color: "var(--ak-fg-2)", minWidth: 26, textAlign: "right" }}>{v.toFixed(2)}</span>
    </div>
  );
}
function StateDot({ state }) {
  const map = { finalized: "var(--ak-state-finalized-fg)", witnessed: "var(--ak-state-witnessed-fg)", signed: "var(--ak-state-signed-fg)", failed: "var(--ak-state-failed-fg)" };
  return <span style={{ display: "inline-block", width: 8, height: 8, background: map[state], boxShadow: "0 0 0 2px " + map[state] + "22" }}/>;
}
function ReplayCard({ title, sub, children }) {
  return (
    <div style={{ background: "var(--ak-bg-2)", border: "1px solid var(--ak-line)", borderRadius: "var(--ak-r-2)", padding: 12 }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
        <span className="cap">{title}</span>
        <span className="mono" style={{ fontSize: 9, color: "var(--ak-fg-3)" }}>{sub}</span>
      </div>
      {children}
    </div>
  );
}
function Arrow() {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ak-fg-3)" }}>
      <svg width="40" height="14" viewBox="0 0 40 14"><path d="M0 7 L34 7 M28 2 L34 7 L28 12" stroke="currentColor" strokeWidth="1" fill="none"/></svg>
    </div>
  );
}
function Dot2() { return <span style={{ color: "var(--ak-fg-4)" }}>·</span>; }
function StatBox({ label, value, sub, tone = "ok" }) {
  const color = { ok: "var(--ak-latency-ok)", warn: "var(--ak-latency-warn)", hot: "var(--ak-latency-hot)", over: "var(--ak-latency-over)" }[tone];
  return (
    <div style={{ background: "var(--ak-bg-inset)", border: "1px solid var(--ak-line)", borderRadius: 2, padding: "10px 12px" }}>
      <div className="cap">{label}</div>
      <div className="mono num" style={{ fontSize: "var(--ak-fs-24)", color, marginTop: 4, letterSpacing: "-0.01em" }}>{value}</div>
      <div className="mono" style={{ fontSize: 10, color: "var(--ak-fg-3)" }}>{sub}</div>
    </div>
  );
}
function ExportRow({ name, bytes, status }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr auto auto", gap: 10, alignItems: "center", padding: "6px 0", borderBottom: "1px dashed var(--ak-line)" }}>
      <span style={{ color: "var(--ak-fg-1)" }}>{name}</span>
      <span className="mono" style={{ fontSize: 10, color: "var(--ak-fg-3)" }}>{bytes}</span>
      <span className="mono" style={{ fontSize: 9, textTransform: "uppercase", letterSpacing: ".08em", color: status === "ready" ? "var(--ak-state-finalized-fg)" : "var(--ak-state-signed-fg)" }}>{status}</span>
    </div>
  );
}

Object.assign(window, { FraudConsole });