"use client";

import * as React from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Heart, Play, ChevronRight } from "lucide-react";
import type { GameCard as GameCardData } from "@spinza/shared";
import { api } from "@/lib/api";
import { toast, useSession } from "@/lib/store";
import { cn, VOLATILITY_BARS, VOLATILITY_LABEL } from "@/lib/utils";
import { Badge, Skeleton } from "@/components/ui";
import { GameArt } from "./game-art";

/* ------------------------------------------------------------- favourites */

function useFavorite(game: GameCardData, onChange?: (slug: string, fav: boolean) => void) {
  const status = useSession((s) => s.status);
  const router = useRouter();
  const [fav, setFav] = React.useState<boolean>(!!game.favorite);
  const [busy, setBusy] = React.useState(false);
  // Keep in sync when the parent re-renders with fresh server data (adjust-state-from-props pattern).
  const [seen, setSeen] = React.useState(!!game.favorite);
  if (!!game.favorite !== seen) {
    setSeen(!!game.favorite);
    setFav(!!game.favorite);
  }

  const toggle = async (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (status !== "authenticated") {
      router.push(`/login?next=${encodeURIComponent(window.location.pathname)}`);
      return;
    }
    if (busy) return;
    const next = !fav;
    setFav(next);
    onChange?.(game.slug, next);
    setBusy(true);
    try {
      const res = await api<{ favorite: boolean }>(`/api/games/${game.slug}/favorite`, { method: "POST" });
      setFav(res.favorite);
      onChange?.(game.slug, res.favorite);
    } catch (err) {
      setFav(!next);
      onChange?.(game.slug, !next);
      toast({ title: "Could not update favourites", description: err instanceof Error ? err.message : undefined, tone: "danger" });
    } finally {
      setBusy(false);
    }
  };
  return { fav, toggle };
}

function HeartButton({ fav, onClick, className }: { fav: boolean; onClick: (e: React.MouseEvent) => void; className?: string }) {
  return (
    <button type="button" onClick={onClick} aria-pressed={fav} aria-label={fav ? "Remove from favourites" : "Add to favourites"} className={cn("tap grid place-items-center rounded-full glass text-fg-2 transition-all hover:text-fg active:scale-90 focus-ring", fav && "text-[#ff5c7a]", className)}>
      <Heart className={cn("h-[18px] w-[18px] transition-transform", fav && "fill-current scale-110")} />
    </button>
  );
}

/* -------------------------------------------------------------- volatility */

export function VolatilityMeter({ volatility, className, showLabel = true }: { volatility: string; className?: string; showLabel?: boolean }) {
  const bars = VOLATILITY_BARS[volatility] ?? 2;
  return (
    <span className={cn("inline-flex items-center gap-1.5 text-[11px] font-medium text-fg-3", className)} title={`${VOLATILITY_LABEL[volatility] ?? volatility} volatility`}>
      <span className="flex items-end gap-[2px]" aria-hidden>
        {[1, 2, 3, 4].map((i) => (
          <span key={i} className={cn("w-[3px] rounded-[1px]", i <= bars ? "bg-accent" : "bg-fg-4/60")} style={{ height: 4 + i * 2 }} />
        ))}
      </span>
      {showLabel ? <span>{VOLATILITY_LABEL[volatility] ?? volatility}</span> : null}
    </span>
  );
}

/* ---------------------------------------------------------------- GameCard */

export interface GameCardProps {
  game: GameCardData;
  className?: string;
  onFavoriteChange?: (slug: string, fav: boolean) => void;
  priority?: boolean;
}

