import type { Listing } from '../types';
import { Calendar, ExternalLink, ArrowRight } from 'lucide-react';
import { Link } from 'react-router-dom';
import LazyImage from './LazyImage';
import { motion } from 'framer-motion';
import clsx from 'clsx';

export default function ListingCard({ listing }: { listing: Listing }) {
  const baseUrl = import.meta.env.VITE_BASE_URL;
  // 1. Definimos la ruta de la imagen por defecto (desde la raíz de public)
  const placeholder = '/sin_imagen.png';

  // 2. Lógica de selección de URL
  const imageUrl = listing.mainImageUrl 
    ? `${baseUrl}${listing.mainImageUrl}` 
    : placeholder;

  const jpgFallback = imageUrl.replace('.webp', '.jpg');

  return (
    <Link to={`/listing/${listing.id}`} className="group relative block h-full">
      <div className="flex h-full flex-col overflow-hidden rounded-2xl bg-white border border-slate-100 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-slate-200/60">

        {/* Image Container */}
        <div className="relative aspect-[4/3] w-full overflow-hidden bg-slate-100">
          <LazyImage
            src={imageUrl}
            fallbackSrc={jpgFallback}
            alt={listing.title}
            className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-slate-900/40 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
          {listing.overlayStatus && (
            <div className="absolute inset-0 z-20 bg-black/40 backdrop-blur-[3px] flex items-center justify-center p-4">
              <motion.div
                initial={{ scale: 0.5, opacity: 0, rotate: -10 }}
                animate={{ scale: 1, opacity: 1, rotate: listing.overlayStatus === 'Vendido' ? -5 : 5 }}
                className={clsx(
                  "px-6 py-2.5 rounded-xl text-white font-black uppercase tracking-[0.2em] text-sm border-2 shadow-[0_20px_50px_rgba(0,0,0,0.3)]",
                  listing.overlayStatus === 'Vendido' && "bg-rose-600 border-rose-400",
                  listing.overlayStatus === 'Reservado' && "bg-amber-500 border-amber-300",
                  listing.overlayStatus === 'Alquilado' && "bg-blue-600 border-blue-400"
                )}
              >
                {listing.overlayStatus}
              </motion.div>
            </div>
          )}
          {/* Badge ID */}
          <div className="absolute top-4 left-4">
            <span className="inline-flex items-center rounded-lg bg-white/95 backdrop-blur-md px-2.5 py-1 text-[10px] font-black uppercase tracking-wider text-slate-900 shadow-sm">
              #{listing.id.toString().padStart(6, '0')}
            </span>
          </div>

          <div className="absolute bottom-4 right-4 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
            <div className="rounded-full bg-blue-600 p-2.5 text-white shadow-lg">
              <ExternalLink size={16} />
            </div>
          </div>
        </div>

        {/* Content */}
        <div className="flex flex-1 flex-col p-5">
          <div className="mb-2.5 flex items-center gap-2">
            <span className="inline-block rounded-md bg-blue-50 px-2 py-0.5 text-[10px] font-bold text-blue-600 uppercase tracking-tighter">
              {listing.categoryName || 'Clasificado'}
            </span>
            <div className="h-1 w-1 rounded-full bg-slate-200"></div>
            <span className="flex items-center gap-1 text-[10px] font-bold text-slate-400">
              <Calendar size={12} className="text-slate-300" />
              {new Date(listing.createdAt).toLocaleDateString()}
            </span>
          </div>

          <h3 className="mb-4 line-clamp-2 text-lg font-extrabold text-slate-800 leading-tight group-hover:text-blue-600 transition-colors uppercase">
            {listing.title}
          </h3>

          <div className="mt-auto flex items-end justify-between border-t border-slate-50 pt-4">
            <div className="flex flex-col">
              <span className="text-[10px] font-black uppercase text-slate-300 tracking-widest leading-none">Importe</span>
              <div className="text-2xl font-black text-slate-900 leading-none mt-1.5 flex items-baseline">
                <span className="text-sm font-bold text-blue-500 mr-1">{listing.currency}</span>
                {listing.price.toLocaleString('es-AR')}
              </div>
            </div>

            <button className="flex items-center gap-1.5 text-[10px] font-black uppercase tracking-widest text-slate-400 group-hover:text-blue-600 transition-all">
              Detalle
              <ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" />
            </button>
          </div>
        </div>
      </div>
    </Link>
  );
}