import { useEffect, useMemo, useRef, useState } from "react";
import { CircuitSvg } from "@/components/clap/circuit-svg";
import { Launcher } from "@/components/clap/launcher";
import {
  GOV,
  circuitDepth,
  clampGates,
  cctpLine,
  isEntangling,
  macroCwwe,
  macroLuna,
  macroSeal,
  macroTriangle,
  type Encoding,
  type Gate,
  type Kind,
} from "@/lib/clap/engine";
import { PRESETS, type Preset, type PresetGroup } from "@/lib/clap/presets";

const STORE_KEY = "clap-bench-v1";
const LIVE = "https://clap-builder-showcase-production.up.railway.app/";

type Saved = { id: string; name: string; nq: number; gates: Gate[]; enc: Encoding; shots: number };

type Bar = { bit: string; count: number; prob: number };
type ServiceHit = { id: string; name: string; ok: boolean; detail: string };
type Fire = {
  bars: Bar[];
  rexStatus: string;
  admitted: boolean;
  committed: boolean;
  cycle: number | null;
  receipt: string | null;
  hamiltonian: number | null;
  coin: string | null;
  pennylane: string;
  mesh: string;
  diagram: string | null;
  services: ServiceHit[];
  ggufModel: string | null;
  ggufReply: string | null;
  ggufHole: string | null;
  engine: {
    closed: boolean;
    rail?: Twin;
    webb?: Webb;
    seats?: LinkState["seats"];
    phi2Reply?: string | null;
    seat?: SeatLine;
    inference?: { name: string; ok: boolean; onGguf: boolean; detail: string }[];
    fed?: {
      claudia: { ok: boolean; detail: string };
      planets: { ok: boolean; detail: string };
      moon: { ok: boolean; detail: string };
      lantern: { ok: boolean; detail: string };
      oricron: { ok: boolean; detail: string };
      ori: { ok: boolean; detail: string };
      simulations: { ok: boolean; detail: string };
      jetbase: { ok: boolean; detail: string };
      agents: { ok: boolean; detail: string };
      habitation: { ok: boolean; detail: string };
    };
  } | null;
};

type Seat = { id?: string; name: string; state: string; where: string };
type Twin = { state: string; twin: string; qubits: number | null; line: string };
type Webb = { state: string; name: string; engine: string; line: string };
type SeatLine = { delta31: string; g2: string; g3: string; bunch?: string; line: string };
type LinkState = {
  rex: string;
  cirq: string;
  pennylane: string;
  lane116: string;
  gguf: string;
  rail?: Twin;
  webb?: Webb;
  seat?: SeatLine;
  seats?: { phi2: Seat; qwen15: Seat; qwen3: Seat; queen: Seat };
};

function barsFromCounts(counts: Record<string, number>, nq: number, shots: number): Bar[] {
  return Object.entries(counts)
    .map(([key, count]) => {
      const asNum = Number(key);
      const bit = Number.isInteger(asNum) && String(asNum) === key ? asNum.toString(2).padStart(nq, "0") : key;
      return { bit, count, prob: shots > 0 ? count / shots : 0 };
    })
    .sort((a, b) => b.count - a.count)
    .slice(0, 6);
}

const ENCODINGS: Encoding[] = ["CCTP", "CEO", "CVP", "QS1"];
const SHOTS = [100, 1000, 10000];

function xml(s: string) {
  const amp = "&" + "amp;";
  const lt = "&" + "lt;";
  const gt = "&" + "gt;";
  const quot = "&" + "quot;";
  return s.replaceAll("&", amp).replaceAll("<", lt).replaceAll(">", gt).replaceAll('"', quot);
}

function readSaved(): Saved[] {
  try {
    const raw = localStorage.getItem(STORE_KEY);
    if (!raw) return [];
    const parsed = JSON.parse(raw) as Saved[];
    return Array.isArray(parsed) ? parsed.slice(0, 24) : [];
  } catch {
    return [];
  }
}

