/* global React, HashBadge, AttestationStatePill */

/* =========================================================
   COMMAND PALETTE (⌘K) — fuzzy search over attestations,
   surfaces, actions
   ========================================================= */
function CommandPalette({ open, onClose, onNav }) {
  const [query, setQuery] = React.useState("");
  const [sel, setSel] = React.useState(0);
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (open && inputRef.current) {
      inputRef.current.focus();
      setQuery("");
      setSel(0);
    }
  }, [open]);

  const items = React.useMemo(() => {
    const all = [
      { type: "surface", id: "fraud",  label: "Fraud Decision Audit",   sub: "surface · 1", action: () => onNav("fraud") },
      { type: "surface", id: "sca",    label: "SCA / 3DS Attestation",  sub: "surface · 2", action: () => onNav("sca") },
      { type: "surface", id: "orch",   label: "Orchestration Audit",    sub: "surface · 3", action: () => onNav("orch") },
      { type: "surface", id: "settle", label: "Settlement Gate",        sub: "surface · 4", action: () => onNav("settle") },
      { type: "surface", id: "flow",   label: "Dispute → CE 3.0 Flow",  sub: "surface · 5", action: () => onNav("flow") },
      { type: "att", id: "ATT-7F4A2C91", label: "ATT-7F4A2C91 · APPROVE · €82.40",    sub: "fraud · finalized · 14:22:07.384", action: () => onNav("fraud") },
      { type: "att", id: "ATT-7F4A2C90", label: "ATT-7F4A2C90 · DECLINE · €1,240.00", sub: "fraud · finalized · 14:22:07.312", action: () => onNav("fraud") },
      { type: "att", id: "ATT-7F4A2C8F", label: "ATT-7F4A2C8F · STEP_UP · €340.10",   sub: "fraud · witnessed · 14:22:07.294", action: () => onNav("fraud") },
      { type: "att", id: "ATT-7F4A2C8D", label: "ATT-7F4A2C8D · DECLINE · €500.00",   sub: "fraud · finalized · 14:22:07.140", action: () => onNav("fraud") },
      { type: "att", id: "3DS-9A41C2E7", label: "3DS-9A41C2E7 · passkey · ECI 05",     sub: "SCA · finalized · 14:22:06.998", action: () => onNav("sca") },
      { type: "att", id: "ROUTE-44C812", label: "ROUTE-44C812 · Adyen selected · €1,240", sub: "orch · finalized", action: () => onNav("orch") },
      { type: "att", id: "STL-B0C1-4421", label: "STL-B0C1-4421 · €14.2M batch",       sub: "settle · threshold", action: () => onNav("settle") },
      { type: "action", id: "theme",    label: "Toggle theme (light / dark)",   sub: "appearance", action: () => { const r = document.documentElement; r.setAttribute("data-theme", r.getAttribute("data-theme") === "light" ? "dark" : "light"); } },
      { type: "action", id: "export",   label: "Build evidence pack",           sub: "dispute flow · CE 3.0", action: () => onNav("flow") },
      { type: "action", id: "replay",   label: "Replay last fraud decision",    sub: "re-verify proof", action: () => onNav("fraud") },
      { type: "action", id: "signer",   label: "View signer identity",          sub: "HSM · EIP-712", action: () => { if (window.__openSignerOverlay) window.__openSignerOverlay(); } },
      { type: "action", id: "shortcuts",label: "Show keyboard shortcuts",        sub: "help", action: () => {} },
    ];
    if (!query) return all;
    const q = query.toLowerCase();
    return all.filter(i => i.label.toLowerCase().includes(q) || i.sub.toLowerCase().includes(q) || i.id.toLowerCase().includes(q));
  }, [query, onNav]);

  React.useEffect(() => { setSel(0); }, [query]);

  const onKeyDown = e => {
    if (e.key === "Escape") { onClose(); return; }
    if (e.key === "ArrowDown") { e.preventDefault(); setSel(s => Math.min(s + 1, items.length - 1)); return; }
    if (e.key === "ArrowUp") { e.preventDefault(); setSel(s => Math.max(s - 1, 0)); return; }
    if (e.key === "Enter" && items[sel]) { items[sel].action(); onClose(); }
  };

  if (!open) return null;

  const typeIcons = { surface: "◈", att: "◆", action: "▸" };
  const typeColors = { surface: "var(--ak-accent)", att: "var(--ak-state-signed-fg)", action: "var(--ak-fg-2)" };

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 9999,
      background: "rgba(0,0,0,0.6)",
      display: "flex", alignItems: "flex-start", justifyContent: "center",
      paddingTop: 120,
    }} onClick={onClose}>
      <div style={{
        width: 640,
        maxHeight: "min(480px, 70vh)",
        background: "var(--ak-bg-1)",
        border: "1px solid var(--ak-line-2)",
        borderRadius: "var(--ak-r-3)",
        boxShadow: "var(--ak-elev-2)",
        display: "flex", flexDirection: "column",
        overflow: "hidden",
      }} onClick={e => e.stopPropagation()}>
        {/* search input */}
        <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--ak-line)", display: "flex", alignItems: "center", gap: 10 }}>
          <span className="mono" style={{ color: "var(--ak-fg-3)", fontSize: "var(--ak-fs-10)" }}>⌘K</span>
          <input
            ref={inputRef}
            value={query}
            onChange={e => setQuery(e.target.value)}
            onKeyDown={onKeyDown}
            className="ak-input"
            placeholder="Search attestations, surfaces, actions…"
            style={{ border: "none", background: "transparent", padding: 0, fontSize: "var(--ak-fs-13)" }}
          />
        </div>
        {/* results */}
        <div style={{ flex: 1, overflow: "auto", padding: "4px 0" }}>
          {items.length === 0 && (
            <div style={{ padding: "20px 16px", color: "var(--ak-fg-3)", textAlign: "center" }}>No results</div>
          )}
          {items.map((item, i) => (
            <div
              key={item.id}
              onClick={() => { item.action(); onClose(); }}
              style={{
                display: "grid",
                gridTemplateColumns: "20px 1fr auto",
                alignItems: "center",
                gap: 10,
                padding: "8px 16px",
                cursor: "pointer",
                background: i === sel ? "var(--ak-bg-3)" : "transparent",
                borderLeft: i === sel ? "2px solid var(--ak-accent)" : "2px solid transparent",
              }}
            >
              <span style={{ color: typeColors[item.type], fontSize: 14, textAlign: "center" }}>{typeIcons[item.type]}</span>
              <div>
                <div style={{ color: "var(--ak-fg-0)", fontSize: "var(--ak-fs-12)" }}>{item.label}</div>
                <div className="mono" style={{ color: "var(--ak-fg-3)", fontSize: "var(--ak-fs-9)" }}>{item.sub}</div>
              </div>
              {item.type === "surface" && <kbd style={{
                fontFamily: "var(--ak-font-mono)", fontSize: "var(--ak-fs-9)",
                color: "var(--ak-fg-3)", background: "var(--ak-bg-inset)",
                border: "1px solid var(--ak-line)", padding: "0 5px", borderRadius: 2,
              }}>{item.sub.split("· ")[1]}</kbd>}
            </div>
          ))}
        </div>
        {/* footer */}
        <div style={{
          padding: "8px 16px",
          borderTop: "1px solid var(--ak-line)",
          display: "flex", gap: 16,
          fontFamily: "var(--ak-font-mono)", fontSize: "var(--ak-fs-9)", color: "var(--ak-fg-3)",
        }}>
          <span>↑↓ navigate</span>
          <span>↵ open</span>
          <span>esc close</span>
          <span style={{ flex: 1 }}/>
          <span>{items.length} results</span>
        </div>
      </div>
    </div>
  );
}

