'use client';

import { useGetPublicVehecleQuery } from '@/store/slice/publicApi';
import { motion } from 'framer-motion';
import { Users, Luggage } from 'lucide-react';
import { useState, useEffect } from 'react';

const FleetList = () => {
	const { data: vehiclesData, isLoading } = useGetPublicVehecleQuery();
	const vehicles = Array.isArray(vehiclesData) ? vehiclesData : [];

	const [activeIndex, setActiveIndex] = useState<number | null>(null);
	const [isMobile, setIsMobile] = useState(false);

	// Check if device is mobile
	useEffect(() => {
		const checkMobile = () => {
			setIsMobile(window.innerWidth < 768);
		};

		checkMobile();
		window.addEventListener('resize', checkMobile);

		return () => window.removeEventListener('resize', checkMobile);
	}, []);

	const handleVehicleClick = (index: number) => {
		if (isMobile) {
			// On mobile, toggle the active vehicle
			setActiveIndex(activeIndex === index ? null : index);
		}
	};

	const handleBookNow = (e: React.MouseEvent, vehicleName: string) => {
		e.stopPropagation(); // Prevent triggering the parent click
		// Add your booking logic here
		console.log(`Booking ${vehicleName}`);
	};

	return (
		<section
			id="fleet"
			className="relative bg-background py-10 overflow-hidden"
		>
			{/* Vehicle Grid - 2 Columns */}
			<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
				<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
					{vehicles.map((vehicle, index) => {
						const isPanelLeft = index % 2 === 0;
						const isActive = activeIndex === index;

						return (
							<motion.div
								key={index}
								initial={{ opacity: 0, y: 20 }}
								whileInView={{ opacity: 1, y: 0 }}
								transition={{ duration: 0.8 }}
								viewport={{ once: true, margin: '-100px' }}
								className="relative h-96 overflow-hidden rounded-xl group"
								onClick={() => handleVehicleClick(index)}
							>
								{/* Background Image */}
								<img
									src={vehicle.imageUrl ?? '/default/logo.png'}
									alt={vehicle.name}
									className={`absolute inset-0 w-full h-full object-cover transition-transform duration-500 ${
										!isMobile
											? 'group-hover:scale-105'
											: isActive
												? 'scale-105'
												: ''
									}`}
								/>

								{/* Gradient Overlay */}
								<div className="absolute inset-0 bg-linear-to-r from-black/50 via-black/30 to-black/50" />

								{/* Floating Info Panel - Shows on hover for desktop, on click for mobile */}
								<motion.div
									initial={{ opacity: 0 }}
									animate={{
										opacity: !isMobile
											? undefined // Let the hover animation handle it
											: isActive
												? 1
												: 0,
									}}
									whileHover={!isMobile ? { opacity: 1 } : undefined}
									transition={{ duration: 0.3 }}
									className={`absolute inset-0 flex items-center ${
										isPanelLeft ? 'justify-start' : 'justify-end'
									} p-6 sm:p-8 ${
										isMobile
											? 'pointer-events-auto'
											: 'pointer-events-none group-hover:pointer-events-auto'
									}`}
								>
									<div className="bg-[#1a1a1a]/95 backdrop-blur-sm rounded-lg p-6 sm:p-8 border border-[#CBB26A]/30 shadow-2xl max-w-sm">
										{/* Vehicle Name */}
										<h3 className="font-serif text-2xl sm:text-3xl font-bold text-white mb-4">
											{vehicle.name}
										</h3>

										{/* Divider */}
										<div className="w-12 h-0.5 bg-[#CBB26A] mb-6" />

										{/* Specs */}
										<div className="space-y-4 mb-6">
											<div className="flex items-center gap-3">
												<Users
													size={20}
													className="text-[#CBB26A] shrink-0"
												/>
												<div>
													<p className="text-foreground/60 text-xs uppercase tracking-widest font-semibold">
														Passengers
													</p>
													<p className="text-white font-bold">
														{vehicle.passengerMin} -{' '}
														{vehicle.passengerMax}
													</p>
												</div>
											</div>
											<div className="flex items-center gap-3">
												<Luggage
													size={20}
													className="text-[#CBB26A] shrink-0"
												/>
												<div>
													<p className="text-foreground/60 text-xs uppercase tracking-widest font-semibold">
														Luggage
													</p>
													<p className="text-white font-bold">
														{vehicle.luggageCapacity}
													</p>
												</div>
											</div>
										</div>

										{/* Book Now Button */}
										<motion.button
											whileHover={{
												scale: 1.05,
												boxShadow:
													'0 0 20px rgba(203, 178, 106, 0.3)',
											}}
											whileTap={{ scale: 0.95 }}
											onClick={(e) => handleBookNow(e, vehicle.name)}
											className="w-full px-6 py-2 bg-[#CBB26A] text-[#111111] rounded-lg font-bold hover:bg-[#B89E55] transition-all duration-300 text-sm"
										>
											BOOK NOW
										</motion.button>
									</div>
								</motion.div>

								{/* Mobile Hint - Only visible on mobile when panel is closed */}
								{isMobile && !isActive && (
									<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black/70 text-white text-xs px-3 py-1 rounded-full backdrop-blur-sm">
										Tap to view details
									</div>
								)}
							</motion.div>
						);
					})}
				</div>
			</div>
		</section>
	);
};

export default FleetList;