import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import { ProductCard } from "@/components/store/product-card";
import { EmptyState, SectionHeading } from "@/components/ui/section";
import { JsonLd } from "@/components/seo/json-ld";
import { breadcrumbJsonLd, buildMetadata } from "@/lib/seo";
import { categoryService, productService } from "@/services/catalog.service";

export const dynamic = "force-dynamic";

type Params = Promise<{ slug: string }>;
type SearchParams = Promise<Record<string, string | string[] | undefined>>;

export async function generateMetadata({ params }: { params: Params }) {
  const { slug } = await params;
  const category = await categoryService.getBySlug(slug);
  if (!category) return buildMetadata({ title: "Kategori tidak ditemukan", path: `/category/${slug}`, noIndex: true });
  return buildMetadata({
    title: category.metaTitle || category.name,
    description: category.metaDescription || category.description,
    path: `/category/${category.slug}`,
  });
}

export default async function CategoryPage({
  params,
  searchParams,
}: {
  params: Params;
  searchParams: SearchParams;
}) {
  const { slug } = await params;
  const sp = await searchParams;
  const page = Number(Array.isArray(sp.page) ? sp.page[0] : sp.page || 1);

  const category = await categoryService.getBySlug(slug);
  if (!category || !category.isActive) notFound();

  const products = await productService.listPublic({
    category: category.slug,
    page: Number.isFinite(page) && page > 0 ? page : 1,
    limit: 12,
    sort: "popular",
  });

  return (
    <div className="container-shell pt-28 pb-16">
      <JsonLd
        data={breadcrumbJsonLd([
          { name: "Beranda", path: "/" },
          { name: category.name, path: `/category/${category.slug}` },
        ])}
      />

      {category.banner ? (
        <div className="relative mb-10 aspect-[21/7] overflow-hidden rounded-[1.75rem] border border-border">
          <Image src={category.banner} alt={category.name} fill className="object-cover" sizes="100vw" priority />
          <div className="absolute inset-0 bg-gradient-to-t from-bg via-bg/40 to-transparent" />
        </div>
      ) : null}

      <SectionHeading
        eyebrow="Kategori"
        title={category.name}
        description={category.description || `${products.total} produk dalam kategori ini.`}
      />

      {category.children?.length ? (
        <div className="mt-8 flex flex-wrap gap-2">
          {category.children.map((child) => (
            <Link
              key={child.id}
              href={`/category/${child.slug}`}
              className="rounded-full border border-border bg-surface px-4 py-2 text-sm text-muted transition hover:border-accent/40 hover:text-text"
            >
              {child.name}
            </Link>
          ))}
        </div>
      ) : null}

      <div className="mt-10">
        {products.items.length ? (
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {products.items.map((product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        ) : (
          <EmptyState title="Belum ada produk" description="Produk untuk kategori ini akan segera tersedia." />
        )}
      </div>

      {products.totalPages > 1 ? (
        <div className="mt-10 flex justify-center gap-2">
          {Array.from({ length: products.totalPages }).map((_, i) => {
            const p = i + 1;
            return (
              <Link
                key={p}
                href={`/category/${category.slug}?page=${p}`}
                className={`inline-flex h-10 min-w-10 items-center justify-center rounded-xl border px-3 text-sm font-semibold ${
                  p === products.page
                    ? "border-accent bg-accent text-black"
                    : "border-border bg-surface text-muted"
                }`}
              >
                {p}
              </Link>
            );
          })}
        </div>
      ) : null}
    </div>
  );
}