"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import {
  Star, Zap, Users, Settings2, Check, ArrowRight,
  GitCompare, Loader2, Shield,
} from "lucide-react";
import type { WizardCar, WizardMatchResult } from "@/lib/types";
import type { Car } from "@/lib/types";
import { cn, formatPrice } from "@/lib/utils";
import { primaryCarField } from "@/lib/carFieldUtils";
import { resolveCarHeroImage } from "@/lib/carImage";
import {
  computeWizardMatchScore,
  deriveMatchReasons,
  getMatchScoreTier,
  MATCH_SCORE_STYLES,
} from "@/lib/wizardScoring";
import CarImagePlaceholder from "@/components/ui/CarImagePlaceholder";
import { CAR_CARD_BLUR } from "@/lib/blurPlaceholder";
import { useCarStore } from "@/store/useCarStore";

interface WizardResultCardProps {
  match: WizardMatchResult;
  rank: number;
  budgetMin: number;
  budgetMax: number;
  fuelTypes: string[];
  bodyTypes: string[];
  familySize: number;
  featured?: boolean;
}

function wizardCarToCompareCar(car: WizardCar): Car {
  const img = resolveCarHeroImage(car);
  return {
    id: car.id,
    name: car.name,
    brand: car.brand,
    model: car.model ?? car.name,
    price: car.priceMin,
    priceMin: car.priceMin,
    priceMax: car.priceMax,
    fuelType: car.fuelType,
    transmission: car.transmission ?? "Manual",
    bodyType: car.bodyType,
    color: [],
    images: img ? [{ url: img, alt: car.name, isPrimary: true }] : [],
    specs: {
      mileage: car.specs?.mileage ?? "",
      engine: car.specs?.engine ?? "",
      seatingCapacity: car.specs?.seatingCapacity ?? 5,
      airbags: car.specs?.airbags,
    },
    variants: [],
    rating: car.rating ?? 0,
    reviewCount: car.reviewCount ?? 0,
    pros: [],
    cons: [],
    city: [],
    isNew: true,
    isFeatured: false,
    slug: car.slug,
    primaryImage: img,
  };
}

function FuelIcon({ fuel }: { fuel: string }) {
  const f = fuel.toLowerCase();
  if (f.includes("electric") || f === "ev") return <Zap className="w-3.5 h-3.5 text-green-500" />;
  return <span className="text-sm">⛽</span>;
}

