"use client";

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { AnimatePresence, motion } from "framer-motion";
import { ArrowLeft, Heart, History, Info, Minus, Plus, ShieldCheck, Volume2, VolumeX } from "lucide-react";
import { BET_LEVELS, classifyWin, formatMultiplier, formatSC, WIN_CLASSES, type GameInfo } from "@spinza/shared";
import { floorAt, multiplierAt, type CrashEvent, type CrashGameDefinition } from "@spinza/game-core/client";
import { api, ApiClientError } from "@/lib/api";
import { toast, useSession } from "@/lib/store";
import { cn } from "@/lib/utils";
import { Button, Credits, Sheet, Tabs } from "@/components/ui";
import { SpinzaMark } from "@/components/brand/logo";
import { getSound } from "@/components/game/sound";
import { SCENES, progressFor } from "./scenes";

interface RoundView {
  roundId: string;
  game: string;
  version: string;
  bet: number;
  status: "running" | "cashed" | "crashed";
  startedAt: string;
  serverNow: number;
  elapsedMs: number;
  commitment: string;
  events: CrashEvent[];
  autoCashout: number | null;
  crashMultiplier: number | null;
  seed: string | null;
  cashoutMultiplier: number | null;
  win: number | null;
}

interface Progression {
  xp: { gained: number; total: number; level: number; leveledUp: boolean; levelReward: number };
  unlocked: { achievements: string[]; missions: string[] };
}

type Phase = "idle" | "starting" | "running" | "cashed" | "crashed";

const wait = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));

