import type { Metadata } from 'next'
import { notFound, redirect } from 'next/navigation'
import ReboursPage from '../../ReboursPage'
import { getHomePage, getProductBySlug, getPublishedProducts, mediaUrl, mediaAlt } from '@/lib/payload'

type Params = { slug: string }

export async function generateMetadata({ params }: { params: Promise<Params> }): Promise<Metadata> {
  const { slug } = await params
  const product = await getProductBySlug(slug)
  if (!product) return { title: 'Produit introuvable' }

  const img = (product.images?.[0] as { image: unknown } | undefined)?.image
  const imgUrl = mediaUrl(img as never, 'feature') ?? undefined
  return {
    title: product.seoTitle || `${product.productDisplayName} — REBOURS`,
    description: product.seoDescription || product.description?.substring(0, 155),
    alternates: { canonical: `/collection/${slug}` },
    openGraph: {
      title: product.productDisplayName,
      description: product.seoDescription || product.description?.substring(0, 155),
      images: imgUrl ? [imgUrl] : undefined,
    },
  }
}

export const dynamic = 'force-dynamic'

export default async function ProductPage({ params }: { params: Promise<Params> }) {
  const { slug } = await params
  const product = await getProductBySlug(slug)
  if (!product) redirect('/')

  const [products, home] = await Promise.all([getPublishedProducts(), getHomePage()])

  const img = (product.images?.[0] as { image: unknown } | undefined)?.image
  const imgUrl = mediaUrl(img as never, 'feature')
  const imgAlt = mediaAlt(img as never, product.productDisplayName)

  const productSchema = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.productDisplayName,
    description: product.description,
    image: imgUrl ?? undefined,
    sku: product.name,
    brand: { '@type': 'Brand', name: 'REBOURS Studio' },
    offers: product.price
      ? {
          '@type': 'Offer',
          price: String(product.price / 100),
          priceCurrency: product.currency || 'EUR',
          availability: product.availability,
          seller: { '@type': 'Organization', name: 'REBOURS Studio' },
          url: `https://rebours.studio/collection/${slug}`,
        }
      : undefined,
  }

  const breadcrumbSchema = {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: [
      { '@type': 'ListItem', position: 1, name: 'Accueil', item: 'https://rebours.studio/' },
      { '@type': 'ListItem', position: 2, name: 'Collection', item: 'https://rebours.studio/#collection' },
      { '@type': 'ListItem', position: 3, name: product.productDisplayName, item: `https://rebours.studio/collection/${slug}` },
    ],
  }

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(productSchema) }} />
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }} />
      <ReboursPage products={products} home={home} openPanelSlug={product.name} />
    </>
  )
}
