import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { GameCard, GameGrid, GameThumb } from "@/components/game/GameCard";
import { FavoriteButton } from "@/components/game/FavoriteButton";
import { JsonLd } from "@/components/seo/JsonLd";
import { Button } from "@/components/ui/Button";
import { SectionHeading } from "@/components/ui/Section";
import { db } from "@/lib/db";
import { getGameBySlug, getRelatedGames } from "@/lib/games";
import { breadcrumbJsonLd, videoGameJsonLd } from "@/lib/seo";

interface GameDetailPageProps {
  params: Promise<{ slug: string }>;
}

export async function generateStaticParams() {
  const games = await db.game.findMany({
    where: { status: "published" },
    select: { slug: true },
  });
  return games.map((g) => ({ slug: g.slug }));
}

export async function generateMetadata({
  params,
}: GameDetailPageProps): Promise<Metadata> {
  const { slug } = await params;
  const game = await getGameBySlug(slug);
  if (!game) return { title: "Game not found" };
  return {
    title: game.title,
    description: game.description,
    alternates: { canonical: `/games/${game.slug}` },
    openGraph: {
      title: `${game.title} · PixelArcade`,
      description: game.description,
    },
  };
}

/**
 * Game detail: artwork, title, description, category, developer/publisher,
 * game information, controls/how-to-play, official play link, related games.
 * (In-site player with embed allowlist arrives in Phase 3.)
 */