/* =========================================================
   SIGNER IDENTITY OVERLAY — HSM attestation chain detail
   ========================================================= */
function SignerOverlay({ open, onClose }) {
  if (!open) return null;
  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 9998,
      background: "rgba(0,0,0,0.55)",
      display: "flex", alignItems: "center", justifyContent: "center",
    }} onClick={onClose}>
      <div style={{
        width: 560, maxHeight: "80vh",
        background: "var(--ak-bg-1)",
        border: "1px solid var(--ak-line-2)",
        borderRadius: "var(--ak-r-3)",
        boxShadow: "var(--ak-elev-2)",
        overflow: "auto",
      }} onClick={e => e.stopPropagation()}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          padding: "14px 18px",
          borderBottom: "1px solid var(--ak-line)",
        }}>
          <div>
            <div style={{ fontSize: "var(--ak-fs-16)", color: "var(--ak-fg-0)" }}>Key Attestation · Signer Identity</div>
            <div className="mono" style={{ fontSize: "var(--ak-fs-10)", color: "var(--ak-fg-2)", marginTop: 3 }}>EIP-712 domain separator · key origin chain</div>
          </div>
          <button className="ak-btn" onClick={onClose} style={{ padding: "4px 8px" }}>✕</button>
        </div>
        <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 16 }}>
          {/* Active signer */}
          <div style={{ border: "1px solid color-mix(in srgb, var(--ak-state-finalized-fg) 30%, var(--ak-line))", borderRadius: 2, padding: 14, background: "color-mix(in srgb, var(--ak-state-finalized-bg) 60%, var(--ak-bg-1))" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
              <div className="cap" style={{ color: "var(--ak-state-finalized-fg)" }}>active signer</div>
              <AttestationStatePill state="finalized" label="VERIFIED"/>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, fontFamily: "var(--ak-font-mono)", fontSize: 12 }}>
              <SRow k="key id"        v={<HashBadge value="0x7a1c9e44b2f8d031" kind="KEY" short={5}/>}/>
              <SRow k="origin"        v={<span style={{ color: "var(--ak-state-finalized-fg)" }}>● HSM · nCipher nShield XC</span>}/>
              <SRow k="algorithm"     v="secp256k1 · ECDSA"/>
              <SRow k="purpose"       v="production signing · capsule attestation"/>
              <SRow k="created"       v="2025-11-14 09:00:00 UTC"/>
              <SRow k="last rotated"  v="2026-03-22 06:00:00 UTC · 31 days ago"/>
              <SRow k="rotation sched" v="every 120 days (next: 2026-07-20)"/>
            </div>
          </div>

          {/* EIP-712 Domain */}
          <div style={{ border: "1px solid var(--ak-line)", borderRadius: 2, padding: 14, background: "var(--ak-bg-2)" }}>
            <div className="cap" style={{ marginBottom: 10 }}>eip-712 domain separator</div>
            <div style={{ fontFamily: "var(--ak-font-mono)", fontSize: 11, color: "var(--ak-fg-1)", background: "var(--ak-bg-inset)", padding: 10, borderRadius: 2, border: "1px solid var(--ak-line)", lineHeight: 1.8 }}>
              <div>{"{"}</div>
              <div>&nbsp;&nbsp;"name": "AnimaKernel",</div>
              <div>&nbsp;&nbsp;"version": "2",</div>
              <div>&nbsp;&nbsp;"chainId": 1,</div>
              <div>&nbsp;&nbsp;"verifyingContract": <HashBadge value="0x4E12a0B1C5d8F3e9A7bC6D2f" short={5}/>,</div>
              <div>&nbsp;&nbsp;"salt": <HashBadge value="0x88af3c01d4e267b9" short={4}/></div>
              <div>{"}"}</div>
            </div>
          </div>

          {/* Key attestation chain */}
          <div>
            <div className="cap" style={{ marginBottom: 10 }}>key attestation chain · HSM → intermediate → root</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
              {[
                { level: "leaf",   label: "Production Signing Key", key: "0x7a1c9e44b2f8d031", origin: "HSM · nCipher", state: "finalized", expires: "2026-07-20" },
                { level: "interm", label: "Intermediate CA (Ops)",  key: "0xA4E2B108CC91DF20", origin: "HSM · Thales",  state: "finalized", expires: "2027-11-14" },
                { level: "root",   label: "Root CA (Cold Storage)", key: "0x0001FF29AB8D4C00", origin: "HSM · airgap",  state: "finalized", expires: "2030-01-01" },
              ].map((k, i, arr) => (
                <div key={k.level}>
                  <div style={{
                    display: "grid",
                    gridTemplateColumns: "70px 1fr auto",
                    gap: 10, alignItems: "center",
                    padding: "10px 12px",
                    background: i === 0 ? "var(--ak-bg-2)" : "var(--ak-bg-1)",
                    border: "1px solid var(--ak-line)",
                    borderBottom: i < arr.length - 1 ? "none" : "1px solid var(--ak-line)",
                    borderRadius: i === 0 ? "2px 2px 0 0" : i === arr.length - 1 ? "0 0 2px 2px" : 0,
                  }}>
                    <div>
                      <span className="mono" style={{ fontSize: 9, color: "var(--ak-fg-3)", textTransform: "uppercase", letterSpacing: ".1em" }}>{k.level}</span>
                    </div>
                    <div>
                      <div style={{ color: "var(--ak-fg-0)", fontWeight: i === 0 ? 600 : 400 }}>{k.label}</div>
                      <div style={{ display: "flex", gap: 8, marginTop: 3, alignItems: "center" }}>
                        <HashBadge value={k.key} kind="KEY" short={4}/>
                        <span className="mono" style={{ fontSize: 10, color: "var(--ak-fg-3)" }}>{k.origin}</span>
                        <span className="mono" style={{ fontSize: 10, color: "var(--ak-fg-3)" }}>exp {k.expires}</span>
                      </div>
                    </div>
                    <AttestationStatePill state={k.state}/>
                  </div>
                  {i < arr.length - 1 && (
                    <div style={{ display: "flex", justifyContent: "center", padding: "2px 0", color: "var(--ak-fg-3)", fontSize: 11 }}>
                      <span style={{ fontFamily: "var(--ak-font-mono)" }}>↓ signs</span>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>

          {/* Key ceremony log */}
          <div>
            <div className="cap" style={{ marginBottom: 8 }}>recent key ceremonies</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
              {[
                { t: "2026-03-22 06:00", event: "key rotation", detail: "leaf rotated · 2 witnesses · ceremony #0041" },
                { t: "2025-11-14 09:00", event: "key creation",  detail: "leaf created from intermediate CA" },
                { t: "2025-06-01 12:00", event: "root renewal",  detail: "root CA extended to 2030-01-01 · 3 witnesses" },
              ].map((e, i) => (
                <div key={i} style={{
                  display: "grid", gridTemplateColumns: "140px 100px 1fr", gap: 10,
                  padding: "7px 10px",
                  borderBottom: "1px solid var(--ak-line)",
                  fontFamily: "var(--ak-font-mono)", fontSize: 11,
                }}>
                  <span style={{ color: "var(--ak-fg-2)" }}>{e.t}</span>
                  <span style={{ color: "var(--ak-fg-0)" }}>{e.event}</span>
                  <span style={{ color: "var(--ak-fg-2)" }}>{e.detail}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
function SRow({ k, v }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 8 }}>
      <span style={{ color: "var(--ak-fg-3)", fontSize: 10, textTransform: "uppercase", letterSpacing: ".08em" }}>{k}</span>
      <span style={{ color: "var(--ak-fg-0)" }}>{v}</span>
    </div>
  );
}

/* =========================================================
   READ-ONLY WATERMARK (auditor mode)
   ========================================================= */
function AuditorWatermark() {
  return (
    <div style={{
      position: "fixed",
      top: 82, right: 16,
      zIndex: 100,
      padding: "6px 12px",
      background: "color-mix(in srgb, var(--ak-state-signed-fg) 15%, var(--ak-bg-1))",
      border: "1px solid color-mix(in srgb, var(--ak-state-signed-fg) 40%, var(--ak-line))",
      borderRadius: 2,
      fontFamily: "var(--ak-font-mono)",
      fontSize: "var(--ak-fs-10)",
      color: "var(--ak-state-signed-fg)",
      textTransform: "uppercase",
      letterSpacing: ".12em",
      pointerEvents: "none",
      display: "flex", alignItems: "center", gap: 8,
    }}>
      <svg width="12" height="12" viewBox="0 0 12 12">
        <circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" strokeWidth="1.2"/>
        <path d="M4 6 L5.5 7.5 L8 4.5" stroke="currentColor" strokeWidth="1.2" fill="none"/>
      </svg>
      read-only · auditor view · no ops controls
    </div>
  );
}

/* =========================================================
   AUDITOR-AWARE BUTTON — disabled in read-only mode
   ========================================================= */
function OpsButton({ role, children, ...props }) {
  if (role === "auditor") {
    return (
      <button {...props} className="ak-btn" disabled style={{
        ...props.style,
        opacity: 0.35,
        cursor: "not-allowed",
        pointerEvents: "none",
      }}>
        {children}
      </button>
    );
  }
  return <button {...props} className="ak-btn">{children}</button>;
}

Object.assign(window, { CommandPalette, SignerOverlay, AuditorWatermark, OpsButton });