import Link from 'next/link'
import type { Language } from '@/lib/i18n'

interface ImageLite {
  id: string
  path: string
  alt?: string | null
  isCover: boolean
}

interface AgentLite {
  id: string
  name?: string | null
  phone?: string | null
  whatsapp?: string | null
  photoUrl?: string | null
}

interface ListingLite {
  id: string
  slug: string
  title: string
  titleEs?: string | null
  titleFr?: string | null
  description?: string
  descriptionEs?: string | null
  descriptionFr?: string | null
  priceUsd?: unknown // Prisma Decimal
  beds?: number | null
  baths?: unknown // Prisma Decimal
  sqft?: number | null
  images: ImageLite[]
  agent: AgentLite
}

interface Props {
  listings: ListingLite[]
  lang: Language
}

function pickLocalized(listing: ListingLite, field: 'title' | 'description', lang: Language): string {
  if (lang === 'es' && listing[`${field}Es` as keyof ListingLite]) {
    return String(listing[`${field}Es` as keyof ListingLite])
  }
  if (lang === 'fr' && listing[`${field}Fr` as keyof ListingLite]) {
    return String(listing[`${field}Fr` as keyof ListingLite])
  }
  // Fallback: English
  return (listing[field] as string) ?? ''
}

export function AgentListingsGrid({ listings, lang }: Props) {
  if (!listings.length) {
    return (
      <p className="text-center text-gray-500 py-12">
        {lang === 'es'
          ? 'Aún no hay propiedades de agentes.'
          : lang === 'fr'
          ? "Pas encore de propriétés d'agents."
          : 'No agent listings yet.'}
      </p>
    )
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {listings.map((l) => {
        const cover = l.images.find((i) => i.isCover) || l.images[0]
        const title = pickLocalized(l, 'title', lang)
        const price = l.priceUsd ? Number(l.priceUsd) : null
        const baths = l.baths ? Number(l.baths) : null
        return (
          <Link
            key={l.id}
            href={`/${lang}/agent-listings/${l.slug}`}
            className="group block"
          >
            <div className="aspect-video bg-gray-100 overflow-hidden rounded-lg">
              {cover ? (
                // eslint-disable-next-line @next/next/no-img-element
                <img
                  src={cover.path}
                  alt={cover.alt || title}
                  className="w-full h-full object-cover group-hover:scale-105 transition"
                />
              ) : (
                <div className="w-full h-full flex items-center justify-center text-gray-400 text-sm">
                  No image
                </div>
              )}
            </div>
            <div className="mt-3">
              <h3 className="font-semibold text-lg text-[#1D2019] group-hover:text-[#374527]">
                {title}
              </h3>
              {price !== null && (
                <p className="text-[#374527] font-medium">${price.toLocaleString()} USD</p>
              )}
              <p className="text-sm text-gray-500 mt-1">
                {l.beds ? `${l.beds}bd` : ''}
                {l.beds && baths ? ' · ' : ''}
                {baths ? `${baths}ba` : ''}
                {l.sqft ? ` · ${l.sqft.toLocaleString()} sqft` : ''}
              </p>
              {l.agent.name && (
                <p className="text-xs text-gray-400 mt-1">by {l.agent.name}</p>
              )}
            </div>
          </Link>
        )
      })}
    </div>
  )
}