brb-store/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 { ProductGallery } from "@/components/product/ProductGallery";
import { ProductTabs } from "@/components/product/ProductTabs";
import { fetchComments } from "@/lib/comments";
import { formatPrice } from "@/lib/format";
import {
  brandName,
  fetchCatalogProductBySlug,
  fetchCatalogProductByTitle,
  fetchStoreItemByProduct,
  fetchStoreVariant,
  galleryUrls,
  variantTitle,
  type CatalogProduct,
  type StoreVariant,
} from "@/lib/store";

export const revalidate = 60;

async function resolveProduct(id: string): Promise<{
  variant: StoreVariant | null;
  catalog: CatalogProduct | null;
  productId?: string;
}> {
  const variant = await fetchStoreVariant(id);
  if (variant) {
    const catalog = await fetchCatalogProductByTitle(
      variant.productNameFa || variant.productTitle,
      variant.productId,
    );
    return { variant, catalog, productId: variant.productId };
  }

  const bySlug = await fetchCatalogProductBySlug(id);
  if (bySlug) {
    return { variant: null, catalog: bySlug, productId: bySlug.id };
  }

  const byProduct = await fetchStoreItemByProduct(id);
  const firstVariant = byProduct.storeItem?.variants?.[0];
  if (firstVariant) {
    const catalog = await fetchCatalogProductByTitle(
      firstVariant.productNameFa || firstVariant.productTitle,
      id,
    );
    return {
      variant: {
        ...firstVariant,
        productId: id,
      },
      catalog,
      productId: id,
    };
  }

  return { variant: null, catalog: null };
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ id: string }>;
}): Promise<Metadata> {
  const { id } = await params;
  const resolved = await resolveProduct(id);
  const title =
    resolved.catalog?.nameFa ||
    resolved.catalog?.title ||
    (resolved.variant ? variantTitle(resolved.variant) : null);
  const description =
    resolved.catalog?.summary?.trim() ||
    stripHtml(resolved.catalog?.descriptionHtml) ||
    undefined;
  return {
    title: title || "محصول",
    description,
  };
}

function stripHtml(html?: string | null) {
  if (!html?.trim()) return undefined;
  const text = html
    .replace(/<[^>]+>/g, " ")
    .replace(/\s+/g, " ")
    .trim();
  return text.slice(0, 180) || undefined;
}

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

  const comments = productId ? await fetchComments("product", productId) : [];
  const sibling =
    productId && variant
      ? await fetchStoreItemByProduct(productId)
      : { storeItem: undefined };

  const images = galleryUrls(catalog, variant?.productImage || catalog?.image || catalog?.thumbnailUrl);
  const price = variant?.discountedPrice ?? variant?.price ?? catalog?.store?.minPrice ?? null;
  const oldPrice = variant?.discountedPrice != null ? variant.price : null;
  const title = catalog?.nameFa || catalog?.title || (variant ? variantTitle(variant) : "محصول");
  const brand = brandName(catalog);
  const variants = sibling.storeItem?.variants ?? [];
  const inStock =
    variant != null
      ? variant.stockQuantity == null || variant.stockQuantity > 0
      : catalog?.store?.inStock !== false;

  return (
    <section className="py-10 sm:py-14">
      <Container>
        <p className="text-[13px] text-muted">
          <Link href="/" className="hover:text-brand">
            خانه
          </Link>
          <span className="mx-2">/</span>
          <Link href="/products" className="hover:text-brand">
            محصولات
          </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-brand">{brand}</p> : null}
            {catalog?.categoryNameFa ? (
              <p className="mt-1 text-[12px] text-muted">{catalog.categoryNameFa}</p>
            ) : null}
            <h1 className="mt-2 text-[22px] font-extrabold leading-9 text-ink">{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-ink">
                {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-emerald-600" : "text-brand"}`}>
              {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-brand bg-paper text-ink" : "border-line bg-white text-muted"}`}
                  >
                    {item.label || variantTitle(item)}
                  </Link>
                ))}
              </div>
            ) : null}

            <Link
              href="/contact"
              className="mt-6 inline-flex h-12 items-center justify-center rounded-xl bg-brand px-6 text-[14px] font-bold text-white hover:bg-brand-dark"
            >
              استعلام و سفارش
            </Link>
          </div>
        </div>

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