export function GameCard({ game, className, onFavoriteChange }: GameCardProps) {
  const { fav, toggle } = useFavorite(game, onFavoriteChange);
  return (
    <article className={cn("group relative flex w-[164px] flex-col sm:w-[200px]", className)}>
      <Link href={`/games/${game.slug}`} className="relative block overflow-hidden rounded-lg border border-line bg-bg-1 shadow-card transition-transform duration-300 ease-out-expo focus-ring group-hover:-translate-y-1 group-hover:border-line-2" aria-label={`Play ${game.name}`}>
        <div className="aspect-[3/4]">
          <GameArt slug={game.slug} name={game.name} palette={game.palette} variant="card" />
        </div>
        <div className="absolute inset-x-2 top-2 flex items-start justify-between gap-2">
          <div className="flex flex-wrap gap-1">
            {game.isNew ? <Badge tone="new">New</Badge> : null}
            {game.isJackpot ? <Badge tone="accent">Jackpot</Badge> : null}
          </div>
        </div>
        <div className="pointer-events-none absolute inset-0 hidden items-center justify-center bg-black/35 opacity-0 transition-opacity duration-300 group-hover:opacity-100 sm:flex">
          <span className="grid h-14 w-14 place-items-center rounded-full bg-fg text-bg shadow-glow">
            <Play className="ml-0.5 h-6 w-6 fill-current" />
          </span>
        </div>
      </Link>
      <HeartButton fav={fav} onClick={toggle} className="absolute right-2 top-2 h-9 w-9 min-h-0 min-w-0" />
      <div className="mt-2.5 flex items-start justify-between gap-2 px-0.5">
        <div className="min-w-0">
          <Link href={`/games/${game.slug}`} className="block truncate text-[15px] font-semibold tracking-tight hover:text-accent-2">
            {game.name}
          </Link>
          <p className="truncate text-[12px] text-fg-3">{game.tagline}</p>
        </div>
      </div>
      <div className="mt-1.5 flex items-center justify-between px-0.5">
        <VolatilityMeter volatility={game.volatility} />
        <Link href={`/games/${game.slug}`} className="tap -mr-2 inline-flex h-9 min-h-0 items-center gap-1 rounded-sm px-2 text-[13px] font-semibold text-fg-2 hover:text-fg focus-ring">
          Play <Play className="h-3.5 w-3.5 fill-current" />
        </Link>
      </div>
    </article>
  );
}

export function GameCardSkeleton({ className }: { className?: string }) {
  return (
    <div className={cn("w-[164px] sm:w-[200px]", className)} aria-hidden>
      <Skeleton className="aspect-[3/4] w-full rounded-lg" />
      <Skeleton className="mt-3 h-4 w-3/4" />
      <Skeleton className="mt-2 h-3 w-1/2" />
    </div>
  );
}

/* ----------------------------------------------------------------- GameRow */

export function GameRow({ title, eyebrow, games, href, className, id }: { title: string; eyebrow?: string; games: GameCardData[]; href?: string; className?: string; id?: string }) {
  if (!games.length) return null;
  return (
    <section className={cn("relative", className)} id={id} aria-labelledby={id ? `${id}-title` : undefined}>
      <div className="mb-3 flex items-end justify-between gap-4">
        <div>
          {eyebrow ? <div className="eyebrow mb-1">{eyebrow}</div> : null}
          <h2 id={id ? `${id}-title` : undefined} className="text-xl font-semibold tracking-tight sm:text-2xl">
            {title}
          </h2>
        </div>
        {href ? (
          <Link href={href} className="tap inline-flex h-9 min-h-0 items-center gap-0.5 text-sm font-medium text-fg-3 hover:text-fg">
            See all <ChevronRight className="h-4 w-4" />
          </Link>
        ) : null}
      </div>
      <div className="snap-row -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
        {games.map((g) => (
          <GameCard key={g.slug} game={g} />
        ))}
      </div>
    </section>
  );
}

/* ---------------------------------------------------------------- GameTile */

/** Compact row tile for dense lists (continue playing, search results). */
export function GameTile({ game, meta, className, onFavoriteChange }: { game: GameCardData; meta?: React.ReactNode; className?: string; onFavoriteChange?: (slug: string, fav: boolean) => void }) {
  const { fav, toggle } = useFavorite(game, onFavoriteChange);
  return (
    <div className={cn("surface relative flex items-center gap-3 rounded-md p-2 pr-3 transition-colors hover:bg-surface-2", className)}>
      <Link href={`/games/${game.slug}`} className="flex min-w-0 flex-1 items-center gap-3 focus-ring rounded-sm" aria-label={`Play ${game.name}`}>
        <div className="h-14 w-14 shrink-0 overflow-hidden rounded-sm border border-line">
          <GameArt slug={game.slug} name={game.name} palette={game.palette} variant="tile" showName={false} />
        </div>
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2">
            <span className="truncate text-[15px] font-semibold tracking-tight">{game.name}</span>
            {game.isNew ? <Badge tone="new">New</Badge> : null}
            {game.isJackpot ? <Badge tone="accent">Jackpot</Badge> : null}
          </div>
          <div className="mt-0.5 flex items-center gap-2 text-[12px] text-fg-3">
            <VolatilityMeter volatility={game.volatility} />
            {meta ? <span className="truncate">· {meta}</span> : null}
          </div>
        </div>
      </Link>
      <HeartButton fav={fav} onClick={toggle} className="h-10 w-10 min-h-0 min-w-0" />
      <Link href={`/games/${game.slug}`} className="tap grid h-10 w-10 min-h-0 min-w-0 place-items-center rounded-full bg-fg text-bg focus-ring" aria-label={`Play ${game.name}`}>
        <Play className="ml-0.5 h-4 w-4 fill-current" />
      </Link>
    </div>
  );
}