export function CrashClient({ game, definition }: { game: GameInfo; definition: CrashGameDefinition }) {
  const router = useRouter();
  const { status, wallet, settings, setBalance, setUserXp } = useSession();
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const soundRef = useRef(getSound());
  const [bet, setBet] = useState(100);
  const [autoOn, setAutoOn] = useState(false);
  const [autoTarget, setAutoTarget] = useState("2.00");
  const [phase, setPhase] = useState<Phase>("idle");
  const [round, setRound] = useState<RoundView | null>(null);
  const [display, setDisplay] = useState(1);
  const [history, setHistory] = useState<{ crash: number; at: string }[]>([]);
  const [lastResult, setLastResult] = useState<{ status: "cashed" | "crashed"; multiplier: number; win: number; crash: number } | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [infoSheet, setInfoSheet] = useState(false);
  const [historySheet, setHistorySheet] = useState(false);
  const [fairSheet, setFairSheet] = useState(false);
  const [favorite, setFavorite] = useState(!!game.favorite);
  const [activeEvent, setActiveEvent] = useState<string | null>(null);
  const [milestone, setMilestone] = useState<string | null>(null);
  const offsetRef = useRef(0); // serverNow - clientNow
  const phaseRef = useRef<Phase>("idle");
  const phaseAtRef = useRef(0);
  const roundRef = useRef<RoundView | null>(null);
  const displayRef = useRef(1);
  const cashingRef = useRef(false);
  const shownMilestones = useRef(new Set<number>());
  const soundOn = settings?.soundEnabled ?? true;
  const palette = definition.presentation.palette;
  const bets = useMemo(() => (BET_LEVELS as readonly number[]).filter((b) => b >= definition.minBet && b <= definition.maxBet), [definition]);
  const balance = wallet?.balance ?? 0;

  const setPhaseBoth = useCallback((p: Phase) => {
    phaseRef.current = p;
    phaseAtRef.current = performance.now();
    setPhase(p);
  }, []);

  useEffect(() => {
    if (status === "guest") router.replace(`/login?next=/games/${game.slug}`);
  }, [status, router, game.slug]);

  const adoptRound = useCallback((r: RoundView) => {
    offsetRef.current = r.serverNow - Date.now();
    roundRef.current = r;
    setRound(r);
    shownMilestones.current.clear();
    setLastResult(null);
    setPhaseBoth("running");
  }, [setPhaseBoth]);

  const finish = useCallback((r: RoundView, bal: number | null, prog: Progression | null) => {
    if (phaseRef.current !== "running") return;
    roundRef.current = r;
    setRound(r);
    const cashed = r.status === "cashed";
    setPhaseBoth(cashed ? "cashed" : "crashed");
    const m = cashed ? (r.cashoutMultiplier ?? 0) : (r.crashMultiplier ?? 0);
    displayRef.current = m;
    setDisplay(m);
    setLastResult({ status: cashed ? "cashed" : "crashed", multiplier: m, win: r.win ?? 0, crash: r.crashMultiplier ?? 0 });
    if (bal !== null) setBalance(bal);
    if (cashed) {
      const cls = classifyWin(m);
      if (cls === "big" || cls === "mega" || cls === "epic" || cls === "legendary") soundRef.current.bigWin();
      else soundRef.current.win(2);
    } else soundRef.current.error();
    if (prog) {
      setUserXp(prog.xp.total, prog.xp.level);
      if (prog.xp.leveledUp) toast({ title: `Level ${prog.xp.level} reached`, description: `+${formatSC(prog.xp.levelReward)} level reward`, tone: "credit" });
      for (const a of prog.unlocked.achievements) toast({ title: "Achievement unlocked", description: a.replace(/-/g, " "), tone: "success" });
    }
    setHistory((h) => [{ crash: r.crashMultiplier ?? 0, at: new Date().toISOString() }, ...h].slice(0, 24));
    cashingRef.current = false;
  }, [setBalance, setUserXp, setPhaseBoth]);


  // Load history + resume a running round.
  useEffect(() => {
    if (status !== "authenticated") return;
    api<{ history: { crash: number; at: string }[] }>(`/api/crash/${game.slug}/history`).then((r) => setHistory(r.history)).catch(() => {});
    api(`/api/games/${game.slug}/launch`, { method: "POST" }).catch(() => {});
    api<{ round: RoundView | null }>(`/api/crash/${game.slug}/current`)
      .then((r) => {
        if (r.round && r.round.status === "running") adoptRound(r.round);
      })
      .catch(() => {});
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [status, game.slug]);

  useEffect(() => {
    const s = soundRef.current;
    s.setLevels({ enabled: soundOn, master: settings?.masterVolume ?? 0.8, music: settings?.musicVolume ?? 0.6, effects: settings?.effectsVolume ?? 0.8 });
    s.setAmbience(definition.presentation.ambience);
    return () => s.destroy();
  }, [soundOn, settings?.masterVolume, settings?.musicVolume, settings?.effectsVolume, definition.presentation.ambience]);


  /* ------------------------------------------------------- animation loop */
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;
    let raf = 0;
    let lastTick = 0;
    const start = performance.now();
    const loop = () => {
      const dpr = Math.min(2, window.devicePixelRatio || 1);
      const rect = canvas.getBoundingClientRect();
      if (canvas.width !== Math.round(rect.width * dpr) || canvas.height !== Math.round(rect.height * dpr)) {
        canvas.width = Math.round(rect.width * dpr);
        canvas.height = Math.round(rect.height * dpr);
      }
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      const r = roundRef.current;
      const ph = phaseRef.current;
      let m = displayRef.current;
      let t = (performance.now() - start) / 1000;
      let event: string | null = null;
      if (r && ph === "running") {
        const elapsed = Date.now() + offsetRef.current - new Date(r.startedAt).getTime();
        m = multiplierAt(definition, r.events, elapsed);
        t = elapsed / 1000;
        const ev = r.events.find((e) => elapsed >= e.startMs && elapsed < e.endMs);
        event = ev?.label ?? null;
        if (m !== displayRef.current) {
          displayRef.current = m;
          setDisplay(m);
          if (performance.now() - lastTick > 90) {
            lastTick = performance.now();
            soundRef.current.tick();
          }
        }
        for (const ms of definition.milestones) {
          if (m >= ms.multiplier && !shownMilestones.current.has(ms.multiplier)) {
            shownMilestones.current.add(ms.multiplier);
            setMilestone(ms.label);
            setTimeout(() => setMilestone(null), 1800);
          }
        }
      } else if (r && (ph === "cashed" || ph === "crashed")) {
        m = ph === "cashed" ? (r.cashoutMultiplier ?? displayRef.current) : (r.crashMultiplier ?? displayRef.current);
        t = r.status !== "running" ? (r.elapsedMs ?? 0) / 1000 : t;
      }
      setActiveEvent((prev) => (prev === event ? prev : event));
      const painter = SCENES[definition.presentation.scene];
      ctx.save();
      painter({
        ctx,
        w: rect.width,
        h: rect.height,
        p: progressFor(m),
        t,
        multiplier: m,
        phase: ph === "starting" || ph === "idle" ? "idle" : ph,
        phaseT: (performance.now() - phaseAtRef.current) / 1000,
        palette,
        event,
        floor: floorAt(definition, m),
        reduceMotion: settings?.reduceMotion ?? false,
      });
      ctx.restore();
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, [definition, palette, settings?.reduceMotion]);

  /* --------------------------------------------------------------- polling */
  const roundId = round?.roundId;
  useEffect(() => {
    if (phase !== "running" || !roundId) return;
    let alive = true;
    const poll = async () => {
      while (alive && phaseRef.current === "running") {
        try {
          const r = await api<{ round: RoundView; balance: number | null; progression: Progression | null }>(`/api/crash/${game.slug}/rounds/${roundId}`);
          offsetRef.current = r.round.serverNow - Date.now();
          if (r.round.status !== "running") {
            finish(r.round, r.balance, r.progression);
            break;
          }
        } catch {
          /* keep polling */
        }
        await wait(350);
      }
    };
    void poll();
    return () => {
      alive = false;
    };
  }, [phase, roundId, finish, game.slug]);

  /* ---------------------------------------------------------------- actions */
  const start = useCallback(async () => {
    if (phaseRef.current === "running" || phaseRef.current === "starting") return;
    if (balance < bet) {
      setError("Not enough Spinza Credits for this bet.");
      soundRef.current.error();
      return;
    }
    setError(null);
    soundRef.current.unlock();
    soundRef.current.spinStart();
    setPhaseBoth("starting");
    setLastResult(null);
    displayRef.current = 1;
    setDisplay(1);
    const auto = autoOn ? Number(autoTarget) : null;
    try {
      const r = await api<{ round: RoundView; balance: number | null }>(`/api/crash/${game.slug}/start`, { json: { bet, clientRoundId: crypto.randomUUID(), autoCashout: auto && auto >= 1.01 ? Math.round(auto * 100) / 100 : undefined } });
      if (r.balance !== null) setBalance(r.balance);
      adoptRound(r.round);
    } catch (e) {
      setPhaseBoth("idle");
      if (e instanceof ApiClientError) {
        if (e.status === 401) router.replace(`/login?next=/games/${game.slug}`);
        else if (e.code === "ROUND_IN_PROGRESS") api<{ round: RoundView | null }>(`/api/crash/${game.slug}/current`).then((c) => c.round && adoptRound(c.round)).catch(() => {});
        else setError(e.message);
      } else setError("Connection lost. Try again.");
      soundRef.current.error();
    }
  }, [balance, bet, autoOn, autoTarget, game.slug, router, setBalance, adoptRound, setPhaseBoth]);

  const cashout = useCallback(async () => {
    const r = roundRef.current;
    if (!r || phaseRef.current !== "running" || cashingRef.current) return;
    cashingRef.current = true;
    soundRef.current.click();
    try {
      const res = await api<{ round: RoundView; balance: number; progression: Progression | null }>(`/api/crash/${game.slug}/cashout`, { json: { roundId: r.roundId, claimedMultiplier: displayRef.current } });
      finish(res.round, res.balance, res.progression);
    } catch {
      cashingRef.current = false;
    }
  }, [game.slug, finish]);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.code === "Space" && !e.repeat && !infoSheet && !historySheet && !fairSheet) {
        e.preventDefault();
        if (phaseRef.current === "running") void cashout();
        else void start();
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [start, cashout, infoSheet, historySheet, fairSheet]);

  const toggleFavorite = async () => {
    setFavorite((f) => !f);
    try {
      const r = await api<{ favorite: boolean }>(`/api/games/${game.slug}/favorite`, { method: "POST" });
      setFavorite(r.favorite);
    } catch {
      setFavorite((f) => !f);
    }
  };

  if (status === "guest") return null;
  const running = phase === "running";
  const betIndex = bets.indexOf(bet);
  const unitValue = definition.curve.type === "steps" ? floorAt(definition, display) : Math.round((display - 1) * definition.presentation.unitScale);
  const potential = Math.round(bet * display);
  const cls = lastResult?.status === "cashed" ? classifyWin(lastResult.multiplier) : "none";
  const winLabel = WIN_CLASSES.find((c) => c.id === cls)?.label;

  return (
    <div className="fixed inset-0 flex flex-col" style={{ background: palette.bg }}>
      {/* Top bar */}
      <div className="flex items-center justify-between gap-2 px-3 py-2" style={{ paddingTop: "calc(var(--safe-top) + 8px)" }}>
        <div className="flex items-center gap-2">
          <Link href="/" className="tap grid place-items-center rounded-md text-fg-2 hover:bg-white/10 focus-ring" aria-label="Back to lobby">
            <ArrowLeft className="h-5 w-5" />
          </Link>
          <div className="leading-tight">
            <div className="text-[15px] font-semibold tracking-tight">{game.name}</div>
            <div className="text-[11px] text-fg-3">Risk game · cash out anytime</div>
          </div>
        </div>
        <div className="flex items-center gap-1">
          <button onClick={toggleFavorite} className="tap grid place-items-center rounded-md text-fg-2 hover:bg-white/10 focus-ring" aria-label="Favourite">
            <Heart className={cn("h-5 w-5", favorite && "fill-danger text-danger")} />
          </button>
          <button onClick={() => setHistorySheet(true)} className="tap grid place-items-center rounded-md text-fg-2 hover:bg-white/10 focus-ring" aria-label="History">
            <History className="h-5 w-5" />
          </button>
          <button onClick={() => setFairSheet(true)} className="tap grid place-items-center rounded-md text-fg-2 hover:bg-white/10 focus-ring" aria-label="Provably fair">
            <ShieldCheck className="h-5 w-5" />
          </button>
          <button onClick={() => setInfoSheet(true)} className="tap grid place-items-center rounded-md text-fg-2 hover:bg-white/10 focus-ring" aria-label="Game info">
            <Info className="h-5 w-5" />
          </button>
          <button onClick={() => useSession.getState().setSettings({ soundEnabled: !soundOn })} className="tap grid place-items-center rounded-md text-fg-2 hover:bg-white/10 focus-ring" aria-label="Sound">
            {soundOn ? <Volume2 className="h-5 w-5" /> : <VolumeX className="h-5 w-5" />}
          </button>
        </div>
      </div>

      {/* History strip */}
      <div className="flex gap-1.5 overflow-x-auto px-3 pb-2 scrollbar-none">
        {history.length === 0 ? <span className="text-[11px] text-fg-4">No rounds yet — be the first.</span> : null}
        {history.map((h, i) => (
          <span key={i} className={cn("shrink-0 rounded-full px-2 py-0.5 text-[11px] font-bold tabular", h.crash < 1.5 ? "bg-danger/15 text-danger" : h.crash < 3 ? "bg-white/10 text-fg-2" : h.crash < 10 ? "bg-success/15 text-success" : "bg-accent-soft text-accent-2")}>
            {formatMultiplier(h.crash)}
          </span>
        ))}
      </div>

      {/* Scene */}
      <div className="relative flex-1 min-h-0">
        <canvas ref={canvasRef} className="absolute inset-0 h-full w-full" />
        {/* Multiplier */}
        <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-start pt-[9%]">
          <AnimatePresence mode="wait">
            {phase === "idle" || phase === "starting" ? (
              <motion.div key="idle" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="text-center">
                {lastResult ? (
                  <div className={cn("mb-3 rounded-full px-4 py-1.5 text-sm font-semibold", lastResult.status === "cashed" ? "bg-success/15 text-success" : "bg-danger/15 text-danger")}>
                    {lastResult.status === "cashed" ? `Cashed out at ${formatMultiplier(lastResult.multiplier)} · +${formatSC(lastResult.win)}` : `Crashed at ${formatMultiplier(lastResult.crash)}`}
                  </div>
                ) : null}
                <div className="text-[clamp(56px,14vw,120px)] font-extrabold leading-none tabular tracking-tight text-white/90" style={{ textShadow: `0 0 40px ${palette.glow}66` }}>
                  {phase === "starting" ? "…" : "1.00×"}
                </div>
                <div className="mt-2 text-sm text-fg-2">{phase === "starting" ? "Starting round" : `Press ${definition.presentation.verb} before it ends`}</div>
              </motion.div>
            ) : (
              <motion.div key="live" initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} className="text-center">
                <div
                  className={cn("text-[clamp(64px,16vw,140px)] font-extrabold leading-none tabular tracking-tight", phase === "crashed" ? "text-danger" : phase === "cashed" ? "text-credit" : "text-white")}
                  style={{ textShadow: phase === "running" ? `0 0 ${20 + progressFor(display) * 60}px ${palette.glow}` : undefined }}
                >
                  {formatMultiplier(display)}
                </div>
                <div className="mt-2 text-sm text-fg-2 tabular">
                  {definition.curve.type === "steps" ? `Floor ${unitValue}` : `${Math.abs(unitValue).toLocaleString("en-US")} ${definition.presentation.unit}`} · {running ? `${formatSC(potential)} on the line` : ""}
                </div>
                {phase === "cashed" && lastResult ? (
                  <motion.div initial={{ y: 10, opacity: 0 }} animate={{ y: 0, opacity: 1 }} className="mt-4">
                    {winLabel ? <div className="text-2xl font-extrabold uppercase tracking-tight shimmer-text">{winLabel}</div> : null}
                    <div className="text-xl font-bold text-credit tabular">+{formatSC(lastResult.win)}</div>
                    <div className="text-[12px] text-fg-3">The round would have ended at {formatMultiplier(lastResult.crash)}</div>
                  </motion.div>
                ) : null}
                {phase === "crashed" ? (
                  <motion.div initial={{ scale: 0.6 }} animate={{ scale: 1 }} className="mt-4 text-2xl font-extrabold uppercase tracking-tight text-danger">
                    {crashWord(definition.presentation.scene)}
                  </motion.div>
                ) : null}
              </motion.div>
            )}
          </AnimatePresence>
          <AnimatePresence>
            {activeEvent && running ? (
              <motion.div key={activeEvent} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} className="absolute top-4 rounded-full px-3 py-1 text-[12px] font-bold uppercase tracking-wider" style={{ background: `${palette.secondary}33`, color: palette.secondary }}>
                {activeEvent}
              </motion.div>
            ) : null}
            {milestone ? (
              <motion.div key={milestone} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} className="absolute bottom-6 rounded-full bg-black/50 px-3 py-1 text-[12px] font-semibold text-fg-2">
                {milestone}
              </motion.div>
            ) : null}
          </AnimatePresence>
        </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 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={() => setError(null)}>
                  Dismiss
                </Button>
                <Button size="sm" variant="accent" href="/rewards">
                  Get rewards
                </Button>
              </div>
            </motion.div>
          ) : null}
        </AnimatePresence>
      </div>

      {/* Controls */}
      <div className="glass border-x-0 border-b-0 px-3 pt-3" style={{ paddingBottom: "calc(var(--safe-bottom) + 12px)", borderTop: `1px solid ${palette.primary}55` }}>
        <div className="mx-auto grid max-w-3xl grid-cols-[1fr_auto_1fr] items-center gap-3">
          <div className="flex flex-col gap-2">
            <div>
              <div className="eyebrow">Balance</div>
              <Credits amount={balance} size="md" />
            </div>
            <div className="flex items-center gap-1">
              <button disabled={running || betIndex <= 0} onClick={() => setBet(bets[betIndex - 1])} className="tap grid h-10 w-10 place-items-center rounded-md surface-2 disabled:opacity-40 focus-ring" aria-label="Decrease bet">
                <Minus className="h-4 w-4" />
              </button>
              <div className="flex h-10 min-w-[92px] flex-col items-center justify-center rounded-md surface-2 px-2">
                <span className="text-[10px] uppercase tracking-wider text-fg-3">Bet</span>
                <span className="text-sm font-bold tabular text-fg">{formatSC(bet)}</span>
              </div>
              <button disabled={running || betIndex >= bets.length - 1} onClick={() => setBet(bets[betIndex + 1])} className="tap grid h-10 w-10 place-items-center rounded-md surface-2 disabled:opacity-40 focus-ring" aria-label="Increase bet">
                <Plus className="h-4 w-4" />
              </button>
            </div>
          </div>

          <div className="flex flex-col items-center gap-2">
            {running ? (
              <button
                onClick={() => void cashout()}
                className="relative grid h-[92px] w-[92px] place-items-center rounded-full text-center text-[13px] font-extrabold leading-tight tracking-wide text-[#1a1406] transition-transform active:scale-95 focus-ring"
                style={{ background: `linear-gradient(180deg, #f3e2ad, #c9a961 60%, #9a7b3a)`, boxShadow: `0 0 0 6px rgba(201,169,97,0.25), 0 0 60px -10px rgba(201,169,97,0.9)` }}
                aria-label={definition.presentation.verb}
              >
                <span className="px-2">{definition.presentation.verb}</span>
              </button>
            ) : (
              <button
                onClick={() => void start()}
                disabled={phase === "starting"}
                className="relative grid h-[92px] w-[92px] place-items-center rounded-full text-center text-[15px] font-extrabold tracking-wide transition-transform active:scale-95 focus-ring disabled:opacity-70"
                style={{ background: `linear-gradient(180deg, ${palette.primary}, ${palette.secondary})`, boxShadow: `0 0 0 6px ${palette.primary}2e, 0 12px 50px -12px ${palette.primary}`, color: "#0b0a06" }}
                aria-label="Start round"
              >
                {phase === "cashed" || phase === "crashed" ? "AGAIN" : "START"}
              </button>
            )}
            <span className="text-[11px] font-semibold uppercase tracking-wider text-fg-3">{running ? `${formatSC(potential)}` : "space = start / cash out"}</span>
          </div>

          <div className="flex flex-col items-end gap-2 text-right">
            <div>
              <div className="eyebrow">Auto cash-out</div>
              <div className="flex items-center gap-1.5">
                <button role="switch" aria-checked={autoOn} disabled={running} onClick={() => setAutoOn((v) => !v)} className={cn("relative h-6 w-10 rounded-full border transition-colors", autoOn ? "bg-accent border-accent" : "bg-surface-3 border-line-2")}>
                  <span className={cn("absolute top-0.5 h-[18px] w-[18px] rounded-full bg-white transition-transform", autoOn ? "translate-x-[18px]" : "translate-x-0.5")} />
                </button>
                <input
                  type="number"
                  step="0.1"
                  min="1.01"
                  max={definition.maxMultiplier}
                  value={autoTarget}
                  disabled={running || !autoOn}
                  onChange={(e) => setAutoTarget(e.target.value)}
                  onBlur={() => setAutoTarget(String(Math.max(1.01, Math.min(definition.maxMultiplier, Number(autoTarget) || 2)).toFixed(2)))}
                  className="h-9 w-[76px] rounded-md border border-line-2 bg-bg-1 px-2 text-right text-sm font-bold tabular text-fg disabled:opacity-50 focus-ring"
                  aria-label="Auto cash-out multiplier"
                />
                <span className="text-sm text-fg-3">×</span>
              </div>
            </div>
            <div className="text-[11px] text-fg-4">Max {formatMultiplier(definition.maxMultiplier)}</div>
          </div>
        </div>
      </div>

      <InfoSheet open={infoSheet} onClose={() => setInfoSheet(false)} game={game} definition={definition} />
      <FairSheet open={fairSheet} onClose={() => setFairSheet(false)} round={round} />
      <Sheet open={historySheet} onClose={() => setHistorySheet(false)} title="Recent rounds" side="right">
        {history.length === 0 ? <p className="text-sm text-fg-3">No rounds yet.</p> : (
          <ul className="grid grid-cols-4 gap-2">
            {history.map((h, i) => (
              <li key={i} className={cn("rounded-md px-2 py-2 text-center text-sm font-bold tabular", h.crash < 1.5 ? "bg-danger/15 text-danger" : h.crash < 3 ? "bg-white/10 text-fg-2" : h.crash < 10 ? "bg-success/15 text-success" : "bg-accent-soft text-accent-2")}>
                {formatMultiplier(h.crash)}
              </li>
            ))}
          </ul>
        )}
      </Sheet>
      <span className="sr-only">
        <SpinzaMark />
      </span>
    </div>
  );
}

