"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, ChevronDown, ChevronUp, Heart, History, Info, Minus, Plus, Settings2, Volume2, VolumeX, Zap } from "lucide-react";
import { AUTO_SPIN_OPTIONS, BET_LEVELS, classifyWin, formatMultiplier, formatSC, WIN_CLASSES, type GameInfo, type SpinResponse } from "@spinza/shared";
import type { SpinStep } 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 type { ClientDefinition, ClientOutcome } from "./types";
import { SlotRenderer } from "./renderer";
import { getSound } from "./sound";

interface Props {
  game: GameInfo;
  definition: ClientDefinition;
}

type Overlay =
  | { kind: "banner"; title: string; subtitle?: string }
  | { kind: "freespins"; title: string; spins: number }
  | { kind: "bonus"; name: string; picks: { cell: number; value: number; amount: number }[]; cells: number; total: number }
  | { kind: "jackpot"; tier: string; amount: number }
  | { kind: "win"; cls: string; amount: number; multiplier: number }
  | null;

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

export function GameClient({ game, definition }: Props) {
  const router = useRouter();
  const { status, wallet, settings, setBalance, setUserXp, user } = useSession();
  const canvasRef = useRef<HTMLDivElement>(null);
  const rendererRef = useRef<SlotRenderer | null>(null);
  const soundRef = useRef(getSound());
  const [ready, setReady] = useState(false);
  const [progress, setProgress] = useState(0);
  const [bet, setBet] = useState<number>(() => Math.max(definition.minBet, Math.min(100, definition.maxBet)));
  const [spinning, setSpinning] = useState(false);
  const [lastWin, setLastWin] = useState(0);
  const [displayWin, setDisplayWin] = useState(0);
  const [overlay, setOverlay] = useState<Overlay>(null);
  const [featureLabel, setFeatureLabel] = useState<string | null>(null);
  const [fsInfo, setFsInfo] = useState<{ left: number; total: number } | null>(null);
  const [multiplier, setMultiplier] = useState<number>(1);
  const [state, setState] = useState<ClientOutcome["stateAfter"] | null>(null);
  const [auto, setAuto] = useState<number>(0);
  const autoRef = useRef(0);
  const [autoSheet, setAutoSheet] = useState(false);
  const [betSheet, setBetSheet] = useState(false);
  const [infoSheet, setInfoSheet] = useState(false);
  const [settingsSheet, setSettingsSheet] = useState(false);
  const [historySheet, setHistorySheet] = useState(false);
  const [favorite, setFavorite] = useState(!!game.favorite);
  const [quick, setQuick] = useState(false);
  const [error, setError] = useState<{ code: string; message: string } | null>(null);
  const stopRequested = useRef(false);
  const soundOn = settings?.soundEnabled ?? true;

  const bets = useMemo(() => (BET_LEVELS as readonly number[]).filter((b) => b >= definition.minBet && b <= definition.maxBet), [definition]);
  const balance = wallet?.balance ?? 0;

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

  useEffect(() => {
    if (!canvasRef.current || status !== "authenticated") return;
    const renderer = new SlotRenderer({
      def: definition,
      reduceMotion: settings?.reduceMotion ?? false,
      intensity: settings?.animationIntensity ?? "high",
      quick,
      onReelStop: (i) => soundRef.current.reelStop(i),
      onCascade: () => soundRef.current.cascade(),
      onCoin: () => soundRef.current.coin(),
    });
    rendererRef.current = renderer;
    let cancelled = false;
    (async () => {
      setProgress(15);
      try {
        await renderer.mount(canvasRef.current!);
      } catch (e) {
        console.error("renderer mount failed", e);
        if (!cancelled) setError({ code: "GAME_UNAVAILABLE", message: "Your browser could not start the game renderer (WebGL required)." });
        return;
      }
      setProgress(60);
      try {
        const launch = await api<{ state: ClientOutcome["stateAfter"] | null }>(`/api/games/${game.slug}/launch`, { method: "POST" });
        if (launch.state) setState(launch.state);
      } catch {
        /* non-blocking */
      }
      setProgress(100);
      await wait(250);
      if (!cancelled) setReady(true);
    })();
    return () => {
      cancelled = true;
      renderer.destroy();
      rendererRef.current = null;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [status, game.slug]);

  useEffect(() => {
    rendererRef.current?.setOptions({ reduceMotion: settings?.reduceMotion ?? false, intensity: settings?.animationIntensity ?? "high", quick });
  }, [settings?.reduceMotion, settings?.animationIntensity, quick]);

  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);
  }, [soundOn, settings?.masterVolume, settings?.musicVolume, settings?.effectsVolume, definition.presentation.ambience]);

  useEffect(() => () => soundRef.current.destroy(), []);

  // Win counter animation.
  useEffect(() => {
    if (displayWin === lastWin) return;
    const from = displayWin;
    const to = lastWin;
    const start = performance.now();
    const dur = to > from ? Math.min(1400, 300 + Math.log10(Math.max(1, to - from)) * 250) : 0;
    let raf = 0;
    const step = () => {
      const t = dur ? Math.min(1, (performance.now() - start) / dur) : 1;
      setDisplayWin(Math.round(from + (to - from) * (1 - Math.pow(1 - t, 3))));
      if (t < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [lastWin]);

  /* -------------------------------------------------------------- spin */
  const playOutcome = useCallback(
    async (res: SpinResponse) => {
      const renderer = rendererRef.current;
      if (!renderer) return;
      const outcome = res.result as ClientOutcome;
      const sound = soundRef.current;
      let running = 0;
      let first = true;
      let inFreeSpins = false;
      for (let i = 0; i < outcome.steps.length; i++) {
        const step: SpinStep = outcome.steps[i];
        const meta = step.meta;
        if (step.type === "freespin" && meta.label) {
          inFreeSpins = true;
          sound.bonus();
          setOverlay({ kind: "freespins", title: meta.label, spins: meta.freeSpinsTotal ?? 0 });
          await wait(quick ? 900 : 1700);
          setOverlay(null);
          setFeatureLabel(meta.label);
        }
        if (step.type === "freespin") setFsInfo({ left: meta.freeSpinsLeft ?? 0, total: meta.freeSpinsTotal ?? 0 });
        if (step.type === "bonus" && meta.picks) {
          sound.bonus();
          const cfg = definition.pickBonuses.find((b) => b.name === meta.bonusName);
          setOverlay({ kind: "bonus", name: meta.bonusName ?? "Bonus", picks: meta.picks, cells: cfg?.cells ?? 12, total: step.win });
          await wait((quick ? 700 : 1100) * (meta.picks.length + 1));
          setOverlay(null);
        }
        if (step.type === "jackpot" && meta.jackpot) {
          sound.jackpot();
          setOverlay({ kind: "jackpot", tier: meta.jackpot.tier, amount: meta.jackpot.amount });
          renderer.celebrate(4);
          await wait(quick ? 1500 : 2600);
          setOverlay(null);
        }
        if (step.type === "feature" && meta.label) {
          setOverlay({ kind: "banner", title: meta.label, subtitle: `Multiplier ×${step.multiplier}` });
          await wait(quick ? 700 : 1300);
          setOverlay(null);
        }
        if (step.type === "respin" && meta.label === "Lock & Respin") {
          sound.bonus();
          setOverlay({ kind: "banner", title: "Lock & Respin", subtitle: "Collect every coin" });
          await wait(quick ? 700 : 1200);
          setOverlay(null);
          setFeatureLabel("Lock & Respin");
        }
        if (meta.randomFeature) {
          setOverlay({ kind: "banner", title: meta.randomFeature });
          await wait(quick ? 500 : 900);
          setOverlay(null);
        }
        if (meta.freeSpinsAwarded && step.type !== "base" && inFreeSpins && i > 0) {
          setOverlay({ kind: "banner", title: "Retrigger", subtitle: `+${meta.freeSpinsAwarded} free spins` });
          await wait(quick ? 500 : 900);
          setOverlay(null);
        }
        setMultiplier(step.multiplier);
        await renderer.playStep(step, { first, showWins: true });
        first = false;
        if (step.win > 0) {
          running += step.win;
          setLastWin(Math.min(running, outcome.totalWin));
          const cls = classifyWin(step.win / res.bet);
          sound.win(cls === "none" || cls === "regular" ? 0 : cls === "win" ? 1 : cls === "big" ? 2 : 3);
        }
        if (step.type === "respin" && i === outcome.steps.length - 1 && step.win > 0) {
          running = outcome.totalWin;
          setLastWin(outcome.totalWin);
        }
        if (meta.freeSpinsAwarded && step.type === "base") {
          sound.bonus();
        }
      }
      setFsInfo(null);
      setFeatureLabel(null);
      setMultiplier(1);
      setLastWin(outcome.totalWin);
      setState(outcome.stateAfter);
      // Win presentation.
      const cls = res.winClass;
      if (cls === "big" || cls === "mega" || cls === "epic" || cls === "legendary") {
        sound.bigWin();
        const intensity = { big: 1, mega: 2, epic: 3, legendary: 5 }[cls];
        renderer.celebrate(intensity);
        setOverlay({ kind: "win", cls, amount: outcome.totalWin, multiplier: res.multiplier });
        await wait(quick ? 1400 : 2200 + intensity * 400);
        setOverlay(null);
      }
      setBalance(res.balance);
      setUserXp(res.xp.total, res.xp.level);
      if (res.xp.leveledUp) toast({ title: `Level ${res.xp.level} reached`, description: `+${formatSC(res.xp.levelReward)} level reward`, tone: "credit" });
      for (const a of res.unlocked.achievements) toast({ title: "Achievement unlocked", description: a.replace(/-/g, " "), tone: "success" });
      for (const m of res.unlocked.missions) toast({ title: "Mission complete", description: m.replace(/-/g, " "), tone: "success" });
      return { bonus: outcome.freeSpinsTriggered || outcome.bonusTriggered };
    },
    [definition.pickBonuses, quick, setBalance, setUserXp],
  );

  const spin = useCallback(async (): Promise<{ ok: boolean; bonus?: boolean }> => {
    if (spinning || !ready) return { ok: false };
    const renderer = rendererRef.current;
    if (!renderer) return { ok: false };
    if (balance < bet) {
      setError({ code: "INSUFFICIENT_CREDITS", message: "Not enough Spinza Credits for this bet." });
      soundRef.current.error();
      return { ok: false };
    }
    setError(null);
    setSpinning(true);
    setLastWin(0);
    setDisplayWin(0);
    soundRef.current.unlock();
    soundRef.current.spinStart();
    setBalance(balance - bet); // optimistic; corrected by the server response
    renderer.startSpin();
    const clientRoundId = crypto.randomUUID();
    const started = performance.now();
    try {
      const res = await api<SpinResponse>(`/api/games/${game.slug}/spin`, { json: { bet, clientRoundId } });
      const elapsed = performance.now() - started;
      if (elapsed < 350) await wait(350 - elapsed);
      const r = await playOutcome(res);
      setSpinning(false);
      return { ok: true, bonus: r?.bonus };
    } catch (e) {
      setSpinning(false);
      renderer.clearFx();
      renderer.setGrid(renderer["currentGrid"] as string[][]);
      setBalance(balance);
      if (e instanceof ApiClientError) {
        if (e.status === 401) {
          router.replace(`/login?next=/games/${game.slug}`);
          return { ok: false };
        }
        setError({ code: e.code, message: e.message });
        if (e.code === "INSUFFICIENT_CREDITS" && e.details && typeof e.details === "object" && "balance" in e.details) setBalance((e.details as { balance: number }).balance);
      } else setError({ code: "UNKNOWN", message: "Something went wrong. Please try again." });
      soundRef.current.error();
      return { ok: false };
    }
  }, [spinning, ready, balance, bet, game.slug, playOutcome, setBalance, router]);

  // Auto-spin loop.
  const startAuto = useCallback(
    async (count: number) => {
      autoRef.current = count;
      setAuto(count);
      stopRequested.current = false;
      while (autoRef.current > 0 && !stopRequested.current) {
        const r = await spin();
        if (!r.ok) break;
        autoRef.current -= 1;
        setAuto(autoRef.current);
        if (r.bonus) break; // stop on bonus
        if ((useSession.getState().wallet?.balance ?? 0) < bet) break;
        await wait(quick ? 250 : 450);
      }
      autoRef.current = 0;
      setAuto(0);
    },
    [spin, bet, quick],
  );

  const stopAuto = () => {
    stopRequested.current = true;
    autoRef.current = 0;
    setAuto(0);
  };

  // Keyboard: space to spin.
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.code === "Space" && !e.repeat && !overlay && !betSheet && !infoSheet && !settingsSheet) {
        e.preventDefault();
        if (auto) stopAuto();
        else void spin();
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [spin, auto, overlay, betSheet, infoSheet, settingsSheet]);

  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);
    }
  };

  const betIndex = bets.indexOf(bet);
  const palette = definition.presentation.palette;
  const frameStyle = FRAME_HUD[definition.presentation.frame] ?? FRAME_HUD.metal;
  const meter = definition.meter && state ? { value: state.meters[definition.meter.id] ?? 0, max: definition.meter.max } : null;
  const heat = definition.heat && state ? { value: state.heat, max: definition.heat.max } : null;
  const meterLevel = definition.meter && state ? state.meterLevels[definition.meter.id] ?? 0 : 0;

  if (status === "guest") return null;

  return (
    <div className="fixed inset-0 flex flex-col bg-bg" style={{ background: `radial-gradient(120% 80% at 50% 0%, ${palette.surface} 0%, ${palette.bg} 60%, #050608 100%)` }}>
      {/* 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-surface-2 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">
              {game.grid.reels}×{game.grid.rows} · {game.features[0]}
            </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-surface-2 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-surface-2 focus-ring" aria-label="History">
            <History className="h-5 w-5" />
          </button>
          <button onClick={() => setInfoSheet(true)} className="tap grid place-items-center rounded-md text-fg-2 hover:bg-surface-2 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-surface-2 focus-ring" aria-label="Sound">
            {soundOn ? <Volume2 className="h-5 w-5" /> : <VolumeX className="h-5 w-5" />}
          </button>
          <button onClick={() => setSettingsSheet(true)} className="tap grid place-items-center rounded-md text-fg-2 hover:bg-surface-2 focus-ring" aria-label="Settings">
            <Settings2 className="h-5 w-5" />
          </button>
        </div>
      </div>

      {/* Feature HUD */}
      <div className="flex min-h-7 items-center justify-center gap-2 px-3 text-[12px]">
        <AnimatePresence>
          {featureLabel ? (
            <motion.div initial={{ opacity: 0, y: -6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} className="rounded-full px-3 py-1 font-semibold" style={{ background: `${palette.primary}22`, color: palette.primary }}>
              {featureLabel}
              {fsInfo ? ` · ${fsInfo.left} left of ${fsInfo.total}` : ""}
            </motion.div>
          ) : null}
        </AnimatePresence>
        {multiplier > 1 ? <span className="rounded-full bg-accent-soft px-2.5 py-1 font-bold text-accent-2">×{multiplier}</span> : null}
        {meter && definition.meter ? (
          <div className="flex items-center gap-2 rounded-full bg-surface-2 px-3 py-1">
            <span className="text-fg-3">{definition.meter.name}</span>
            <div className="h-1.5 w-20 overflow-hidden rounded-full bg-surface-3">
              <div className="h-full rounded-full transition-[width] duration-700" style={{ width: `${Math.min(100, (meter.value / meter.max) * 100)}%`, background: palette.primary }} />
            </div>
            <span className="tabular text-fg-2">
              {meter.value}/{meter.max}
            </span>
            {meterLevel > 0 ? <span className="font-bold text-accent-2">Lv {meterLevel}</span> : null}
          </div>
        ) : null}
        {heat && definition.heat ? (
          <div className="flex items-center gap-2 rounded-full bg-surface-2 px-3 py-1">
            <span className="text-fg-3">Heat</span>
            <div className="h-1.5 w-20 overflow-hidden rounded-full bg-surface-3">
              <div className="h-full rounded-full bg-[linear-gradient(90deg,#ffb347,#ff5c3d)] transition-[width] duration-700" style={{ width: `${Math.min(100, (heat.value / heat.max) * 100)}%` }} />
            </div>
            <span className="tabular text-fg-2">×{definition.heat.ladder[Math.min(Math.floor(heat.value / definition.heat.bandSize), definition.heat.ladder.length - 1)]}</span>
          </div>
        ) : null}
      </div>

      {/* Canvas */}
      <div className="relative flex-1 min-h-0">
        <div ref={canvasRef} className="spz-canvas absolute inset-0" />
        {/* Splash */}
        <AnimatePresence>
          {!ready ? (
            <motion.div key="splash" className="absolute inset-0 grid place-items-center" style={{ background: palette.bg }} exit={{ opacity: 0 }} transition={{ duration: 0.5 }}>
              <div className="flex flex-col items-center gap-5 px-8 text-center">
                <SpinzaMark className="h-12 w-12" />
                <div>
                  <div className="eyebrow">Spinza presents</div>
                  <div className="mt-1 text-3xl font-semibold tracking-tight" style={{ color: palette.primary }}>
                    {game.name}
                  </div>
                  <div className="mt-1 text-sm text-fg-3">{game.tagline}</div>
                </div>
                <div className="w-56">
                  <div className="h-1 w-full overflow-hidden rounded-full bg-surface-3">
                    <div className="h-full rounded-full transition-[width] duration-300" style={{ width: `${progress}%`, background: palette.primary }} />
                  </div>
                  <div className="mt-2 text-[12px] tabular text-fg-3">Loading {progress}%</div>
                </div>
              </div>
            </motion.div>
          ) : null}
        </AnimatePresence>
        <Overlays overlay={overlay} palette={palette} />
        {/* Error */}
        <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" style={{ zIndex: 5 }}>
              <div className="font-semibold">{errorTitle(error.code)}</div>
              <div className="mt-0.5 text-fg-2">{error.message}</div>
              {error.code === "INSUFFICIENT_CREDITS" ? (
                <div className="mt-2 flex justify-center gap-2">
                  <Button size="sm" variant="secondary" onClick={() => setBetSheet(true)}>
                    Lower bet
                  </Button>
                  <Button size="sm" variant="accent" href="/rewards">
                    Get rewards
                  </Button>
                </div>
              ) : error.code === "MAINTENANCE" ? (
                <Button size="sm" className="mt-2" href="/">
                  Back to lobby
                </Button>
              ) : (
                <Button size="sm" variant="secondary" className="mt-2" onClick={() => setError(null)}>
                  Dismiss
                </Button>
              )}
            </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`, boxShadow: `inset 0 1px 0 ${palette.primary}33`, background: frameStyle.controls }}>
        <div className="mx-auto grid max-w-3xl grid-cols-[1fr_auto_1fr] items-center gap-3">
          {/* Balance + bet */}
          <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={spinning || 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>
              <button disabled={spinning} onClick={() => setBetSheet(true)} className="tap flex h-10 min-w-[92px] flex-col items-center justify-center rounded-md surface-2 px-2 focus-ring">
                <span className="text-[10px] uppercase tracking-wider text-fg-3">Bet</span>
                <span className="text-sm font-bold tabular text-fg">{formatSC(bet)}</span>
              </button>
              <button disabled={spinning || 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>

          {/* Spin */}
          <div className="flex flex-col items-center gap-2">
            {auto > 0 ? (
              <button onClick={stopAuto} className="relative grid h-[84px] w-[84px] place-items-center rounded-full border-2 border-danger/60 bg-danger/15 text-danger shadow-[0_0_40px_-10px_rgba(255,92,122,0.8)] focus-ring">
                <span className="text-base font-extrabold tracking-wide">STOP</span>
                <span className="absolute -bottom-1 rounded-full bg-bg px-2 text-[11px] font-bold tabular text-fg-2">{auto}</span>
              </button>
            ) : (
              <button
                onClick={() => void spin()}
                disabled={!ready || spinning}
                className={cn("relative grid h-[84px] w-[84px] place-items-center rounded-full text-[#1a1406] transition-transform active:scale-95 focus-ring disabled:opacity-70", spinning && "animate-pulse-soft")}
                style={{ background: `linear-gradient(180deg, ${shade(palette.primary, 0.35)}, ${palette.primary} 60%, ${shade(palette.primary, -0.35)})`, boxShadow: `0 0 0 4px ${palette.primary}2e, 0 12px 40px -10px ${palette.primary}b3`, color: textOn(palette.primary) }}
                aria-label="Spin"
              >
                <span className="text-base font-extrabold tracking-[0.12em]">SPIN</span>
              </button>
            )}
            <button disabled={spinning && auto === 0} onClick={() => (auto ? stopAuto() : setAutoSheet(true))} className="text-[11px] font-semibold uppercase tracking-wider text-fg-3 hover:text-fg-2 focus-ring rounded">
              {auto ? "Auto running" : "Auto spin"}
            </button>
          </div>

          {/* Win */}
          <div className="flex flex-col items-end gap-2 text-right">
            <div>
              <div className="eyebrow">Win</div>
              <div className={cn("text-base font-semibold tabular", displayWin > 0 ? "text-credit" : "text-fg-4")}>
                {displayWin > 0 ? formatSC(displayWin) : "—"}
              </div>
            </div>
            <button onClick={() => setQuick((q) => !q)} className={cn("tap flex h-10 items-center gap-1.5 rounded-md px-3 text-[12px] font-semibold focus-ring", quick ? "bg-accent-soft text-accent-2" : "surface-2 text-fg-3")} aria-pressed={quick}>
              <Zap className="h-3.5 w-3.5" /> Quick
            </button>
          </div>
        </div>
      </div>

      {/* Sheets */}
      <Sheet open={betSheet} onClose={() => setBetSheet(false)} title="Bet per spin">
        <div className="grid grid-cols-4 gap-2">
          {bets.map((b) => (
            <button key={b} onClick={() => { setBet(b); setBetSheet(false); }} className={cn("tap rounded-md border px-2 py-3 text-sm font-bold tabular focus-ring", b === bet ? "border-accent bg-accent-soft text-accent-2" : "border-line surface text-fg-2 hover:text-fg")}>
              {formatSC(b, { unit: false })}
            </button>
          ))}
        </div>
        <p className="mt-4 text-[12px] text-fg-3">
          Bets are in fictional Spinza Credits. Max win {formatMultiplier(game.maxMultiplier)} the bet.
        </p>
      </Sheet>

      <Sheet open={autoSheet} onClose={() => setAutoSheet(false)} title="Auto spin">
        <div className="grid grid-cols-4 gap-2">
          {AUTO_SPIN_OPTIONS.map((n) => (
            <button key={n} onClick={() => { setAutoSheet(false); void startAuto(n); }} className="tap rounded-md border border-line surface px-2 py-3 text-sm font-bold text-fg-2 hover:text-fg focus-ring">
              {n}
            </button>
          ))}
        </div>
        <p className="mt-4 text-[12px] text-fg-3">Auto spin stops automatically when a bonus triggers, when your balance is too low for the bet, or when you press STOP.</p>
      </Sheet>

      <GameInfoSheet open={infoSheet} onClose={() => setInfoSheet(false)} game={game} definition={definition} />
      <SettingsSheet open={settingsSheet} onClose={() => setSettingsSheet(false)} />
      <HistorySheet open={historySheet} onClose={() => setHistorySheet(false)} slug={game.slug} />
      <span className="sr-only">{user?.username}</span>
    </div>
  );
}

/** Per-frame HUD treatment so the control bar matches the reel frame material. */
const FRAME_HUD: Record<string, { controls: string }> = {
  metal: { controls: "linear-gradient(180deg, rgba(20,24,33,0.85), rgba(9,11,16,0.92))" },
  glass: { controls: "linear-gradient(180deg, rgba(255,255,255,0.06), rgba(10,12,20,0.85))" },
  gold: { controls: "linear-gradient(180deg, rgba(40,30,12,0.85), rgba(12,9,4,0.95))" },
  stone: { controls: "linear-gradient(180deg, rgba(28,25,18,0.9), rgba(10,9,6,0.95))" },
  ice: { controls: "linear-gradient(180deg, rgba(120,190,230,0.12), rgba(8,14,22,0.92))" },
  carbon: { controls: "repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 2px, rgba(0,0,0,0) 2px 5px), rgba(7,8,11,0.95)" },
  neon: { controls: "linear-gradient(180deg, rgba(10,8,24,0.85), rgba(4,3,12,0.95))" },
  obsidian: { controls: "rgba(0,0,0,0.92)" },
};

function shade(hexColor: string, amt: number): string {
  const n = parseInt(hexColor.replace("#", ""), 16);
  const ch = (v: number) => Math.max(0, Math.min(255, Math.round(v + 255 * amt)));
  const r = ch((n >> 16) & 255);
  const g = ch((n >> 8) & 255);
  const b = ch(n & 255);
  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, "0")}`;
}

function textOn(hexColor: string): string {
  const n = parseInt(hexColor.replace("#", ""), 16);
  const lum = (0.2126 * ((n >> 16) & 255) + 0.7152 * ((n >> 8) & 255) + 0.0722 * (n & 255)) / 255;
  return lum > 0.55 ? "#0b0a06" : "#ffffff";
}

function errorTitle(code: string): string {
  return (
    {
      INSUFFICIENT_CREDITS: "Insufficient credits",
      NETWORK: "Connection lost",
      MAINTENANCE: "Spinza is getting an upgrade",
      GAME_UNAVAILABLE: "Game unavailable",
      RATE_LIMITED: "Slow down",
      UNAUTHORIZED: "Session expired",
    }[code] ?? "Something went wrong"
  );
}

/* ----------------------------------------------------------------- overlays */

function Overlays({ overlay, palette }: { overlay: Overlay; palette: ClientDefinition["presentation"]["palette"] }) {
  return (
    <AnimatePresence>
      {overlay ? (
        <motion.div key={overlay.kind + ("title" in overlay ? overlay.title : "")} className="pointer-events-none absolute inset-0 grid place-items-center" style={{ zIndex: 4 }} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
          <div className="absolute inset-0 bg-black/45" />
          {overlay.kind === "banner" ? (
            <motion.div initial={{ scale: 0.7, y: 20 }} animate={{ scale: 1, y: 0 }} transition={{ type: "spring", stiffness: 260, damping: 18 }} className="relative text-center">
              <div className="text-[clamp(28px,7vw,56px)] font-extrabold tracking-tight" style={{ color: palette.primary, textShadow: `0 0 40px ${palette.glow}` }}>
                {overlay.title}
              </div>
              {overlay.subtitle ? <div className="mt-1 text-lg text-fg-2">{overlay.subtitle}</div> : null}
            </motion.div>
          ) : null}
          {overlay.kind === "freespins" ? (
            <motion.div initial={{ scale: 0.6 }} animate={{ scale: 1 }} transition={{ type: "spring", stiffness: 220, damping: 16 }} className="relative text-center">
              <div className="eyebrow" style={{ color: palette.secondary }}>
                Feature unlocked
              </div>
              <div className="text-[clamp(32px,8vw,64px)] font-extrabold tracking-tight" style={{ color: palette.primary, textShadow: `0 0 50px ${palette.glow}` }}>
                {overlay.title}
              </div>
              <div className="mt-2 text-2xl font-semibold text-fg">{overlay.spins} spins</div>
            </motion.div>
          ) : null}
          {overlay.kind === "jackpot" ? (
            <motion.div initial={{ scale: 0.5, rotate: -4 }} animate={{ scale: 1, rotate: 0 }} transition={{ type: "spring", stiffness: 200, damping: 14 }} className="relative text-center">
              <div className="text-[clamp(30px,7vw,60px)] font-extrabold uppercase tracking-tight shimmer-text">{overlay.tier} jackpot</div>
              <div className="mt-2 text-3xl font-bold tabular text-credit">{formatSC(overlay.amount)}</div>
              <div className="mt-1 text-xs text-fg-3">Fictional credits · no cash value</div>
            </motion.div>
          ) : null}
          {overlay.kind === "win" ? <WinPresentation cls={overlay.cls} amount={overlay.amount} multiplier={overlay.multiplier} /> : null}
          {overlay.kind === "bonus" ? <BonusReveal name={overlay.name} picks={overlay.picks} cells={overlay.cells} total={overlay.total} palette={palette} /> : null}
        </motion.div>
      ) : null}
    </AnimatePresence>
  );
}

function WinPresentation({ cls, amount, multiplier }: { cls: string; amount: number; multiplier: number }) {
  const label = WIN_CLASSES.find((c) => c.id === cls)?.label ?? "WIN";
  const [shown, setShown] = useState(0);
  useEffect(() => {
    const start = performance.now();
    const dur = 1400;
    let raf = 0;
    const step = () => {
      const t = Math.min(1, (performance.now() - start) / dur);
      setShown(Math.round(amount * (1 - Math.pow(1 - t, 3))));
      if (t < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [amount]);
  const size = { big: "text-[clamp(34px,9vw,72px)]", mega: "text-[clamp(38px,10vw,84px)]", epic: "text-[clamp(42px,11vw,96px)]", legendary: "text-[clamp(46px,12vw,110px)]" }[cls] ?? "text-5xl";
  return (
    <motion.div initial={{ scale: 0.4, opacity: 0 }} animate={{ scale: [0.4, 1.08, 1], opacity: 1 }} transition={{ duration: 0.7, times: [0, 0.7, 1] }} className="relative text-center">
      <div className={cn("font-extrabold uppercase tracking-tight shimmer-text", size)}>{label}</div>
      <div className="mt-3 text-4xl font-bold tabular text-credit sm:text-5xl">{formatSC(shown)}</div>
      <div className="mt-1 text-base font-semibold text-fg-2">{formatMultiplier(multiplier)} the bet</div>
    </motion.div>
  );
}

function BonusReveal({ name, picks, cells, total, palette }: { name: string; picks: { cell: number; value: number; amount: number }[]; cells: number; total: number; palette: ClientDefinition["presentation"]["palette"] }) {
  const [revealed, setRevealed] = useState(0);
  useEffect(() => {
    if (revealed >= picks.length) return;
    const t = setTimeout(() => setRevealed((r) => r + 1), 900);
    return () => clearTimeout(t);
  }, [revealed, picks.length]);
  const byCell = new Map(picks.slice(0, revealed).map((p) => [p.cell, p]));
  const cols = cells <= 6 ? 3 : cells <= 9 ? 3 : 4;
  return (
    <motion.div initial={{ scale: 0.8, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="relative w-[min(92vw,460px)] text-center">
      <div className="eyebrow" style={{ color: palette.secondary }}>
        Bonus game
      </div>
      <div className="text-3xl font-extrabold tracking-tight" style={{ color: palette.primary }}>
        {name}
      </div>
      <div className="mt-4 grid gap-2" style={{ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }}>
        {Array.from({ length: cells }, (_, i) => {
          const p = byCell.get(i);
          return (
            <motion.div key={i} layout className={cn("grid aspect-[4/3] place-items-center rounded-md border text-sm font-bold tabular", p ? "border-accent/50 bg-accent-soft text-credit" : "border-line bg-surface-2 text-fg-4")} animate={p ? { scale: [0.8, 1.1, 1] } : {}}>
              {p ? formatSC(p.amount, { unit: false }) : "?"}
            </motion.div>
          );
        })}
      </div>
      <div className="mt-4 text-lg font-semibold">
        Total <span className="tabular text-credit">{formatSC(revealed >= picks.length ? total : picks.slice(0, revealed).reduce((a, p) => a + p.amount, 0))}</span>
      </div>
    </motion.div>
  );
}

/* ------------------------------------------------------------------ sheets */

function GameInfoSheet({ open, onClose, game, definition }: { open: boolean; onClose: () => void; game: GameInfo; definition: ClientDefinition }) {
  const [tab, setTab] = useState<"rules" | "paytable" | "about">("rules");
  const symbols = new Map(definition.symbols.map((s) => [s.id, s]));
  return (
    <Sheet open={open} onClose={onClose} title={game.name} side="right">
      <Tabs value={tab} onChange={setTab} items={[{ value: "rules", label: "Rules" }, { value: "paytable", label: "Paytable" }, { 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>
      ) : null}
      {tab === "paytable" ? (
        <div className="space-y-2">
          <p className="text-[12px] text-fg-3">Pays shown as multiples of the total bet{definition.payModel.type === "ways" ? " per way" : " per line"}. Scatter pays apply anywhere.</p>
          {game.paytable.map((row) => {
            const s = symbols.get(row.symbol);
            return (
              <div key={row.symbol} className="surface flex items-center gap-3 rounded-md p-3">
                <span className="grid h-9 w-9 shrink-0 place-items-center rounded-md text-[11px] font-bold" style={{ background: `${s?.style.color ?? "#fff"}22`, color: s?.style.color ?? "#fff" }}>
                  {s?.style.label ?? row.symbol}
                </span>
                <div className="min-w-0 flex-1">
                  <div className="truncate text-sm font-semibold">{row.label}</div>
                  <div className="text-[11px] uppercase tracking-wider text-fg-3">{s?.kind}</div>
                </div>
                <div className="flex gap-2 text-[12px] tabular">
                  {Object.entries(row.pays)
                    .sort((a, b) => Number(a[0]) - Number(b[0]))
                    .map(([k, v]) => (
                      <span key={k} className="rounded bg-surface-2 px-1.5 py-0.5 text-fg-2">
                        {k}× <span className="text-credit">{v}</span>
                      </span>
                    ))}
                </div>
              </div>
            );
          })}
        </div>
      ) : null}
      {tab === "about" ? (
        <div className="space-y-4 text-sm text-fg-2">
          <p>{game.description}</p>
          <dl className="grid grid-cols-2 gap-3">
            <Stat label="Volatility" value={game.volatility} />
            <Stat label="RTP (configured)" value={`${(game.rtp * 100).toFixed(2)}%`} />
            <Stat label="Hit frequency" value={game.hitFrequency ? `${(game.hitFrequency * 100).toFixed(1)}%` : "—"} />
            <Stat label="Max win" value={formatMultiplier(game.maxMultiplier)} />
            <Stat label="Grid" value={`${game.grid.reels} × ${game.grid.rows}`} />
            <Stat label="Version" value={game.version} />
          </dl>
          {game.certification ? (
            <div className="surface rounded-md p-3 text-[12px]">
              <div className="font-semibold text-fg">Internal certification · {game.certification.status}</div>
              <div className="mt-1 text-fg-3">
                {game.certification.spins.toLocaleString("en-US")} simulated spins · observed RTP {(game.certification.observedRtp * 100).toFixed(2)}%
              </div>
            </div>
          ) : null}
          <p className="text-[12px] text-fg-3">RTP is a gameplay-balancing statistic over millions of simulated spins. Spinza Credits are fictional and have no cash value.</p>
        </div>
      ) : null}
    </Sheet>
  );
}

function Stat({ label, value }: { label: string; value: string }) {
  return (
    <div className="surface rounded-md p-3">
      <dt className="eyebrow">{label}</dt>
      <dd className="mt-1 text-sm font-semibold capitalize text-fg">{value}</dd>
    </div>
  );
}

function SettingsSheet({ open, onClose }: { open: boolean; onClose: () => void }) {
  const { settings, setSettings } = useSession();
  if (!settings) return null;
  return (
    <Sheet open={open} onClose={onClose} title="Game settings">
      <div className="space-y-4">
        <Slider label="Master volume" value={settings.masterVolume} onChange={(v) => setSettings({ masterVolume: v })} />
        <Slider label="Music" value={settings.musicVolume} onChange={(v) => setSettings({ musicVolume: v })} />
        <Slider label="Effects" value={settings.effectsVolume} onChange={(v) => setSettings({ effectsVolume: v })} />
        <div>
          <div className="mb-2 text-sm text-fg-2">Animation intensity</div>
          <Tabs value={settings.animationIntensity} onChange={(v) => setSettings({ animationIntensity: v })} items={[{ value: "low", label: "Low" }, { value: "medium", label: "Medium" }, { value: "high", label: "High" }]} />
        </div>
        <button onClick={() => setSettings({ reduceMotion: !settings.reduceMotion })} className="flex w-full items-center justify-between rounded-md surface px-4 py-3 text-sm focus-ring">
          <span>Reduce motion</span>
          <span className={cn("font-semibold", settings.reduceMotion ? "text-success" : "text-fg-3")}>{settings.reduceMotion ? "On" : "Off"}</span>
        </button>
        <Link href="/settings" className="block text-center text-[13px] text-fg-3 underline-offset-4 hover:underline">
          All account settings
        </Link>
      </div>
    </Sheet>
  );
}

function Slider({ label, value, onChange }: { label: string; value: number; onChange: (v: number) => void }) {
  return (
    <label className="block">
      <div className="mb-1 flex justify-between text-sm">
        <span className="text-fg-2">{label}</span>
        <span className="tabular text-fg-3">{Math.round(value * 100)}%</span>
      </div>
      <input type="range" min={0} max={1} step={0.05} value={value} onChange={(e) => onChange(Number(e.target.value))} className="w-full accent-[#c9a961]" />
    </label>
  );
}

function HistorySheet({ open, onClose, slug }: { open: boolean; onClose: () => void; slug: string }) {
  return (
    <Sheet open={open} onClose={onClose} title="Recent rounds" side="right">
      {open ? <HistoryList slug={slug} /> : null}
    </Sheet>
  );
}

type HistoryRow = { roundId: string; bet: number; win: number; multiplier: number; balanceAfter: number; createdAt: string; features: string[] };

function HistoryList({ slug }: { slug: string }) {
  const [rows, setRows] = useState<HistoryRow[] | null>(null);
  const [expanded, setExpanded] = useState<string | null>(null);
  useEffect(() => {
    let alive = true;
    api<{ entries: HistoryRow[] }>(`/api/games/${slug}/history?limit=30`)
      .then((r) => alive && setRows(r.entries))
      .catch(() => alive && setRows([]));
    return () => {
      alive = false;
    };
  }, [slug]);
  return (
    <>
      {rows === null ? (
        <div className="text-sm text-fg-3">Loading…</div>
      ) : rows.length === 0 ? (
        <div className="text-sm text-fg-3">No rounds yet on this game.</div>
      ) : (
        <ul className="divide-y divide-line">
          {rows.map((r) => (
            <li key={r.roundId}>
              <button onClick={() => setExpanded(expanded === r.roundId ? null : r.roundId)} className="flex w-full items-center justify-between py-3 text-left">
                <div>
                  <div className="text-sm font-medium">
                    Bet {formatSC(r.bet, { unit: false })} · <span className={r.win > 0 ? "text-credit" : "text-fg-3"}>{r.win > 0 ? `+${formatSC(r.win, { unit: false })}` : "—"}</span>
                  </div>
                  <div className="text-[11px] text-fg-3">{new Date(r.createdAt).toLocaleString("en-US", { hour: "2-digit", minute: "2-digit", second: "2-digit" })}</div>
                </div>
                <div className="flex items-center gap-2 text-[12px] tabular text-fg-2">
                  {formatMultiplier(r.multiplier)}
                  {expanded === r.roundId ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
                </div>
              </button>
              {expanded === r.roundId ? (
                <div className="pb-3 text-[12px] text-fg-3">
                  <div className="font-mono">{r.roundId}</div>
                  <div>Balance after: {formatSC(r.balanceAfter)}</div>
                  {r.features.length ? <div>Features: {r.features.join(", ")}</div> : null}
                </div>
              ) : null}
            </li>
          ))}
        </ul>
      )}
    </>
  );
}