import type { Metadata } from "next";
import Link from "next/link";
import { ArrowLeft, ArrowRight, Search } from "lucide-react";
import { ApiProductCard } from "@/components/api-product-card";
import { PageHero } from "@/components/sections";
import {
  getCategories,
  getCategoryById,
  getProducts,
  productCategoryUrl,
} from "@/lib/meshkee";

type ProductsSearchParams = {
  page?: string;
  q?: string;
  category?: string;
};

export async function generateMetadata({
  searchParams,
}: {
  searchParams: Promise<ProductsSearchParams>;
}): Promise<Metadata> {
  const params = await searchParams;
  const page = Math.max(1, Number.parseInt(params.page || "1", 10) || 1);
  const q = (params.q || "").trim();
  const categoryId = (params.category || "").trim();
  const baseDescription =
    "مشاهده محصولات آینه هوشمند، ضد بخار و آرایشی گلسموند با تصاویر، مشخصات و جزئیات کامل.";

  if (q || categoryId) {
    const category = categoryId
      ? await getCategoryById(categoryId).then((data) => data.category).catch(() => null)
      : null;
    const label = q
      ? `نتایج جست‌وجوی «${q}»`
      : `محصولات ${category?.nameFa || category?.name || "دسته‌بندی انتخاب‌شده"}`;
    const canonical = category && !q ? productCategoryUrl(category) : "/products";

    return {
      title: label,
      description: `${label} در مجموعه محصولات آینه هوشمند گلسموند.`,
      alternates: { canonical },
      robots: { index: false, follow: true },
    };
  }

  const canonical = page > 1 ? `/products?page=${page}` : "/products";
  const title = page > 1 ? `محصولات آینه هوشمند – صفحه ${page}` : "محصولات آینه هوشمند";

  return {
    title,
    description: page > 1 ? `${baseDescription} صفحه ${page}.` : baseDescription,
    alternates: { canonical },
    openGraph: {
      title: "محصولات آینه هوشمند گلسموند",
      description: "مجموعه آینه‌های هوشمند، ضد بخار و آرایشی گلسموند را مشاهده کنید.",
      url: canonical,
      images: ["/images/hero.jpg"],
    },
  };
}

function pageHref(page: number, q: string, category: string) {
  const query = new URLSearchParams();
  if (page > 1) query.set("page", String(page));
  if (q) query.set("q", q);
  if (category) query.set("category", category);
  const value = query.toString();
  return value ? `/products?${value}` : "/products";
}

export default async function ProductsPage({
  searchParams,
}: {
  searchParams: Promise<ProductsSearchParams>;
}) {
  const params = await searchParams;
  const page = Math.max(1, Number.parseInt(params.page || "1", 10) || 1);
  const q = (params.q || "").trim();
  const category = (params.category || "").trim();

  const [products, categories] = await Promise.all([
    getProducts({ page, pageSize: 12, name: q, categoryId: category }).catch(() => ({
      items: [],
      total: 0,
      page,
      pageSize: 12,
    })),
    getCategories("product").catch(() => ({ items: [] })),
  ]);

  const totalPages = Math.max(1, Math.ceil(products.total / products.pageSize));

  return (
    <>
      <PageHero englishTitle="PRODUCTS" title="محصولات گلسموند" />

      <section className="catalog-section">
        <div className="container">
          <form className="catalog-filters" action="/products" method="get">
            <label>
              <span>جست‌وجوی محصول</span>
              <div>
                <input
                  type="search"
                  name="q"
                  defaultValue={q}
                  placeholder="نام محصول را وارد کنید..."
                />
                <Search />
              </div>
            </label>
            <label>
              <span>دسته‌بندی</span>
              <select name="category" defaultValue={category}>
                <option value="">همه محصولات</option>
                {categories.items.map((item) => (
                  <option key={item.id} value={item.id}>{item.nameFa || item.name}</option>
                ))}
              </select>
            </label>
            <button className="primary-button" type="submit">اعمال فیلتر</button>
          </form>

          <div className="catalog-summary">
            <p><strong>{products.total.toLocaleString("fa-IR")}</strong> محصول</p>
            {(q || category) && <Link href="/products">حذف فیلترها</Link>}
          </div>

          {products.items.length > 0 ? (
            <div className="catalog-grid">
              {products.items.map((product) => (
                <ApiProductCard key={product.id} product={product} />
              ))}
            </div>
          ) : (
            <div className="empty-state">
              <h2>محصولی پیدا نشد</h2>
              <p>عبارت جست‌وجو یا دسته‌بندی را تغییر دهید.</p>
            </div>
          )}

          {totalPages > 1 && (
            <nav className="pagination" aria-label="صفحه‌بندی محصولات">
              {page > 1 && (
                <Link href={pageHref(page - 1, q, category)}>
                  <ArrowRight />
                  قبلی
                </Link>
              )}
              <span>صفحه {page.toLocaleString("fa-IR")} از {totalPages.toLocaleString("fa-IR")}</span>
              {page < totalPages && (
                <Link href={pageHref(page + 1, q, category)}>
                  بعدی
                  <ArrowLeft />
                </Link>
              )}
            </nav>
          )}
        </div>
      </section>
    </>
  );
}