"use client";

/**
 * The Vault — Spinza Original (ladder). A colossal five-layer vault door:
 * every layer reveals three digits one by one; after each opened layer the
 * player SECUREs the current multiplier or OPENs the next lock. Outcomes come
 * from the server; this component only animates the returned `log` tail.
 */
import { useCallback, useEffect, useMemo, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Atom, Clock, Fingerprint, Gauge, Lock, LockOpen, RotateCcw, ShieldCheck, Siren } from "lucide-react";
import { formatMultiplier, formatSC } from "@spinza/shared";
import type { LadderEvent, LadderOffer } from "@spinza/game-core/client";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui";
import { useLadder, type ArcadeGameProps, type LadderView } from "./contract";

interface VaultConfig {
  layers: number[];
  digitsPerLayer: number;
  layerNames: string[];
}

/** Reveal animation in progress for one layer (drives the digit wheels). */
interface Reveal {
  layer: number;
  digits: number[];
  shown: number;
  outcome: "ok" | "bust" | null;
}

type Phase = "idle" | "reveal" | "running" | "cashed" | "busted" | "completed";
type WheelState = { kind: "idle" } | { kind: "spin" } | { kind: "fail" } | { kind: "locked"; digit: number };

const wait = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));
const EASE = [0.16, 1, 0.3, 1] as const;
const LAYER_SIZES = [100, 82, 65, 49, 34];
const LAYER_ICONS = [Lock, Clock, Fingerprint, Gauge, Atom];
const DANGER = "#ff5c7a";
const WHEEL_H = 56;

/** Same arithmetic as the server: m₀ = rtp, m_k = floor₂(m_{k−1} / p_k). */
export function vaultLadder(rtp: number, layers: number[]): number[] {
  const out: number[] = [];
  let m = rtp;
  for (const p of layers) {
    m = m / p; // full precision like the server; displayed values are floored to 2 decimals
    out.push(Math.floor(m * 100) / 100);
  }
  return out;
}

function lastReveal(log: LadderEvent[]): LadderEvent | undefined {
  for (let i = log.length - 1; i >= 0; i--) {
    const k = log[i].kind;
    if (k === "layer" || k === "alarm") return log[i];
  }
  return undefined;
}

function digitsOf(ev: LadderEvent | undefined): number[] {
  const d = ev?.data?.digits;
  return Array.isArray(d) ? d.filter((x): x is number => typeof x === "number") : [];
}