export function Bench() {
  const svgRef = useRef<SVGSVGElement>(null);
  const resultRef = useRef<HTMLElement>(null);
  const [name, setName] = useState("My Circuit");
  const [nq, setNq] = useState(4);
  const [shots, setShots] = useState(1000);
  const [enc, setEnc] = useState<Encoding>("CCTP");
  const [gates, setGates] = useState<Gate[]>([]);
  const [past, setPast] = useState<Gate[][]>([]);
  const [target, setTarget] = useState(0);
  const [pulse, setPulse] = useState(1);
  const [saved, setSaved] = useState<Saved[]>([]);
  const [group, setGroup] = useState<PresetGroup | "mine">("coin");
  const [fire, setFire] = useState<Fire | null>(null);
  const [firing, setFiring] = useState(false);
  const [link, setLink] = useState<LinkState>({ rex: "…", cirq: "…", pennylane: "…", lane116: "…", gguf: "…" });
  const [note, setNote] = useState("Tap a gate. It lands on the lit qubit.");
  const [ready, setReady] = useState(false);

  useEffect(() => {
    setSaved(readSaved());
    setReady(true);
  }, []);

  useEffect(() => {
    let stop = false;
    async function pull() {
      try {
        const res = await fetch("/api/clap/status", { cache: "no-store" });
        const data = (await res.json()) as LinkState;
        if (stop) return;
        setLink({
          rex: data.rex || "DOWN",
          cirq: data.cirq || "DOWN",
          pennylane: data.pennylane || "DOWN",
          lane116: data.lane116 || "DOWN",
          gguf: data.gguf || "DOWN",
          rail: data.rail,
          webb: data.webb,
          seat: data.seat,
          seats: data.seats,
        });
      } catch {
        if (!stop) setLink({ rex: "DOWN", cirq: "DOWN", pennylane: "DOWN", lane116: "DOWN", gguf: "DOWN" });
      }
    }
    void pull();
    const id = window.setInterval(() => void pull(), 30000);
    return () => {
      stop = true;
      window.clearInterval(id);
    };
  }, []);

  const ent = gates.filter(isEntangling).length;
  const depth = circuitDepth(gates, nq);
  const pair = (target + 1) % nq;

  const payloadObj = useMemo(
    () => ({
      name: name.trim() || "unnamed",
      qubits: nq,
      gates: gates.length,
      entangling: ent,
      depth,
      shots,
      gov_angle: GOV,
      encoding: enc,
      inventor: "Joshua Lopez",
      entity: "DCGP.AI LLC",
    }),
    [name, nq, gates.length, ent, depth, shots, enc],
  );

  const payloadJson = JSON.stringify(payloadObj);
  const cctp = gates.length ? cctpLine(payloadJson) : "";

  function bump(next: Gate[], remember = true) {
    const clamped = clampGates(next, nq);
    if (remember) setPast((p) => [...p.slice(-39), gates]);
    setGates(clamped);
    setPulse((n) => n + 1);
    setFire(null);
  }

  function setQubits(next: number) {
    const n = Math.min(8, Math.max(2, next));
    setPast((p) => [...p.slice(-39), gates]);
    setNq(n);
    setGates((g) => clampGates(g, n));
    setTarget((t) => Math.min(t, n - 1));
    setPulse((v) => v + 1);
    setFire(null);
  }

  function add(kind: Kind) {
    if (kind === "CNOT" || kind === "CZ") {
      bump([...gates, { t: kind, c: target, q: pair }]);
    } else if (kind === "Rz") {
      bump([...gates, { t: "Rz", q: target, l: "π/φ" }]);
    } else {
      bump([...gates, { t: kind, q: target }]);
    }
    setTarget((t) => (t + 1) % nq);
    setNote(`${kind} on q${target}${kind === "CNOT" || kind === "CZ" ? ` → q${pair}` : ""}.`);
  }

  function undo() {
    const prev = past[past.length - 1];
    if (!prev) {
      setNote("Nothing to undo.");
      return;
    }
    setPast((p) => p.slice(0, -1));
    setGates(prev);
    setPulse((n) => n + 1);
    setFire(null);
    setNote("Undone.");
  }

  function clearAll() {
    if (!gates.length) return;
    bump([]);
    setNote("Canvas clear.");
  }

  function loadPreset(p: Preset) {
    setPast((h) => [...h.slice(-39), gates]);
    setName(p.name);
    setNq(p.nq);
    setGates(p.gates);
    setTarget(0);
    setPulse((n) => n + 1);
    setFire(null);
    setNote(`${p.name} loaded. ${p.blurb}.`);
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

  function restoreSaved(item: Saved) {
    setPast((h) => [...h.slice(-39), gates]);
    setName(item.name);
    setNq(item.nq);
    setGates(clampGates(item.gates, item.nq));
    setEnc(item.enc);
    setShots(item.shots);
    setTarget(0);
    setPulse((n) => n + 1);
    setFire(null);
    setNote(`${item.name} restored from this device.`);
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

  function saveBench() {
    const item: Saved = {
      id: `${Date.now()}`,
      name: name.trim() || "unnamed",
      nq,
      gates,
      enc,
      shots,
    };
    setSaved((list) => [item, ...list.filter((s) => s.name !== item.name)].slice(0, 24));
    setGroup("mine");
    setNote(`Saved “${item.name}” on this device.`);
  }

  function download(filename: string, blob: Blob) {
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = filename;
    a.click();
    URL.revokeObjectURL(url);
  }

  function slug() {
    return (name.trim() || "circuit").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
  }

  function downloadSvg() {
    const svg = svgRef.current;
    if (!svg) return;
    const vb = svg.getAttribute("viewBox") || "0 0 320 180";
    const parts = vb.split(" ").map(Number);
    const height = parts[3] || 180;
    const body = svg.innerHTML;
    const doc = `<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="${vb}" width="960">
<rect width="100%" height="100%" fill="#07111f"/>
<text x="50%" y="22" text-anchor="middle" fill="#ffd975" font-family="monospace" font-size="16" font-weight="700">${xml(name.trim() || "circuit")}</text>
<g transform="translate(0,18)">${body}</g>
<text x="50%" y="${height + 10}" text-anchor="middle" fill="#6a85a8" font-family="monospace" font-size="10">Joshua Lopez · DCGP.AI · GOV=π/φ · ${xml(cctp.slice(0, 42))}</text>
</svg>`;
    download(`${slug()}.svg`, new Blob([doc], { type: "image/svg+xml" }));
    setNote("SVG card downloaded.");
  }

  function downloadJson() {
    const doc = {
      ...payloadObj,
      gov_angle: GOV,
      gates,
      cctp: cctp || null,
      patents: ["19/555,951", "19/657,064", "19/730,900", "19/731,016", "19/732,119"],
    };
    download(`${slug()}.json`, new Blob([JSON.stringify(doc, null, 2)], { type: "application/json" }));
    setNote("JSON exported.");
  }

  async function copyPayload() {
    const text = cctp || "Build a circuit to generate CCTP payload";
    try {
      await navigator.clipboard.writeText(text);
      setNote("Payload copied.");
    } catch {
      setNote("Copy blocked. Use Export JSON.");
    }
  }

  useEffect(() => {
    if (!ready) return;
    localStorage.setItem(STORE_KEY, JSON.stringify(saved));
  }, [saved, ready]);

  async function fireCircuit() {
    if (!gates.length || firing) {
      if (!gates.length) setNote("Place at least one gate before firing.");
      return;
    }
    setFiring(true);
    setNote("Firing through Railway. Rex, Cirq, PennyLane, and phi-2.Q4_K_M.gguf are in the chain.");
    try {
      const res = await fetch("/api/clap/fire", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          name: name.trim() || "My Circuit",
          qubits: nq,
          shots,
          encoding: enc,
          gov_angle: GOV,
          gates,
        }),
      });
      const data = (await res.json()) as {
        ok?: boolean;
        error?: string;
        circuit?: { shots?: number; counts?: Record<string, number>; execution?: string; diagram?: string | null };
        rex?: {
          status?: string;
          admitted?: boolean;
          committed?: boolean;
          cycle?: number | null;
          receipt_hash?: string | null;
          contact_hamiltonian?: number | null;
          mc290?: string | null;
        };
        pennylane?: { execution?: string; executed?: boolean } | string | number[];
        mesh?: { ok?: boolean; mode?: string; norm?: number | null; active_qubits?: number | null };
        services?: ServiceHit[];
        gguf?: { ok?: boolean; model?: string | null; reply?: string | null; hole?: string | null };
        hamiltonian?: number | null;
        counts?: Record<string, number>;
        shots?: number;
        diagram?: string | null;
        engine?: Fire["engine"];
      };
      const engine = data.engine?.closed ? data.engine : null;
      if ((!res.ok || data.ok === false) && !engine) {
        setNote(data.error || "Production fire failed.");
        setFire(null);
        return;
      }
      const shotN = Number(data.circuit?.shots || data.shots || shots);
      const counts = data.circuit?.counts || data.counts || {};
      const rex = data.rex;
      setFire({
        bars: barsFromCounts(counts, nq, shotN),
        rexStatus: String(rex?.status || (rex?.admitted ? "ADMIT" : "—")),
        admitted: rex?.admitted === true,
        committed: rex?.committed === true,
        cycle: rex?.cycle ?? null,
        receipt: rex?.receipt_hash ? String(rex.receipt_hash) : rex && "receipt" in rex && rex.receipt ? String(rex.receipt) : null,
        hamiltonian:
          typeof rex?.contact_hamiltonian === "number"
            ? rex.contact_hamiltonian
            : typeof data.hamiltonian === "number"
              ? data.hamiltonian
              : null,
        coin: rex?.mc290 ? String(rex.mc290) : null,
        pennylane:
          data.pennylane && typeof data.pennylane === "object" && !Array.isArray(data.pennylane)
            ? data.pennylane.executed
              ? String(data.pennylane.execution || "LIVE")
              : "DOWN"
            : Array.isArray(data.pennylane)
              ? "LIVE"
              : typeof data.pennylane === "string"
                ? data.pennylane
                : "DOWN",
        mesh: data.mesh?.ok ? `${data.mesh.mode || "mesh"} · ${data.mesh.active_qubits ?? "?"}Q` : "DOWN",
        diagram: data.circuit?.diagram || data.diagram || null,
        services: data.services || [],
        ggufModel: data.gguf?.model || null,
        ggufReply: data.gguf?.reply || engine?.phi2Reply || null,
        ggufHole: data.gguf?.hole || null,
        engine,
      });
      setLink((prev) => ({
        ...prev,
        rex: rex?.admitted ? "LIVE" : prev.rex,
        gguf: data.gguf?.ok ? "LIVE" : "DOWN",
        rail: engine?.rail || prev.rail,
        webb: engine?.webb || prev.webb,
        seat: engine?.seat || prev.seat,
        seats: engine?.seats || prev.seats,
      }));
      const liveSeats = Object.values(engine?.seats || {}).filter((seat) => seat?.state === "LIVE").length;
      const fed = engine?.fed;
      const fedN = fed
        ? [fed.claudia, fed.planets, fed.moon, fed.lantern, fed.oricron, fed.ori, fed.simulations, fed.jetbase, fed.agents, fed.habitation].filter(
            (door) => door?.ok,
          ).length
        : 0;
      setNote(
        engine
          ? `Engine closed. Rail ${engine.rail?.state || "DOWN"}. Webb Karness ${engine.webb?.state || "DOWN"}. ${liveSeats} of 4 GGUF live. ${fedN} of 10 base mouths took the shot.`
          : rex?.admitted
            ? "Rex admitted this circuit on Railway."
            : "Railway answered. Rex did not admit.",
      );
      requestAnimationFrame(() => resultRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }));
    } catch {
      setNote("Could not reach the production fire.");
    } finally {
      setFiring(false);
    }
  }

  const visible =
    group === "mine"
      ? []
      : PRESETS.filter((p) => p.group === group);

  return (
    <div className="min-h-dvh bg-bg text-fg">
      <header className="sticky top-0 z-20 border-b border-line bg-panel/95 backdrop-blur">
        <div className="mx-auto flex max-w-3xl items-end justify-between gap-3 px-4 py-3">
          <div>
            <p className="text-xs font-semibold tracking-widest text-accent">CWWE · P3^Q · CCTP</p>
            <h1 className="text-xl font-bold leading-tight text-fg">CLAP Circuit Builder</h1>
          </div>
          <p className="max-w-36 text-right text-xs leading-snug text-gold">Build. Encode. Fire. Own.</p>
        </div>
        <div className="mx-auto grid max-w-3xl grid-cols-5 gap-2 px-4 pb-3 text-xs">
          <Meter k="REX" v={link.rex} />
          <Meter k="CIRQ" v={link.cirq} />
          <Meter k="PL" v={link.pennylane} />
          <Meter k="116" v={link.lane116} />
          <Meter k="GGUF" v={link.gguf} />
        </div>
      </header>

      <main className="mx-auto max-w-3xl px-4 pb-28 pt-4">
        <Launcher />
        <label className="mt-4 block">
          <span className="sr-only">Circuit name</span>
          <input
            value={name}
            maxLength={48}
            onChange={(e) => setName(e.target.value)}
            className="min-h-12 w-full rounded-md border border-line bg-card px-3 text-base font-semibold text-gold"
          />
        </label>

        <div className="mt-3 flex items-center gap-2">
          <span className="w-16 text-xs uppercase tracking-wider text-dim">Qubits</span>
          <button type="button" className="grid size-12 place-items-center rounded-md border border-line bg-card text-lg" onClick={() => setQubits(nq - 1)} aria-label="Fewer qubits">
            −
          </button>
          <span className="grid h-12 min-w-12 place-items-center rounded-md border border-accent/40 bg-panel text-lg font-bold text-accent">{nq}</span>
          <button type="button" className="grid size-12 place-items-center rounded-md border border-line bg-card text-lg" onClick={() => setQubits(nq + 1)} aria-label="More qubits">
            +
          </button>
          <span className="ml-auto text-xs text-dim">max 8 · local</span>
        </div>

        <div className="mt-3">
          <p className="mb-2 text-xs uppercase tracking-wider text-dim">Target qubit · CNOT/CZ uses q{target} → q{pair}</p>
          <div className="flex gap-2 overflow-x-auto pb-1">
            {Array.from({ length: nq }, (_, q) => (
              <button
                key={q}
                type="button"
                onClick={() => setTarget(q)}
                className={`min-h-12 min-w-14 shrink-0 rounded-md border px-3 text-sm font-semibold ${
                  q === target ? "border-accent bg-accent text-bg" : "border-line bg-card text-fg"
                }`}
              >
                q{q}
              </button>
            ))}
          </div>
        </div>

        <div className="mt-3 grid grid-cols-4 gap-2">
          <GateButton tone="green" onClick={() => add("H")}>H</GateButton>
          <GateButton tone="gold" onClick={() => add("Rz")}>Rz π/φ</GateButton>
          <GateButton tone="accent" onClick={() => add("Rx")}>Rx</GateButton>
          <GateButton tone="accent" onClick={() => add("Ry")}>Ry</GateButton>
          <GateButton tone="fg" onClick={() => add("CNOT")}>CNOT</GateButton>
          <GateButton tone="gold" onClick={() => add("CZ")}>CZ</GateButton>
          <GateButton
            tone="fire"
            onClick={() => {
              bump([...gates, ...macroSeal(nq)]);
              setNote("P3^Q seal appended.");
            }}
          >
            Seal
          </GateButton>
          <GateButton
            tone="gold"
            onClick={() => {
              if (nq < 3) {
                setNote("Triangle needs 3 qubits.");
                return;
              }
              bump([...gates, ...macroTriangle()]);
              setNote("Triangle appended.");
            }}
          >
            Triangle
          </GateButton>
          <GateButton
            tone="green"
            onClick={() => {
              bump([...gates, ...macroCwwe(nq)]);
              setNote("CWWE appended.");
            }}
          >
            CWWE
          </GateButton>
          <GateButton
            tone="green"
            onClick={() => {
              const n = Math.max(nq, 6);
              setPast((p) => [...p.slice(-39), gates]);
              setNq(n);
              setGates([...clampGates(gates, n), ...macroLuna(n)]);
              setTarget(0);
              setPulse((v) => v + 1);
              setFire(null);
              setNote("Luna Bridge appended on 6 qubits.");
            }}
          >
            Luna
          </GateButton>
          <GateButton tone="dim" onClick={undo}>Undo</GateButton>
          <GateButton tone="fire" onClick={clearAll}>Clear</GateButton>
        </div>

        <p className="mt-3 text-sm text-muted" aria-live="polite">{note}</p>

        <div className="mt-3 overflow-x-auto rounded-md border border-line bg-card p-3">
          <CircuitSvg nq={nq} gates={gates} svgRef={svgRef} />
          {!gates.length && (
            <p className="mt-2 text-sm text-dim">Empty register. Wires are |0⟩. A gate paints the lit qubit.</p>
          )}
        </div>

        <div className="mt-3 grid grid-cols-2 gap-2 sm:grid-cols-4">
          <Stat k="Gates" v={String(gates.length)} />
          <Stat k="Entangling" v={String(ent)} tone="gold" />
          <Stat k="Depth" v={String(depth)} tone="green" />
          <Stat k="Qubits × shots" v={(nq * shots).toLocaleString()} />
        </div>

        <section className="mt-3 rounded-md border border-gold/70 bg-bg p-3">
          <p className="text-xs uppercase tracking-widest text-dim">CCTP encoded payload</p>
          <p className="mt-2 max-h-28 overflow-auto break-all text-sm leading-relaxed text-gold">
            {cctp || "Build a circuit to generate CCTP payload"}
          </p>
          <p className="mt-2 text-xs text-dim">
            {enc} · {payloadJson.length} bytes · {nq}Q × {shots.toLocaleString()} shots · GOV π/φ = {GOV.toFixed(6)}
          </p>
        </section>

        <div className="mt-3 grid grid-cols-2 gap-2">
          <p className="col-span-2 text-xs uppercase tracking-wider text-dim">Shots</p>
          {SHOTS.map((n) => (
            <button
              key={n}
              type="button"
              onClick={() => {
                setShots(n);
                setFire(null);
              }}
              className={`min-h-12 rounded-md border text-sm font-semibold ${
                shots === n ? "border-accent bg-accent text-bg" : "border-line bg-card text-fg"
              } ${n === 10000 ? "col-span-2" : ""}`}
            >
              {n.toLocaleString()}
            </button>
          ))}
        </div>

        <div className="mt-3 grid grid-cols-4 gap-2">
          {ENCODINGS.map((item) => (
            <button
              key={item}
              type="button"
              onClick={() => setEnc(item)}
              className={`min-h-12 rounded-md border text-sm font-semibold ${
                enc === item ? "border-gold bg-gold text-bg" : "border-line bg-card text-fg"
              }`}
            >
              {item}
            </button>
          ))}
        </div>

        <div className="mt-3 grid grid-cols-2 gap-2">
          <Action onClick={copyPayload}>Copy payload</Action>
          <Action onClick={downloadSvg}>SVG card</Action>
          <Action onClick={downloadJson}>Export JSON</Action>
          <Action onClick={saveBench}>Save on device</Action>
        </div>

        <section ref={resultRef} className="mt-4 rounded-md border border-line bg-panel p-3">
          <div className="flex items-baseline justify-between gap-3">
            <h2 className="text-sm font-bold tracking-widest text-accent">TWIN 11Q RAIL</h2>
            <p className={link.rail?.state === "LIVE" ? "text-xs text-green" : "text-xs text-fire"}>{link.rail?.state || link.lane116}</p>
          </div>
          <p className="mt-2 text-xs text-dim">
            Rails {link.rail?.twin || "C · D"}
            {link.rail?.qubits ? ` · ${link.rail.qubits}Q dense` : " · 11Q dense"}
            {link.rail?.line ? ` · ${link.rail.line}` : ""}
          </p>
          <p className="mt-1 text-xs text-dim">
            Webb Karness {link.webb?.state || "…"}
            {link.webb?.line ? ` · ${link.webb.line}` : ""}
          </p>
          <p className="mt-1 text-xs text-dim">{link.seat?.line || fire?.engine?.seat?.line || "DELTA-031 · G² · G.³"}</p>
          {fire?.engine?.inference && (
            <ul className="mt-2 space-y-1">
              {fire.engine.inference.map((mouth) => (
                <li key={mouth.name} className="text-xs text-dim">
                  <span className={mouth.onGguf ? "text-green" : "text-fire"}>{mouth.onGguf ? "GGUF" : mouth.ok ? "OFF GGUF" : "DOWN"}</span>
                  {" · "}
                  {mouth.name}
                  {" · "}
                  {mouth.detail}
                </li>
              ))}
            </ul>
          )}
          <div className="mt-3 grid grid-cols-2 gap-2 sm:grid-cols-4">
            <Stat k="Rex" v={fire ? fire.rexStatus : link.rex} tone={fire?.admitted ? "green" : "accent"} />
            <Stat k="Cirq" v={link.cirq} tone="green" />
            <Stat k="PennyLane" v={fire ? (fire.pennylane === "DOWN" ? "DOWN" : "LIVE") : link.pennylane} />
            <Stat k="CH" v={fire?.hamiltonian == null ? "π/φ" : fire.hamiltonian.toFixed(3)} tone="gold" />
          </div>
          <ul className="mt-3 space-y-2">
            {(
              [
                ["Phi-2", link.seats?.phi2],
                ["Qwen 1.5", link.seats?.qwen15],
                ["Qwen3 8B", link.seats?.qwen3],
                ["Queen 2.5", link.seats?.queen],
              ] as const
            ).map(([label, seat]) => (
              <li key={label} className="rounded-md border border-line bg-card px-3 py-2">
                <div className="flex items-baseline justify-between gap-2 text-sm">
                  <span className="font-semibold">{label}</span>
                  <span className={seat?.state === "LIVE" ? "text-green" : "text-fire"}>{seat?.state || "…"}</span>
                </div>
                <p className="mt-1 break-all text-xs text-dim">{seat?.name || "checking"}</p>
                <p className="mt-1 text-xs text-dim">{seat?.where || ""}</p>
              </li>
            ))}
          </ul>
          <p className="mt-2 text-xs text-dim">Four GGUF on this rail. A file that is not loaded stays down. Phi-2 is the only one answering.</p>
          {!fire && (
            <p className="mt-3 text-sm text-muted">
              {firing
                ? "Rex is running this circuit through the production chain. Stay on this screen."
                : "Ready. Fire samples on the CLAP door. Phi-2 completes on its own /completion. Cirq counts the shots."}
            </p>
          )}
          {fire && (
            <div className="mt-3">
              <p className="text-sm text-fg">
                {fire.admitted ? "Admitted" : "Not admitted"}
                {fire.committed ? " · committed" : ""}
                {fire.cycle != null ? ` · cycle ${fire.cycle}` : ""}
                {fire.coin ? ` · ${fire.coin}` : ""}
              </p>
              {fire.receipt && <p className="mt-1 break-all text-xs text-dim">receipt {fire.receipt}</p>}
              <ul className="mt-3 space-y-2">
                {fire.bars.map((row) => (
                  <li key={row.bit}>
                    <div className="flex items-baseline justify-between text-sm">
                      <span className="font-semibold text-accent">{row.bit}</span>
                      <span className="text-muted">
                        {row.count.toLocaleString()} · {(row.prob * 100).toFixed(1)}%
                      </span>
                    </div>
                    <div className="mt-1 h-2 overflow-hidden rounded-full bg-card">
                      <div className="h-full bg-accent" style={{ width: `${Math.max(2, row.prob * 100)}%` }} />
                    </div>
                  </li>
                ))}
              </ul>
              {fire.diagram && (
                <pre className="mt-3 overflow-auto rounded-md border border-line bg-bg p-3 text-xs leading-relaxed text-green">
                  {fire.diagram}
                </pre>
              )}
              <div className="mt-3 rounded-md border border-line bg-card px-3 py-2">
                <div className="flex items-baseline justify-between gap-2 text-sm">
                  <span className="font-semibold">Phi-2 GGUF</span>
                  <span className={fire.ggufReply ? "text-green" : "text-fire"}>{fire.ggufReply ? "LIVE" : "DOWN"}</span>
                </div>
                <p className="mt-1 text-xs text-dim">
                  {fire.ggufModel || "phi-2.Q4_K_M.gguf"} · /completion
                  {fire.ggufHole ? ` · ${fire.ggufHole}` : ""}
                </p>
                <p className="mt-1 text-sm text-fg">{fire.ggufReply || fire.ggufHole || "No GGUF reply."}</p>
              </div>
              <ul className="mt-3 space-y-2">
                {fire.services.map((svc) => (
                  <li key={svc.id} className="rounded-md border border-line bg-card px-3 py-2">
                    <div className="flex items-baseline justify-between gap-2 text-sm">
                      <span className="font-semibold">{svc.name}</span>
                      <span className={svc.ok ? "text-green" : "text-fire"}>{svc.ok ? "LIVE" : "DOWN"}</span>
                    </div>
                    <p className="mt-1 text-xs text-dim">{svc.detail}</p>
                  </li>
                ))}
              </ul>
              <p className="mt-3 text-xs text-dim">Mesh {fire.mesh}</p>
            </div>
          )}
          <p className="mt-3 text-xs leading-relaxed text-dim">
            The public Aura116 Rex inlet can be down while the private P3^Q runtime behind the CLAP door is live. This fire uses that door. It is not a local sample.
          </p>
        </section>

        <section className="mt-6">
          <h2 className="border-b border-line pb-2 text-xs font-bold uppercase tracking-widest text-dim">
            One-click load
          </h2>
          <div className="mt-3 grid grid-cols-3 gap-2">
            {(
              [
                ["coin", "Coins"],
                ["planet", "Planets"],
                ["mine", "Mine"],
              ] as const
            ).map(([id, label]) => (
              <button
                key={id}
                type="button"
                onClick={() => setGroup(id)}
                className={`min-h-12 rounded-md border text-sm font-semibold ${
                  group === id ? "border-accent text-accent" : "border-line text-muted"
                }`}
              >
                {label}
              </button>
            ))}
          </div>
          {group === "mine" ? (
            <div className="mt-3 grid gap-2">
              {!saved.length && <p className="text-sm text-muted">Nothing saved yet. Save on device keeps the circuit in this browser.</p>}
              {saved.map((item) => (
                <div key={item.id} className="flex items-stretch gap-2">
                  <button
                    type="button"
                    onClick={() => restoreSaved(item)}
                    className="min-h-14 flex-1 rounded-md border border-line bg-card px-3 text-left"
                  >
                    <span className="block text-sm font-semibold">{item.name}</span>
                    <span className="text-xs text-dim">
                      {item.nq}Q · {item.gates.length} gates · {item.enc}
                    </span>
                  </button>
                  <button
                    type="button"
                    className="min-w-16 rounded-md border border-fire/50 px-2 text-sm text-fire"
                    onClick={() => setSaved((list) => list.filter((s) => s.id !== item.id))}
                  >
                    Drop
                  </button>
                </div>
              ))}
            </div>
          ) : (
            <div className="mt-3 grid grid-cols-2 gap-2">
              {visible.map((p) => (
                <button
                  key={p.id}
                  type="button"
                  onClick={() => loadPreset(p)}
                  className="min-h-16 rounded-md border border-line bg-card px-3 py-2 text-left"
                >
                  <span className="block text-sm font-semibold">{p.name}</span>
                  <span className="mt-1 block text-xs leading-snug text-dim">{p.blurb}</span>
                </button>
              ))}
            </div>
          )}
        </section>

        <section className="mt-6">
          <h2 className="border-b border-line pb-2 text-xs font-bold uppercase tracking-widest text-dim">
            Cards — the license, not a checkout
          </h2>
          <p className="mt-3 text-sm leading-relaxed text-muted">
            Free on a local fire. Credit cards for QPU metal stay on the live Railway bench. This app does not charge.
          </p>
          <div className="mt-3 grid gap-2">
            <Card name="ComCard CC-50" price="$50" line="500K governed tokens" note="The card IS the license" />
            <Card name="QuamCard QC-50" price="$50" line="500K quantum-minted tokens" note="5-qubit entangled chain" />
            <Card name="QuamCard QC-250" price="$250" line="25M tokens — Cepheus 107Q" note="Full QPU origin proof" />
          </div>
          <a
            href={LIVE}
            target="_blank"
            rel="noreferrer"
            className="mt-3 flex min-h-12 items-center justify-center rounded-md border border-accent text-sm font-semibold text-accent"
          >
            Open the live Railway bench
          </a>
        </section>

        <footer className="mt-8 border-t border-line py-6 text-center text-xs leading-relaxed text-dim">
          <p>Joshua Lopez · DCGP.AI LLC · USPTO 19/555,951 | 19/657,064 | 19/730,900 | 19/731,016 | 19/732,119</p>
          <p className="mt-2 text-gold/80">DCGP introduces AGI. AURA Governed Intelligence.</p>
          <p className="mt-2 text-gold/80">Every coin is a circuit. Build yours. Fire it. Own it. Where there is a gap, there is a gate.</p>
        </footer>
      </main>

      <div className="fixed inset-x-0 bottom-0 z-30 border-t border-line bg-panel/95 p-3 backdrop-blur">
        <div className="mx-auto max-w-3xl">
          <button
            type="button"
            onClick={() => void fireCircuit()}
            disabled={firing}
            className="min-h-14 w-full rounded-md bg-fire text-base font-bold tracking-wide text-bg disabled:opacity-60"
          >
            Fire {firing ? "running" : `${shots.toLocaleString()} shots`}
          </button>
        </div>
      </div>
    </div>
  );
}

