import { prisma } from '@peyzajart/db'
import { notFound } from 'next/navigation'
import { Link } from '@/i18n/navigation'
import type { Metadata } from 'next'
import ProductGallery from '../../../../components/ProductGallery'

interface Props { params: { slug: string; locale: string } }

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const product = await prisma.product.findUnique({ where: { slug: params.slug } })
  if (!product) return {}
  return {
    title: params.locale === 'en' ? product.nameEn : product.nameTr,
    description: (params.locale === 'en' ? product.descEn : product.descTr) ?? undefined,
  }
}

export default async function ProductDetailPage({ params: { slug, locale } }: Props) {
  const product = await prisma.product.findUnique({ where: { slug, isActive: true } })
  if (!product) notFound()

  const images: string[] = JSON.parse(product.images || '[]')
  const related = await prisma.product.findMany({
    where: { category: product.category, isActive: true, id: { not: product.id } },
    take: 4,
    select: { id: true, slug: true, nameTr: true, nameEn: true, size: true, images: true },
  })

  const categoryLabel: Record<string, Record<string, string>> = {
    CUBO: { tr: 'Cubo', en: 'Cubo' }, RECTA: { tr: 'Recta', en: 'Recta' },
    GLOBE: { tr: 'Globe', en: 'Globe' }, OTHER: { tr: 'Özel', en: 'Special' },
  }
  const name = locale === 'en' ? product.nameEn : product.nameTr
  const desc = locale === 'en' ? product.descEn : product.descTr
  const base = locale === 'tr' ? '' : `/${locale}`

  return (
    <div className="pt-20">
      <div className="max-w-7xl mx-auto px-6 md:px-10 py-12">
        <nav className="font-body text-xs text-brown/40 mb-8 flex items-center gap-2 flex-wrap">
          <Link href={`${base}/`} className="hover:text-orange transition-colors">
            {locale === 'en' ? 'Home' : 'Ana Sayfa'}
          </Link>
          <span>/</span>
          <Link href={`${base}/urunler`} className="hover:text-orange transition-colors">
            {locale === 'en' ? 'Products' : 'Ürünler'}
          </Link>
          <span>/</span>
          <span className="text-brown">{name}</span>
        </nav>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
          <ProductGallery images={images} name={name} />

          <div className="lg:sticky lg:top-28">
            <p className="font-body text-xs tracking-widest uppercase text-orange mb-3">
              {categoryLabel[product.category]?.[locale] ?? product.category}
            </p>
            <h1 className="font-display text-4xl md:text-5xl font-light text-brown">{name}</h1>

            {product.size && (
              <p className="font-body text-sm text-brown/60 mt-4">
                <span className="tracking-widest uppercase text-xs text-brown/40 mr-2">
                  {locale === 'en' ? 'Size' : 'Ölçü'}
                </span>
                {product.size}
              </p>
            )}

            <div className="mt-4 inline-flex items-center gap-2">
              <span className={`w-2 h-2 rounded-full ${product.stock > 0 ? 'bg-green-500' : 'bg-red-400'}`} />
              <span className="font-body text-xs text-brown/50">
                {product.stock > 0
                  ? (locale === 'en' ? `${product.stock} in stock` : `${product.stock} adet stokta`)
                  : (locale === 'en' ? 'Out of stock' : 'Stok yok')}
              </span>
            </div>

            {desc && (
              <div className="mt-8 border-t border-sand pt-8">
                <p className="font-body text-sm text-brown/70 leading-relaxed">{desc}</p>
              </div>
            )}

            <div className="mt-8 border-t border-sand pt-8 space-y-4">
              <p className="font-body text-xs text-brown/40 leading-relaxed">
                {locale === 'en'
                  ? 'For pricing and bulk orders, contact us or log in to the dealer panel.'
                  : 'Fiyat bilgisi ve toplu sipariş için lütfen iletişime geçin veya bayi panelinden sipariş verin.'}
              </p>
              <div className="flex flex-wrap gap-3">
                <Link href={`${base}/iletisim`}
                  className="px-6 py-2.5 rounded-lg bg-dark text-cream font-body text-xs tracking-widest uppercase hover:bg-orange transition-colors">
                  {locale === 'en' ? 'Ask for Price' : 'Fiyat Sor'}
                </Link>
                <a href={process.env.NEXT_PUBLIC_PANEL_URL ?? 'https://panel.peyzajart.com'}
                  className="px-6 py-2.5 rounded-lg border border-brown text-brown font-body text-xs tracking-widest uppercase hover:bg-dark hover:text-cream hover:border-dark transition-colors">
                  {locale === 'en' ? 'Dealer Login' : 'Bayi Girişi'}
                </a>
              </div>
            </div>
          </div>
        </div>

        {related.length > 0 && (
          <div className="mt-20 pt-12 border-t border-sand">
            <h2 className="font-display text-3xl font-light text-brown mb-8">
              {locale === 'en' ? 'Related Products' : 'Benzer Ürünler'}
            </h2>
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-6">
              {related.map(p => {
                const imgs: string[] = JSON.parse(p.images || '[]')
                const rname = locale === 'en' ? p.nameEn : p.nameTr
                return (
                  <Link key={p.id} href={`${base}/urunler/${p.slug}`} className="group">
                    <div className="aspect-square bg-sand overflow-hidden rounded-xl mb-3">
                      {imgs[0]
                        ? <img src={imgs[0]} alt={rname} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                        : <div className="w-full h-full flex items-center justify-center font-display text-3xl text-brown/10">{rname[0]}</div>}
                    </div>
                    <h3 className="font-display text-base font-light text-brown group-hover:text-orange transition-colors">{rname}</h3>
                    {p.size && <p className="font-body text-xs text-brown/40">{p.size}</p>}
                  </Link>
                )
              })}
            </div>
          </div>
        )}
      </div>
    </div>
  )
}