export default function WizardResultCard({
  match,
  rank,
  budgetMin,
  budgetMax,
  fuelTypes,
  bodyTypes,
  familySize,
  featured = false,
}: WizardResultCardProps) {
  const { car, pros } = match;
  const href = `/cars/${car.slug || car.id}`;
  const imageUrl = resolveCarHeroImage(car);
  const score = computeWizardMatchScore(car, budgetMin, budgetMax, fuelTypes, bodyTypes, familySize);
  const tier = getMatchScoreTier(score);
  const styles = MATCH_SCORE_STYLES[tier];
  const matchReasons = deriveMatchReasons(car, budgetMin, budgetMax, fuelTypes, bodyTypes, familySize);
  const displayReasons = matchReasons.length > 0 ? matchReasons : pros.slice(0, 4);

  const { addToCompare, removeFromCompare, compareList } = useCarStore();
  const isComparing = compareList.some((c) => c.id === car.id);
  const canCompare = compareList.length < 4;
  const [compareLoading, setCompareLoading] = useState(false);

  function handleCompare() {
    setCompareLoading(true);
    if (isComparing) {
      removeFromCompare(car.id);
    } else if (canCompare) {
      addToCompare(wizardCarToCompareCar(car));
    }
    setTimeout(() => setCompareLoading(false), 350);
  }

  const seating = car.specs?.seatingCapacity ?? 0;

  return (
    <article
      className={cn(
        "group flex min-w-0 flex-col overflow-hidden rounded-2xl border bg-white transition-all duration-300",
        featured
          ? "border-blue-200 shadow-[0_12px_40px_rgba(37,99,235,0.12)] ring-1 ring-blue-100 hover:shadow-[0_16px_48px_rgba(37,99,235,0.16)]"
          : "border-gray-100 shadow-[0_4px_24px_rgba(0,0,0,0.06)] hover:shadow-[0_12px_36px_rgba(37,99,235,0.10)] hover:border-blue-100",
      )}
    >
      {/* Image */}
      <Link href={href} className="relative block aspect-[16/10] overflow-hidden bg-gradient-to-br from-slate-50 to-blue-50/60">
        {imageUrl ? (
          <Image
            src={imageUrl}
            alt={car.name}
            fill
            placeholder="blur"
            blurDataURL={CAR_CARD_BLUR}
            className="object-cover transition-transform duration-500 group-hover:scale-105"
            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
          />
        ) : (
          <CarImagePlaceholder
            bodyType={car.bodyType}
            carName={car.name}
            brand={car.brand}
            size="md"
          />
        )}

        {/* Rank + score badges */}
        <div className="absolute top-3 left-3 right-3 flex items-start justify-between gap-2 pointer-events-none">
          <span className={cn(
            "inline-flex items-center gap-1.5 rounded-full px-2.5 sm:px-3 py-1 text-[10px] sm:text-[11px] font-black uppercase tracking-wide shadow-md max-w-[58%] min-w-0",
            rank === 1
              ? "bg-gradient-to-r from-blue-600 to-indigo-600 text-white"
              : "bg-white/95 text-gray-800 backdrop-blur",
          )}>
            <span className="truncate">
              {rank === 1 ? "#1 Recommended" : `#${rank} Match`}
            </span>
          </span>

          <span className={cn("shrink-0 rounded-full px-2.5 py-1 text-[10px] sm:text-xs font-black shadow-md", styles.bg, styles.text)}>
            {score}% Match
          </span>
        </div>
      </Link>

      <div className="flex flex-1 flex-col p-4 sm:p-5 min-w-0">
        {/* Match progress bar */}
        <div className="mb-4">
          <div className="h-1.5 w-full overflow-hidden rounded-full bg-gray-100">
            <div
              className={cn("h-full rounded-full transition-all duration-700", styles.bar)}
              style={{ width: `${score}%` }}
            />
          </div>
        </div>

        {/* Title */}
        <p className="text-[10px] font-black uppercase tracking-widest text-blue-600 break-words">{car.brand}</p>
        <Link href={href}>
          <h3 className="text-lg font-black text-gray-900 leading-tight hover:text-blue-600 transition-colors break-words">
            {car.name}
          </h3>
        </Link>

        {/* Spec chips */}
        <div className="mt-3 flex flex-wrap gap-x-3 gap-y-1.5 text-xs text-gray-600">
          {(car.rating ?? 0) > 0 && (
            <span className="inline-flex items-center gap-1 font-semibold">
              <Star className="w-3.5 h-3.5 fill-amber-400 text-amber-400" />
              {car.rating?.toFixed(1)} Rating
            </span>
          )}
          {car.fuelType && (
            <span className="inline-flex items-center gap-1 font-medium">
              <FuelIcon fuel={primaryCarField(car.fuelType)} />
              {primaryCarField(car.fuelType)}
            </span>
          )}
          {car.transmission && (
            <span className="inline-flex items-center gap-1 font-medium">
              <Settings2 className="w-3.5 h-3.5 text-gray-400" />
              {primaryCarField(car.transmission)}
            </span>
          )}
          {seating > 0 && (
            <span className="inline-flex items-center gap-1 font-medium">
              <Users className="w-3.5 h-3.5 text-gray-400" />
              {seating} Seater
            </span>
          )}
        </div>

        {/* Price */}
        <div className="mt-3 mb-4 min-w-0">
          <p className="text-lg font-black text-gray-900 break-words">
            {formatPrice(car.priceMin)}
            {(car.priceMax ?? car.priceMin) > car.priceMin && (
              <span className="text-gray-400 font-bold"> – {formatPrice(car.priceMax)}</span>
            )}
          </p>
        </div>

        {/* Why this matches */}
        {displayReasons.length > 0 && (
          <div className="mb-5 flex-1 min-w-0">
            <p className="text-[10px] font-black uppercase tracking-wide text-gray-500 mb-2">
              Why this matches
            </p>
            <ul className="space-y-1.5">
              {displayReasons.map((reason) => (
                <li key={reason} className="flex items-start gap-2 text-xs text-gray-700 min-w-0">
                  <Check className="w-3.5 h-3.5 text-emerald-500 mt-0.5 shrink-0" />
                  <span className="min-w-0 break-words">{reason}</span>
                </li>
              ))}
            </ul>
          </div>
        )}

        {(car.specs?.airbags ?? 0) >= 6 && !displayReasons.some((r) => r.includes("safety")) && (
          <div className="mb-4 flex items-center gap-1.5 text-xs text-emerald-700">
            <Shield className="w-3.5 h-3.5" />
            {car.specs!.airbags} airbags
          </div>
        )}

        {/* CTAs */}
        <div className="mt-auto grid grid-cols-1 xs:grid-cols-2 gap-2.5 min-w-0">
          <Link
            href={href}
            className="flex items-center justify-center gap-1.5 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 py-2.5 text-sm font-bold text-white shadow-md shadow-blue-100 hover:shadow-lg hover:shadow-blue-200 transition-all min-w-0"
          >
            View Details
            <ArrowRight className="w-3.5 h-3.5" />
          </Link>
          <button
            type="button"
            onClick={handleCompare}
            disabled={!canCompare && !isComparing}
            className={cn(
              "flex items-center justify-center gap-1.5 rounded-xl border py-2.5 text-sm font-bold transition-all min-w-0",
              isComparing
                ? "border-blue-300 bg-blue-50 text-blue-700"
                : "border-gray-200 text-gray-700 hover:border-blue-300 hover:text-blue-600",
              !canCompare && !isComparing && "opacity-50 cursor-not-allowed",
            )}
          >
            {compareLoading ? (
              <Loader2 className="w-3.5 h-3.5 animate-spin" />
            ) : (
              <GitCompare className="w-3.5 h-3.5" />
            )}
            {isComparing ? "Added" : "Compare"}
          </button>
        </div>
      </div>
    </article>
  );
}