import type { Metadata } from "next";
import Link from "next/link";
import { Container } from "@/components/Container";
import { PageHero } from "@/components/layout/PageHero";
import { ProductCard } from "@/components/ui/ProductCard";
import { getNavCategories } from "@/lib/categories";
import { faDigits } from "@/lib/format";
import {
  catalogProductToCard,
  fetchCatalogProducts,
  fetchStoreItems,
  variantToProduct,
} from "@/lib/store";

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;

  const [storeResult, catalogResult, nav] = await Promise.all([
    fetchStoreItems({ page, pageSize: 20, categoryId, name }),
    fetchCatalogProducts({ page, pageSize: 20, categoryId, name }),
    getNavCategories(),
  ]);

  const fromStore = storeResult.items.map(variantToProduct);
  const products = fromStore.length ? fromStore : catalogResult.items.map(catalogProductToCard);
  const total = fromStore.length ? storeResult.total : catalogResult.total;
  const pageSize = fromStore.length ? storeResult.pageSize : catalogResult.pageSize;
  const pageCount = Math.max(1, Math.ceil((total || products.length) / (pageSize || 20)));
  const categoryTitle = nav
    .flatMap((item) => [item, ...item.children.map((child) => ({ ...child, children: [] as never[] }))])
    .find((item) => item.id === categoryId)?.title;
  const heroTitle = categoryTitle || (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>
          {total ? <p className="mb-6 text-[13px] text-muted">{faDigits(total)} کالا</p> : null}

          {products.length === 0 ? (
            <div className="rounded-2xl border border-line bg-white px-6 py-16 text-center">
              <p className="text-[15px] font-bold text-ink">محصولی برای نمایش وجود ندارد</p>
              <p className="mt-2 text-[13px] text-muted">به‌زودی موجودی فروشگاه از پنل Meshkee اینجا دیده می‌شود.</p>
            </div>
          ) : (
            <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
              {products.map((product) => (
                <ProductCard key={product.id} product={product} />
              ))}
            </div>
          )}

          {pageCount > 1 ? (
            <div className="mt-8 flex justify-center gap-2">
              {Array.from({ length: pageCount }, (_, index) => {
                const number = index + 1;
                const query = new URLSearchParams();
                if (categoryId) query.set("categoryId", categoryId);
                if (q) query.set("q", q);
                query.set("page", String(number));
                return (
                  <Link
                    key={number}
                    href={`/products?${query.toString()}`}
                    className={`grid size-10 place-items-center rounded-xl text-[13px] ${number === page ? "bg-brand text-white" : "border border-line bg-white text-ink"}`}
                  >
                    {faDigits(number)}
                  </Link>
                );
              })}
            </div>
          ) : null}
        </Container>
      </section>
    </>
  );
}