import { Suspense } from "react";
import type { Metadata } from "next";
import type { GameCard } from "@spinza/shared";
import { apiServer } from "@/lib/api-server";
import { AppShell } from "@/components/shell/app-shell";
import { ServerUnavailable } from "@/components/shell/api-error";
import { GamesBrowser } from "@/components/lobby/games-browser";
import { GameCardSkeleton } from "@/components/lobby/game-card";

export const metadata: Metadata = {
  title: "Games",
  description: "Browse all twenty original Spinza games — cascades, expanding wilds, hold-and-respin jackpots and more. Free fictional credits, no cash value.",
  alternates: { canonical: "/games" },
};

export default async function GamesPage() {
  const data = await apiServer<{ games: GameCard[] }>("/api/games");
  return (
    <AppShell>
      <div className="mb-6">
        <div className="eyebrow mb-1">Library</div>
        <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">All games</h1>
        <p className="mt-2 max-w-xl text-sm text-fg-3">Every title is a Spinza original, certified against its published math. Volatility tells you how the ride feels; open Game Info inside any game for the full details.</p>
      </div>
      {data === null ? (
        <ServerUnavailable />
      ) : (
        <Suspense
          fallback={
            <div className="grid grid-cols-2 gap-x-3 gap-y-6 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5" aria-busy>
              {Array.from({ length: 10 }).map((_, i) => (
                <GameCardSkeleton key={i} className="w-full sm:w-full" />
              ))}
            </div>
          }
        >
          <GamesBrowser games={data.games} />
        </Suspense>
      )}
    </AppShell>
  );
}