function Meter({ k, v }: { k: string; v: string }) {
  return (
    <div className="rounded-md border border-line bg-card px-2 py-1.5">
      <div className="text-xs uppercase tracking-wider text-dim">{k}</div>
      <div className={`truncate text-sm font-semibold ${v === "DOWN" ? "text-fire" : "text-green"}`}>{v}</div>
    </div>
  );
}

function Stat({ k, v, tone = "accent" }: { k: string; v: string; tone?: "accent" | "gold" | "green" }) {
  const color = tone === "gold" ? "text-gold" : tone === "green" ? "text-green" : "text-accent";
  return (
    <div className="rounded-md border border-line bg-card px-3 py-2">
      <div className="text-xs uppercase tracking-wider text-dim">{k}</div>
      <div className={`text-lg font-bold ${color}`}>{v}</div>
    </div>
  );
}

function GateButton({
  children,
  onClick,
  tone,
}: {
  children: string;
  onClick: () => void;
  tone: "green" | "gold" | "accent" | "fg" | "fire" | "dim";
}) {
  const color =
    tone === "green"
      ? "border-green/50 text-green"
      : tone === "gold"
        ? "border-gold/50 text-gold"
        : tone === "fire"
          ? "border-fire/50 text-fire"
          : tone === "dim"
            ? "border-line text-muted"
            : tone === "fg"
              ? "border-fg/30 text-fg"
              : "border-accent/40 text-accent";
  return (
    <button type="button" onClick={onClick} className={`min-h-12 rounded-md border bg-card px-1 text-sm font-semibold ${color}`}>
      {children}
    </button>
  );
}

function Action({ children, onClick }: { children: string; onClick: () => void }) {
  return (
    <button type="button" onClick={onClick} className="min-h-12 rounded-md border border-green/50 text-sm font-semibold text-green">
      {children}
    </button>
  );
}

function Card({ name, price, line, note }: { name: string; price: string; line: string; note: string }) {
  return (
    <div className="rounded-md border border-gold/30 bg-card px-3 py-3">
      <div className="text-xs uppercase tracking-widest text-dim">{name}</div>
      <div className="mt-1 text-2xl font-bold">{price}</div>
      <div className="text-sm text-accent">{line}</div>
      <div className="mt-1 text-xs text-dim">{note}</div>
    </div>
  );
}