import { notFound } from 'next/navigation';
import Image from 'next/image';
import { getTranslations } from 'next-intl/server';
import { prisma } from '@/lib/prisma';
import { Container } from '@/components/ui/container';
import { Reveal } from '@/components/ui/reveal';
import { buildMetadata } from '@/lib/seo';
import { JsonLd, productSchema, breadcrumbSchema } from '@/lib/schema-org';
import { AddToCartButton } from './add-to-cart-button';
import type { Locale } from '@/i18n/config';
import { formatPrice } from '@/lib/format';

const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? 'http://localhost:3000';

async function getProduct(slug: string, locale: Locale) {
  const product = await prisma.product.findUnique({
    where: { slug },
    include: { translations: { where: { locale } }, category: { include: { translations: { where: { locale } } } } }
  });
  if (!product || !product.translations[0]) return null;
  return { ...product, t: product.translations[0] };
}

export async function generateMetadata({
  params: { locale, slug }
}: {
  params: { locale: Locale; slug: string };
}) {
  const product = await getProduct(slug, locale);
  if (!product) return {};
  return buildMetadata({
    locale,
    path: `/products/${slug}`,
    title: product.t.seoTitle ?? product.t.name,
    description: product.t.seoDescription ?? product.t.shortDescription,
    image: product.images[0],
    type: 'product'
  });
}

export default async function ProductDetailPage({
  params: { locale, slug }
}: {
  params: { locale: Locale; slug: string };
}) {
  const t = await getTranslations({ locale, namespace: 'product' });
  const product = await getProduct(slug, locale);
  if (!product) notFound();

  const price = product.price ? Number(product.price) : null;

  return (
    <Container className="py-16">
      <JsonLd
        data={productSchema({
          name: product.t.name,
          description: product.t.description,
          image: product.images,
          sku: product.sku,
          price,
          currency: product.currency,
          available: product.available,
          url: `${SITE_URL}/${locale}/products/${slug}`
        })}
      />
      <JsonLd
        data={breadcrumbSchema([
          { name: t('category'), url: `${SITE_URL}/${locale}/products` },
          { name: product.t.name, url: `${SITE_URL}/${locale}/products/${slug}` }
        ])}
      />

      <div className="grid gap-10 lg:grid-cols-2">
        <Reveal variant="scale">
          <div className="relative aspect-square overflow-hidden rounded-2xl bg-graphite-900/5">
            {product.images[0] && (
              <Image src={product.images[0]} alt={product.t.name} fill className="object-cover" />
            )}
          </div>
        </Reveal>
        <Reveal variant="up" delay={120}>
          <div>
            {product.category.translations[0] && (
              <p className="text-sm font-medium text-copper-600">
                {product.category.translations[0].name}
              </p>
            )}
            <h1 className="mt-2 font-display text-3xl font-semibold">{product.t.name}</h1>
          <p className="mt-4 text-graphite-900/70">{product.t.description}</p>

          <p className="mt-6 text-2xl font-semibold">
            {price != null ? formatPrice(price, product.currency, locale) : t('priceOnRequest')}
          </p>
          <p className="mt-1 text-sm text-graphite-900/50">
            {t('sku')}: {product.sku}
          </p>

          <div className="mt-6">
            <AddToCartButton
              product={{
                id: product.id,
                slug: product.slug,
                sku: product.sku,
                name: product.t.name,
                image: product.images[0]
              }}
              available={product.available}
              label={t('addToCart')}
              unavailableLabel={t('outOfStock')}
            />
          </div>

          {product.specs && typeof product.specs === 'object' && (
            <div className="mt-10">
              <h2 className="font-display text-lg font-semibold">{t('specs')}</h2>
              <dl className="mt-3 divide-y divide-graphite-800/10 text-sm">
                {Object.entries(product.specs as Record<string, string>).map(([key, value]) => (
                  <div key={key} className="flex justify-between py-2">
                    <dt className="text-graphite-900/60">{key}</dt>
                    <dd className="font-medium">{value}</dd>
                  </div>
                ))}
              </dl>
            </div>
          )}
          </div>
        </Reveal>
      </div>
    </Container>
  );
}