import { RUSH9_FIRE_LAW } from "@/lib/magi/rush9-fire";
import { useMagi } from "@/lib/store";
import { Button, Kicker, Panel, SeatBadge, Stat } from "@/components/ui";

export function Rush9Fire() {
  const fire = useMagi((s) => s.fireRush9);
  const out = useMagi((s) => s.rush9Fire);

  return (
    <div className="space-y-3">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <div className="flex items-center gap-2">
            <Kicker>New · 256³ → 9D · Cirq</Kicker>
            <SeatBadge seat="LIMITED" />
          </div>
          <p className="mt-2 max-w-2xl text-sm text-muted">{RUSH9_FIRE_LAW}</p>
        </div>
        <Button onClick={fire}>Fire CHARLIE → Rush 9D</Button>
      </div>
      {out ? (
        <>
          <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
            <Stat label="Wire" value={`#${out.seal.wire}`} hint={`(${out.seal.pos.join(",")})`} />
            <Stat label="Match" value={out.shot.match ? "MATCH" : "hold"} hint={out.shot.path} />
            <Stat label="‖r‖" value={out.shot.residual.toExponential(2)} hint="9D residual" />
            <Stat label="Preserved" value="true" hint="never reminted" />
          </div>
          <Panel className="rounded-2xl p-4">
            <Kicker>9 axes from 256³ seals</Kicker>
            <ul className="mt-3 grid grid-cols-3 gap-1">
              {out.axes.map((a) => (
                <li key={a.id} className="border-t border-border py-1.5 font-mono text-[11px]">
                  {a.label}
                  <span className="mt-0.5 block text-muted">{a.v.toFixed(4)}</span>
                </li>
              ))}
            </ul>
          </Panel>
        </>
      ) : null}
    </div>
  );
}