import { setRequestLocale } from 'next-intl/server'
import { mockDb } from '@/lib/mockDb'
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'
import ListingCard from '@/components/ListingCard'
import { notFound } from 'next/navigation'
import { MapPin } from 'lucide-react'

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

export default async function NeighborhoodPage({ params }: NeighborhoodPageProps) {
  const { locale, slug } = await params
  setRequestLocale(locale)

  const neighborhood = await mockDb.getNeighborhoodBySlug(slug)
  if (!neighborhood) {
    notFound()
  }

  const listings = await mockDb.getListings({
    neighborhoodId: neighborhood.id
  })

  const name =
    locale === 'ru'
      ? neighborhood.nameRu
      : locale === 'en'
      ? neighborhood.nameEn
      : neighborhood.nameTr

  return (
    <div className="flex-1 flex flex-col min-h-screen bg-stone text-ink">
      <Navbar />

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 flex-1">
        
        {/* Header */}
        <div className="flex items-center gap-3 mb-10 pb-6 border-b border-pine/8">
          <div className="p-3 bg-paper rounded-xl border border-pine/8 text-turquoise shadow-sm">
            <MapPin className="w-6 h-6" />
          </div>
          <div>
            <h1 className="text-3xl font-heading font-extrabold text-pine lowercase">
              {name}
            </h1>
            <p className="text-xs text-shutter font-mono uppercase tracking-wider mt-1">
              {locale === 'tr' ? 'mahalle rehberi' : locale === 'en' ? 'neighborhood directory' : 'гид по району'} • {listings.length} {locale === 'tr' ? 'mekan' : locale === 'en' ? 'places' : 'заведений'}
            </p>
          </div>
        </div>

        {/* Results */}
        {listings.length === 0 ? (
          <div className="bg-paper/50 rounded-2xl border border-dashed border-pine/12 p-16 text-center text-shutter">
            <p className="text-sm font-medium">
              {locale === 'tr' ? 'Bu mahallede henüz kayıtlı mekan bulunmamaktadır.' : locale === 'en' ? 'No registered places in this neighborhood yet.' : 'В этом районе пока нет зарегистрированных мест.'}
            </p>
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {listings.map((listing) => (
              <ListingCard key={listing.id} listing={listing} />
            ))}
          </div>
        )}

      </main>

      <Footer />
    </div>
  )
}