glassmond/app/products/[id]/[slug]/page.tsx

import type { Metadata } from "next";
import Link from "next/link";
import { MessageCircle, Phone, ShieldCheck } from "lucide-react";
import { notFound, redirect } from "next/navigation";
import { ApiProductCard } from "@/components/api-product-card";
import { ProductTabs } from "@/components/entity-comments";
import { ProductGallery } from "@/components/product-gallery";
import {
  getComments,
  getProductById,
  getProducts,
  plainText,
  productImage,
  productUrl,
  sanitizeCmsContent,
  slugifyFa,
} from "@/lib/meshkee";

type ProductPageProps = {
  params: Promise<{ id: string; slug: string }>;
};

export async function generateStaticParams() {
  const data = await getProducts({ pageSize: 50 }).catch(() => ({ items: [] }));
  return data.items.map((product) => ({
    id: product.id,
    slug: slugifyFa(product.nameFa || product.title),
  }));
}

export async function generateMetadata({ params }: ProductPageProps): Promise<Metadata> {
  const { id } = await params;
  const data = await getProductById(id).catch(() => null);
  if (!data) return { title: "محصول یافت نشد", robots: { index: false } };

  const product = data.product;
  const title = product.nameFa || product.title;
  const description =
    plainText(product.summary || product.descriptionHtml).slice(0, 155) ||
    `مشخصات و تصاویر ${title} از محصولات گلسموند.`;
  const image = productImage(product);
  const canonical = productUrl(product);

  return {
    title,
    description,
    alternates: { canonical },
    openGraph: {
      title,
      description,
      url: canonical,
      images: image ? [image] : [],
    },
  };
}

export default async function ProductDetailPage({ params }: ProductPageProps) {
  const { id, slug } = await params;
  const data = await getProductById(id).catch(() => null);
  if (!data) notFound();

  const { product, relatedProducts = [] } = data;
  const canonical = productUrl(product);
  const expectedSlug = canonical.split("/").at(-1) || "";
  let currentSlug = slug;
  try {
    currentSlug = decodeURIComponent(slug);
  } catch {
    currentSlug = slug;
  }
  if (currentSlug !== expectedSlug) redirect(encodeURI(canonical));

  const title = product.nameFa || product.title;
  const mainImage = productImage(product);
  const images = Array.from(
    new Set([mainImage, ...(product.images || []).map((item) => item.url)].filter(Boolean)),
  ) as string[];
  const comments = await getComments("product", product.id);
  const categoryTitle = product.categoryNameFa || product.categoryName || "آینه";
  const categoryHref = product.categoryId
    ? `/products/category/${product.categoryId}/${slugifyFa(categoryTitle)}`
    : null;
  const descriptionHtml = sanitizeCmsContent(
    product.descriptionHtml || product.summary || "اطلاعات تکمیلی این محصول به‌زودی درج می‌شود.",
    title,
  );

  return (
    <>
      <section className="product-detail-top">
        <div className="container">
          <nav className="detail-breadcrumbs" aria-label="مسیر صفحه">
            <Link href="/">صفحه اصلی</Link>
            <span>/</span>
            <Link href="/products">محصولات</Link>
            <span>/</span>
            <b>{title}</b>
          </nav>

          <div className="product-detail-grid">
            <ProductGallery images={images.length ? images : ["/images/hero.jpg"]} alt={title} />

            <div className="product-detail-copy">
              <span className="english-title">PRODUCT DETAILS</span>
              <p className="product-category">{product.categoryNameFa || "آینه هوشمند"}</p>
              <h1>{title}</h1>
              {product.summary && <p className="product-summary">{product.summary}</p>}

              <dl className="product-facts">
                <div>
                  <dt>دسته‌بندی</dt>
                  <dd>
                    {categoryHref ? <Link href={categoryHref}>{categoryTitle}</Link> : categoryTitle}
                  </dd>
                </div>
                <div>
                  <dt>وضعیت سفارش</dt>
                  <dd>{product.store?.inStock ? "موجود" : "تماس بگیرید"}</dd>
                </div>
                <div>
                  <dt>خدمات</dt>
                  <dd>یک سال گارانتی و ده سال پشتیبانی</dd>
                </div>
              </dl>

              <div className="product-assurance">
                <ShieldCheck />
                <p>تولید مطابق استاندارد IP64 با برق ایمن ۱۲ ولت</p>
              </div>

              <div className="product-detail-actions">
                <a className="primary-button" href="tel:+989301293902">
                  <Phone />
                  تماس برای سفارش
                </a>
                <a
                  className="outline-dark-button"
                  href="https://wa.me/989301293902"
                  target="_blank"
                  rel="noreferrer"
                >
                  <MessageCircle />
                  واتساپ
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="product-information">
        <div className="container">
          <ProductTabs
            descriptionHtml={descriptionHtml}
            entityId={product.id}
            comments={comments.items}
          />
        </div>
      </section>

      {relatedProducts.length > 0 && (
        <section className="related-section">
          <div className="container">
            <div className="section-heading">
              <span className="english-title">RELATED PRODUCTS</span>
              <h2>محصولات مرتبط</h2>
            </div>
            <div className="catalog-grid">
              {relatedProducts.slice(0, 3).map((item) => (
                <ApiProductCard key={item.id} product={item} headingLevel={3} />
              ))}
            </div>
          </div>
        </section>
      )}
    </>
  );
}