import type { Metadata } from "next";
import Link from "next/link";

import { getMovieGenres, getTvGenres } from "@/services/tmdb/discover";
import type { TmdbGenre } from "@/services/tmdb/types";

export const metadata: Metadata = {
  title: "Genres",
  description:
    "Browse every FlixTV genre — action, comedy, drama, sci-fi, anime and more, for both movies and TV.",
  alternates: { canonical: "/genres" },
};

/**
 * /genres
 *
 * A directory rather than a grid: each tile is a link into the filtered
 * catalogue, so the page stays scannable even with ~40 genres.
 */
export default async function GenresPage() {
  const [movieGenres, tvGenres] = await Promise.all([getMovieGenres(), getTvGenres()]);

  return (
    <main className="pb-24">
      <header className="relative overflow-hidden border-b border-line pb-10 pt-10 md:pb-14 md:pt-14">
        <div aria-hidden className="pointer-events-none absolute inset-0 -z-10">
          <div className="absolute -top-48 left-1/4 h-[420px] w-[560px] rounded-full bg-brand-600/16 blur-[140px]" />
          <div className="absolute inset-0 bg-linear-to-b from-brand-900/12 to-transparent" />
        </div>
        <div className="mx-auto w-full max-w-[1600px] px-4 sm:px-6 lg:px-10">
          <h1 className="font-display text-4xl font-extrabold tracking-[-0.03em] text-ink md:text-5xl">
            Genres
          </h1>
          <p className="mt-3 max-w-2xl text-[15px] leading-relaxed text-ink-muted">
            Pick a mood and dive in. Every genre opens a filterable, paginated catalogue.
          </p>
        </div>
      </header>

      <section className="mx-auto w-full max-w-[1600px] px-4 py-10 sm:px-6 lg:px-10">
        <h2 className="mb-5 font-display text-xl font-bold tracking-[-0.02em] text-ink">
          Movie genres
        </h2>
        <GenreTiles genres={movieGenres} basePath="/genres/movie" />
      </section>

      <section className="mx-auto w-full max-w-[1600px] px-4 pb-10 sm:px-6 lg:px-10">
        <h2 className="mb-5 font-display text-xl font-bold tracking-[-0.02em] text-ink">
          TV genres
        </h2>
        <GenreTiles genres={tvGenres} basePath="/genres/tv" />
      </section>
    </main>
  );
}

function GenreTiles({ genres, basePath }: { genres: TmdbGenre[]; basePath: string }) {
  if (genres.length === 0) {
    return <p className="text-sm text-ink-muted">Genres are unavailable right now.</p>;
  }

  return (
    <ul className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
      {genres.map((genre) => (
        <li key={genre.id}>
          <Link
            href={`${basePath}/${genre.id}`}
            className="group relative flex min-h-24 items-end overflow-hidden rounded-lg border border-line bg-surface-2/60 p-4 transition-colors duration-300 hover:border-white/25 hover:bg-surface-3/60"
          >
            <span
              aria-hidden
              className="pointer-events-none absolute -right-6 -bottom-8 text-[110px] leading-none font-extrabold text-white/[0.035] transition-transform duration-500 group-hover:scale-110"
            >
              {genre.name.charAt(0)}
            </span>
            <span className="relative text-[15px] font-bold text-ink">{genre.name}</span>
          </Link>
        </li>
      ))}
    </ul>
  );
}