import routeFactory from '@/assets/constants/routeFactory';
import images from '@/assets/images/images';
import Breadcrumb from '@/components/layout/breadcrumb';
import { IBreadcrumbItem } from '@/components/layout/breadcrumb/breadcrumb';
import InnerPageBanner from '@/components/layout/innerPages/banner';
import ProductCategoryCardInProducts from '@/components/pages/productCategories/ProductCategoryCardInProducts';
import ProductList from '@/components/pages/products/productList';
import { IPageParams } from '@/models/layout';
import { getProductCategoryById, getProducts } from '@/services/products';
import { getTranslations, setRequestLocale } from 'next-intl/server';

interface IParams {
  product_category_id: string;
}

export async function generateMetadata({
  params,
}: {
  params: IPageParams<IParams>;
}) {
  const { locale, product_category_id: productCategoryId } = await params;
  setRequestLocale(locale);
  const t = await getTranslations({ locale });

  const productCategory = await getProductCategoryById(productCategoryId);

  return {
    title: productCategory?.meta_title || t('page_products_metadata_title'),
    description:
      productCategory?.meta_description ||
      t('page_products_metadata_description'),
    keywords:
      productCategory?.meta_keywords || t('page_products_metadata_keywords'),
    alternates: {
      canonical: `https://your-domain.com/${locale}/products/${productCategory?.slug || productCategoryId}`,
    },
    openGraph: {
      title: productCategory?.meta_title || t('page_products_metadata_title'),
      description:
        productCategory?.meta_description ||
        t('page_products_metadata_description'),
      url: `https://your-domain.com/${locale}/products/${productCategory?.slug || productCategoryId}`,
      type: 'website',
    },
  };
}

export default async function ProductPage({
  params,
}: {
  params: IPageParams<IParams>;
}) {
  const { product_category_id: productCategoryId, locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations({ locale });
  const routes = routeFactory(t, locale);

  const productCategory = await getProductCategoryById(productCategoryId);
  const products = await getProducts(productCategoryId);

  const breadcrumbItems = [
    {
      ...routes.productCategories,
      href: routes.productCategories.route(),
    },
    { title: productCategory?.title || t('page_products_default_category') },
  ] as IBreadcrumbItem[];

  return (
    <main className="">
      <InnerPageBanner
        title={productCategory?.title || t('page_products_default_title')}
        imageSrc={images.homeProductBack.src}
      />
      <div className="container-fluid mx-auto my-12 md:my-24">
        <Breadcrumb items={breadcrumbItems} />
        <ProductCategoryCardInProducts
          productCategory={productCategory}
          className="mt-6"
        />
        <div id="productList" className="mt-20">
          <h2 className="mb-6 text-3xl font-semibold text-gray-500">
            {productCategory.title} Products
          </h2>
          <ProductList
            initialProducts={products.data}
            initialPagination={products.pagination}
            categoryId={productCategoryId}
          />
        </div>
      </div>
    </main>
  );
}
