"use client";

import { useMemo, useState, useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Search, X, Heart } from "lucide-react";
import type { GameCard as GameCardData } from "@spinza/shared";
import { useSession } from "@/lib/store";
import { cn } from "@/lib/utils";
import { Button, Empty } from "@/components/ui";
import { GameCard } from "./game-card";

const FILTERS = [
  { key: "all", label: "All" },
  { key: "featured", label: "Featured" },
  { key: "new", label: "New" },
  { key: "high", label: "High volatility" },
  { key: "relaxed", label: "Relaxed" },
  { key: "jackpot", label: "Jackpot" },
  { key: "risk", label: "Risk · Cash out" },
  { key: "originals", label: "Beyond Slots" },
  { key: "favourites", label: "Favourites" },
] as const;
type FilterKey = (typeof FILTERS)[number]["key"];

const isFilter = (v: string | null): v is FilterKey => !!v && FILTERS.some((f) => f.key === v);

export function GamesBrowser({ games }: { games: GameCardData[] }) {
  const params = useSearchParams();
  const router = useRouter();
  const status = useSession((s) => s.status);
  const [filter, setFilter] = useState<FilterKey>(isFilter(params.get("filter")) ? (params.get("filter") as FilterKey) : "all");
  const [query, setQuery] = useState(params.get("q") ?? "");
  const [favs, setFavs] = useState<Record<string, boolean>>(() => Object.fromEntries(games.map((g) => [g.slug, !!g.favorite])));

  useEffect(() => {
    const p = new URLSearchParams();
    if (filter !== "all") p.set("filter", filter);
    if (query.trim()) p.set("q", query.trim());
    const qs = p.toString();
    router.replace(qs ? `/games?${qs}` : "/games", { scroll: false });
  }, [filter, query, router]);

  const list = useMemo(() => {
    const q = query.trim().toLowerCase();
    return games
      .filter((g) => {
        switch (filter) {
          case "featured":
            return g.isFeatured;
          case "new":
            return g.isNew;
          case "high":
            return g.volatility === "high" || g.volatility === "extreme";
          case "relaxed":
            return g.volatility === "low" || g.volatility === "medium";
          case "jackpot":
            return g.isJackpot;
          case "risk":
            return g.kind === "crash";
          case "originals":
            return g.kind === "arcade";
          case "favourites":
            return favs[g.slug];
          default:
            return true;
        }
      })
      .filter((g) => !q || g.name.toLowerCase().includes(q) || g.tagline.toLowerCase().includes(q) || g.theme.toLowerCase().includes(q) || g.tags.some((t) => t.includes(q)) || g.features.some((f) => f.toLowerCase().includes(q)));
  }, [games, filter, query, favs]);

  const counts = useMemo<Record<FilterKey, number>>(
    () => ({
      all: games.length,
      featured: games.filter((g) => g.isFeatured).length,
      new: games.filter((g) => g.isNew).length,
      high: games.filter((g) => g.volatility === "high" || g.volatility === "extreme").length,
      relaxed: games.filter((g) => g.volatility === "low" || g.volatility === "medium").length,
      jackpot: games.filter((g) => g.isJackpot).length,
      risk: games.filter((g) => g.kind === "crash").length,
      originals: games.filter((g) => g.kind === "arcade").length,
      favourites: Object.values(favs).filter(Boolean).length,
    }),
    [games, favs],
  );

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
        <div className="snap-row -mx-4 px-4 sm:mx-0 sm:px-0 sm:flex-wrap" role="tablist" aria-label="Filter games">
          {FILTERS.map((f) => (
            <button key={f.key} role="tab" aria-selected={filter === f.key} onClick={() => setFilter(f.key)} className={cn("tap inline-flex h-10 min-w-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-4 text-[13px] font-semibold transition-colors focus-ring", filter === f.key ? "border-accent/50 bg-accent-soft text-accent-2" : "border-line text-fg-3 hover:border-line-2 hover:text-fg")}>
              {f.key === "favourites" ? <Heart className={cn("h-3.5 w-3.5", filter === f.key && "fill-current")} /> : null}
              {f.label}
              <span className="tabular text-[11px] opacity-70">{counts[f.key]}</span>
            </button>
          ))}
        </div>
        <label className="relative block lg:w-72">
          <Search className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-fg-3" />
          <input type="search" value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search games, features…" aria-label="Search games" className="h-11 w-full rounded-full border border-line-2 bg-bg-1 pl-10 pr-10 text-[15px] placeholder:text-fg-4 focus-ring focus:border-accent/60" />
          {query ? (
            <button type="button" onClick={() => setQuery("")} className="absolute right-2 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center rounded-full text-fg-3 hover:bg-surface-2 hover:text-fg" aria-label="Clear search">
              <X className="h-4 w-4" />
            </button>
          ) : null}
        </label>
      </div>

      {filter === "favourites" && status !== "authenticated" ? (
        <Empty title="Sign in to keep favourites" description="Tap the heart on any game to pin it here. Favourites sync across your devices." icon={<Heart className="h-5 w-5" />} action={<Button href="/login?next=%2Fgames%3Ffilter%3Dfavourites">Sign in</Button>} />
      ) : list.length ? (
        <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, favorite: favs[g.slug] }} className="w-full sm:w-full" onFavoriteChange={(slug, fav) => setFavs((f) => ({ ...f, [slug]: fav }))} />
          ))}
        </div>
      ) : (
        <Empty
          title={filter === "favourites" ? "No favourites yet" : query ? `No games match “${query}”` : "Nothing here yet"}
          description={filter === "favourites" ? "Tap the heart on any game to pin it here." : query ? "Try a feature name like “cascades”, “jackpot” or “free spins”." : "New titles are being certified and will appear here soon."}
          icon={filter === "favourites" ? <Heart className="h-5 w-5" /> : <Search className="h-5 w-5" />}
          action={
            <Button
              variant="secondary"
              onClick={() => {
                setFilter("all");
                setQuery("");
              }}
            >
              Show all games
            </Button>
          }
        />
      )}
    </div>
  );
}