/**
 * صفحه محصول: /p/{شناسه}/{اسلاگ-فارسی}
 * اگر اسلاگ نباشد یا اشتباه باشد، با ریدایرکت دائمی به آدرس درست هدایت می‌شود.
 */
import type { Metadata } from "next";
import Link from "next/link";
import { notFound, permanentRedirect } from "next/navigation";
import { ProductDetails } from "@/components/product/ProductDetails";
import { ProductHero } from "@/components/product/ProductHero";
import { ProductRail } from "@/components/product/ProductRail";
import { ReviewsSection } from "@/components/product/ReviewsSection";
import { Breadcrumbs } from "@/components/ui/Breadcrumbs";
import { decodeSegment } from "@/lib/route-params";
import { site } from "@/lib/site";
import { seo } from "@/lib/seo";
import { imageSrc } from "@/lib/media";
import { getCategoryIndex, getProductById, getProductReviews, getSimilarProducts } from "@/server/services/catalog";
import { getShippingSettings } from "@/server/services/settings";
import { getCurrentUser } from "@/server/auth/session";

type Props = {
  params: Promise<{ id: string; slug?: string[] }>;
  searchParams: Promise<{ v?: string | string[] }>;
};

async function load(idParam: string) {
  if (!/^\d{1,9}$/.test(idParam)) return undefined;
  return getProductById(Number(idParam));
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const data = await load((await params).id);
  if (!data) return {};
  const { product, brand } = data;
  const canonical = `/p/${product.id}/${product.slug}`;
  return seo({
    title: `${product.name} ${brand.name}`,
    description: `${product.summary}. خرید ${product.name} از برند ${brand.name} با ضمانت اصالت و ارسال سریع از زهورا.`,
    path: canonical,
    image: `/og/p/${product.id}`,
  });
}

export default async function ProductPage({ params, searchParams }: Props) {
  const { id, slug } = await params;
  const data = await load(id);
  if (!data) notFound();
  const { product, brand, categoryPath, skinTypes } = data;

  const requestedSlug = slug?.length ? decodeSegment(slug.join("/")) : "";
  const canonicalPath = `/p/${product.id}/${product.slug}`;
  if (requestedSlug !== product.slug) permanentRedirect(`/p/${product.id}/${encodeURIComponent(product.slug)}`);

  const v = (await searchParams).v;
  const [reviews, similar, cats, shipping, user] = await Promise.all([
    getProductReviews(product.id),
    getSimilarProducts(product),
    getCategoryIndex(),
    getShippingSettings(),
    getCurrentUser(),
  ]);

  // داده ساختاریافته محصول برای گوگل (قیمت به ریال، چون تومان کد ارز استاندارد ندارد)
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: product.name,
    description: product.description,
    sku: product.variants[0].sku,
    // عکس‌های واقعی (اگر هست)، وگرنه تصویر اشتراک‌گذاری
    image: (product.images.length ? product.images.map((i) => imageSrc(i.url, 1600)) : [`/og/p/${product.id}`]).map((u) => new URL(u, site.url).toString()),
    brand: { "@type": "Brand", name: brand.name },
    aggregateRating: { "@type": "AggregateRating", ratingValue: product.rating, reviewCount: product.reviewCount },
    offers: product.variants.map((variant) => ({
      "@type": "Offer",
      sku: variant.sku,
      priceCurrency: "IRR",
      price: variant.price * 10,
      availability: variant.stock > 0 ? "https://schema.org/InStock" : "https://schema.org/OutOfStock",
      url: new URL(`${canonicalPath}?v=${variant.id}`, site.url).toString(),
    })),
  };

  return (
    <>
      <div className="container-z py-4 md:py-8">
        <Breadcrumbs items={[...categoryPath.map((c) => ({ name: c.name, href: cats.href(c.id) })), { name: product.name }]} />
        <div className="mt-4">
          <ProductHero
            product={product}
            brand={brand}
            initialVariantId={Array.isArray(v) ? v[0] : v}
            freeShippingThreshold={shipping.freeShippingThreshold}
          />
        </div>
      </div>

      {/* پرش سریع به بخش‌ها */}
      <nav aria-label="بخش‌های صفحه" className="sticky top-16 z-20 mt-6 border-y border-line bg-paper/95 backdrop-blur md:top-32">
        <ul className="container-z flex gap-8 text-sm">
          {[
            ["#details", "جزئیات"],
            ["#reviews", "نظرات"],
            ["#similar", "مشابه"],
          ].map(([href, label]) => (
            <li key={href}>
              <Link href={href} className="block py-3 hover:underline hover:underline-offset-8">
                {label}
              </Link>
            </li>
          ))}
        </ul>
      </nav>

      <div className="container-z py-10">
        <div className="max-w-3xl">
          <ProductDetails product={product} brand={brand} skinTypes={skinTypes} />
        </div>
      </div>
      <div className="container-z pb-6">
        <ReviewsSection reviews={reviews} rating={product.rating} productPath={canonicalPath} productId={product.id} signedIn={!!user} />
      </div>
      <div id="similar" className="scroll-mt-32">
        <ProductRail title="محصولات مشابه" products={similar} />
      </div>

      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c") }} />
    </>
  );
}