import type { Metadata } from "next";
import { redirect } from "next/navigation";
import { Container } from "@/components/Container";
import { PageHero } from "@/components/layout/PageHero";
import { ProductsListing } from "@/components/products/ProductsListing";
import { categoryHref, fetchCategoryById } from "@/lib/categories";
import { loadCategoryProducts } from "@/lib/products-list";

export const revalidate = 60;

export const metadata: Metadata = {
  title: "محصولات",
  description: "قطعات و لوازم خانگی فروشگاه برادران برقعی",
};

export default async function ProductsPage({
  searchParams,
}: {
  searchParams: Promise<{ page?: string; categoryId?: string; q?: string }>;
}) {
  const params = await searchParams;
  const page = Math.max(1, Number(params.page) || 1);
  const categoryId = params.categoryId;
  const q = params.q?.trim();
  const name = q && q.length > 2 ? q : undefined;

  // Legacy ?categoryId= → canonical /products/category/{id}/{slug}
  if (categoryId) {
    const category = await fetchCategoryById(categoryId);
    if (category) {
      const href = categoryHref(category);
      const query = new URLSearchParams();
      if (page > 1) query.set("page", String(page));
      if (q) query.set("q", q);
      const qs = query.toString();
      redirect(qs ? `${href}?${qs}` : href);
    }
  }

  const { products, total, pageCount } = await loadCategoryProducts({ page, pageSize: 20, name });
  const heroTitle = q ? `جستجو: ${q}` : "محصولات";

  return (
    <>
      <PageHero
        kicker="Products"
        title={heroTitle}
        image="/images/lifestyle/franco-debartolo-AXC2vD7y_ho-unsplash.jpg"
      />
      <section className="py-10 sm:py-14">
        <Container>
          <ProductsListing
            products={products}
            total={total}
            page={page}
            pageCount={pageCount}
            pageHref={(number) => {
              const query = new URLSearchParams();
              if (q) query.set("q", q);
              if (number > 1) query.set("page", String(number));
              const qs = query.toString();
              return qs ? `/products?${qs}` : "/products";
            }}
          />
        </Container>
      </section>
    </>
  );
}