manoon-headless/src/app/[locale]/products/page.tsx

import { getProducts, filterOutBundles } from "@/lib/saleor";
import { getTranslations, setRequestLocale } from "next-intl/server";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import ProductCard from "@/components/product/ProductCard";
import { ChevronDown } from "lucide-react";
import { getPageMetadata } from "@/lib/i18n/pageMetadata";
import { isValidLocale, DEFAULT_LOCALE, getSaleorLocale, type Locale } from "@/lib/i18n/locales";
import { getPageKeywords } from "@/lib/seo/keywords";
import { Metadata } from "next";

const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://manoonoils.com";

interface ProductsPageProps {
  params: Promise<{ locale: string }>;
}

export async function generateMetadata({ params }: ProductsPageProps): Promise<Metadata> {
  const { locale } = await params;
  const validLocale = isValidLocale(locale) ? locale : DEFAULT_LOCALE;
  const metadata = getPageMetadata(validLocale as Locale);
  const keywords = getPageKeywords(validLocale as Locale, 'products');
  
  // Build canonical URL
  const localePrefix = validLocale === DEFAULT_LOCALE ? "" : `/${validLocale}`;
  const canonicalUrl = `${baseUrl}${localePrefix}/products`;
  
  return {
    title: metadata.products.title,
    description: metadata.products.description,
    keywords: [...keywords.primary, ...keywords.secondary].join(', '),
    alternates: {
      canonical: canonicalUrl,
    },
    openGraph: {
      title: metadata.products.title,
      description: metadata.products.description,
      type: 'website',
      url: canonicalUrl,
      images: [{
        url: `${baseUrl}/og-image.jpg`,
        width: 1200,
        height: 630,
        alt: metadata.products.title,
      }],
      locale: validLocale,
    },
  };
}

export default async function ProductsPage({ params }: ProductsPageProps) {
  const { locale } = await params;
  const validLocale = isValidLocale(locale) ? locale : DEFAULT_LOCALE;
  setRequestLocale(validLocale);
  const t = await getTranslations("Products");
  const saleorLocale = getSaleorLocale(validLocale as Locale);
  const allProducts = await getProducts(saleorLocale);
  
  const products = filterOutBundles(allProducts);

  return (
    <>
      <Header locale={locale} />

      <main className="min-h-screen bg-white">
        <div className="pt-[72px] lg:pt-[72px]">
          <div className="border-b border-[#e5e5e5]">
            <div className="container py-8 md:py-12">
              <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
                <div>
                  <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-2 block">
                    {t("collection")}
                  </span>
                  <h1 className="text-3xl md:text-4xl font-medium">
                    {t("allProducts")}
                  </h1>
                </div>

                <div className="flex items-center gap-3">
                  <span className="text-sm text-[#666666]">
                    {t("productsCount", { count: products.length })}
                  </span>
                  <div className="relative">
                    <select
                      className="appearance-none bg-transparent border border-[#e5e5e5] pl-4 pr-10 py-2 text-sm focus:outline-none focus:border-black cursor-pointer"
                      defaultValue="featured"
                    >
                      <option value="featured">{t("featured")}</option>
                      <option value="newest">{t("newest")}</option>
                      <option value="price-low">{t("priceLow")}</option>
                      <option value="price-high">{t("priceHigh")}</option>
                    </select>
                    <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none text-[#666666]" />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <section className="py-12 md:py-16">
            <div className="container">
              {products.length === 0 ? (
                <div className="text-center py-20">
                  <p className="text-[#666666] mb-4">
                    {t("noProducts")}
                  </p>
                  <p className="text-sm text-[#999999]">
                    {t("checkBack")}
                  </p>
                </div>
              ) : (
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
                  {products.map((product, index) => (
                    <ProductCard
                      key={product.id}
                      product={product}
                      index={index}
                      locale={validLocale}
                    />
                  ))}
                </div>
              )}
            </div>
          </section>
        </div>
      </main>

      <div className="pt-16">
        <Footer locale={locale} />
      </div>
    </>
  );
}