'use client';
import { GallerySection } from '@/app/generated/prisma/enums';
import {
	useGetPublicContactQuery,
	useGetPublicGalaryQuery,
} from '@/store/slice/publicApi';
import { motion } from 'framer-motion';
import { Phone } from 'lucide-react';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { Skeleton } from '@/components/ui/skeleton';

const FinestLuxury = () => {
	const router = useRouter();
	const { data: contactData, isLoading: contactLoading } =
		useGetPublicContactQuery();
	const { data: galleryData, isLoading: galleryLoading } =
		useGetPublicGalaryQuery();
	const heroContacts = contactData?.filter(
		(contact) => contact?.section === GallerySection.LUXURY_FLEET
	);
	const heroGallery = galleryData?.filter(
		(item) => item?.section === GallerySection.LUXURY_FLEET
	);
	const phone =
		heroContacts && heroContacts?.length > 0
			? heroContacts[0]?.phone
			: undefined;
	const isLoading = contactLoading || galleryLoading;
	return (
		<section
			className="relative w-full overflow-hidden"
			style={{
				backgroundColor: '#110D09',
				paddingTop: '120px',
				paddingBottom: '120px',
			}}
		>
			<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
				<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
					{/* LEFT CONTENT */}
					<div>
						{/* Heading */}
						{isLoading ? (
							<Skeleton className="h-16 w-3/4 mb-6 bg-neutral-800" />
						) : (
							<h2
								className="font-serif text-5xl sm:text-6xl font-bold mb-6"
								style={{ color: '#F5F5F3' }}
							>
								Only The Finest Luxury Transport
							</h2>
						)}

						{/* Divider */}
						<div
							className="w-20 h-1 mb-10"
							style={{ backgroundColor: '#CBB26A' }}
						/>

						{/* Description */}
						{isLoading ? (
							<div className="space-y-3 mb-12">
								<Skeleton className="h-4 w-full bg-neutral-800" />
								<Skeleton className="h-4 w-5/6 bg-neutral-800" />
								<Skeleton className="h-4 w-4/6 bg-neutral-800" />
							</div>
						) : (
							<p
								className="text-lg leading-relaxed mb-12 max-w-xl"
								style={{ color: '#D6D6D6' }}
							>
								All of our chauffeurs are professionally trained. Our
								fleet is updated with newer model premium luxury
								vehicles. Efficient and effortless booking experience
								for those on the go.
							</p>
						)}

						{/* Buttons */}
						<div className="flex flex-col sm:flex-row gap-6">
							{isLoading ? (
								<>
									<Skeleton className="h-14 w-40 rounded-lg bg-neutral-800" />
									<Skeleton className="h-14 w-48 rounded-lg bg-neutral-800" />
								</>
							) : (
								<>
									<motion.button
										whileHover={{
											scale: 1.05,
											boxShadow: '0 0 30px rgba(203, 178, 106, 0.4)',
										}}
										whileTap={{ scale: 0.95 }}
										className="px-12 py-4 rounded-lg font-bold text-lg transition-all duration-300 shadow-lg"
										style={{
											backgroundColor: '#CBB26A',
											color: '#110D09',
										}}
										onClick={() => router.push('/book')}
									>
										BOOK ONLINE
									</motion.button>

									{phone && (
										<motion.a
											whileHover={{ scale: 1.05 }}
											whileTap={{ scale: 0.95 }}
											href={`tel:${phone}`}
											className="px-12 py-4 rounded-lg font-bold text-lg transition-all duration-300 flex items-center gap-3 border-2"
											style={{
												borderColor: '#CBB26A',
												color: '#CBB26A',
											}}
										>
											<Phone size={22} />
											{phone}
										</motion.a>
									)}
								</>
							)}
						</div>
					</div>
					{/* RIGHT IMAGE */}
					<div className="relative">
						{isLoading ? (
							<Skeleton className="w-full h-[420] rounded-xl bg-neutral-800" />
						) : heroGallery && heroGallery.length > 0 ? (
							<div className="grid gap-4">
								{/* 1 IMAGE */}
								{heroGallery.length === 1 && (
									<div className="relative overflow-hidden rounded-xl shadow-2xl group h-[420]">
										<Image
											src={heroGallery[0].image}
											alt="Luxury fleet"
											fill
											className="object-cover transition-transform duration-500 group-hover:scale-105"
										/>
									</div>
								)}

								{/* 2 IMAGES */}
								{heroGallery.length === 2 && (
									<div className="grid grid-cols-2 gap-4 h-[420]">
										{heroGallery.slice(0, 2).map((img) => (
											<div
												key={img.id}
												className="relative overflow-hidden rounded-xl group"
											>
												<Image
													src={img.image}
													alt="Luxury fleet"
													fill
													className="object-cover transition-transform duration-500 group-hover:scale-105"
												/>
											</div>
										))}
									</div>
								)}

								{/* 3 IMAGES */}
								{heroGallery.length === 3 && (
									<div className="grid grid-cols-2 gap-4 h-[420]">
										<div className="relative overflow-hidden rounded-xl group">
											<Image
												src={heroGallery[0].image}
												alt="Luxury fleet"
												fill
												className="object-cover transition-transform duration-500 group-hover:scale-105"
											/>
										</div>

										<div className="grid grid-rows-2 gap-4">
											{heroGallery.slice(1, 3).map((img) => (
												<div
													key={img.id}
													className="relative overflow-hidden rounded-xl group"
												>
													<Image
														src={img.image}
														alt="Luxury fleet"
														fill
														className="object-cover transition-transform duration-500 group-hover:scale-105"
													/>
												</div>
											))}
										</div>
									</div>
								)}

								{/* 4+ IMAGES */}
								{heroGallery.length >= 4 && (
									<div className="grid grid-cols-2 grid-rows-2 gap-4 h-[420]">
										{heroGallery.slice(0, 4).map((img) => (
											<div
												key={img.id}
												className="relative overflow-hidden rounded-xl group"
											>
												<Image
													src={img.image}
													alt="Luxury fleet"
													fill
													className="object-cover transition-transform duration-500 group-hover:scale-105"
												/>
											</div>
										))}
									</div>
								)}
							</div>
						) : null}
					</div>
				</div>
			</div>
		</section>
	);
};

export default FinestLuxury;