function crashWord(scene: string): string {
  return (
    {
      sky: "Vanished",
      ocean: "Hull breach",
      rocket: "Engine failure",
      bank: "Busted",
      volcano: "Eruption",
      blackhole: "Pulled in",
      freefall: "Too late",
      reactor: "Meltdown",
      storm: "Swallowed",
      elevator: "Cable snapped",
    }[scene] ?? "Crashed"
  );
}

function InfoSheet({ open, onClose, game, definition }: { open: boolean; onClose: () => void; game: GameInfo; definition: CrashGameDefinition }) {
  const [tab, setTab] = useState<"rules" | "about">("rules");
  return (
    <Sheet open={open} onClose={onClose} title={game.name} side="right">
      <Tabs value={tab} onChange={setTab} items={[{ value: "rules", label: "How to play" }, { value: "about", label: "About" }]} className="mb-4" />
      {tab === "rules" ? (
        <ul className="space-y-3 text-sm text-fg-2">
          {game.rules.map((r, i) => (
            <li key={i} className="flex gap-3">
              <span className="mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-full bg-surface-2 text-[11px] font-bold text-fg-3">{i + 1}</span>
              <span>{r}</span>
            </li>
          ))}
        </ul>
      ) : (
        <div className="space-y-4 text-sm text-fg-2">
          <p>{game.description}</p>
          <dl className="grid grid-cols-2 gap-3">
            {[
              ["Volatility", game.volatility],
              ["RTP", `${(game.rtp * 100).toFixed(2)}% for any strategy`],
              ["Max multiplier", formatMultiplier(definition.maxMultiplier)],
              ["Instant end", `${((1 - game.rtp) * 100).toFixed(0)}% of rounds`],
              ["Reach 2× odds", `${((game.rtp / 2) * 100).toFixed(0)}%`],
              ["Reach 10× odds", `${((game.rtp / 10) * 100).toFixed(1)}%`],
            ].map(([k, v]) => (
              <div key={k} className="surface rounded-md p-3">
                <dt className="eyebrow">{k}</dt>
                <dd className="mt-1 text-sm font-semibold capitalize text-fg">{v}</dd>
              </div>
            ))}
          </dl>
          <p className="text-[12px] text-fg-3">P(end ≥ x) = {game.rtp} / x. Milestones, boosts and cooling windows change the pace, never the odds. Spinza Credits are fictional and have no cash value.</p>
        </div>
      )}
    </Sheet>
  );
}

