var-monorepo/apps/hub/app/_components/NewBookingModal.tsx

"use client";

import { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { X, CalendarIcon, Clock } from "lucide-react";
import toast from "react-hot-toast";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { getStationsAPI } from "(app)/_querys/stations";
import { createBookingAPI } from "(app)/_querys/bookings";

interface Station {
	id: number;
	bosCallsign: string;
	bosCallsignShort: string;
	locationState: string;
	operator: string;
	aircraft: string;
}

interface NewBookingFormData {
	type: "STATION" | "LST_01" | "LST_02" | "LST_03" | "LST_04";
	stationId?: number;
	startTime: string;
	endTime: string;
	title?: string;
	description?: string;
}

interface NewBookingModalProps {
	isOpen: boolean;
	onClose: () => void;
	onBookingCreated: () => void;
	userPermissions: string[];
}

export const NewBookingModal = ({
	isOpen,
	onClose,
	onBookingCreated,
	userPermissions,
}: NewBookingModalProps) => {
	const [submitting, setSubmitting] = useState(false);

	const queryClient = useQueryClient();
	const { data: stations, isLoading: isLoadingStations } = useQuery({
		queryKey: ["stations"],
		queryFn: () => getStationsAPI({}),
	});

	const { mutate: createBooking, isPending: isCreateBookingLoading } = useMutation({
		mutationKey: ["createBooking"],
		mutationFn: createBookingAPI,

		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: ["bookings"] });
			onBookingCreated();
		},
	});

	const {
		register,
		handleSubmit,
		watch,
		setValue,
		reset,
		formState: { errors },
	} = useForm<NewBookingFormData>();

	const selectedType = watch("type");
	const hasDISPOPermission = userPermissions.includes("DISPO");

	// Reset form when modal opens
	useEffect(() => {
		if (isOpen) {
			reset();
			// Set default datetime to current hour
			const now = new Date();
			const currentHour = new Date(
				now.getFullYear(),
				now.getMonth(),
				now.getDate(),
				now.getHours(),
				0,
				0,
			);
			const nextHour = new Date(currentHour.getTime() + 60 * 60 * 1000);

			setValue("startTime", currentHour.toISOString().slice(0, 16));
			setValue("endTime", nextHour.toISOString().slice(0, 16));
		}
	}, [isOpen, reset, setValue]);

	const onSubmit = async (data: NewBookingFormData) => {
		setSubmitting(true);
		try {
			// Validate that end time is after start time
			if (new Date(data.endTime) <= new Date(data.startTime)) {
				toast.error("Endzeit muss nach der Startzeit liegen");
				return;
			}

			const response = await createBooking(data);

			console.log("Booking created:", response);

			toast.success("Buchung erfolgreich erstellt!");
			onBookingCreated();
			onClose();
		} catch (error) {
			console.error("Error creating booking:", error);
			toast.error("Fehler beim Erstellen der Buchung");
		} finally {
			setSubmitting(false);
		}
	};

	if (!isOpen) return null;

	return (
		<div className="modal modal-open">
			<div className="modal-box max-w-2xl">
				{/* Header */}
				<div className="mb-6 flex items-center justify-between">
					<h3 className="flex items-center gap-2 text-lg font-bold">
						<CalendarIcon size={24} />
						Neue Buchung erstellen
					</h3>
					<button className="btn btn-sm btn-circle btn-ghost" onClick={onClose}>
						<X size={20} />
					</button>
				</div>

				{/* Form */}
				<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
					{/* Resource Type Selection */}
					<div className="form-control">
						<label className="label">
							<span className="label-text font-semibold">Station *</span>
						</label>
						<select
							{...register("type", { required: "Bitte wählen Sie einen Typ aus" })}
							className="select select-bordered w-full"
						>
							<option value="">Typ auswählen...</option>
							<option value="STATION">Station</option>
							{hasDISPOPermission && (
								<>
									<option value="LST_01">Leitstelle</option>
								</>
							)}
						</select>
						{errors.type && (
							<label className="label">
								<span className="label-text-alt text-error">{errors.type.message}</span>
							</label>
						)}
					</div>

					{/* Station Selection (only if STATION type is selected) */}
					{selectedType === "STATION" && (
						<div className="form-control">
							<label className="label">
								<span className="label-text font-semibold">Station *</span>
							</label>
							{isLoadingStations ? (
								<div className="skeleton h-12 w-full"></div>
							) : (
								<select
									{...register("stationId", {
										required:
											selectedType === "STATION" ? "Bitte wählen Sie eine Station aus" : false,
									})}
									className="select select-bordered w-full"
								>
									<option value="">Station auswählen...</option>
									{stations?.map((station) => (
										<option key={station.id} value={station.id}>
											{station.bosCallsignShort} - {station.locationState} ({station.aircraft})
										</option>
									))}
								</select>
							)}
							{errors.stationId && (
								<label className="label">
									<span className="label-text-alt text-error">{errors.stationId.message}</span>
								</label>
							)}
						</div>
					)}

					{/* Time Selection */}
					<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
						<div className="form-control">
							<label className="label">
								<span className="label-text flex items-center gap-1 font-semibold">
									<Clock size={16} />
									Startzeit *
								</span>
							</label>
							<input
								type="datetime-local"
								{...register("startTime", { required: "Startzeit ist erforderlich" })}
								className="input input-bordered w-full"
							/>
							{errors.startTime && (
								<label className="label">
									<span className="label-text-alt text-error">{errors.startTime.message}</span>
								</label>
							)}
						</div>

						<div className="form-control">
							<label className="label">
								<span className="label-text flex items-center gap-1 font-semibold">
									<Clock size={16} />
									Endzeit *
								</span>
							</label>
							<input
								type="datetime-local"
								{...register("endTime", { required: "Endzeit ist erforderlich" })}
								className="input input-bordered w-full"
							/>
							{errors.endTime && (
								<label className="label">
									<span className="label-text-alt text-error">{errors.endTime.message}</span>
								</label>
							)}
						</div>
					</div>

					{/* Actions */}
					<div className="modal-action">
						<button type="submit" className="btn btn-primary" disabled={submitting}>
							{submitting && <span className="loading loading-spinner loading-sm"></span>}
							Buchung erstellen
						</button>
						<button type="button" className="btn" onClick={onClose}>
							Abbrechen
						</button>
					</div>
				</form>
			</div>
		</div>
	);
};