import { mockDb } from '@/lib/mockDb'
import { MapPin, Star, ExternalLink } from 'lucide-react'

export const metadata = {
  title: 'Marmaris Local Widget'
}

export default async function WidgetPage(props: {
  params: Promise<{ locale: string }>,
  searchParams: Promise<{ neighborhood?: string }>
}) {
  const { locale } = await props.params
  const searchParams = await props.searchParams
  const neighborhoodSlug = searchParams.neighborhood

  // Get listings (veritabanında Local Approved mekan olmadığı için şimdilik tümünü çekiyoruz)
  let listings = await mockDb.getListings()
  
  if (neighborhoodSlug) {
    const neighborhood = await mockDb.getNeighborhoodBySlug(neighborhoodSlug)
    if (neighborhood) {
      listings = listings.filter(l => l.neighborhoodId === neighborhood.id)
    }
  }

  // Shuffle and limit to 5
  listings = listings.sort(() => 0.5 - Math.random()).slice(0, 5)

  return (
    <div className="bg-paper min-h-screen p-4 flex flex-col font-sans">
      <div className="flex items-center justify-between mb-4">
        <div>
          <h1 className="font-heading font-extrabold text-pine text-lg tracking-tight lowercase">
            marmaris local
          </h1>
          <p className="text-[10px] text-shutter font-medium">Yerel Seçimler</p>
        </div>
        <a 
          href={`https://marmarislocal.com/${locale}`}
          target="_blank"
          rel="noopener noreferrer" 
          className="bg-pine/5 text-pine hover:bg-pine/10 p-2 rounded-xl transition-colors"
          title="Tümünü Gör"
        >
          <ExternalLink className="w-4 h-4" />
        </a>
      </div>

      <div className="space-y-3 flex-1 overflow-y-auto pr-1 custom-scrollbar">
        {listings.map(listing => (
          <a
            key={listing.id}
            href={`https://marmarislocal.com/${locale}/${listing.category?.slug}/${listing.slug}`}
            target="_blank"
            rel="noopener noreferrer"
            className="flex gap-3 p-3 bg-white border border-pine/5 rounded-2xl hover:border-turquoise hover:shadow-sm transition-all group"
          >
            <div className="w-20 h-20 shrink-0 rounded-xl overflow-hidden bg-stone">
              <img 
                src={listing.images?.[0]?.url || 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=400&q=80'} 
                alt={listing.nameTr}
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
              />
            </div>
            <div className="flex-1 min-w-0 py-1 flex flex-col justify-between">
              <div>
                <h3 className="font-heading font-bold text-pine text-sm truncate group-hover:text-turquoise transition-colors">
                  {locale === 'en' ? listing.nameEn || listing.nameTr : locale === 'ru' ? listing.nameRu || listing.nameTr : listing.nameTr}
                </h3>
                <div className="flex items-center gap-1.5 mt-1 text-[10px] font-medium text-shutter">
                  <span className="bg-stone-deep px-1.5 py-0.5 rounded-md">
                    {locale === 'en' ? listing.category?.nameEn : locale === 'ru' ? listing.category?.nameRu : listing.category?.nameTr}
                  </span>
                  <span className="flex items-center gap-0.5">
                    <MapPin className="w-3 h-3" />
                    {locale === 'en' ? listing.neighborhood?.nameEn : locale === 'ru' ? listing.neighborhood?.nameRu : listing.neighborhood?.nameTr}
                  </span>
                </div>
              </div>
              
              <div className="flex items-center justify-between mt-2">
                <div className="flex items-center gap-1 bg-yellow-400/10 px-1.5 py-0.5 rounded-md">
                  <Star className="w-3 h-3 text-yellow-500 fill-yellow-500" />
                  <span className="text-[10px] font-bold text-yellow-600">{(listing.rating || 0).toFixed(1)}</span>
                </div>
                <div className="text-[10px] font-bold tracking-widest text-turquoise">
                  {'₺'.repeat(listing.priceRange || 1)}
                </div>
              </div>
            </div>
          </a>
        ))}
      </div>

      <div className="mt-4 pt-3 border-t border-pine/10 text-center">
        <a 
          href={`https://marmarislocal.com/${locale}`}
          target="_blank"
          rel="noopener noreferrer"
          className="text-[10px] font-bold text-pine hover:text-turquoise transition-colors"
        >
          marmarislocal.com'da keşfet
        </a>
      </div>
    </div>
  )
}