function FairSheet({ open, onClose, round }: { open: boolean; onClose: () => void; round: RoundView | null }) {
  return (
    <Sheet open={open} onClose={onClose} title="Provably fair" side="right">
      <div className="space-y-4 text-sm text-fg-2">
        <p>Before each round starts, the server draws the end multiplier and publishes a SHA-256 commitment of <code className="font-mono text-[12px]">seed:multiplier</code>. When the round ends, the seed is revealed so you can verify the commitment yourself.</p>
        {round ? (
          <div className="space-y-2 surface rounded-md p-3 text-[12px]">
            <div><span className="text-fg-3">Round</span> <span className="font-mono">{round.roundId}</span></div>
            <div><span className="text-fg-3">Commitment</span> <span className="break-all font-mono">{round.commitment}</span></div>
            <div><span className="text-fg-3">Seed</span> <span className="break-all font-mono">{round.seed ?? "revealed when the round ends"}</span></div>
            <div><span className="text-fg-3">End multiplier</span> <span className="font-mono">{round.crashMultiplier ? round.crashMultiplier.toFixed(2) : "hidden while running"}</span></div>
          </div>
        ) : (
          <p className="text-fg-3">Start a round to see its commitment.</p>
        )}
        <p className="text-[12px] text-fg-3">Verify: sha256(&quot;seed:multiplier&quot;) with the multiplier formatted to two decimals must equal the commitment.</p>
      </div>
    </Sheet>
  );
}