export function VaultGame({ definition, bet, onBusy, onResult, sound, reduceMotion }: ArcadeGameProps) {
  const cfg = definition.config as unknown as VaultConfig;
  const palette = definition.presentation.palette;
  const { session, start, act, reset, busy, error, clearError } = useLadder(definition.slug);
  const [anim, setAnim] = useState<Reveal | null>(null);
  const [celebrate, setCelebrate] = useState(false);
  const ladder = useMemo(() => vaultLadder(definition.rtp, cfg.layers), [definition.rtp, cfg.layers]);
  const dur = useCallback((ms: number) => (reduceMotion ? Math.round(ms * 0.35) : ms), [reduceMotion]);
  const sec = (ms: number) => dur(ms) / 1000;

  /* ------------------------------------------------------------ derived */
  const phase: Phase = anim ? "reveal" : !session ? "idle" : session.status;
  const layersOpen = anim ? anim.layer : session ? Number(session.extra.layersOpen ?? 0) : 0;
  const runBet = session?.bet ?? bet;
  // While a layer is being revealed, keep showing the multiplier secured before it.
  const current = anim ? (session?.log.find((e) => e.kind === "layer" && e.stage === anim.layer)?.multiplierAfter ?? (anim.layer > 0 ? ladder[anim.layer - 1] : definition.rtp)) : (session?.current ?? 0);
  const offer: LadderOffer | undefined = session?.offers[0];
  const running = session?.status === "running";
  const locked = busy || anim !== null;
  const revealedDigits: number[] = useMemo(() => {
    const d = session?.extra.digits;
    return Array.isArray(d) ? d.filter((x): x is number => typeof x === "number") : [];
  }, [session]);
  const failedEvent = phase === "busted" && session ? lastReveal(session.log) : undefined;
  const failedDigits = digitsOf(failedEvent);
  const activeLayer = Math.min(layersOpen, cfg.layers.length - 1);

  const wheels: WheelState[] = Array.from({ length: cfg.digitsPerLayer }, (_, i) => {
    if (anim) {
      if (i < anim.shown) return { kind: "locked", digit: anim.digits[i] ?? 0 };
      if (anim.outcome === "bust") return i === anim.digits.length ? { kind: "fail" } : { kind: "idle" };
      return { kind: "spin" };
    }
    if (failedEvent) {
      if (i < failedDigits.length) return { kind: "locked", digit: failedDigits[i] };
      if (i === failedDigits.length) return { kind: "fail" };
    }
    return { kind: "idle" };
  });

  // Resume: a running session locks the shell's bet controls.
  useEffect(() => {
    if (running) onBusy(true);
  }, [running, onBusy]);

  /* ------------------------------------------------------------ sequence */
  const playTail = useCallback(
    async (s: LadderView) => {
      const ev = lastReveal(s.log);
      if (ev) {
        const digits = digitsOf(ev);
        setAnim({ layer: Math.max(0, ev.stage - 1), digits, shown: 0, outcome: null });
        await wait(dur(320));
        for (let i = 0; i < digits.length; i++) {
          await wait(dur(350));
          sound("tick");
          setAnim((a) => (a ? { ...a, shown: i + 1 } : a));
        }
        if (ev.outcome === "bust") {
          await wait(dur(420));
          sound("lose");
          setAnim((a) => (a ? { ...a, outcome: "bust" } : a));
          await wait(dur(1300));
        } else {
          await wait(dur(260));
          sound("bonus");
          setAnim((a) => (a ? { ...a, outcome: "ok" } : a));
          await wait(dur(760));
        }
        setAnim(null);
      }
      if (s.status === "completed") {
        await wait(dur(600));
        setCelebrate(true);
        sound("bigWin");
      }
      if (s.status !== "running") {
        onResult({ win: s.win, multiplier: s.bet ? s.win / s.bet : 0 });
        onBusy(false);
      }
    },
    [dur, sound, onResult, onBusy],
  );

  const onStart = async () => {
    if (locked) return;
    sound("click");
    setCelebrate(false);
    if (session && session.status !== "running") reset();
    onBusy(true);
    const res = await start(bet);
    if (!res) {
      onBusy(false);
      return;
    }
    await playTail(res.session);
  };

  const onOpen = async () => {
    if (!session || locked) return;
    sound("click");
    const res = await act({ type: "continue" });
    if (res) await playTail(res.session);
  };

  const onSecure = async () => {
    if (!session || locked) return;
    sound("click");
    const res = await act({ type: "cashout" });
    if (!res) return;
    sound("win");
    onResult({ win: res.session.win, multiplier: res.session.bet ? res.session.win / res.session.bet : 0 });
    onBusy(false);
  };

  const onNewRun = () => {
    sound("click");
    setCelebrate(false);
    reset();
  };

  /* -------------------------------------------------------------- render */
  const ended = phase === "cashed" || phase === "busted" || phase === "completed";
  const strobe = phase === "busted" || anim?.outcome === "bust";
  const ActiveIcon = LAYER_ICONS[activeLayer] ?? Lock;
  const multiplierColor = phase === "busted" ? DANGER : phase === "cashed" || phase === "completed" ? "var(--color-credit)" : "#fff";

  return (
    <div className="absolute inset-0 flex flex-col overflow-hidden" data-scene="vault">
      {/* Ambient light */}
      <div
        className="pointer-events-none absolute inset-0"
        style={{
          background: `radial-gradient(60% 45% at 50% 42%, ${palette.primary}${phase === "completed" ? "55" : "22"} 0%, transparent 70%), radial-gradient(80% 40% at 50% 100%, ${palette.surface} 0%, transparent 70%)`,
          transition: "background 900ms",
        }}
      />
      {/* Alarm strobe */}
      <AnimatePresence>
        {strobe ? (
          <motion.div key="strobe" className="pointer-events-none absolute inset-0 z-[3]" style={{ background: `radial-gradient(70% 60% at 50% 50%, ${DANGER}55 0%, ${DANGER}22 60%, transparent 100%)` }} initial={{ opacity: 0 }} animate={{ opacity: reduceMotion ? [0, 0.7, 0] : [0, 1, 0, 0.8, 0, 0.5, 0, 0.3, 0] }} exit={{ opacity: 0 }} transition={{ duration: sec(1800), ease: "linear" }} />
        ) : null}
      </AnimatePresence>

      <div className="relative z-[2] mx-auto flex h-full w-full max-w-3xl flex-col px-3 pb-2 pt-1">
        {/* Stats */}
        <div className="flex items-end justify-between gap-3">
          <div>
            <div className="eyebrow">{phase === "busted" ? "Alarm" : phase === "cashed" ? "Secured" : phase === "completed" ? "Jackpot" : "Secured multiplier"}</div>
            <motion.div key={`${phase}-${current}`} initial={{ opacity: 0.4, y: 4 }} animate={{ opacity: 1, y: 0 }} className="text-[clamp(34px,9vw,52px)] font-extrabold leading-none tabular tracking-tight" style={{ color: multiplierColor, textShadow: phase === "running" || phase === "reveal" ? `0 0 28px ${palette.glow}88` : undefined }}>
              {phase === "idle" ? "—" : formatMultiplier(current)}
            </motion.div>
          </div>
          <div className="text-right">
            <div className="eyebrow">{phase === "busted" ? "Lost" : ended ? "Win" : phase === "idle" ? "After layer 1" : "Potential win"}</div>
            <div className={cn("text-lg font-bold tabular sm:text-xl", phase === "busted" ? "text-danger" : "text-credit")}>{phase === "idle" ? formatSC(Math.round(bet * (ladder[0] ?? 1))) : phase === "busted" ? `−${formatSC(runBet)}` : ended ? formatSC(session?.win ?? 0) : formatSC(Math.round(runBet * current))}</div>
            <div className="text-[11px] text-fg-3 tabular">Bet {formatSC(runBet)}</div>
          </div>
        </div>

        {/* Door */}
        <div className="relative grid min-h-0 flex-1 place-items-center py-2">
          <div className="relative aspect-square select-none" style={{ width: "min(86vw, 44dvh, 460px)" }}>
            <div className="pointer-events-none absolute -inset-[6%] rounded-full" style={{ background: `radial-gradient(circle, ${palette.glow}33 0%, transparent 62%)`, filter: "blur(10px)" }} />
            {LAYER_SIZES.map((size, i) => (
              <Frame key={`f${i}`} size={size} open={i < layersOpen} primary={palette.primary} glow={palette.glow} sec={sec} />
            ))}
            {/* Core light (visible once the last disc opens) */}
            <div className="absolute rounded-full" style={{ width: `${LAYER_SIZES[4]}%`, height: `${LAYER_SIZES[4]}%`, left: `${(100 - LAYER_SIZES[4]) / 2}%`, top: `${(100 - LAYER_SIZES[4]) / 2}%`, background: `radial-gradient(circle, #fff7dc 0%, ${palette.glow} 30%, ${palette.primary} 65%, transparent 100%)`, zIndex: 5, boxShadow: `0 0 80px 20px ${palette.glow}88` }} />
            {[...LAYER_SIZES].map((_, k) => LAYER_SIZES.length - 1 - k).map((i) => (
              <Disc key={`d${i}`} index={i} size={LAYER_SIZES[i]} open={i < layersOpen} active={i === layersOpen && phase !== "idle"} outcome={anim && anim.layer === i ? anim.outcome : null} sealed={phase === "busted" && i === layersOpen} palette={palette} sec={sec} />
            ))}

            {/* Jackpot burst */}
            <AnimatePresence>
              {celebrate ? (
                <motion.div key="burst" className="pointer-events-none absolute inset-0 grid place-items-center" style={{ zIndex: 30 }} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
                  {[0, 1, 2].map((r) => (
                    <motion.div key={r} className="absolute rounded-full" style={{ width: "34%", height: "34%", border: `2px solid ${palette.glow}` }} initial={{ scale: 0.6, opacity: 0.9 }} animate={{ scale: 3.2, opacity: 0 }} transition={{ duration: sec(1600), delay: r * sec(260), ease: "easeOut", repeat: Infinity, repeatDelay: sec(400) }} />
                  ))}
                  <motion.div className="absolute inset-0 rounded-full" style={{ background: `conic-gradient(from 0deg, transparent 0deg, ${palette.glow}44 8deg, transparent 16deg, transparent 60deg, ${palette.glow}33 68deg, transparent 76deg, transparent 120deg, ${palette.glow}44 128deg, transparent 136deg, transparent 180deg, ${palette.glow}33 188deg, transparent 196deg, transparent 240deg, ${palette.glow}44 248deg, transparent 256deg, transparent 300deg, ${palette.glow}33 308deg, transparent 316deg)` }} animate={{ rotate: 360 }} transition={{ duration: reduceMotion ? 40 : 14, ease: "linear", repeat: Infinity }} />
                </motion.div>
              ) : null}
            </AnimatePresence>

            {/* Center overlay */}
            <div className="absolute inset-0 grid place-items-center" style={{ zIndex: 40 }}>
              <AnimatePresence mode="wait">
                {phase === "idle" ? (
                  <motion.div key="idle" initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.9 }} className="flex flex-col items-center gap-2">
                    <button
                      onClick={() => void onStart()}
                      disabled={locked}
                      className="grid h-[112px] w-[112px] place-items-center rounded-full text-[17px] font-extrabold tracking-[0.14em] transition-transform active:scale-95 focus-ring disabled:opacity-60"
                      style={{ background: `radial-gradient(circle at 50% 30%, #fff3cf 0%, ${palette.glow} 18%, ${palette.primary} 60%, #8a6d2f 100%)`, boxShadow: `0 0 0 8px ${palette.primary}2a, 0 0 0 9px ${palette.primary}55, 0 18px 60px -12px ${palette.primary}`, color: "#1a1406" }}
                      aria-label="Start run"
                    >
                      START
                    </button>
                    <span className="rounded-full bg-black/50 px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-fg-2 tabular">Bet {formatSC(bet)}</span>
                  </motion.div>
                ) : phase === "cashed" ? (
                  <motion.div key="cashed" initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0 }} className="flex flex-col items-center text-center">
                    <ShieldCheck className="h-9 w-9" style={{ color: palette.glow }} />
                    <div className="mt-1 text-[13px] font-extrabold uppercase tracking-[0.22em]" style={{ color: palette.glow }}>
                      Secured
                    </div>
                    <div className="text-2xl font-extrabold tabular text-credit">+{formatSC(session?.win ?? 0)}</div>
                  </motion.div>
                ) : phase === "completed" ? (
                  <motion.div key="jackpot" initial={{ opacity: 0, scale: 0.6 }} animate={{ opacity: 1, scale: 1 }} transition={{ type: "spring", stiffness: 220, damping: 16 }} className="flex flex-col items-center text-center">
                    <div className="text-[clamp(22px,6vw,34px)] font-extrabold uppercase tracking-tight shimmer-text">Core open</div>
                    <div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-fg-2">Fictional jackpot</div>
                    <div className="mt-1 text-2xl font-extrabold tabular text-credit">+{formatSC(session?.win ?? 0)}</div>
                  </motion.div>
                ) : (
                  <motion.div key="wheels" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="flex flex-col items-center gap-2">
                    <div className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-[0.2em]" style={{ color: phase === "busted" ? DANGER : palette.glow }}>
                      <ActiveIcon className="h-3.5 w-3.5" />
                      {cfg.layerNames[activeLayer]}
                    </div>
                    <div className="flex gap-2">
                      {wheels.map((w, i) => (
                        <DigitWheel key={i} w={w} primary={palette.primary} glow={palette.glow} reduceMotion={reduceMotion} />
                      ))}
                    </div>
                    <div className="h-5 text-[11px] font-semibold uppercase tracking-wider">
                      {phase === "busted" ? (
                        <motion.span initial={{ scale: 1.6, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="inline-flex items-center gap-1 rounded-sm border-2 px-2 py-0.5 text-[12px] font-extrabold tracking-[0.3em]" style={{ borderColor: DANGER, color: DANGER, transform: "rotate(-6deg)" }}>
                          <Siren className="h-3.5 w-3.5" /> Sealed
                        </motion.span>
                      ) : anim ? (
                        <span className="text-fg-2">{anim.outcome === "ok" ? "Lock yields" : anim.outcome === "bust" ? "Alarm" : "Decoding…"}</span>
                      ) : offer ? (
                        <span className="text-fg-3 tabular">
                          {Math.round(offer.survival * 100)}% · <span style={{ color: palette.glow }}>{formatMultiplier(offer.next)}</span>
                        </span>
                      ) : null}
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          </div>
        </div>

        {/* Layer map */}
        <LayerMap cfg={cfg} ladder={ladder} layersOpen={layersOpen} phase={phase} digits={anim ? [...revealedDigits.slice(0, anim.layer * cfg.digitsPerLayer), ...anim.digits.slice(0, anim.shown)] : revealedDigits} failed={failedDigits} palette={palette} />

        {/* Controls */}
        <div className="mt-2 min-h-[72px]">
          <AnimatePresence mode="wait">
            {phase === "running" || phase === "reveal" ? (
              <motion.div key="run" initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 8 }} className="grid grid-cols-2 gap-2">
                <button onClick={() => void onSecure()} disabled={locked || !session?.canCashout} className="tap flex h-14 flex-col items-center justify-center rounded-md border text-[13px] font-extrabold uppercase tracking-[0.12em] transition-all active:scale-[0.98] focus-ring disabled:opacity-40" style={{ borderColor: `${palette.primary}88`, color: palette.glow, background: `${palette.primary}14` }}>
                  {definition.presentation.secondaryVerb ?? "SECURE"}
                  <span className="text-[11px] font-semibold normal-case tracking-normal text-fg-2 tabular">+{formatSC(Math.round(runBet * current))}</span>
                </button>
                <button onClick={() => void onOpen()} disabled={locked || !offer} className="tap flex h-14 flex-col items-center justify-center rounded-md text-[13px] font-extrabold uppercase tracking-[0.12em] transition-all active:scale-[0.98] focus-ring disabled:opacity-40" style={{ background: `linear-gradient(180deg, ${palette.glow}, ${palette.primary} 70%, #9a7b3a)`, color: "#1a1406", boxShadow: `0 10px 40px -12px ${palette.primary}` }}>
                  {definition.presentation.verb}
                  <span className="text-[11px] font-semibold normal-case tracking-normal tabular" style={{ color: "#3a2d0c" }}>
                    {anim ? "Decoding…" : offer ? `${Math.round(offer.survival * 100)}% yields · ${formatMultiplier(offer.next)}` : ""}
                  </span>
                </button>
              </motion.div>
            ) : ended ? (
              <motion.div key="end" initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 8 }} className="grid grid-cols-[1fr_auto] gap-2">
                <button onClick={() => void onStart()} disabled={locked} className="tap flex h-14 items-center justify-center gap-2 rounded-md text-[14px] font-extrabold uppercase tracking-[0.12em] transition-all active:scale-[0.98] focus-ring disabled:opacity-40" style={{ background: phase === "busted" ? `linear-gradient(180deg, #ff8aa0, ${DANGER})` : `linear-gradient(180deg, ${palette.glow}, ${palette.primary} 70%, #9a7b3a)`, color: "#1a1406", boxShadow: `0 10px 40px -12px ${phase === "busted" ? DANGER : palette.primary}` }}>
                  <RotateCcw className="h-4 w-4" /> {phase === "busted" ? "Try again" : "Play again"}
                  <span className="text-[11px] font-semibold normal-case tracking-normal tabular opacity-70">{formatSC(bet)}</span>
                </button>
                <Button variant="secondary" size="lg" className="h-14" onClick={onNewRun}>
                  New run
                </Button>
              </motion.div>
            ) : (
              <motion.div key="idle" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="flex h-14 items-center justify-center gap-2 text-center text-[12px] text-fg-3">
                <LockOpen className="h-3.5 w-3.5" /> {definition.tagline} · First layer opens automatically.
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </div>

      <AnimatePresence>
        {error ? (
          <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} className="absolute inset-x-4 bottom-3 z-[50] mx-auto max-w-sm glass rounded-md p-3 text-center text-sm">
            <div className="text-fg-2">{error}</div>
            <div className="mt-2 flex justify-center gap-2">
              <Button size="sm" variant="secondary" onClick={clearError}>
                Dismiss
              </Button>
              <Button size="sm" variant="accent" href="/rewards">
                Get rewards
              </Button>
            </div>
          </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  );
}

