import { notFound, permanentRedirect } from "next/navigation";
import type { Metadata } from "next";
import { fetchStoreProduct, fetchStoreProducts } from "@/lib/medusa";
import { ProductDetail } from "@/components/product/ProductDetail";
import { formatCop } from "@/data/products";

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

function normalizeProductSlug(slug: string) {
  return slug.trim().toLowerCase().replaceAll("_", "-");
}

export async function generateStaticParams() {
  const products = await fetchStoreProducts();
  return products.map((p) => ({ slug: normalizeProductSlug(p.slug) }));
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug: raw } = await params;
  const slug = normalizeProductSlug(raw);
  const product = await fetchStoreProduct(slug);
  if (!product) {
    return { title: "Producto" };
  }
  const description =
    product.tagline ||
    product.description?.slice(0, 160) ||
    `${product.name} · ${product.collection} · ${formatCop(product.price)}`;
  const image = product.images[0];
  return {
    title: product.name,
    description,
    openGraph: {
      title: `${product.name} | OLD TENNIS`,
      description,
      type: "website",
      images: image ? [{ url: image }] : undefined,
    },
    twitter: {
      card: "summary_large_image",
      title: product.name,
      description,
      images: image ? [image] : undefined,
    },
  };
}

export default async function ProductPage({ params }: Props) {
  const { slug: raw } = await params;
  const slug = normalizeProductSlug(raw);
  if (slug !== raw) {
    permanentRedirect(`/product/${slug}`);
  }
  const product = await fetchStoreProduct(slug);
  if (!product) notFound();
  return <ProductDetail product={product} />;
}