import Image from 'next/image'
import Link from 'next/link'
import { Bed, Bath, Users, MapPin } from 'lucide-react'
import type { RentalDTO } from '@/lib/api/cms'
import { getTranslation, type Language } from '@/lib/i18n'

/**
 * Tarjeta del catálogo de rentals.
 *
 * Las imágenes se sirven desde el CMS (cms.kevinvictorrealestate.com), por lo
 * que la URL es absoluta y ese host ya está en `remotePatterns` de
 * next.config.js.
 */

const UPLOADS_BASE = (process.env.NEXT_PUBLIC_UPLOADS_BASE || '/uploads').replace(/\/$/, '')

function absoluteImage(path: string): string {
  return path.startsWith('http') ? path : `${UPLOADS_BASE}${path}`
}

export default function RentalCard({
  rental,
  lang,
}: {
  rental: RentalDTO
  lang: string | Language
}) {
  const cover = rental.images.find((i) => i.isCover) ?? rental.images[0]

  // El área se muestra traducida igual que en el filtro. Mostrar el slug
  // aquí y el nombre en el desplegable, a dos centímetros, se veía descuidado.
  const areaKey = `rentals.areas.${rental.areaKey}`
  const areaLabel = rental.areaKey
    ? getTranslation(lang as Language, areaKey)
    : null
  const area =
    rental.areaKey && areaLabel !== areaKey ? areaLabel : (rental.areaKey ?? null)

  return (
    <Link
      href={`/${lang}/rentals/${rental.slug}/`}
      className="group block overflow-hidden rounded-xl bg-white shadow-sm transition hover:shadow-lg"
    >
      <div className="relative aspect-[4/3] overflow-hidden bg-brand-sand">
        {cover ? (
          <Image
            src={absoluteImage(cover.path)}
            alt={cover.alt ?? rental.title}
            fill
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
            className="object-cover transition duration-300 group-hover:scale-105"
          />
        ) : (
          <div className="flex h-full items-center justify-center text-brand-accent">
            —
          </div>
        )}
        <div className="absolute right-3 top-3 rounded-full bg-brand-darkGreen/90 px-3 py-1 text-sm font-semibold text-white">
          ${rental.nightlyRate}{' '}
          <span className="text-xs font-normal">{rental.currency} / noche</span>
        </div>
      </div>

      <div className="p-4">
        <h3 className="mb-1 font-semibold text-brand-text">{rental.title}</h3>
        {area && (
          <p className="mb-2 flex items-center gap-1 text-xs text-gray-500">
            <MapPin size={12} /> {area}
          </p>
        )}
        <div className="flex gap-3 text-xs text-gray-600">
          {rental.bedrooms != null && (
            <span className="flex items-center gap-1">
              <Bed size={13} /> {rental.bedrooms}
            </span>
          )}
          {rental.bathrooms != null && (
            <span className="flex items-center gap-1">
              <Bath size={13} /> {rental.bathrooms}
            </span>
          )}
          {rental.guests != null && (
            <span className="flex items-center gap-1">
              <Users size={13} /> {rental.guests}
            </span>
          )}
        </div>
      </div>
    </Link>
  )
}