'use client';
import Image from 'next/image';
import Link from 'next/link';
import { motion } from 'framer-motion';
import { Calendar, Gauge, Tag, Eye } from 'lucide-react';
import { useLanguage } from '@/lib/i18n/language-context';

interface VehicleCardProps {
  vehicle: {
    id: string;
    slug: string;
    title: string;
    make: string;
    model: string;
    year: number;
    price: number;
    mileage: number | null;
    status: string;
    featured: boolean;
    viewCount: number;
    images: { url: string | null; alt: string | null; isPrimary: boolean; cloudStoragePath: string }[];
    category: { name: string; nameEn?: string | null } | null;
  };
}

export function VehicleCard({ vehicle }: VehicleCardProps) {
  const primaryImage = vehicle?.images?.find((i: any) => i?.isPrimary) ?? vehicle?.images?.[0];
  const imageUrl = primaryImage?.url ?? '/images/cat-trucks.jpg';
  const isSold = vehicle?.status === 'SOLD';
  const { t, locale } = useLanguage();
  const categoryName = (locale === 'en' && vehicle?.category?.nameEn) ? vehicle.category.nameEn : (vehicle?.category?.name ?? t.common.equipment);

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.4 }}
      className="group"
    >
      <Link href={`/inventory/${vehicle?.slug}`}>
        <div className="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 group-hover:-translate-y-1">
          <div className="relative aspect-[4/3] bg-gray-100">
            <Image
              src={imageUrl}
              alt={vehicle?.title ?? 'Vehicle'}
              fill
              className="object-cover transition-transform duration-500 group-hover:scale-105"
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
            />
            {isSold && (
              <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
                <span className="bg-red-600 text-white px-4 py-2 rounded-lg font-bold text-lg -rotate-12">{t.vehicleCard.soldBadge}</span>
              </div>
            )}
            {vehicle?.featured && !isSold && (
              <span className="absolute top-3 left-3 bg-red-600 text-white px-3 py-1 rounded-full text-xs font-semibold">{t.vehicleCard.featured}</span>
            )}
            <span className="absolute top-3 right-3 bg-black/70 text-white px-2 py-1 rounded-md text-xs">
              {categoryName}
            </span>
          </div>
          <div className="p-4">
            <h3 className="font-semibold text-gray-900 text-base truncate group-hover:text-red-600 transition">
              {vehicle?.title ?? t.common.noTitle}
            </h3>
            <div className="flex items-center gap-3 mt-2 text-xs text-gray-500">
              <span className="flex items-center gap-1"><Calendar className="w-3 h-3" /> {vehicle?.year ?? '-'}</span>
              {vehicle?.mileage != null && (
                <span className="flex items-center gap-1"><Gauge className="w-3 h-3" /> {(vehicle.mileage ?? 0)?.toLocaleString()} mi</span>
              )}
              <span className="flex items-center gap-1"><Eye className="w-3 h-3" /> {vehicle?.viewCount ?? 0}</span>
            </div>
            <div className="mt-3 flex items-center justify-between">
              <span className="text-red-600 font-bold text-lg flex items-center gap-1">
                <Tag className="w-4 h-4" />
                ${(vehicle?.price ?? 0)?.toLocaleString()}
              </span>
              <span className={`text-xs font-medium px-2 py-1 rounded-full ${isSold ? 'bg-gray-200 text-gray-600' : 'bg-green-100 text-green-700'}`}>
                {isSold ? t.vehicleCard.sold : t.vehicleCard.available}
              </span>
            </div>
          </div>
        </div>
      </Link>
    </motion.div>
  );
}