'use client';

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

const Fleet = ({ isFull = false }: { isFull?: boolean }) => {
	const router = useRouter();
	const { data: vehicleData, isLoading } = useGetPublicVehecleQuery();
	const vehicles = Array.isArray(vehicleData)
		? isFull
			? vehicleData
			: vehicleData.slice(0, 4)
		: [];
	return (
		<section id="fleet" className="relative bg-background overflow-hidden">
			{/* Section Header */}
			<div className="relative z-20 text-center py-24 sm:py-32 px-4 bg-background">
				<motion.div
					initial={{ opacity: 0, y: 20 }}
					whileInView={{ opacity: 1, y: 0 }}
					transition={{ duration: 0.8 }}
					viewport={{ once: true }}
				>
					<h2 className="font-serif text-4xl sm:text-5xl font-bold mb-6 text-white pb-6 border-b-2 border-[#CBB26A] inline-block">
						Top-Class Fleet
					</h2>
					<p className="text-foreground/70 text-base sm:text-lg max-w-3xl mx-auto leading-relaxed mt-8">
						Discover the perfect ride for any occasion with Trust Luxury
						Transportation’s premium fleet. From sleek luxury sedans to
						spacious executive SUVs, each vehicle is meticulously
						maintained and equipped with advanced safety features and
						top-tier amenities. Whether you’re heading to a business
						meeting, airport, special event, or private engagement, our
						fleet offers comfort, style, and reliability—all in one.
					</p>
				</motion.div>
			</div>

			{/* 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">
					{!isLoading &&
						vehicles.map((vehicle, index) => {
							const isPanelLeft = index % 2 === 0;

							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"
								>
									{/* Background Image */}
									<img
										src={vehicle.imageUrl || '/default/logo.png'}
										alt={vehicle.name}
										className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
									/>

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

									{/* Floating Info Panel - Hidden by default, shown on hover */}
									<motion.div
										initial={{ opacity: 0 }}
										whileHover={{ opacity: 1 }}
										transition={{ duration: 0.3 }}
										className={`absolute inset-0 flex items-center ${isPanelLeft ? 'justify-start' : 'justify-end'} p-6 sm:p-8 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"></div>

											{/* 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
												onClick={() => {
													router.push(
														`/book?type=fleet&id=${vehicle.id}`
													);
												}}
												whileHover={{
													scale: 1.05,
													boxShadow:
														'0 0 20px rgba(203, 178, 106, 0.3)',
												}}
												whileTap={{ scale: 0.95 }}
												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>
								</motion.div>
							);
						})}
				</div>
			</div>
		</section>
	);
};
export default Fleet;