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

const { useEffect: useEffectAK, useRef: useRefAK, useState: useStateAK } = React;

const SIGNER_STATUS_POLL_INTERVAL_MS = 5000;
const SIGNER_STATUS_TIMEOUT_MS = 3000;

/* =========================================================
   SHARED SHELL — global nav, tier indicator, signer status
   ========================================================= */
function AppShell({ active, tier = "enterprise", role = "operator", children, onNav, onTierChange, onRoleChange, onCmdK, onSignerClick }) {
  const surfaces = [
    { id: "fraud",       label: "Fraud Decision Audit",    kbd: "1" },
    { id: "sca",         label: "SCA / 3DS Attestation",   kbd: "2" },
    { id: "orch",        label: "Orchestration Audit",     kbd: "3" },
    { id: "settle",      label: "Settlement Gate",         kbd: "4" },
    { id: "flow",        label: "Dispute → CE 3.0 Flow",   kbd: "5" },
  ];
  return (
    <div className="ak shell" style={{ height: "100%", display: "grid", gridTemplateRows: "40px 36px 1fr 24px" }}>
      {/* top bar — identity + signer + tier */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "220px 1fr auto",
        alignItems: "center",
        padding: "0 14px",
        borderBottom: "1px solid var(--ak-line)",
        background: "var(--ak-bg-1)",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, position: "relative" }}>
          <AppMenu />
          <LogoMark />
          <span className="mono" style={{ fontSize: "var(--ak-fs-11)", color: "var(--ak-fg-0)", letterSpacing: ".04em" }}>ANIMA<span style={{ color: "var(--ak-fg-3)" }}>/</span>KERNEL</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 16, justifyContent: "center" }}>
          <SignerStatus tier={tier} onClick={onSignerClick}/>
          <Divider />
          <DomainSeparator />
          <Divider />
          {tier === "enterprise" && <LedgerMode />}
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <TierPicker tier={tier} onChange={onTierChange} />
          <RolePicker role={role} onChange={onRoleChange} />
          <ThemeToggle />
        </div>
      </div>

      {/* nav */}
      <div style={{
        display: "flex", alignItems: "stretch",
        borderBottom: "1px solid var(--ak-line)",
        background: "var(--ak-bg-0)",
        paddingLeft: 6,
      }}>
        {surfaces.map(s => {
          const isActive = active === s.id;
          return (
            <button
              key={s.id}
              onClick={() => onNav && onNav(s.id)}
              style={{
                appearance: "none",
                background: "transparent",
                border: "none",
                padding: "0 14px",
                color: isActive ? "var(--ak-fg-0)" : "var(--ak-fg-2)",
                fontSize: "var(--ak-fs-11)",
                fontFamily: "var(--ak-font-sans)",
                cursor: "pointer",
                borderBottom: isActive ? "2px solid var(--ak-accent)" : "2px solid transparent",
                display: "flex", alignItems: "center", gap: 8,
              }}
            >
              {s.label}
              <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 4px",
                borderRadius: 2,
              }}>{s.kbd}</kbd>
            </button>
          );
        })}
        <div style={{ flex: 1 }}/>
        <div style={{ display: "flex", alignItems: "center", gap: 10, paddingRight: 10, color: "var(--ak-fg-3)", fontSize: "var(--ak-fs-10)" }}>
          <span className="mono" style={{ cursor: "pointer" }} onClick={onCmdK}>⌘K command · ? shortcuts · / search</span>
        </div>
      </div>

      {/* body */}
      <div style={{ overflow: "auto" }}>{children}</div>

      {/* status bar */}
      <div style={{
        display: "flex", alignItems: "center", gap: 14,
        padding: "0 14px",
        borderTop: "1px solid var(--ak-line)",
        background: "var(--ak-bg-1)",
        fontFamily: "var(--ak-font-mono)",
        fontSize: "var(--ak-fs-9)",
        color: "var(--ak-fg-3)",
      }}>
        <span>kernel v2.4.1 · c=24</span>
        <Dot />
        <span>p50 2.1ms · p99 26.4ms</span>
        <Dot />
        <span>1,204 attest/s</span>
        <Dot />
        <span>PCI SCOPE <span style={{ color: "var(--ak-state-finalized-fg)" }}>● zero</span></span>
        <Dot />
        {tier === "enterprise" && <span>HSM <span style={{ color: "var(--ak-state-finalized-fg)" }}>● nominal</span></span>}
        <span style={{ flex: 1 }}/>
        <span>region · us-east-1 · shard 03/16</span>
        <Dot />
        <span>uptime 312d 04:18</span>
      </div>
    </div>
  );
}

