import { notFound } from "next/navigation";
import type { Metadata } from "next";
import {
  getProductBySlug,
  getProductMeta,
  getRelatedProducts,
} from "@/lib/actions/products";
import { siteUrl } from "@/lib/site-url";
import ProductPageClient from "./product-page-client";

export const dynamic = "force-dynamic";

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

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const product = await getProductMeta(slug);
  if (!product) {
    return { title: "Product not found" };
  }

  const title = product.metaTitle ?? product.name;
  const description =
    product.metaDescription ??
    product.overview ??
    `Buy ${product.name} online at S.I. Tech Hub.`;
  const image = product.image ? [{ url: product.image }] : undefined;

  return {
    title,
    description,
    alternates: {
      canonical: `${siteUrl}/product/${product.slug}`,
    },
    openGraph: {
      type: "website",
      title,
      description,
      url: `${siteUrl}/product/${product.slug}`,
      siteName: "S.I. Tech Hub",
      images: image,
    },
    twitter: {
      card: image ? "summary_large_image" : "summary",
      title,
      description,
      images: image,
    },
  };
}

export default async function ProductPage({ params }: Props) {
  const { slug } = await params;
  const product = await getProductBySlug(slug);

  if (!product) {
    notFound();
  }

  const relatedProducts = await getRelatedProducts(
    { categoryId: product.category?.id ?? null, excludeId: product.id },
    8,
  );

  return <ProductPageClient product={product} relatedProducts={relatedProducts} />;
}