import { Suspense } from "react";
import Link from "next/link";
import { Play, Info, Sparkles } from "lucide-react";
import type { GameCard as GameCardData, PublicUser } from "@spinza/shared";
import { Button } from "@/components/ui";
import { ServerUnavailable } from "@/components/shell/api-error";
import { GameArt } from "./game-art";
import { GameCard, GameRow, GameTile, VolatilityMeter } from "./game-card";
import { RewardsStrip } from "./rewards-strip";
import { WelcomeOverlay } from "./welcome-overlay";
import { timeAgo } from "@/lib/utils";

export interface LobbyProps {
  user: PublicUser;
  games: GameCardData[] | null;
  livePlayers: number;
  recommendations: string[];
}

const FLAGSHIP_SLUG = "spinza-original";

export function Lobby({ user, games, livePlayers, recommendations }: LobbyProps) {
  const list = games ?? [];
  const slots = list.filter((g) => (g.kind ?? "slot") === "slot");
  const risk = list.filter((g) => g.kind === "crash");
  const originals = list.filter((g) => g.kind === "arcade");
  const flagship = list.find((g) => g.slug === FLAGSHIP_SLUG) ?? list.find((g) => g.isFeatured) ?? list[0] ?? null;
  const continuePlaying = list.filter((g) => g.lastPlayedAt).sort((a, b) => new Date(b.lastPlayedAt!).getTime() - new Date(a.lastPlayedAt!).getTime());
  const featured = list.filter((g) => g.isFeatured);
  const fresh = list.filter((g) => g.isNew);
  const popular = [...list].sort((a, b) => b.popularity - a.popularity).slice(0, 10);
  const highVol = slots.filter((g) => g.volatility === "high" || g.volatility === "extreme");
  const relaxed = slots.filter((g) => g.volatility === "low" || g.volatility === "medium");
  const jackpots = slots.filter((g) => g.isJackpot);
  const picks = recommendations.map((s) => list.find((g) => g.slug === s)).filter((g): g is GameCardData => !!g);
  const welcomePicks = picks.length ? picks : list.slice(0, 3);

  return (
    <div className="space-y-10 lg:space-y-12">
      <Suspense fallback={null}>
        <WelcomeOverlay picks={welcomePicks} />
      </Suspense>

      {/* ---------------------------------------------------------- hero */}
      {flagship ? (
        <section className="relative overflow-hidden rounded-xl border border-line bg-bg-1" aria-labelledby="lobby-hero-title">
          <div className="absolute inset-0">
            <GameArt slug={flagship.slug} name={flagship.name} palette={flagship.palette} variant="hero" showName={false} />
            <div className="absolute inset-0 bg-[linear-gradient(90deg,rgba(7,8,12,0.92)_0%,rgba(7,8,12,0.7)_45%,rgba(7,8,12,0.15)_100%)]" />
            <div className="absolute inset-x-0 bottom-0 h-2/3 bg-[linear-gradient(180deg,transparent,rgba(7,8,12,0.85))]" />
          </div>
          <div className="relative flex min-h-[340px] flex-col justify-end p-6 sm:min-h-[420px] sm:p-10">
            <div className="eyebrow mb-3 flex items-center gap-2 text-accent">
              <Sparkles className="h-3.5 w-3.5" /> {flagship.slug === FLAGSHIP_SLUG ? "Flagship title" : "Featured"}
            </div>
            <h1 id="lobby-hero-title" className="text-4xl font-semibold leading-[0.95] tracking-[-0.04em] sm:text-6xl">
              {flagship.name}
            </h1>
            <p className="mt-3 max-w-md text-[15px] text-fg-2 sm:text-base">{flagship.tagline}</p>
            <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-[13px] text-fg-3">
              <VolatilityMeter volatility={flagship.volatility} />
              <span>{flagship.grid.reels}×{flagship.grid.rows} · {flagship.features.slice(0, 2).join(" · ")}</span>
            </div>
            <div className="mt-6 flex flex-wrap gap-3">
              <Button size="lg" href={`/games/${flagship.slug}`} className="min-w-[160px]">
                <Play className="h-4 w-4 fill-current" /> Play now
              </Button>
              <Button variant="outline" size="lg" href={`/games/${flagship.slug}#info`} className="glass">
                <Info className="h-4 w-4" /> Game info
              </Button>
            </div>
          </div>
        </section>
      ) : games === null ? (
        <ServerUnavailable />
      ) : (
        <section className="surface rounded-xl p-8 text-center sm:p-12">
          <div className="eyebrow mb-2">Lobby</div>
          <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">Welcome back, {user.username}.</h1>
          <p className="mx-auto mt-2 max-w-md text-sm text-fg-3">New games are being certified and will appear here as soon as they pass. Your credits and progress are safe.</p>
          <Button className="mt-6" variant="secondary" href="/rewards">
            Visit rewards
          </Button>
        </section>
      )}

      {/* --------------------------------------------------------- strip */}
      <RewardsStrip livePlayers={livePlayers} />

      {games === null && flagship ? <ServerUnavailable compact /> : null}

      {/* ------------------------------------------------------ sections */}
      {continuePlaying.length ? (
        <section aria-labelledby="continue-title">
          <div className="mb-3">
            <div className="eyebrow mb-1">Pick up where you left off</div>
            <h2 id="continue-title" className="text-xl font-semibold tracking-tight sm:text-2xl">
              Continue playing
            </h2>
          </div>
          <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
            {continuePlaying.slice(0, 6).map((g) => (
              <GameTile key={g.slug} game={g} meta={`Played ${timeAgo(g.lastPlayedAt!)}`} />
            ))}
          </div>
        </section>
      ) : null}

      <GameRow id="risk" title="Risk Games — Cash Out" eyebrow="One decision: take it now, or push?" games={risk} href="/games?filter=risk" />
      <GameRow id="originals" title="Spinza Originals — Beyond Slots" eyebrow="Interactive originals, no reels" games={originals} href="/games?filter=originals" />
      <GameRow id="featured" title="Featured games" eyebrow="Curated tonight" games={featured} href="/games?filter=featured" />
      <GameRow id="new" title="New releases" eyebrow="Fresh from the studio" games={fresh} href="/games?filter=new" />
      <GameRow id="popular" title="Popular" eyebrow="Most played this week" games={popular} href="/games" />
      <GameRow id="high" title="High volatility" eyebrow="Big swings, big moments" games={highVol} href="/games?filter=high" />
      <GameRow id="relaxed" title="Relaxed games" eyebrow="Steady, easy sessions" games={relaxed} href="/games?filter=relaxed" />
      <GameRow id="jackpot" title="Jackpot games" eyebrow="Hold, respin, fill the grid" games={jackpots} href="/games?filter=jackpot" />

      {list.length ? (
        <section aria-labelledby="all-title">
          <div className="mb-4 flex items-end justify-between">
            <div>
              <div className="eyebrow mb-1">{list.length} titles</div>
              <h2 id="all-title" className="text-xl font-semibold tracking-tight sm:text-2xl">
                All games
              </h2>
            </div>
            <Link href="/games" className="tap inline-flex h-9 min-h-0 items-center text-sm font-medium text-fg-3 hover:text-fg">
              Filter &amp; search
            </Link>
          </div>
          <div className="grid grid-cols-2 gap-x-3 gap-y-6 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
            {list.map((g) => (
              <GameCard key={g.slug} game={g} className="w-full sm:w-full" />
            ))}
          </div>
        </section>
      ) : null}

      <p className="pt-4 text-center text-[12px] text-fg-4">Virtual credits only. No deposits. No withdrawals. No cash value. 18+.</p>
    </div>
  );
}