"use client";

import { useCallback, useEffect, useMemo, useState, type ComponentType } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { AnimatePresence, motion } from "framer-motion";
import { ArrowLeft, Heart, Info, Minus, Plus, Volume2, VolumeX } from "lucide-react";
import { BET_LEVELS, classifyWin, formatMultiplier, formatSC, WIN_CLASSES, type GameInfo } from "@spinza/shared";
import type { ArcadeGameDefinition } from "@spinza/game-core/client";
import { api } from "@/lib/api";
import { useSession } from "@/lib/store";
import { cn } from "@/lib/utils";
import { Credits, Sheet, Tabs } from "@/components/ui";
import { getSound } from "@/components/game/sound";
import type { ArcadeGameProps } from "./contract";

/**
 * Shared chrome for the Beyond Slots originals: top bar, bet controls,
 * balance, win banner, info sheet. The game component fills the middle.
 */
export function ArcadeShell({ game, definition, Game }: { game: GameInfo; definition: ArcadeGameDefinition; Game: ComponentType<ArcadeGameProps> }) {
  const router = useRouter();
  const { status, wallet, settings } = useSession();
  const [bet, setBet] = useState(100);
  const [busy, setBusy] = useState(false);
  const [last, setLast] = useState<{ win: number; multiplier: number } | null>(null);
  const [banner, setBanner] = useState<{ label: string; win: number; multiplier: number } | null>(null);
  const [infoSheet, setInfoSheet] = useState(false);
  const [favorite, setFavorite] = useState(!!game.favorite);
  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 betIndex = bets.indexOf(bet);

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

  useEffect(() => {
    const s = getSound();
    s.setLevels({ enabled: soundOn, master: settings?.masterVolume ?? 0.8, music: settings?.musicVolume ?? 0.6, effects: settings?.effectsVolume ?? 0.8 });
    s.setAmbience(definition.presentation.ambience);
    api(`/api/games/${game.slug}/launch`, { method: "POST" }).catch(() => {});
    return () => s.destroy();
  }, [soundOn, settings?.masterVolume, settings?.musicVolume, settings?.effectsVolume, definition.presentation.ambience, game.slug]);

  const sound = useCallback<ArcadeGameProps["sound"]>((name) => {
    const s = getSound();
    s.unlock();
    switch (name) {
      case "click":
        s.click();
        break;
      case "tick":
        s.tick();
        break;
      case "win":
        s.win(2);
        break;
      case "bigWin":
        s.bigWin();
        break;
      case "lose":
        s.error();
        break;
      case "bonus":
        s.bonus();
        break;
    }
  }, []);

  const onResult = useCallback<ArcadeGameProps["onResult"]>((r) => {
    setLast(r);
    const cls = classifyWin(r.multiplier);
    if (cls === "big" || cls === "mega" || cls === "epic" || cls === "legendary") {
      setBanner({ label: WIN_CLASSES.find((c) => c.id === cls)?.label ?? "WIN", win: r.win, multiplier: r.multiplier });
      setTimeout(() => setBanner(null), 2600);
    }
  }, []);

  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;

  return (
    <div className="fixed inset-0 flex flex-col" style={{ background: `radial-gradient(120% 80% at 50% 0%, ${palette.surface} 0%, ${palette.bg} 60%, #050608 100%)` }}>
      <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">Spinza Original · Beyond Slots</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={() => 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>

      <div className="relative flex-1 min-h-0">
        <Game game={game} definition={definition} bet={bet} onBusy={setBusy} onResult={onResult} sound={sound} reduceMotion={settings?.reduceMotion ?? false} />
        <AnimatePresence>
          {banner ? (
            <motion.div key={banner.win} initial={{ opacity: 0, scale: 0.7 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0 }} className="pointer-events-none absolute inset-0 grid place-items-center bg-black/40" style={{ zIndex: 5 }}>
              <div className="text-center">
                <div className="text-[clamp(34px,9vw,72px)] font-extrabold uppercase tracking-tight shimmer-text">{banner.label}</div>
                <div className="mt-2 text-3xl font-bold tabular text-credit">{formatSC(banner.win)}</div>
                <div className="text-sm text-fg-2">{formatMultiplier(banner.multiplier)} the bet</div>
              </div>
            </motion.div>
          ) : null}
        </AnimatePresence>
      </div>

      <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 flex max-w-3xl items-center justify-between gap-3">
          <div>
            <div className="eyebrow">Balance</div>
            <Credits amount={balance} size="md" />
          </div>
          <div className="flex items-center gap-1">
            <button disabled={busy || 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={busy || 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 className="text-right">
            <div className="eyebrow">Last win</div>
            <div className={cn("text-base font-semibold tabular", last && last.win > 0 ? "text-credit" : "text-fg-4")}>{last && last.win > 0 ? `${formatSC(last.win)} · ${formatMultiplier(last.multiplier)}` : "—"}</div>
          </div>
        </div>
      </div>

      <InfoSheet open={infoSheet} onClose={() => setInfoSheet(false)} game={game} definition={definition} />
    </div>
  );
}

function InfoSheet({ open, onClose, game, definition }: { open: boolean; onClose: () => void; game: GameInfo; definition: ArcadeGameDefinition }) {
  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)}%`],
              ["Max win", formatMultiplier(definition.maxMultiplier)],
              ["Mode", definition.mode === "ladder" ? "Step by step" : "Instant"],
            ].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>
          {game.certification ? <p className="text-[12px] text-fg-3">Certified on {game.certification.spins.toLocaleString("en-US")} simulated rounds · observed RTP {(game.certification.observedRtp * 100).toFixed(2)}%.</p> : null}
          <p className="text-[12px] text-fg-3">Spinza Credits are fictional and have no cash value.</p>
        </div>
      )}
    </Sheet>
  );
}