'use client';

import { Reservation } from '@/types/reservation';
import CustomResponsiveDialog from '@/components/dialog/CustomResponsiveDialog';
import { Badge } from '@/components/ui/badge';
import { Calendar, User, Phone, Mail, MapPin, Car } from 'lucide-react';

const statusStyles: Record<string, string> = {
	PENDING: 'bg-yellow-500/20 text-yellow-500 border-yellow-500/30',
	CONFIRMED: 'bg-primary/20 text-primary border-primary/30',
	CANCELLED: 'bg-red-500/20 text-red-500 border-red-500/30',
};

interface Props {
	reservation: Reservation;
	isOpen: boolean;
	handleClose: () => void;
}

const ReservationDetail = ({ reservation, isOpen, handleClose }: Props) => {
	return (
		<CustomResponsiveDialog
			open={isOpen}
			setOpen={handleClose}
			header={
				<div className="w-full">
					<h2 className="text-lg font-semibold text-foreground/90">
						Reservation Details
					</h2>
					<p className="mt-1 text-sm text-foreground/60">
						Complete information about this booking.
					</p>
				</div>
			}
			classNameContent="m-0 p-0 max-w-[720px] p-4 rounded-lg bg-background border-none max-h-[90vh] overflow-y-auto scrollbar-x-hidden"
			classNameBody="px-2 py-6 sm:px-10 sm:py-6"
			classNameCloseBtn="absolute top-4 right-4 text-[#CD3232] cursor-pointer"
		>
			<div className="space-y-6">
				{/* Status */}
				<div className="flex justify-between items-center">
					<Badge
						className={`px-3 py-1 text-xs font-semibold ${
							statusStyles[reservation?.status]
						}`}
					>
						{reservation?.status}
					</Badge>

					<div className="flex items-center gap-2 text-sm text-muted-foreground">
						<Calendar className="w-4 h-4 text-primary" />
						{new Date(reservation?.createdAt).toLocaleDateString()}
					</div>
				</div>

				{/* Customer Info */}
				<div className="space-y-2">
					<h3 className="font-serif text-lg text-foreground">
						Customer Information
					</h3>

					<div className="luxury-line my-2" />

					<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-muted-foreground">
						<div className="flex items-center gap-2">
							<User className="w-4 h-4 text-primary" />
							{reservation?.firstName} {reservation?.lastName}
						</div>

						<div className="flex items-center gap-2">
							<Mail className="w-4 h-4 text-primary" />
							{reservation?.email}
						</div>

						<div className="flex items-center gap-2">
							<Phone className="w-4 h-4 text-primary" />
							{reservation?.phone}
						</div>
					</div>
				</div>

				{/* Trip Details */}
				<div>
					<h3 className="font-serif text-lg text-foreground">
						Trip Details
					</h3>

					<div className="luxury-line my-2" />

					<div className="space-y-2 text-sm text-muted-foreground">
						<div className="flex items-center gap-2">
							<Car className="w-4 h-4 text-primary" />
							Service Type: {reservation?.serviceType}
						</div>

						<div className="flex items-center gap-2">
							<MapPin className="w-4 h-4 text-primary" />
							Pickup: {reservation?.pickupAddress}
						</div>

						<div className="flex items-center gap-2">
							<MapPin className="w-4 h-4 text-primary" />
							Dropoff: {reservation?.dropoffAddress}
						</div>

						<div>
							Date:{' '}
							{new Date(reservation?.pickupDate).toLocaleDateString()}
						</div>

						<div>Time: {reservation?.pickupTime}</div>

						<div>
							Passengers: {reservation?.passengers} | Luggage:{' '}
							{reservation?.luggage}
						</div>
					</div>
				</div>

				{/* Special Requests */}
				{reservation?.specialRequests && (
					<div>
						<h3 className="font-serif text-lg text-foreground">
							Special Requests
						</h3>

						<div className="luxury-line my-2" />

						<p className="text-sm text-muted-foreground leading-relaxed">
							{reservation?.specialRequests}
						</p>
					</div>
				)}
			</div>
		</CustomResponsiveDialog>
	);
};

export default ReservationDetail;