import { Link } from '@/i18n/navigation'
import { prisma } from '@peyzajart/db'

interface SearchParams { kategori?: string }

export const dynamic = 'force-dynamic'

export default async function UrunlerPage({
  searchParams,
  params: { locale },
}: {
  searchParams: SearchParams
  params: { locale: string }
}) {
  const kategori = searchParams.kategori?.toUpperCase()

  const products = await prisma.product.findMany({
    where: { isActive: true, ...(kategori ? { category: kategori } : {}) },
    orderBy: { category: 'asc' },
  })

  const categories = ['CUBO', 'RECTA', 'GLOBE', 'OTHER']
  const categoryLabels: Record<string, Record<string, string>> = {
    CUBO:  { tr: 'Cubo',  en: 'Cubo'  },
    RECTA: { tr: 'Recta', en: 'Recta' },
    GLOBE: { tr: 'Globe', en: 'Globe' },
    OTHER: { tr: 'Diğer', en: 'Other' },
  }

  const base = locale === 'tr' ? '/urunler' : '/en/urunler'

  return (
    <div className="pt-20 min-h-screen bg-cream">
      <div className="max-w-7xl mx-auto px-6 md:px-10 py-16">
        <div className="mb-12">
          <p className="font-body text-orange text-xs tracking-[0.3em] uppercase mb-3">
            {locale === 'en' ? 'Catalog' : 'Katalog'}
          </p>
          <h1 className="font-display text-5xl font-light text-brown">
            {locale === 'en' ? 'Products' : 'Ürünler'}
          </h1>
        </div>

        <div className="flex gap-3 flex-wrap mb-12">
          <Link href={base}
            className={`px-4 py-2 rounded-full font-body text-xs tracking-widest uppercase border transition-colors ${
              !kategori ? 'bg-dark text-cream border-dark' : 'border-sand text-brown hover:border-orange'
            }`}>
            {locale === 'en' ? 'All' : 'Tümü'}
          </Link>
          {categories.map(cat => (
            <Link key={cat} href={`${base}?kategori=${cat}`}
              className={`px-4 py-2 rounded-full font-body text-xs tracking-widest uppercase border transition-colors ${
                kategori === cat ? 'bg-dark text-cream border-dark' : 'border-sand text-brown hover:border-orange'
              }`}>
              {categoryLabels[cat][locale] ?? categoryLabels[cat].tr}
            </Link>
          ))}
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
          {products.map(product => {
            const images: string[] = JSON.parse(product.images)
            const name = locale === 'en' ? product.nameEn : product.nameTr
            return (
              <Link key={product.id} href={`${base.replace('/urunler', '')}/urunler/${product.slug}`} className="group block">
                <div className="aspect-square bg-sand mb-4 overflow-hidden rounded-xl">
                  {images[0]
                    ? <img src={images[0]} alt={name} 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"><span className="font-display text-4xl text-orange/30">{name[0]}</span></div>}
                </div>
                <p className="font-body text-xs text-orange tracking-widest uppercase mb-1">
                  {categoryLabels[product.category]?.[locale] ?? product.category}
                </p>
                <h2 className="font-display text-xl text-brown group-hover:text-orange transition-colors">{name}</h2>
                {product.size && <p className="font-body text-sm text-brown/50 mt-1">{product.size}</p>}
                <p className="font-body text-sm text-brown mt-2">${product.priceSelf.toFixed(0)} USD</p>
              </Link>
            )
          })}
        </div>

        {products.length === 0 && (
          <p className="font-body text-center text-brown/50 py-20">
            {locale === 'en' ? 'No products found in this category.' : 'Bu kategoride ürün bulunamadı.'}
          </p>
        )}
      </div>
    </div>
  )
}