"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import {
  Star,
  Heart,
  GitCompare,
  Settings2,
  Users,
  Gauge,
  ChevronRight,
  MapPin,
  Sparkles,
  Loader2,
} from "lucide-react";
import { motion } from "framer-motion";

import type { Car } from "@/lib/types";
import { formatPrice, cn } from "@/lib/utils";
import { resolveCarHeroImage } from "@/lib/carImage";
import CarFieldBadges from "@/components/cars/CarFieldBadges";
import { useWishlistStore } from "@/store/useWishlistStore";
import { useCarStore } from "@/store/useCarStore";
import BrandLogo from "@/components/brand/BrandLogo";
import BodyTypeSilhouette from "@/components/ui/BodyTypeSilhouette";
import { CAR_CARD_BLUR } from "@/lib/blurPlaceholder";

export default function CarListCard({ car }: { car: Car }) {
  const { toggle, has }                                        = useWishlistStore();
  const { addToCompare, removeFromCompare, compareList }       = useCarStore();

  const isWished    = has(car.id);
  const isComparing = compareList.some((c) => c.id === car.id);
  const canCompare  = compareList.length < 4;
  const heroSrc     = resolveCarHeroImage(car);
  const fuelDisplay = car.fuelTypes?.length ? car.fuelTypes : car.fuelType;
  const transDisplay = car.availableTransmissions?.length ? car.availableTransmissions : car.transmission;
  const bodyDisplay = car.availableBodyTypes?.length ? car.availableBodyTypes : car.bodyType;

  // Per-button loading feedback (short pulse to confirm the action was received)
  const [wishLoading,    setWishLoading]    = useState(false);
  const [compareLoading, setCompareLoading] = useState(false);

  function handleWishlist() {
    setWishLoading(true);
    toggle(car);
    setTimeout(() => setWishLoading(false), 400);
  }

  function handleCompare() {
    if (!canCompare && !isComparing) return;
    setCompareLoading(true);
    isComparing ? removeFromCompare(car.id) : addToCompare(car);
    setTimeout(() => setCompareLoading(false), 400);
  }

  const keySpecs = [
    car.specs?.mileage           && { icon: Gauge,    label: car.specs.mileage,                       title: "Mileage" },
    car.specs?.engine            && { icon: Settings2, label: car.specs.engine,                        title: "Engine"  },
    car.specs?.seatingCapacity   && { icon: Users,     label: `${car.specs.seatingCapacity} Seater`,   title: "Seats"   },
  ].filter(Boolean) as { icon: React.ElementType; label: string; title: string }[];

  return (
    <motion.div
      whileHover={{ y: -3 }}
      transition={{ duration: 0.25 }}
      className="group relative min-w-0 overflow-hidden rounded-[28px] border border-gray-200/70 bg-white shadow-[0_8px_30px_rgba(0,0,0,0.05)] hover:shadow-[0_15px_45px_rgba(37,99,235,0.10)] transition-all duration-500"
    >
      <div className="flex flex-col lg:flex-row lg:min-h-[240px]">

        {/* ── IMAGE ─────────────────────────────────────────────────────── */}
        <div className="relative w-full lg:w-[300px] xl:w-[320px] shrink-0 overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200">
          <div className="relative h-[220px] sm:h-[240px] lg:h-full">
            {heroSrc ? (
              <Image
                src={heroSrc}
                alt={car.name}
                fill
                placeholder="blur"
                blurDataURL={CAR_CARD_BLUR}
                quality={75}
                className="object-cover transition-transform duration-700 group-hover:scale-105"
                sizes="(max-width: 1024px) 100vw, 320px"
                loading="lazy"
              />
            ) : (
              /* SVG car silhouette — never a generic Lucide icon */
              <div className="absolute inset-0 flex items-center justify-center p-8 bg-gradient-to-br from-gray-50 to-gray-100">
                <BodyTypeSilhouette
                  type={car.bodyType}
                  className="w-full h-full text-gray-300 max-h-[120px]"
                />
              </div>
            )}

            <div className="absolute inset-0 bg-gradient-to-t from-black/25 via-transparent to-transparent" />

            {car.badge && (
              <div className="absolute top-4 left-4">
                <div className="flex items-center gap-1 rounded-2xl bg-gradient-to-r from-red-500 to-pink-500 px-3 py-1 text-[10px] font-black text-white shadow-xl">
                  <Sparkles className="w-3 h-3" />
                  {car.badge}
                </div>
              </div>
            )}

            {car.isNew && (
              <div className="absolute bottom-4 left-4 rounded-xl bg-green-500 px-3 py-1 text-[10px] font-black text-white shadow-lg">
                NEW
              </div>
            )}
          </div>
        </div>

        {/* ── CONTENT ───────────────────────────────────────────────────── */}
        <div className="flex flex-1 flex-col justify-between p-4 sm:p-5 min-w-0">
          <div>
            {/* Header: brand logo + name + wishlist */}
            <div className="flex items-start justify-between gap-3 mb-2">
              <div className="min-w-0">
                {/* Brand row */}
                <div className="flex items-center gap-2 mb-1">
                  <BrandLogo brand={car.brand} size={22} showWhiteBg={false} />
                  <p className="text-[10px] uppercase tracking-[0.2em] text-blue-600 font-black">
                    {car.brand}
                  </p>
                </div>

                {/* Name */}
                <Link href={`/cars/${car.id}`} className="block">
                  <h2 className="text-lg sm:text-xl font-black text-gray-900 leading-tight group-hover:text-blue-600 transition-colors duration-300 line-clamp-2">
                    {car.name}
                    <span className="ml-2 text-sm font-medium text-gray-400">({car.year})</span>
                  </h2>
                </Link>
              </div>

              {/* Wishlist button with loading state */}
              <motion.button
                type="button"
                whileTap={{ scale: 0.88 }}
                whileHover={{ scale: 1.05 }}
                onClick={handleWishlist}
                disabled={wishLoading}
                aria-label={isWished ? `Remove ${car.name} from wishlist` : `Save ${car.name} to wishlist`}
                aria-pressed={isWished}
                className={cn(
                  "shrink-0 w-10 h-10 rounded-2xl border flex items-center justify-center transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-red-400",
                  isWished
                    ? "bg-red-50 border-red-200 text-red-500 shadow-lg shadow-red-100"
                    : "bg-white border-gray-200 text-gray-400 hover:border-red-200 hover:text-red-500"
                )}
              >
                {wishLoading
                  ? <Loader2 className="w-4 h-4 animate-spin" aria-hidden="true" />
                  : <Heart className="w-4 h-4" fill={isWished ? "currentColor" : "none"} aria-hidden="true" />
                }
              </motion.button>
            </div>

            {/* Price */}
            <div className="flex flex-wrap items-end gap-2 mb-3">
              <span className="text-2xl font-black text-gray-900">{formatPrice(car.priceMin)}</span>
              {car.priceMax > car.priceMin && (
                <span className="text-base font-semibold text-gray-500">– {formatPrice(car.priceMax)}</span>
              )}
              <span className="text-xs font-medium text-gray-400 mb-0.5">onwards*</span>
            </div>

            {/* Rating */}
            {car.rating > 0 && (
              <div className="flex items-center gap-3 mb-3">
                <div className="flex items-center gap-1 rounded-xl bg-gradient-to-r from-green-500 to-emerald-500 px-2.5 py-1 text-xs font-black text-white shadow-md">
                  <Star className="w-3 h-3 fill-current" />
                  {car.rating.toFixed(1)}
                </div>
                <span className="text-sm text-gray-400">({car.reviewCount.toLocaleString()} reviews)</span>
              </div>
            )}

            {/* Tags */}
            <div className="flex flex-wrap gap-2 mb-3">
              <CarFieldBadges value={fuelDisplay} kind="fuel" size="sm" />
              <CarFieldBadges value={transDisplay} kind="transmission" size="sm" />
              <CarFieldBadges value={bodyDisplay} kind="body" size="sm" />
            </div>

            {/* Specs */}
            {keySpecs.length > 0 && (
              <div className="flex flex-wrap gap-2 border-t border-gray-100 pt-3 mb-3">
                {keySpecs.map(({ icon: Icon, label, title }) => (
                  <div key={title} className="flex items-center gap-2 rounded-xl bg-gray-50 px-2.5 py-1.5">
                    <Icon className="w-3.5 h-3.5 text-blue-500 shrink-0" />
                    <div>
                      <p className="text-[9px] uppercase tracking-wide text-gray-400 font-bold leading-none mb-0.5">{title}</p>
                      <p className="text-xs font-semibold text-gray-700 leading-none">{label}</p>
                    </div>
                  </div>
                ))}

                {car.city?.length > 0 && (
                  <div className="flex items-center gap-2 rounded-xl bg-gray-50 px-2.5 py-1.5">
                    <MapPin className="w-3.5 h-3.5 text-gray-400 shrink-0" />
                    <span className="text-xs text-gray-600 font-medium">{car.city.slice(0, 2).join(", ")}</span>
                  </div>
                )}
              </div>
            )}
          </div>

          {/* ── ACTIONS ─────────────────────────────────────────────────── */}
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 pt-1">
            <Link
              href={`/cars/${car.id}`}
              className="group/link inline-flex items-center gap-2 text-sm font-black text-blue-600 hover:text-blue-700 transition-colors"
            >
              View Details
              <ChevronRight className="w-4 h-4 transition-transform duration-300 group-hover/link:translate-x-1" />
            </Link>

            {/* Compare button with loading state */}
            <motion.button
              type="button"
              whileHover={{ y: -1 }}
              whileTap={{ scale: 0.97 }}
              onClick={handleCompare}
              disabled={(!canCompare && !isComparing) || compareLoading}
              aria-label={isComparing ? `Remove ${car.name} from comparison` : `Add ${car.name} to comparison`}
              aria-pressed={isComparing}
              className={cn(
                "flex items-center justify-center gap-2 rounded-2xl px-4 py-2.5 text-sm font-bold transition-all duration-300 w-full sm:w-auto focus:outline-none focus:ring-2 focus:ring-blue-400",
                isComparing
                  ? "bg-blue-50 border border-blue-200 text-blue-600 shadow-lg shadow-blue-100"
                  : canCompare
                  ? "bg-gray-100 hover:bg-blue-50 border border-gray-200 hover:border-blue-200 text-gray-700 hover:text-blue-600"
                  : "bg-gray-50 border border-gray-100 text-gray-300 cursor-not-allowed"
              )}
            >
              {compareLoading
                ? <Loader2 className="w-4 h-4 animate-spin" aria-hidden="true" />
                : <GitCompare className="w-4 h-4" aria-hidden="true" />
              }
              {isComparing ? "Added" : "Compare"}
            </motion.button>
          </div>
        </div>
      </div>
    </motion.div>
  );
}