export default async function GameDetailPage({ params }: GameDetailPageProps) {
  const { slug } = await params;
  const game = await getGameBySlug(slug);
  if (!game) notFound();

  const related = await getRelatedGames(game);

  return (
    <div className="shell py-10">
      <JsonLd
        data={videoGameJsonLd({
          title: game.title,
          description: game.description,
          slug: game.slug,
          categoryName: game.categoryName,
          developer: game.developer,
        })}
      />
      <JsonLd
        data={breadcrumbJsonLd([
          { name: "Home", path: "/" },
          { name: "All Games", path: "/games" },
          { name: game.categoryName, path: `/category/${game.categorySlug}` },
          { name: game.title, path: `/games/${game.slug}` },
        ])}
      />
      <nav aria-label="Breadcrumb" className="mb-6 text-sm text-slate-400">
        <Link href="/games" className="hover:text-white">
          All Games
        </Link>
        <span aria-hidden="true" className="mx-2">
          /
        </span>
        <Link
          href={`/category/${game.categorySlug}`}
          className="hover:text-white"
        >
          {game.categoryName}
        </Link>
        <span aria-hidden="true" className="mx-2">
          /
        </span>
        <span aria-current="page" className="text-slate-200">
          {game.title}
        </span>
      </nav>

      <div className="grid gap-8 lg:grid-cols-5">
        {/* Artwork */}
        <div className="lg:col-span-3">
          <div className="overflow-hidden rounded-2xl border border-slate-800">
            <GameThumb title={game.title} thumbnail={game.thumbnail} className="aspect-[16/9]" eager />
          </div>
        </div>

        {/* Summary + actions */}
        <div className="lg:col-span-2">
          <div className="flex flex-wrap items-center gap-2">
            <Link
              href={`/category/${game.categorySlug}`}
              className="rounded-full bg-slate-800 px-3 py-1 text-xs font-medium text-slate-200 hover:bg-slate-700"
            >
              {game.categoryName}
            </Link>
            {game.trending ? (
              <span className="rounded-full bg-brand-600/20 px-3 py-1 text-xs font-semibold text-brand-300">
                Trending
              </span>
            ) : null}
          </div>
          <h1 className="mt-3 text-3xl font-bold tracking-tight text-white sm:text-4xl">
            {game.title}
          </h1>
          {(game.developer ?? game.publisher) ? (
            <p className="mt-2 text-sm text-slate-400">
              {game.developer ? `by ${game.developer}` : null}
              {game.developer && game.publisher ? " · " : null}
              {game.publisher ? `published by ${game.publisher}` : null}
            </p>
          ) : null}
          <p className="mt-4 leading-relaxed text-slate-300">
            {game.description}
          </p>

          <div className="mt-6 flex flex-wrap gap-3">
            <Button href={`/games/${game.slug}/play`} size="lg">
              ▶ Play Now
            </Button>
            <FavoriteButton slug={game.slug} title={game.title} variant="full" />
          </div>
          <p className="mt-2 text-xs text-slate-500">
            Favorites are saved in this browser — no account needed.
          </p>
          <p className="mt-3 text-xs text-slate-500">
            Opens the in-site player when the publisher permits embedding;
            otherwise it hands off to the official source
            {game.sourceDomain ? ` (${game.sourceDomain})` : ""}.
          </p>
        </div>
      </div>

      {/* Information + how to play */}
      <div className="mt-10 grid gap-6 md:grid-cols-2">
        <section
          aria-labelledby="game-info"
          className="rounded-2xl border border-slate-800 bg-slate-900 p-6"
        >
          <h2 id="game-info" className="text-lg font-semibold text-white">
            Game information
          </h2>
          <dl className="mt-4 space-y-3 text-sm">
            <div className="flex justify-between gap-4">
              <dt className="text-slate-500">Category</dt>
              <dd>
                <Link
                  href={`/category/${game.categorySlug}`}
                  className="text-slate-200 hover:text-white"
                >
                  {game.categoryName}
                </Link>
              </dd>
            </div>
            <div className="flex justify-between gap-4">
              <dt className="text-slate-500">Developer</dt>
              <dd className="text-slate-200">{game.developer ?? "—"}</dd>
            </div>
            <div className="flex justify-between gap-4">
              <dt className="text-slate-500">Publisher</dt>
              <dd className="text-slate-200">{game.publisher ?? "—"}</dd>
            </div>
            <div className="flex justify-between gap-4">
              <dt className="text-slate-500">Official source</dt>
              <dd className="text-slate-200">
                {game.sourceDomain || "—"}
              </dd>
            </div>
            <div className="flex justify-between gap-4">
              <dt className="text-slate-500">In-site play</dt>
              <dd className="text-slate-200">
                {game.embedAllowed
                  ? "Available in player"
                  : "Official site only"}
              </dd>
            </div>
          </dl>
        </section>
        <section
          aria-labelledby="how-to-play"
          className="rounded-2xl border border-slate-800 bg-slate-900 p-6"
        >
          <h2 id="how-to-play" className="text-lg font-semibold text-white">
            How to play
          </h2>
          {game.instructions ? (
            <p className="mt-4 text-sm leading-relaxed text-slate-300">
              {game.instructions}
            </p>
          ) : null}
          {game.controls ? (
            <>
              <h3 className="mt-5 text-sm font-semibold tracking-wider text-slate-400 uppercase">
                Controls
              </h3>
              <p className="mt-2 text-sm leading-relaxed text-slate-300">
                {game.controls}
              </p>
            </>
          ) : null}
        </section>
      </div>

      <div className="mt-6 flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-slate-800 bg-slate-900/50 px-5 py-4">
        <p className="text-sm text-slate-400">
          {game.title} belongs to{" "}
          <span className="text-slate-200">
            {game.developer ?? game.publisher ?? "its creators"}
          </span>
          . Something wrong with this listing?
        </p>
        <Button href="/about#report" variant="secondary" size="sm">
          Report a Problem
        </Button>
      </div>

      {/* Related */}
      {related.length > 0 ? (
        <div className="mt-12">
          <SectionHeading
            eyebrow="Keep exploring"
            title="Related Games"
            actionHref="/games"
            actionLabel="All games"
          />
          <GameGrid>
            {related.map((g) => (
              <GameCard key={g.slug} game={g} />
            ))}
          </GameGrid>
        </div>
      ) : null}
    </div>
  );
}