import { useState, useCallback } from "react";
import { Link } from "@tanstack/react-router";
import { MapPin, Maximize2, BedDouble, Dumbbell, Waves, Car, Shield, Trees, Wifi, CheckCircle2, Hammer, Sparkles } from "lucide-react";
import type { Property } from "@/lib/properties";
import { useLead } from "./LeadProvider";

const FALLBACK_IMG = "https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=1024&q=80&auto=format&fit=crop";

const AMENITY_ICON: Record<string, typeof Dumbbell> = {
  pool: Waves, gym: Dumbbell, parking: Car, security: Shield, garden: Trees, wifi: Wifi,
};

const STATUS_STYLE: Record<Property["status"], { cls: string; Icon: typeof CheckCircle2 }> = {
  "Ready to Move": { cls: "bg-emerald-500/90 text-white", Icon: CheckCircle2 },
  "Under Construction": { cls: "bg-amber-500/90 text-black", Icon: Hammer },
  "New Launch": { cls: "bg-rose-500/90 text-white", Icon: Sparkles },
};

export function PropertyCard({ p }: { p: Property }) {
  const { openLead } = useLead();
  const [imgSrc, setImgSrc] = useState(p.image);
  const tagColor = p.tag === "Featured" ? "bg-gold text-black" : p.tag === "New" ? "bg-emerald-500 text-white" : "bg-rose-500 text-white";
  const status = STATUS_STYLE[p.status];

  const handleImgError = useCallback(() => {
    setImgSrc(FALLBACK_IMG);
  }, []);

  return (
    <article className="group bg-card border border-border rounded-2xl overflow-hidden hover-lift reveal">
      <div className="relative aspect-[4/3] overflow-hidden bg-muted">
        <img
          src={imgSrc}
          alt={`${p.title} in ${p.location}`}
          loading="lazy"
          width={1024}
          height={768}
          onError={handleImgError}
          className="w-full h-full object-cover group-hover:scale-105 transition duration-700"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
        <span className={`absolute top-3 left-3 ${tagColor} text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded`}>{p.tag}</span>
        <span className={`absolute top-3 right-3 ${status.cls} inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded`}>
          <status.Icon size={11} /> {p.status}
        </span>
        <div className="absolute bottom-3 left-3 right-3 flex items-end justify-between text-white">
          <div>
            <div className="flex items-center gap-1 text-xs text-white/80"><MapPin size={12} />{p.location}, Pune</div>
          </div>
          <div className="text-lg font-bold text-gold drop-shadow">{p.price}</div>
        </div>
      </div>
      <div className="p-5">
        <h3 className="text-lg font-bold leading-tight mb-2">{p.title}</h3>
        <div className="flex flex-wrap gap-3 text-xs text-muted-foreground mb-3">
          {p.bhk && <span className="inline-flex items-center gap-1"><BedDouble size={13} className="text-gold" />{p.bhk}</span>}
          <span className="inline-flex items-center gap-1"><Maximize2 size={13} className="text-gold" />{p.area}</span>
          <span className="inline-flex items-center gap-1 uppercase tracking-wider">{p.category}</span>
        </div>
        <div className="flex flex-wrap gap-2 mb-4">
          {p.amenities.slice(0, 5).map((a) => {
            const Icon = AMENITY_ICON[a] ?? Shield;
            return (
              <span key={a} title={a} className="inline-flex items-center gap-1 text-[11px] bg-muted/60 text-muted-foreground px-2 py-1 rounded-md capitalize">
                <Icon size={12} className="text-gold" /> {a}
              </span>
            );
          })}
        </div>
        <div className="flex gap-2">
          <button onClick={() => openLead(`property-${p.id}`)} className="flex-1 gradient-gold text-black text-sm font-semibold py-2.5 rounded-lg hover:shadow-luxury transition">
            Get Best Deal
          </button>
          <Link to="/contact" className="px-3 py-2.5 border border-border rounded-lg text-sm font-semibold hover:border-gold transition">
            Details
          </Link>
        </div>
      </div>
    </article>
  );
}