"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { ChevronRight, Star, ArrowDownCircle, ArrowUpCircle } from "lucide-react";
import { fetchSimilarCars } from "@/lib/api";
import type { Car, SimilarCarsResponse } from "@/lib/types";
import { formatPrice, cn } from "@/lib/utils";
import { resolveCarHeroImage } from "@/lib/carImage";
import { primaryCarField } from "@/lib/carFieldUtils";
import CarFieldBadges from "@/components/cars/CarFieldBadges";
import BrandLogo from "@/components/brand/BrandLogo";
import BodyTypeSilhouette from "@/components/ui/BodyTypeSilhouette";

interface Props {
  currentCarId: string;
  brand: string;
  bodyType: string;
}

/* ── Mini car card ─────────────────────────────────────────────────────── */
function MiniCard({ car }: { car: Car }) {
  const heroSrc = resolveCarHeroImage(car);
  const fuelDisplay = car.fuelTypes?.length ? car.fuelTypes : car.fuelType;
  return (
    <Link
      href={`/cars/${car.id}`}
      className="group shrink-0 w-[195px] rounded-[20px] border border-gray-200/70 bg-white overflow-hidden hover:border-blue-200 hover:-translate-y-1.5 hover:shadow-xl hover:shadow-blue-100/30 transition-all duration-300 active:scale-95"
    >
      <div className="relative w-full h-[116px] bg-gradient-to-br from-gray-100 to-gray-50 overflow-hidden">
        {heroSrc ? (
          <Image
            src={heroSrc}
            alt={car.name}
            fill
            className="object-cover transition-transform duration-500 group-hover:scale-105"
            sizes="195px"
          />
        ) : (
          <div className="absolute inset-0 flex items-center justify-center p-6">
            <BodyTypeSilhouette type={car.bodyType} className="w-full h-full text-gray-300 max-h-[65px]" />
          </div>
        )}
        {car.isUpcoming && (
          <div className="absolute top-2 left-2">
            <span className="bg-purple-500 text-white text-[9px] font-black px-2 py-0.5 rounded-lg shadow">UPCOMING</span>
          </div>
        )}
      </div>
      <div className="p-3">
        <div className="flex items-center gap-1.5 mb-0.5">
          <BrandLogo brand={car.brand} size={13} showWhiteBg={false} />
          <p className="text-[9px] uppercase tracking-[0.15em] text-blue-600 font-black">{car.brand}</p>
        </div>
        <p className="text-sm font-black text-gray-900 leading-tight line-clamp-1 group-hover:text-blue-600 transition-colors mb-1.5">
          {car.name}
        </p>
        <CarFieldBadges value={fuelDisplay} kind="fuel" size="sm" className="mb-1.5" />
        <div className="flex items-center justify-between">
          <p className="text-sm font-black text-gray-900">{formatPrice(car.priceMin)}</p>
          {car.rating > 0 && (
            <div className="flex items-center gap-0.5 bg-green-500 text-white text-[9px] font-black px-1.5 py-0.5 rounded-lg">
              <Star className="w-2 h-2 fill-current" />
              {car.rating.toFixed(1)}
            </div>
          )}
        </div>
      </div>
    </Link>
  );
}

/* ── Car group row ─────────────────────────────────────────────────────── */
function GroupRow({
  title,
  cars,
  accent = "text-blue-600",
  viewAllHref,
}: {
  title: string;
  cars: Car[];
  accent?: string;
  viewAllHref?: string;
}) {
  if (cars.length === 0) return null;
  return (
    <div className="mb-6 last:mb-0">
      <div className="flex items-center justify-between mb-3 px-1">
        <h3 className={cn("text-sm font-black uppercase tracking-wider", accent)}>{title}</h3>
        {viewAllHref && (
          <Link href={viewAllHref} className="flex items-center gap-0.5 text-xs font-bold text-blue-600 hover:gap-1 transition-all">
            View All <ChevronRight className="w-3 h-3" />
          </Link>
        )}
      </div>
      <div className="flex gap-3 overflow-x-auto scrollbar-none pb-1">
        {cars.map((car) => (
          <MiniCard key={car.id} car={car} />
        ))}
      </div>
    </div>
  );
}

