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

export const revalidate = 60;

export const metadata: Metadata = {
  title: "محصولات | داروخانه دکتر ارجمند",
};

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 [result, nav] = await Promise.all([
    fetchStoreItems({ page, pageSize: 20, categoryId, name: q && q.length > 2 ? q : undefined }),
    getNavCategories(),
  ]);
  const products = result.items.map(variantToProduct);
  const pageCount = Math.max(1, Math.ceil((result.total || products.length) / (result.pageSize || 20)));
  const categoryTitle = nav
    .flatMap((item) => [item, ...item.children.map((child) => ({ ...child, children: [] }))])
    .find((item) => item.id === categoryId)?.title;

  return (
    <section className="pt-8">
      <Container>
        <div className="mb-6">
          <p className="text-[13px] text-muted">
            <Link href="/" className="hover:text-primary">خانه</Link>
            <span className="mx-2">/</span>
            محصولات
          </p>
          <h1 className="mt-2 text-[22px] font-bold text-navy">
            {categoryTitle || (q ? `جستجو: ${q}` : "همه محصولات")}
          </h1>
          {result.total ? (
            <p className="mt-1 text-[13px] text-muted">{faDigits(result.total)} کالا</p>
          ) : null}
        </div>

        {products.length === 0 ? (
          <div className="rounded-2xl bg-white px-6 py-16 text-center">
            <p className="text-[15px] font-bold text-navy">محصولی برای نمایش وجود ندارد</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-primary text-white" : "bg-white text-navy"}`}
                >
                  {faDigits(number)}
                </Link>
              );
            })}
          </div>
        ) : null}
      </Container>
    </section>
  );
}