/* ------------------------------------------------------------------ parts */

function Frame({ size, open, primary, glow, sec }: { size: number; open: boolean; primary: string; glow: string; sec: (ms: number) => number }) {
  const inset = (100 - size) / 2;
  return (
    <motion.div className="absolute rounded-full" style={{ width: `${size}%`, height: `${size}%`, left: `${inset}%`, top: `${inset}%`, border: `2px solid ${primary}77`, boxShadow: `0 0 26px -6px ${glow}77, inset 0 0 22px -8px ${glow}55`, zIndex: 4 }} initial={false} animate={{ opacity: open ? 1 : 0 }} transition={{ duration: sec(700), delay: open ? sec(300) : 0 }} />
  );
}

function Disc({ index, size, open, active, outcome, sealed, palette, sec }: { index: number; size: number; open: boolean; active: boolean; outcome: "ok" | "bust" | null; sealed: boolean; palette: ArcadeGameProps["definition"]["presentation"]["palette"]; sec: (ms: number) => number }) {
  const inset = (100 - size) / 2;
  const Icon = LAYER_ICONS[index] ?? Lock;
  const rim = sealed || outcome === "bust" ? DANGER : palette.primary;
  const bolts = 12 - index * 2;
  const glowShadow = outcome === "ok" ? `0 0 70px 10px ${palette.glow}aa` : active ? `0 0 44px -8px ${palette.glow}88` : "0 18px 50px -20px #000";
  return (
    <motion.div
      className="absolute rounded-full"
      style={{ width: `${size}%`, height: `${size}%`, left: `${inset}%`, top: `${inset}%`, zIndex: 10 + (LAYER_SIZES.length - index) }}
      initial={false}
      animate={open ? { opacity: 0, scale: 1.14, rotate: 32 } : { opacity: 1, scale: 1, rotate: 0 }}
      transition={{ duration: sec(950), ease: EASE }}
    >
      <motion.div
        className="absolute inset-0 rounded-full"
        style={{ background: `radial-gradient(circle at 35% 28%, #3b3441 0%, #221d27 40%, #110f14 100%)` }}
        animate={{ boxShadow: `inset 0 0 0 2px ${rim}88, inset 0 0 0 7px #0b0a0d, inset 0 0 0 8px ${rim}44, inset 0 -18px 40px -20px #000, ${glowShadow}` }}
        transition={{ duration: sec(500) }}
      />
      {/* brushed metal sheen */}
      <div className="absolute inset-0 rounded-full opacity-60" style={{ background: `conic-gradient(from 210deg, transparent 0deg, rgba(255,255,255,0.07) 40deg, transparent 90deg, rgba(255,255,255,0.05) 200deg, transparent 260deg)` }} />
      {/* tick ring */}
      <div className="absolute inset-[9%] rounded-full" style={{ border: `1.5px dashed ${rim}${active ? "aa" : "40"}` }} />
      {/* bolts */}
      {Array.from({ length: bolts }, (_, b) => {
        const a = (b / bolts) * Math.PI * 2 - Math.PI / 2;
        // Rounded so the SSR string matches the browser's normalised value (hydration).
        const bx = Math.round((50 + 45.5 * Math.cos(a) - 2.25) * 1000) / 1000;
        const by = Math.round((50 + 45.5 * Math.sin(a) - 2.25) * 1000) / 1000;
        return <span key={b} className="absolute h-[4.5%] w-[4.5%] rounded-full" style={{ left: `${bx}%`, top: `${by}%`, background: `radial-gradient(circle at 35% 35%, ${palette.glow}, ${palette.primary} 55%, #5b4a22)`, boxShadow: "0 1px 2px #000" }} />;
      })}
      {/* engraved layer mark (12 o'clock) */}
      <div className="absolute left-1/2 top-[16%] -translate-x-1/2 opacity-70" style={{ color: rim }}>
        <Icon style={{ width: `${Math.max(14, 30 - index * 3)}px`, height: `${Math.max(14, 30 - index * 3)}px` }} />
      </div>
      {sealed ? <div className="absolute inset-0 rounded-full" style={{ background: `radial-gradient(circle, ${DANGER}22 0%, ${DANGER}0f 70%, transparent 100%)` }} /> : null}
    </motion.div>
  );
}

