import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { getCurrentUser } from "@/lib/auth/dal";
import { prisma } from "@/lib/db";
import { listQuoteCategories, listQuotes, countQuotesByCategory } from "@/lib/quotes/queries";
import { QuotesBrowser } from "@/components/quotes/QuotesBrowser";
import { resolvePageMetadata } from "@/lib/seo/metadata";
import { Breadcrumbs } from "@/components/seo/Breadcrumbs";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ kategori: string }>;
}): Promise<Metadata> {
  const { kategori } = await params;
  const category = await prisma.quoteCategory.findUnique({ where: { slug: kategori } });

  if (!category) {
    return resolvePageMetadata("/sozler", {
      title: "Güzel Sözler",
      description: "Kategorilere ayrılmış güzel sözleri oku, beğendiğini sevdiğin bir üyeye gönder.",
    });
  }

  return resolvePageMetadata(`/sozler/${kategori}`, {
    title: `${category.name} — Güzel Sözler`,
    description: `${category.name} kategorisindeki en güzel sözleri oku, kopyala, sosyal medyada paylaş ya da sevdiğin bir üyeye gönder.`,
  });
}

export default async function QuoteCategoryPage({
  params,
}: {
  params: Promise<{ kategori: string }>;
}) {
  const { kategori } = await params;
  const category = await prisma.quoteCategory.findUnique({ where: { slug: kategori } });
  if (!category || !category.isActive) notFound();

  const viewer = await getCurrentUser();
  const [categories, quotes, countsByCategory] = await Promise.all([
    listQuoteCategories(),
    listQuotes(kategori, viewer?.id),
    countQuotesByCategory(),
  ]);

  return (
    <div className="relative overflow-hidden">
      <div className="pointer-events-none absolute -left-40 -top-20 h-[420px] w-[420px] rounded-full bg-[radial-gradient(circle,oklch(85%_0.07_335_/_.4),transparent_70%)]" />

      <div className="relative mx-auto max-w-6xl px-6 py-14">
        <Breadcrumbs
          items={[
            { name: "Ana Sayfa", path: "/" },
            { name: "Güzel Sözler", path: "/sozler" },
            { name: category.name, path: `/sozler/${category.slug}` },
          ]}
        />

        <div className="fade-up mb-10 text-center">
          <span className="mb-3 inline-block rounded-full bg-gradient-to-r from-accent to-accent-2 px-4 py-1.5 text-[12px] font-extrabold uppercase tracking-wide text-white">
            Güzel Sözler
          </span>
          <h1 className="text-[28px]">{category.name}</h1>
          <p className="mx-auto mt-2 max-w-md text-[13.5px] text-text-muted">
            {category.name} kategorisindeki en güzel sözler burada — beğendiğini kopyala, sosyal medyada paylaş ya da
            sevdiğin bir üyeye gönder.
          </p>
        </div>

        <QuotesBrowser
          categories={categories}
          countsByCategory={countsByCategory}
          activeCategorySlug={kategori}
          quotes={quotes}
          canSend={Boolean(viewer)}
          canLike={Boolean(viewer)}
        />
      </div>
    </div>
  );
}