"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { AnimatePresence, animate, motion } from "framer-motion";
import { X, Play } from "lucide-react";
import type { GameCard as GameCardData } from "@spinza/shared";
import { STARTING_BALANCE } from "@spinza/shared";
import { useSession } from "@/lib/store";
import { Button } from "@/components/ui";
import { GameArt } from "./game-art";
import { VolatilityMeter } from "./game-card";

/** First-time experience shown after registration (`/?welcome=1`). */
export function WelcomeOverlay({ picks }: { picks: GameCardData[] }) {
  const params = useSearchParams();
  const router = useRouter();
  const user = useSession((s) => s.user);
  const reduceMotion = useSession((s) => s.settings?.reduceMotion) ?? false;
  const [open, setOpen] = useState(params.get("welcome") === "1");
  const [phase, setPhase] = useState<"credits" | "choose">("credits");
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (!open) return;
    document.body.style.overflow = "hidden";
    const ctrl = animate(0, STARTING_BALANCE, { duration: reduceMotion ? 0.2 : 1.8, ease: [0.16, 1, 0.3, 1], onUpdate: (v) => setCount(Math.round(v)) });
    const t = setTimeout(() => setPhase("choose"), reduceMotion ? 600 : 2600);
    return () => {
      ctrl.stop();
      clearTimeout(t);
      document.body.style.overflow = "";
    };
  }, [open, reduceMotion]);

  const dismiss = () => {
    setOpen(false);
    router.replace("/", { scroll: false });
  };

  return (
    <AnimatePresence>
      {open ? (
        <motion.div className="fixed inset-0 flex flex-col overflow-y-auto bg-bg/95 backdrop-blur-xl" style={{ zIndex: "var(--z-modal)" }} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} role="dialog" aria-modal aria-labelledby="welcome-title">
          <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_50%_30%,rgba(139,92,246,0.22),transparent_55%)]" />
          <button onClick={dismiss} className="tap absolute right-4 top-4 grid place-items-center rounded-full glass text-fg-2 hover:text-fg focus-ring" style={{ marginTop: "var(--safe-top)" }} aria-label="Skip">
            <X className="h-5 w-5" />
          </button>
          <div className="page relative flex flex-1 flex-col items-center justify-center py-16 text-center">
            <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}>
              <div className="eyebrow mb-3 text-accent">{user ? `@${user.username}` : "New player"}</div>
              <h1 id="welcome-title" className="text-4xl font-semibold tracking-[-0.04em] sm:text-6xl">
                Welcome to Spinza.
              </h1>
            </motion.div>
            <motion.div className="mt-8" initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.3, duration: 0.7, ease: [0.16, 1, 0.3, 1] }}>
              <div className="text-[64px] font-semibold leading-none tracking-[-0.05em] text-credit tabular sm:text-[96px]" aria-live="polite">
                +{count.toLocaleString("en-US")}
                <span className="ml-2 text-[0.35em] font-bold tracking-wider text-credit/70">SC</span>
              </div>
              <p className="mt-3 text-sm text-fg-3">Your starting Spinza Credits. Fictional, free, and refilled every day you come back.</p>
            </motion.div>

            <AnimatePresence>
              {phase === "choose" ? (
                <motion.div className="mt-12 w-full max-w-3xl" initial={{ opacity: 0, y: 24 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}>
                  <h2 className="text-xl font-semibold tracking-tight sm:text-2xl">Choose your first game</h2>
                  <p className="mt-1 text-sm text-fg-3">Three picks to start with. You can always come back to the lobby.</p>
                  <div className="mt-6 grid grid-cols-3 gap-2 sm:gap-3">
                    {picks.map((g, i) => (
                      <motion.div key={g.slug} initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.1 + i * 0.1, duration: 0.5, ease: [0.16, 1, 0.3, 1] }}>
                        <Link href={`/games/${g.slug}`} onClick={() => setOpen(false)} className="group block overflow-hidden rounded-lg border border-line bg-bg-1 text-left shadow-card transition-transform hover:-translate-y-1 focus-ring" aria-label={`Play ${g.name}`}>
                          <div className="aspect-[3/4]">
                            <GameArt slug={g.slug} name={g.name} palette={g.palette} variant="card" />
                          </div>
                          <div className="flex items-center justify-between gap-2 p-2 sm:p-3">
                            <div className="min-w-0">
                              <div className="hidden truncate text-[12px] text-fg-3 sm:block">{g.tagline}</div>
                              <VolatilityMeter volatility={g.volatility} className="sm:mt-1" />
                            </div>
                            <span className="hidden h-9 w-9 shrink-0 place-items-center rounded-full bg-fg text-bg sm:grid">
                              <Play className="ml-0.5 h-4 w-4 fill-current" />
                            </span>
                          </div>
                        </Link>
                      </motion.div>
                    ))}
                  </div>
                  <div className="mt-8">
                    <Button variant="ghost" onClick={dismiss}>
                      Browse the whole lobby instead
                    </Button>
                  </div>
                </motion.div>
              ) : null}
            </AnimatePresence>
          </div>
        </motion.div>
      ) : null}
    </AnimatePresence>
  );
}