/* ── Main component ────────────────────────────────────────────────────── */
export default function SimilarCars({ currentCarId, brand, bodyType }: Props) {
  const [data, setData] = useState<SimilarCarsResponse | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);

    fetchSimilarCars(currentCarId)
      .then((res) => { if (!cancelled) setData(res); })
      .catch(() => {
        if (cancelled) return;
        // Fallback: set empty groups so component hides gracefully
        setData({ similar: [], alternatives: [], budgetBelow: [], budgetAbove: [] });
      })
      .finally(() => { if (!cancelled) setLoading(false); });

    return () => { cancelled = true; };
  }, [currentCarId]);

  if (loading) {
    return (
      <div className="rounded-[28px] bg-white border border-gray-200/60 p-6 shadow-[0_8px_30px_rgba(0,0,0,0.05)]">
        <div className="h-5 w-44 bg-gray-100 rounded-xl animate-pulse mb-5" />
        {[...Array(2)].map((_, g) => (
          <div key={g} className="mb-6">
            <div className="h-3 w-24 bg-gray-100 rounded animate-pulse mb-3" />
            <div className="flex gap-3">
              {[...Array(4)].map((_, i) => (
                <div key={i} className="shrink-0 w-[195px] rounded-[20px] bg-gray-100 animate-pulse h-[200px]" />
              ))}
            </div>
          </div>
        ))}
      </div>
    );
  }

  const hasAny = data &&
    (data.similar.length > 0 || data.alternatives.length > 0 ||
     data.budgetBelow.length > 0 || data.budgetAbove.length > 0);

  if (!hasAny) return null;

  return (
    <div className="rounded-[28px] bg-white border border-gray-200/60 overflow-hidden shadow-[0_8px_30px_rgba(0,0,0,0.05)]">
      <div className="px-6 py-5 border-b border-gray-100">
        <p className="text-[10px] uppercase tracking-[0.2em] text-blue-600 font-black mb-1">
          You May Also Like
        </p>
        <h2 className="text-lg font-black text-gray-900">Similar &amp; Alternative Cars</h2>
      </div>

      <div className="p-5">
        <GroupRow
          title={`More ${brand} Cars`}
          cars={data!.similar}
          accent="text-blue-700"
          viewAllHref={`/cars?brand=${encodeURIComponent(brand)}`}
        />

        <GroupRow
          title="Alternatives to Consider"
          cars={data!.alternatives}
          accent="text-violet-700"
          viewAllHref={`/cars?bodyType=${encodeURIComponent(bodyType)}`}
        />

        {data!.budgetBelow.length > 0 && (
          <div className="mb-6 last:mb-0">
            <div className="flex items-center gap-2 mb-3 px-1">
              <ArrowDownCircle className="w-4 h-4 text-green-600 shrink-0" />
              <h3 className="text-sm font-black uppercase tracking-wider text-green-700">
                Budget-Friendly Options
              </h3>
            </div>
            <div className="flex gap-3 overflow-x-auto scrollbar-none pb-1">
              {data!.budgetBelow.map((car) => <MiniCard key={car.id} car={car} />)}
            </div>
          </div>
        )}

        {data!.budgetAbove.length > 0 && (
          <div className="mb-0">
            <div className="flex items-center gap-2 mb-3 px-1">
              <ArrowUpCircle className="w-4 h-4 text-amber-600 shrink-0" />
              <h3 className="text-sm font-black uppercase tracking-wider text-amber-700">
                Higher Budget Options
              </h3>
            </div>
            <div className="flex gap-3 overflow-x-auto scrollbar-none pb-1">
              {data!.budgetAbove.map((car) => <MiniCard key={car.id} car={car} />)}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}