"use client";

import Image from "next/image";
import Link from "next/link";
import { Clock, X, Star } from "lucide-react";
import { useRecentlyViewedStore } from "@/store/useRecentlyViewedStore";
import { formatPrice, FUEL_COLOR_MAP, cn } from "@/lib/utils";
import { resolveCarHeroImage } from "@/lib/carImage";
import BrandLogo from "@/components/brand/BrandLogo";
import BodyTypeSilhouette from "@/components/ui/BodyTypeSilhouette";

export default function RecentlyViewed() {
  const { items, clear } = useRecentlyViewedStore();

  if (items.length === 0) return null;

  return (
    <section className="py-14">
      <div className="max-w-[1280px] mx-auto px-4">
        <div className="flex items-end justify-between mb-6">
          <div>
            <p className="text-blue-600 font-bold text-sm uppercase tracking-wider mb-2">
              Your History
            </p>
            <h2 className="text-3xl font-black text-gray-900 flex items-center gap-3">
              <Clock className="w-7 h-7 text-blue-600" />
              Recently Viewed
            </h2>
          </div>
          <button
            type="button"
            onClick={clear}
            aria-label="Clear recently viewed history"
            className="flex items-center gap-1.5 text-sm text-gray-400 hover:text-red-500 transition-colors focus:outline-none focus:ring-2 focus:ring-red-400 rounded"
          >
            <X className="w-4 h-4" aria-hidden="true" />
            Clear
          </button>
        </div>

        <div className="flex gap-4 overflow-x-auto pb-2 scrollbar-none">
          {items.map((car) => {
            const heroSrc = resolveCarHeroImage(car);
            return (
              <Link
                key={car.id}
                href={`/cars/${car.id}`}
                className="group shrink-0 w-[190px] rounded-[22px] bg-white border border-gray-200/70 overflow-hidden hover:border-blue-200 hover:-translate-y-1 hover:shadow-xl hover:shadow-blue-100/30 transition-all duration-300"
              >
                <div className="relative w-full h-[110px] bg-gradient-to-br from-gray-100 to-gray-50 overflow-hidden">
                  {heroSrc ? (
                    <Image
                      src={heroSrc}
                      alt={car.name}
                      fill
                      className="object-cover group-hover:scale-105 transition-transform duration-500"
                      sizes="190px"
                    />
                  ) : (
                    <div className="absolute inset-0 flex items-center justify-center p-5 bg-gradient-to-br from-gray-50 to-gray-100">
                      <BodyTypeSilhouette type={car.bodyType} className="w-full h-full text-gray-300 max-h-[60px]" />
                    </div>
                  )}
                </div>
                <div className="p-3">
                  <div className="flex items-center gap-1.5 mb-0.5">
                    <BrandLogo brand={car.brand} size={14} 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>
                  <span className={cn(
                    "inline-block px-2 py-0.5 rounded-lg text-[10px] font-bold border mb-2",
                    FUEL_COLOR_MAP[car.fuelType] ?? "bg-gray-50 text-gray-600 border-gray-200"
                  )}>
                    {car.fuelType}
                  </span>
                  <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-1 bg-green-500 text-white text-[9px] font-black px-1.5 py-0.5 rounded-lg">
                        <Star className="w-2.5 h-2.5 fill-current" />
                        {car.rating.toFixed(1)}
                      </div>
                    )}
                  </div>
                </div>
              </Link>
            );
          })}
        </div>
      </div>
    </section>
  );
}