function DigitWheel({ w, primary, glow, reduceMotion }: { w: WheelState; primary: string; glow: string; reduceMotion: boolean }) {
  const column = Array.from({ length: 30 }, (_, i) => i % 10);
  const ring = w.kind === "fail" ? DANGER : w.kind === "locked" ? glow : `${primary}66`;
  return (
    <div className="relative overflow-hidden rounded-md" style={{ height: WHEEL_H, width: 42, background: "linear-gradient(180deg,#07060a 0%,#1b1720 50%,#07060a 100%)", boxShadow: `inset 0 0 0 1px ${ring}, inset 0 10px 12px -8px #000, inset 0 -10px 12px -8px #000` }}>
      {w.kind === "idle" ? <div className="grid h-full place-items-center text-lg text-fg-4">•</div> : null}
      {w.kind === "fail" ? (
        <motion.div initial={{ x: 0 }} animate={{ x: reduceMotion ? 0 : [0, -5, 5, -4, 4, 0] }} transition={{ duration: 0.5 }} className="grid h-full place-items-center text-2xl font-extrabold" style={{ color: DANGER, textShadow: `0 0 16px ${DANGER}` }}>
          ✕
        </motion.div>
      ) : null}
      {w.kind === "spin" ? (
        <motion.div key="spin" className="absolute inset-x-0 top-0" animate={{ y: [0, -10 * WHEEL_H] }} transition={{ duration: reduceMotion ? 1.2 : 0.42, ease: "linear", repeat: Infinity }} style={{ filter: reduceMotion ? undefined : "blur(0.6px)" }}>
          {column.map((d, i) => (
            <div key={i} className="grid place-items-center text-2xl font-extrabold tabular text-fg-3" style={{ height: WHEEL_H }}>
              {d}
            </div>
          ))}
        </motion.div>
      ) : null}
      {w.kind === "locked" ? (
        <motion.div key="locked" className="absolute inset-x-0 top-0" initial={{ y: -w.digit * WHEEL_H }} animate={{ y: -(10 + w.digit) * WHEEL_H }} transition={reduceMotion ? { duration: 0.01 } : { type: "spring", stiffness: 120, damping: 17, mass: 0.8 }}>
          {column.map((d, i) => (
            <div key={i} className="grid place-items-center text-2xl font-extrabold tabular" style={{ height: WHEEL_H, color: glow, textShadow: `0 0 14px ${glow}99` }}>
              {d}
            </div>
          ))}
        </motion.div>
      ) : null}
    </div>
  );
}

