import { mockDb } from '@/lib/mockDb'
import { Link } from '@/i18n/routing'
import { getTranslations } from 'next-intl/server'
import { Layers } from 'lucide-react'
import type { Metadata } from 'next'
import { basicMetadata } from '@/lib/seo'

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params

  const title =
    locale === 'en'
      ? 'Curated Collections — Marmaris Local'
      : locale === 'ru'
        ? 'Подборки редакции — Marmaris Local'
        : 'Marmaris Local Seçkileri — Editör Kürasyonları'

  const description =
    locale === 'en'
      ? 'Themed, locally-approved collections of the best restaurants, apart hotels and services in Marmaris.'
      : locale === 'ru'
        ? 'Тематические подборки лучших ресторанов, апарт-отелей и услуг Мармариса, проверенные местными.'
        : "Marmaris'teki en iyi restoranlar, apartlar ve hizmetlerin özel tematik derlemeleri."

  return basicMetadata(title, description)
}

export default async function CollectionsIndexPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params
  const t = await getTranslations('nav')
  const collections = await mockDb.getCollections()

  return (
    <div className="bg-stone min-h-screen py-10 px-4 sm:px-6 lg:px-8 font-sans">
      <div className="max-w-5xl mx-auto space-y-10">
        
        {/* Title */}
        <div className="text-center space-y-3">
          <span className="text-[10px] font-mono tracking-widest text-shutter uppercase bg-paper px-3 py-1.5 rounded-full border border-pine/5">
            özel tematik listeler
          </span>
          <h1 className="text-4xl font-heading font-extrabold text-pine lowercase">
            yerel onaylı <span className="text-turquoise">seçkiler</span>
          </h1>
          <p className="max-w-xl mx-auto text-ink/70 text-xs sm:text-sm font-medium">
            Editörlerimizin deneyimlerine göre özenle hazırladığı, güncel kategorize edilmiş mekan listeleri.
          </p>
        </div>

        {/* Collections Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {collections.length === 0 ? (
            <div className="col-span-2 bg-paper border border-pine/8 p-12 text-center text-shutter text-sm rounded-3xl">
              Henüz eklenmiş bir seçki bulunmuyor.
            </div>
          ) : (
            collections.map((col) => {
              const title = locale === 'en' ? col.titleEn : locale === 'ru' ? col.titleRu : col.titleTr
              const desc = locale === 'en' ? col.descriptionEn : locale === 'ru' ? col.descriptionRu : col.descriptionTr
              const listingCount = col.listings?.length || 0

              return (
                <div 
                  key={col.id} 
                  className="bg-paper border border-pine/8 rounded-3xl overflow-hidden shadow-sm flex flex-col justify-between hover:border-turquoise/35 transition-all duration-300 hover:shadow-md group"
                >
                  <div>
                    {/* Cover image */}
                    {col.coverImage && (
                      <div className="h-56 relative overflow-hidden bg-stone border-b border-pine/5">
                        <img 
                          src={col.coverImage} 
                          alt={title} 
                          className="w-full h-full object-cover group-hover:scale-103 transition duration-500" 
                        />
                        {/* Count tag */}
                        <span className="absolute top-4 right-4 bg-pine text-stone font-mono text-[9px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider">
                          {listingCount} Mekan
                        </span>
                      </div>
                    )}
                    
                    <div className="p-6 sm:p-8 space-y-3">
                      <h2 className="font-heading font-extrabold text-lg text-pine group-hover:text-turquoise transition duration-150 lowercase leading-snug">
                        <Link href={`/collection/${col.slug}`}>
                          {title}
                        </Link>
                      </h2>

                      <p className="text-ink/75 text-xs sm:text-sm leading-relaxed line-clamp-3">
                        {desc}
                      </p>
                    </div>
                  </div>

                  <div className="px-6 sm:px-8 pb-6 sm:pb-8 pt-2">
                    <Link 
                      href={`/collection/${col.slug}`} 
                      className="inline-flex items-center gap-1.5 text-xs font-mono font-bold text-turquoise hover:underline uppercase tracking-wider"
                    >
                      listeyi incele →
                    </Link>
                  </div>
                </div>
              )
            })
          )}
        </div>

      </div>
    </div>
  )
}