import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft } from "lucide-react";
import { rawDb } from "@/lib/db/client";
import { listImages } from "@/lib/db/queries";
import { MasonryGrid } from "@/components/grid/MasonryGrid";
import { RegisterVisible } from "@/components/select/RegisterVisible";
import { FilterBar } from "@/components/grid/FilterBar";
import { resolveSort } from "@/lib/sortServer";
import { parseFilterCriteria, statusToFlags } from "@/lib/filters";

export const dynamic = "force-dynamic";

export default async function GenrePage({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string }>;
  searchParams: Promise<Record<string, string | string[] | undefined>>;
}) {
  const { slug } = await params;
  const sp = await searchParams;
  const sort = await resolveSort(typeof sp.sort === "string" ? sp.sort : undefined);
  const search = (typeof sp.q === "string" ? sp.q.trim() : "") || undefined;
  const criteria = parseFilterCriteria(sp);
  const g = rawDb.prepare(`SELECT id, name, slug FROM genres WHERE slug = ?`).get(decodeURIComponent(slug)) as { id: number; name: string; slug: string } | undefined;
  if (!g) notFound();
  const items = listImages({
    genreId: g.id,
    sort,
    search,
    ...statusToFlags(criteria.status),
    marks: criteria.marks,
    actressIds: criteria.ids.actresses,
    actressMode: criteria.mode.actresses,
    studioIds: criteria.ids.studios,
    seriesIds: criteria.ids.series,
    genreIds: criteria.ids.genres,
    genreMode: criteria.mode.genres,
    collectionIds: criteria.ids.collections,
    collectionMode: criteria.mode.collections,
    tagIds: criteria.ids.tags,
    tagMode: criteria.mode.tags,
    categoryIds: criteria.ids.categories,
    categoryMode: criteria.mode.categories,
  });

  return (
    <div className="max-w-[1600px] mx-auto px-6 py-6 fade-in">
      <Link href="/genres" className="inline-flex items-center gap-1 text-sm text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] mb-4">
        <ArrowLeft className="w-4 h-4" /> All genres
      </Link>
      <div className="mb-4">
        <h1 className="text-3xl font-semibold tracking-tight mb-1 text-[var(--color-cyan)]">#{g.name}</h1>
        <p className="text-[var(--color-fg-dim)]">{items.length} cover{items.length === 1 ? "" : "s"}</p>
      </div>
      <FilterBar current={{ kind: "genre", name: g.name }} criteria={criteria} sort={sort} />
      <RegisterVisible ids={items.map((i) => i.id)} />
      <MasonryGrid images={items} />
    </div>
  );
}