function Dot() { return <span style={{ color: "var(--ak-fg-4)" }}>·</span>; }
function Divider() { return <span style={{ width: 1, height: 20, background: "var(--ak-line)" }}/>; }

function LogoMark() {
  return (
    <svg width="22" height="22" viewBox="0 0 22 22" style={{ display: "block" }}>
      <rect x="1" y="1" width="20" height="20" rx="2" fill="none" stroke="var(--ak-fg-1)" strokeWidth="1.4"/>
      <polygon points="11,4 18,8 18,14 11,18 4,14 4,8" fill="none" stroke="var(--ak-accent)" strokeWidth="1.2"/>
      <circle cx="11" cy="11" r="2.2" fill="var(--ak-accent)"/>
    </svg>
  );
}

function SignerStatus({ tier, onClick }) {
  const isLoadingRef = useRefAK(false);
  const [stats, setStats] = useStateAK({
    loaded: false,
    aigovReady: false,
    fintechReady: false,
    aigovSigner: "",
    fintechSigner: "",
  });

  useEffectAK(() => {
    let active = true;
    let timeoutId = null;
    let controller = null;

    const load = async () => {
      if (isLoadingRef.current) {
        return;
      }

      isLoadingRef.current = true;
      controller = new AbortController();
      timeoutId = window.setTimeout(() => controller.abort(), SIGNER_STATUS_TIMEOUT_MS);

      try {
        const [aigovRes, fintechRes] = await Promise.all([
          fetch("/admin/aigov/attest/stats", { signal: controller.signal }),
          fetch("/admin/fintech/attest/stats", { signal: controller.signal }),
        ]);
        window.clearTimeout(timeoutId);
        timeoutId = null;
        const [aigovStats, fintechStats] = await Promise.all([
          aigovRes.ok ? aigovRes.json() : Promise.resolve(null),
          fintechRes.ok ? fintechRes.json() : Promise.resolve(null),
        ]);

        if (!active) {
          return;
        }

        setStats({
          loaded: true,
          aigovReady: !!(aigovStats && aigovStats.signer_ready),
          fintechReady: !!(fintechStats && (fintechStats.ready || fintechStats.signer_ready)),
          aigovSigner: (aigovStats && aigovStats.signer) || "",
          fintechSigner: (fintechStats && fintechStats.signer) || "",
        });
      } catch (err) {
        if (!active) {
          return;
        }

        console.error("[SignerStatus] Failed to load attestation stats:", err);
        setStats({
          loaded: true,
          aigovReady: false,
          fintechReady: false,
          aigovSigner: "",
          fintechSigner: "",
        });
      } finally {
        if (timeoutId !== null) {
          window.clearTimeout(timeoutId);
          timeoutId = null;
        }
        isLoadingRef.current = false;
      }
    };

    load();
    const timer = window.setInterval(load, SIGNER_STATUS_POLL_INTERVAL_MS);
    return () => {
      active = false;
      if (controller) {
        controller.abort();
      }
      if (timeoutId !== null) {
        window.clearTimeout(timeoutId);
      }
      window.clearInterval(timer);
    };
  }, []);

  const liveReady = stats.aigovReady || stats.fintechReady;
  const signerValue = stats.aigovSigner || stats.fintechSigner;
  const statusLabel = liveReady ? "\u25cf live" : (stats.loaded ? "\u25cf unavailable" : "\u25cf checking");
  const statusColor = liveReady
    ? "var(--ak-state-finalized-fg)"
    : (stats.loaded ? "var(--ak-state-signed-fg)" : "var(--ak-fg-2)");

  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--ak-font-mono)", fontSize: "var(--ak-fs-10)", cursor: "pointer" }} onClick={onClick} title="View signer identity">
      <span className="cap" style={{ color: "var(--ak-fg-3)" }}>signer</span>
      <span style={{ color: statusColor }}>{statusLabel}</span>
      {signerValue
        ? <HashBadge value={signerValue} kind="KEY" ver={liveReady ? "verified" : undefined} short={3} />
        : (tier !== "starter" && <span style={{ color: "var(--ak-fg-2)" }}>no signer</span>)}
    </div>
  );
}
function DomainSeparator() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--ak-font-mono)", fontSize: "var(--ak-fs-10)" }}>
      <span className="cap" style={{ color: "var(--ak-fg-3)" }}>eip-712 domain</span>
      <span style={{ color: "var(--ak-fg-1)" }}>anima.kernel@2</span>
      <span style={{ color: "var(--ak-fg-3)" }}>·</span>
      <span style={{ color: "var(--ak-fg-1)" }}>chain 1</span>
    </div>
  );
}
function LedgerMode() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 6, fontFamily: "var(--ak-font-mono)", fontSize: "var(--ak-fs-10)" }}>
      <span className="cap" style={{ color: "var(--ak-fg-3)" }}>ledger</span>
      <span style={{ color: "var(--ak-state-witnessed-fg)" }}>sync</span>
      <span style={{ color: "var(--ak-fg-3)" }}>·</span>
      <span style={{ color: "var(--ak-fg-1)" }}>lag 0.3ms</span>
    </div>
  );
}
function TierPicker({ tier, onChange }) {
  const tiers = ["starter", "pro", "enterprise"];
  return (
    <div style={{ display: "inline-flex", border: "1px solid var(--ak-line-2)", borderRadius: 2, overflow: "hidden" }}>
      {tiers.map(t => (
        <button key={t} onClick={() => onChange && onChange(t)} style={{
          appearance: "none", border: "none", padding: "4px 8px",
          background: tier === t ? "var(--ak-bg-3)" : "var(--ak-bg-1)",
          color: tier === t ? "var(--ak-fg-0)" : "var(--ak-fg-3)",
          fontFamily: "var(--ak-font-mono)", fontSize: "var(--ak-fs-9)",
          textTransform: "uppercase", letterSpacing: ".08em", cursor: "pointer",
        }}>{t}</button>
      ))}
    </div>
  );
}
function RolePicker({ role, onChange }) {
  const roles = ["operator", "auditor"];
  return (
    <div style={{ display: "inline-flex", border: "1px solid var(--ak-line-2)", borderRadius: 2, overflow: "hidden" }}>
      {roles.map(r => (
        <button key={r} onClick={() => onChange && onChange(r)} style={{
          appearance: "none", border: "none", padding: "4px 8px",
          background: role === r ? "var(--ak-bg-3)" : "var(--ak-bg-1)",
          color: role === r ? "var(--ak-fg-0)" : "var(--ak-fg-3)",
          fontFamily: "var(--ak-font-mono)", fontSize: "var(--ak-fs-9)",
          textTransform: "uppercase", letterSpacing: ".08em", cursor: "pointer",
        }}>{r === "auditor" ? "read-only" : r}</button>
      ))}
    </div>
  );
}
function ThemeToggle() {
  return (
    <button
      className="ak-btn"
      onClick={() => {
        const root = document.documentElement;
        const cur = root.getAttribute("data-theme");
        root.setAttribute("data-theme", cur === "light" ? "dark" : "light");
      }}
      style={{ padding: "4px 8px", fontSize: "var(--ak-fs-9)" }}
    >
      <span className="mono" style={{ textTransform: "uppercase", letterSpacing: ".08em" }}>theme</span>
    </button>
  );
}

