import { mockDb } from '@/lib/mockDb'
import { Link } from '@/i18n/routing'
import { notFound } from 'next/navigation'
import { ArrowLeft, Layers } from 'lucide-react'
import ListingCard from '@/components/ListingCard'
import type { Metadata } from 'next'

interface Props {
  params: Promise<{ locale: string; slug: string }>
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { locale, slug } = await params
  const col = await mockDb.getCollectionBySlug(slug)
  if (!col) return {}

  const title = locale === 'en' ? col.titleEn : locale === 'ru' ? col.titleRu : col.titleTr
  const description = locale === 'en' ? col.descriptionEn : locale === 'ru' ? col.descriptionRu : col.descriptionTr
  const fullTitle = `${title} — Marmaris Local`

  return {
    title: fullTitle,
    description,
    openGraph: {
      title: fullTitle,
      description,
      type: 'website',
      ...(col.coverImage ? { images: [{ url: col.coverImage }] } : {}),
    },
  }
}

export default async function CollectionDetailPage({ params }: Props) {
  const { locale, slug } = await params
  const col = await mockDb.getCollectionBySlug(slug)

  if (!col) {
    notFound()
  }

  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 listings = col.listings || []

  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-8">
        
        {/* Back Link */}
        <Link
          href="/collections"
          className="inline-flex items-center gap-1.5 px-4 py-2 border border-pine/10 rounded-xl text-xs font-mono font-bold text-pine hover:bg-paper transition"
        >
          <ArrowLeft className="w-3.5 h-3.5" />
          GERİ DÖN
        </Link>

        {/* Collection details banner */}
        <div className="bg-paper border border-pine/8 rounded-3xl overflow-hidden shadow-sm flex flex-col md:flex-row gap-6 md:gap-8 p-6 sm:p-8">
          {col.coverImage && (
            <div className="w-full md:w-80 h-56 relative rounded-2xl overflow-hidden bg-stone shrink-0 border border-pine/5">
              <img src={col.coverImage} alt={title} className="w-full h-full object-cover" />
            </div>
          )}
          
          <div className="flex flex-col justify-center space-y-3">
            <span className="text-[9px] font-mono tracking-widest text-turquoise uppercase font-bold flex items-center gap-1.5">
              <Layers className="w-3.5 h-3.5" />
              Editör Seçkisi
            </span>
            <h1 className="text-2xl sm:text-3xl font-heading font-extrabold text-pine lowercase leading-tight">
              {title}
            </h1>
            <p className="text-ink/75 text-xs sm:text-sm leading-relaxed max-w-2xl font-medium">
              {desc}
            </p>
          </div>
        </div>

        {/* Listings Grid */}
        <div className="space-y-6">
          <h2 className="text-lg font-heading font-extrabold text-pine lowercase border-b border-dashed border-pine/8 pb-3">
            seçkide yer alan yerler ({listings.length})
          </h2>

          {listings.length === 0 ? (
            <div className="bg-paper border border-pine/8 p-12 text-center text-shutter text-sm rounded-3xl">
              Bu seçkiye henüz mekan eklenmemiş.
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {listings.map((listing) => (
                <ListingCard key={listing.id} listing={listing} />
              ))}
            </div>
          )}
        </div>

      </div>
    </div>
  )
}