/**
 * components/properties/PropertyCard.tsx
 * Card component for displaying a property listing — professional institutional theme.
 */

import Image from "next/image";
import Link from "next/link";
import { MapPin, Bed, Bath, Square, IndianRupee, ArrowRight } from "lucide-react";
import { Badge } from "@/components/ui/Badge";
import type { IProperty } from "@/types";

interface PropertyCardProps {
  property: IProperty;
}

const statusVariant: Record<string, "success" | "warning" | "error" | "default"> = {
  available: "success",
  under_contract: "warning",
  sold: "error",
  off_market: "default",
};

const statusLabel: Record<string, string> = {
  available: "AVAILABLE",
  under_contract: "CONTRACT",
  sold: "SOLD",
  off_market: "OFF MARKET",
};

export function PropertyCard({ property }: PropertyCardProps) {
  const image = property.images?.[0] ?? "https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=800";

  return (
    <Link href={`/properties/${property._id}`} className="group block">
      <div className="rounded-[2rem] bg-white border border-slate-100 overflow-hidden transition-all duration-500 hover:border-black hover:-translate-y-1 hover:shadow-2xl hover:shadow-black/5 shadow-sm">
        {/* Image */}
        <div className="relative h-64 overflow-hidden bg-slate-50">
          <Image
            src={image}
            alt={property.title}
            fill
            className="object-cover transition-transform duration-700 group-hover:scale-105"
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
          
          <div className="absolute top-4 left-4">
            <Badge variant={statusVariant[property.status] ?? "default"} className="px-3 py-1 text-[9px] font-black uppercase tracking-widest border-none shadow-lg">
              {statusLabel[property.status] ?? property.status}
            </Badge>
          </div>
          
          <div className="absolute bottom-4 right-4 flex items-center gap-2">
            <span className="inline-flex items-center rounded-lg bg-black text-white px-3 py-1.5 text-[9px] font-black uppercase tracking-widest shadow-xl">
              {property.commissionRate}% YIELD
            </span>
          </div>
        </div>

        {/* Content */}
        <div className="p-7">
          <div className="flex items-center gap-2 text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-3">
            <MapPin className="h-3 w-3" />
            <span className="truncate">{property.location.city}</span>
            <span className="h-1 w-1 rounded-full bg-slate-200 mx-1" />
            <span>ID: {property._id.slice(-6).toUpperCase()}</span>
          </div>

          <h3 className="font-jakarta font-black text-black text-lg mb-4 line-clamp-1 group-hover:text-slate-600 transition-colors uppercase tracking-tight">
            {property.title}
          </h3>

          {/* Features */}
          {(property.bedrooms || property.bathrooms || property.area) && (
            <div className="grid grid-cols-3 gap-4 py-4 border-t border-slate-50 mb-6">
              <div className="flex flex-col gap-1">
                <span className="text-[9px] font-black text-slate-300 uppercase tracking-widest">Beds</span>
                <span className="text-xs font-black text-black">{property.bedrooms ?? 0}</span>
              </div>
              <div className="flex flex-col gap-1">
                <span className="text-[9px] font-black text-slate-300 uppercase tracking-widest">Baths</span>
                <span className="text-xs font-black text-black">{property.bathrooms ?? 0}</span>
              </div>
              <div className="flex flex-col gap-1">
                <span className="text-[9px] font-black text-slate-300 uppercase tracking-widest">Area</span>
                <span className="text-xs font-black text-black">{property.area ?? 0} <span className="text-[9px] text-slate-300">SQFT</span></span>
              </div>
            </div>
          )}

          {/* Price & Action */}
          <div className="flex items-center justify-between pt-4 border-t border-slate-50">
            <div className="flex items-center gap-1 text-xl font-jakarta font-black text-black tracking-tight">
              <IndianRupee className="h-4 w-4" />
              {property.price.toLocaleString("en-IN")}
            </div>
            <div className="h-10 w-10 rounded-full border border-slate-100 flex items-center justify-center group-hover:bg-black group-hover:border-black transition-all duration-300">
               <ArrowRight className="h-4 w-4 text-slate-300 group-hover:text-white transition-colors" />
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
}