Object.assign(window, { AppShell });

/* =========================================================
   APP MENU — hamburger dropdown linking to all pages
   ========================================================= */
function AppMenu() {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (!open) return;
    const close = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", close);
    return () => document.removeEventListener("mousedown", close);
  }, [open]);

  const links = [
    { label: "Landing Page",          href: "Landing Page.html",         icon: "◈" },
    { label: "Operator Console",      href: "Anima Kernel — Operator Console.html", icon: "◆", active: true },
    { label: "Test Suite (Payments)", href: "Test Suite.html",           icon: "⬡" },
    { label: "Business Presentation", href: "Business Presentation.html",icon: "▸" },
    { label: "Investor Deck",         href: "Investor Deck.html",        icon: "◇" },
    { label: "Company Profile",       href: "Company Profile.html",      icon: "◎" },
    { label: "— Government —",        href: "Government Landing.html",   icon: "▣" },
    { label: "Gov Test Suite",        href: "Government Test Suite.html", icon: "⬡" },
    { label: "Appeal-Replay Sim",     href: "Appeal-Replay Simulator.html", icon: "▸" },
    { label: "— Healthcare —",        href: "Healthcare Landing.html",   icon: "▣" },
    { label: "Health Test Suite",     href: "Healthcare Test Suite.html", icon: "⬡" },
    { label: "PHI Boundary Sim",      href: "PHI Boundary Simulator.html", icon: "▸" },
    { label: "— Cross-cutting —",     href: "Regulatory Compliance Hub.html", icon: "▣" },
    { label: "Compliance Hub",        href: "Regulatory Compliance Hub.html", icon: "◎" },
    { label: "Architecture",          href: "Architecture Diagram.html", icon: "◇" },
    { label: "Sovereign Config",      href: "Sovereign Configurator.html", icon: "◇" },
    { label: "Partner Program",       href: "Partner Program.html",      icon: "◎" },
    { label: "Sign out",              href: "Login.html",                icon: "←" },
  ];

  return (
    <div ref={ref} style={{ position: "relative" }}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          appearance: "none", border: "1px solid var(--ak-line-2)", background: "var(--ak-bg-2)",
          color: "var(--ak-fg-1)", cursor: "pointer", width: 28, height: 28, borderRadius: 2,
          display: "flex", alignItems: "center", justifyContent: "center", padding: 0,
        }}
        title="Navigation menu"
      >
        <svg width="14" height="14" viewBox="0 0 14 14">
          <path d="M2 3.5h10M2 7h10M2 10.5h10" stroke="currentColor" strokeWidth="1.4" fill="none"/>
        </svg>
      </button>
      {open && (
        <div style={{
          position: "absolute", top: 34, left: 0, zIndex: 9999,
          width: 260, background: "var(--ak-bg-1)", border: "1px solid var(--ak-line-2)",
          borderRadius: "var(--ak-r-3)", boxShadow: "var(--ak-elev-2)", overflow: "hidden",
        }}>
          <div style={{ padding: "8px 12px 4px", fontFamily: "var(--ak-font-mono)", fontSize: "var(--ak-fs-9)", textTransform: "uppercase", letterSpacing: ".1em", color: "var(--ak-fg-3)" }}>
            navigate
          </div>
          {links.map((l, i) => (
            <a
              key={l.label}
              href={l.href}
              style={{
                display: "flex", alignItems: "center", gap: 10,
                padding: "8px 12px", textDecoration: "none",
                color: l.active ? "var(--ak-fg-0)" : "var(--ak-fg-1)",
                background: l.active ? "var(--ak-bg-3)" : "transparent",
                borderLeft: l.active ? "2px solid var(--ak-accent)" : "2px solid transparent",
                fontSize: "var(--ak-fs-12)",
                borderTop: i === links.length - 1 ? "1px solid var(--ak-line)" : "none",
              }}
              onMouseOver={e => { if (!l.active) e.currentTarget.style.background = "var(--ak-bg-2)"; }}
              onMouseOut={e => { if (!l.active) e.currentTarget.style.background = "transparent"; }}
            >
              <span style={{ width: 18, textAlign: "center", fontSize: 13, color: "var(--ak-fg-3)" }}>{l.icon}</span>
              <span>{l.label}</span>
            </a>
          ))}
        </div>
      )}
    </div>
  );
}