'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 './ui/skeleton';

export function SafetyConvenience() {
	const router = useRouter();
	const { data: contactData, isLoading: contactLoading } =
		useGetPublicContactQuery();
	const { data: galleryData, isLoading: galleryLoading } =
		useGetPublicGalaryQuery();
	const heroContacts = contactData?.filter(
		(contact) => contact?.section === GallerySection.SAFETY_SERVICE
	);
	const heroGallery = galleryData?.filter(
		(item) => item?.section === GallerySection.SAFETY_SERVICE
	);
	const phone =
		heroContacts && heroContacts?.length > 0
			? heroContacts[0]?.phone
			: undefined;
	const isLoading = contactLoading || galleryLoading;

	return (
		<section
			className="relative 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-8 lg:gap-12 items-start relative">
					{/* Left: Text Content */}
					<motion.div
						initial={{ opacity: 0, x: -40 }}
						whileInView={{ opacity: 1, x: 0 }}
						transition={{ duration: 0.8 }}
						viewport={{ once: true }}
						className="relative z-10"
					>
						{/* Section Title */}
						<h2
							className="font-serif text-5xl sm:text-6xl font-bold mb-6 leading-tight"
							style={{ color: '#F5F5F3' }}
						>
							We Care Of Your Safety And Convenience
						</h2>

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

						{/* Feature Block */}
						<div className="mb-12">
							<h3
								className="font-serif text-2xl sm:text-3xl font-bold mb-4"
								style={{ color: '#CBB26A' }}
							>
								Premium Drivers
							</h3>
							<p
								className="text-lg leading-relaxed mb-6"
								style={{ color: '#D6D6D6' }}
							>
								All of our chauffeurs are professionally trained. That
								means we guarantee that your professional chauffeur is
								of the highest quality for both safety and hospitality.
							</p>
						</div>

						{/* CTA Buttons */}
						<div className="flex flex-col sm:flex-row items-start gap-5">
							{/* Book Online Button */}
							<motion.button
								onClick={() => router.push('/book')}
								whileHover={{
									scale: 1.05,
									boxShadow: '0 0 30px rgba(203, 178, 106, 0.4)',
								}}
								whileTap={{ scale: 0.95 }}
								className="px-10 py-4 rounded-md font-semibold text-lg transition-all duration-300 shadow-lg"
								style={{ backgroundColor: '#CBB26A', color: '#110D09' }}
							>
								BOOK ONLINE
							</motion.button>

							{/* Phone Button */}
							{phone && (
								<motion.a
									whileHover={{ scale: 1.05 }}
									whileTap={{ scale: 0.95 }}
									href={`tel:${phone}`}
									className="px-10 py-4 rounded-md font-semibold text-lg transition-all duration-300 flex items-center gap-2"
									style={{
										border: '2px solid #CBB26A',
										color: '#CBB26A',
										backgroundColor: 'transparent',
									}}
								>
									<Phone size={22} />
									{phone}
								</motion.a>
							)}
						</div>
					</motion.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 h-[420] overflow-hidden rounded-xl shadow-2xl group">
										<Image
											src={heroGallery[0].image}
											alt="Safety service"
											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="Safety service"
													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="Safety service"
												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="Safety service"
														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="Safety service"
													fill
													className="object-cover transition-transform duration-500 group-hover:scale-105"
												/>
											</div>
										))}
									</div>
								)}
							</div>
						) : null}
					</div>
				</div>
			</div>
		</section>
	);
}