import type { Metadata } from "next";
import { notFound } from "next/navigation";

import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import StickyMobileCTA from "@/components/StickyMobileCTA";
import JsonLd from "@/components/seo/JsonLd";
import { BlockRenderer } from "@/components/blocks/BlockRenderer";
import { productCanonicalPath } from "@/lib/frProdRoutes";
import { SITE_URL } from "@/lib/seo";
import { mapImage } from "@/lib/wp/mappers";
import { getAllProduitSlugs, getProduit } from "@/lib/wp/queries/produit";
import { breadcrumbJsonLd, wpSeoToMetadata } from "@/lib/wp/seoToMetadata";

// Pages produits pilotées par WordPress (CPT `produit`, rewrite /solutions).
export const dynamicParams = true;

export async function generateStaticParams() {
  const slugs = await getAllProduitSlugs();
  return slugs.map((slug) => ({ slug }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const produit = await getProduit(slug);
  if (!produit) return {};
  const canonical = `${SITE_URL}${productCanonicalPath(slug)}`;

  return wpSeoToMetadata({ ...produit.seo, canonical }, {
    title: produit.title ?? undefined,
    canonical,
  });
}

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const produit = await getProduit(slug);
  if (!produit) notFound();

  const pageUrl = `${SITE_URL}${productCanonicalPath(slug)}`;
  const ogImage = mapImage(produit.seo?.ogImage);

  const productJsonLd = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: produit.ficheProduit?.productName || produit.title || slug,
    brand: { "@type": "Brand", name: "Covalba" },
    ...(produit.seo?.metaDescription
      ? { description: produit.seo.metaDescription }
      : {}),
    ...(ogImage ? { image: ogImage.sourceUrl } : {}),
    url: pageUrl,
  };

  return (
    <div className="min-h-screen bg-background">
      <JsonLd
        id={`produit-${slug}-jsonld`}
        data={[
          productJsonLd,
          breadcrumbJsonLd([
            { name: "Accueil", url: `${SITE_URL}/` },
            { name: "Solutions", url: `${SITE_URL}/nos-solutions-cool-roof` },
            { name: produit.title ?? slug, url: pageUrl },
          ]),
        ]}
      />
      <Navbar />
      <main>
        <BlockRenderer
          sections={produit.sections?.sections}
          accentColor={produit.ficheProduit?.accentColor}
        />
      </main>
      <Footer />
      <StickyMobileCTA />
    </div>
  );
}