"use client";

import { useEffect, useState } from "react";
import { GameCard, GameGrid } from "@/components/game/GameCard";
import { EmptyState } from "@/components/ui/Section";
import type { PublicGame } from "@/lib/games";
import { getFavoritesSnapshot, onFavoritesChange } from "@/lib/storage";

/** Client-rendered favorites grid (reads browser storage, joins catalog). */
export function FavoritesList({ games }: { games: PublicGame[] }) {
  const [favorites, setFavorites] = useState<string[] | null>(() =>
    typeof window === "undefined" ? null : getFavoritesSnapshot(),
  );

  useEffect(
    () =>
      onFavoritesChange(() => {
        setFavorites(getFavoritesSnapshot());
      }),
    [],
  );

  if (favorites === null) {
    return (
      <GameGrid>
        {Array.from({ length: 4 }, (_, i) => (
          <div
            key={i}
            aria-hidden="true"
            className="overflow-hidden rounded-2xl border border-slate-800 bg-slate-900"
          >
            <div className="skeleton aspect-[16/9]" />
            <div className="space-y-2 p-4">
              <div className="skeleton h-4 w-2/3 rounded" />
              <div className="skeleton h-3 w-full rounded" />
            </div>
          </div>
        ))}
      </GameGrid>
    );
  }

  const saved = games.filter((g) => favorites.includes(g.slug));

  if (saved.length === 0) {
    return (
      <EmptyState
        title="No favorites yet"
        message="Tap the heart on any game to keep it here. Favorites are saved in this browser — no account needed."
        actionHref="/games"
        actionLabel="Discover games"
      />
    );
  }

  return (
    <div aria-live="polite">
      <p className="mb-4 text-sm text-slate-400">
        {saved.length} {saved.length === 1 ? "game" : "games"} saved in this
        browser.
      </p>
      <GameGrid>
        {saved.map((game) => (
          <GameCard key={game.slug} game={game} />
        ))}
      </GameGrid>
    </div>
  );
}