function LayerMap({ cfg, ladder, layersOpen, phase, digits, failed, palette }: { cfg: VaultConfig; ladder: number[]; layersOpen: number; phase: Phase; digits: number[]; failed: number[]; palette: ArcadeGameProps["definition"]["presentation"]["palette"] }) {
  const n = cfg.layers.length;
  return (
    <div className="relative mt-1">
      <div className="absolute left-[10%] right-[10%] top-[15px] h-px" style={{ background: `linear-gradient(90deg, ${palette.primary}66, ${palette.primary}22)` }} />
      <div className="absolute left-[10%] top-[15px] h-px" style={{ width: `${(Math.max(0, Math.min(n - 1, layersOpen)) / (n - 1)) * 80}%`, background: palette.glow, boxShadow: `0 0 8px ${palette.glow}`, transition: "width 900ms cubic-bezier(0.16,1,0.3,1)" }} />
      <ol className="relative grid" style={{ gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` }}>
        {cfg.layers.map((p, i) => {
          const open = i < layersOpen;
          const active = i === layersOpen && phase !== "idle";
          const sealed = active && phase === "busted";
          const Icon = LAYER_ICONS[i] ?? Lock;
          const code = open ? digits.slice(i * cfg.digitsPerLayer, (i + 1) * cfg.digitsPerLayer) : active && phase !== "busted" ? digits.slice(i * cfg.digitsPerLayer) : sealed ? failed : [];
          const colour = sealed ? DANGER : open ? palette.glow : active ? palette.primary : "rgba(255,255,255,0.28)";
          return (
            <li key={i} className="flex flex-col items-center text-center">
              <motion.div className="grid h-[30px] w-[30px] place-items-center rounded-full" animate={{ scale: active && phase !== "busted" ? [1, 1.08, 1] : 1 }} transition={{ duration: 1.6, repeat: active && phase !== "busted" ? Infinity : 0 }} style={{ background: open ? `radial-gradient(circle at 40% 35%, ${palette.glow}, ${palette.primary})` : "#0f0d12", border: `1.5px solid ${colour}`, color: open ? "#1a1406" : colour, boxShadow: open || active ? `0 0 14px -2px ${colour}` : undefined }}>
                <Icon className="h-3.5 w-3.5" />
              </motion.div>
              <div className="mt-1 text-[11px] font-bold tabular" style={{ color: open ? palette.glow : sealed ? DANGER : "var(--color-fg-3)" }}>
                {formatMultiplier(ladder[i])}
              </div>
              <div className="text-[9px] uppercase tracking-wider text-fg-4">{Math.round(p * 100)}%</div>
              <div className="h-[14px] font-mono text-[11px] tabular" style={{ color: sealed ? DANGER : palette.glow, letterSpacing: "0.15em" }}>
                {code.join("")}
                {sealed ? "✕" : ""}
              </div>
            </li>
          );
        })}
      </ol>
    </div>
  );
}