arjmand-pharmacy/app/products/[id]/page.tsx

import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Container } from "@/components/Container";
import { AddToCart } from "@/components/product/AddToCart";
import { ProductGallery } from "@/components/product/ProductGallery";
import { ProductTabs } from "@/components/product/ProductTabs";
import { fetchComments } from "@/lib/comments";
import { formatPrice } from "@/lib/format";
import {
  brandName,
  fetchCatalogProductByTitle,
  fetchStoreItemByProduct,
  fetchStoreVariant,
  galleryUrls,
  variantTitle,
} from "@/lib/store";

export const revalidate = 60;

export async function generateMetadata({
  params,
}: {
  params: Promise<{ id: string }>;
}): Promise<Metadata> {
  const { id } = await params;
  const variant = await fetchStoreVariant(id);
  return {
    title: variant ? `${variantTitle(variant)} | داروخانه دکتر ارجمند` : "محصول",
  };
}

export default async function ProductDetailsPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const variant = await fetchStoreVariant(id);
  if (!variant) notFound();

  const [catalog, storeItem, comments] = await Promise.all([
    fetchCatalogProductByTitle(variant.productNameFa || variant.productTitle, variant.productId),
    variant.productId ? fetchStoreItemByProduct(variant.productId) : Promise.resolve({ storeItem: undefined }),
    variant.productId
      ? fetchComments("product", variant.productId)
      : Promise.resolve([]),
  ]);

  const images = galleryUrls(catalog, variant.productImage);
  const price = variant.discountedPrice ?? variant.price;
  const oldPrice = variant.discountedPrice != null ? variant.price : null;
  const title = catalog?.nameFa || variantTitle(variant);
  const brand = brandName(catalog);
  const variants = storeItem.storeItem?.variants ?? [];
  const inStock = variant.stockQuantity == null || variant.stockQuantity > 0;

  return (
    <section className="pt-8">
      <Container>
        <p className="text-[13px] text-muted">
          <Link href="/" className="hover:text-primary">خانه</Link>
          <span className="mx-2">/</span>
          <Link href="/products" className="hover:text-primary">محصولات</Link>
          <span className="mx-2">/</span>
          {title}
        </p>

        <div className="mt-5 grid gap-8 lg:grid-cols-[0.9fr_1.1fr]">
          <ProductGallery images={images} alt={title} />
          <div>
            {brand ? <p className="text-[13px] font-medium text-primary">{brand}</p> : null}
            <h1 className="mt-2 text-[22px] font-bold leading-9 text-navy">{title}</h1>
            {variant.label && variant.label !== title ? (
              <p className="mt-2 text-[13px] text-muted">{variant.label}</p>
            ) : null}

            <div className="mt-5 flex items-end gap-3">
              {oldPrice ? <p className="text-[13px] text-muted line-through">{formatPrice(oldPrice)} تومان</p> : null}
              <p className="text-[22px] font-bold text-navy">
                {price != null ? (
                  <>
                    {formatPrice(price)}
                    <span className="mr-1 text-[13px] font-medium text-muted">تومان</span>
                  </>
                ) : (
                  <span className="text-[16px] font-medium text-muted">برای قیمت تماس بگیرید</span>
                )}
              </p>
            </div>
            <p className={`mt-2 text-[13px] ${inStock ? "text-ok" : "text-sale"}`}>
              {inStock ? "موجود در داروخانه" : "ناموجود"}
            </p>

            {variants.length > 1 ? (
              <div className="mt-5 flex flex-wrap gap-2">
                {variants.map((item) => (
                  <Link
                    key={item.id}
                    href={`/products/${encodeURIComponent(item.id)}`}
                    className={`rounded-lg border px-3 py-1.5 text-[12px] ${item.id === variant.id ? "border-primary bg-sky text-navy" : "border-line bg-white text-muted"}`}
                  >
                    {item.label || variantTitle(item)}
                  </Link>
                ))}
              </div>
            ) : null}

            {inStock ? <AddToCart variantId={variant.id} maxQuantity={variant.stockQuantity} /> : null}
          </div>
        </div>

        <ProductTabs descriptionHtml={catalog?.descriptionHtml || catalog?.summary} comments={comments} />
      </Container>
    </section>
  );
}