'use client';

import PrimaryButton from '@/components/button/PrimaryButton';
import CustomResponsiveDialog from '@/components/dialog/CustomResponsiveDialog';
import FormProvider from '@/components/forms/FormProvider';
import RHFTextField from '@/components/forms/RHFTextField';
import RHFSelect from '@/components/forms/RHFSelect';
import useFormSubmitHandler from '@/hooks/formHandler';

import {
	UpdateReservationInput,
	UpdateReservationSchema,
} from '@/lib/modules/reservation/reservation.validation';

import { useUpdateReservationMutation } from '@/store/slice/reservationApi';

import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { useEffect } from 'react';
import LoadingSpinner from '@/components/loader/LoadingSpinner';
import { Reservation } from '@/types/reservation';

export default function ReservationForm({
	isOpen,
	onClose,
	reservation,
}: {
	isOpen: boolean;
	onClose: () => void;
	reservation: Reservation;
}) {
	const [updateReservation, { isLoading }] = useUpdateReservationMutation();

	const methods = useForm<UpdateReservationInput>({
		resolver: zodResolver(UpdateReservationSchema) as any,
		mode: 'onChange',
	});

	// -------------------------
	// SUBMIT HANDLER
	// -------------------------
	const handleReservation = useFormSubmitHandler(
		async (data: UpdateReservationInput) => {
			const result = await updateReservation({
				id: reservation?.id,
				data,
			}).unwrap();

			return { data: result };
		},
		() => {
			onClose();
		},
		'Reservation updated successfully!'
	);

	// -------------------------
	// RESET WHEN OPEN
	// -------------------------
	useEffect(() => {
		if (reservation && isOpen) {
			methods.reset({
				status: reservation.status,
				vehicleId: reservation.vehicleId || '',
				pickupDate: reservation.pickupDate,
				pickupTime: reservation.pickupTime,
				passengers: reservation.passengers,
				luggage: reservation.luggage,
				pickupAddress: reservation.pickupAddress,
				dropoffAddress: reservation.dropoffAddress,
				specialRequests: reservation.specialRequests || '',
			});
		}
	}, [reservation, isOpen]);

	return (
		<CustomResponsiveDialog
			open={isOpen}
			setOpen={onClose}
			header={
				<div className="w-full">
					<h2 className="text-lg font-semibold text-foreground/90">
						Update Reservation
					</h2>
					<p className="mt-1 text-sm text-foreground/60">
						Modify reservation details and status.
					</p>
				</div>
			}
			classNameContent="m-0 p-0 max-w-[640px] p-4 rounded-lg bg-background border-none max-h-[90vh] overflow-y-auto scrollbar-x-hidden"
			classNameBody="px-2 py-6 sm:px-12 sm:py-6"
			classNameCloseBtn="absolute top-4 right-4 text-[#CD3232] cursor-pointer"
		>
			{isLoading && (
				<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
					<LoadingSpinner size="md" />
				</div>
			)}

			<FormProvider
				methods={methods}
				onSubmit={methods.handleSubmit(handleReservation)}
			>
				<div className="grid gap-4">
					{/* STATUS */}
					<RHFSelect
						name="status"
						label="Status"
						defaultValue={reservation?.status}
						options={[
							{ label: 'Pending', value: 'PENDING' },
							{ label: 'Confirmed', value: 'CONFIRMED' },
							{ label: 'Cancelled', value: 'CANCELLED' },
							{ label: 'Completed', value: 'COMPLETED' },
						]}
					/>

					{/* VEHICLE */}
					<RHFTextField
						name="vehicleId"
						label="Vehicle ID"
						placeholder="Enter vehicle ID"
					/>

					{/* DATE & TIME */}
					<RHFTextField
						name="pickupDate"
						type="date"
						label="Pickup Date"
					/>

					<RHFTextField
						name="pickupTime"
						type="time"
						label="Pickup Time"
					/>

					{/* PASSENGERS & LUGGAGE */}
					<div className="grid grid-cols-2 gap-4">
						<RHFTextField
							name="passengers"
							type="number"
							label="Passengers"
						/>
						<RHFTextField name="luggage" type="number" label="Luggage" />
					</div>

					{/* ADDRESSES */}
					<RHFTextField name="pickupAddress" label="Pickup Address" />

					<RHFTextField name="dropoffAddress" label="Dropoff Address" />

					{/* SPECIAL REQUESTS */}
					<RHFTextField name="specialRequests" label="Special Requests" />
				</div>

				<PrimaryButton
					type="submit"
					title="Update Reservation"
					className="mt-6"
				/>
			</FormProvider>
		</CustomResponsiveDialog>
	);
}