"use client";

import { useState } from "react";
import { BookingTimelineModal } from "./BookingTimelineModal";
import { NewBookingModal } from "./NewBookingModal";

interface BookingSystemProps {
	isOpen: boolean;
	onClose: () => void;
	currentUser: {
		id: string;
		emailVerified: boolean;
		is_banned: boolean;
		permissions: string[];
	};
}

export const BookingSystem = ({ isOpen, onClose, currentUser }: BookingSystemProps) => {
	const [showNewBookingModal, setShowNewBookingModal] = useState(false);
	const [refreshTimeline, setRefreshTimeline] = useState(0);

	const handleOpenNewBooking = () => {
		setShowNewBookingModal(true);
	};

	const handleCloseNewBooking = () => {
		setShowNewBookingModal(false);
	};

	const handleBookingCreated = () => {
		// Trigger a refresh of the timeline
		setRefreshTimeline((prev) => prev + 1);
		setShowNewBookingModal(false);
	};

	const handleCloseMain = () => {
		setShowNewBookingModal(false);
		onClose();
	};

	return (
		<>
			<BookingTimelineModal
				key={refreshTimeline}
				isOpen={isOpen && !showNewBookingModal}
				onClose={handleCloseMain}
				onOpenNewBooking={handleOpenNewBooking}
				currentUser={currentUser}
			/>

			<NewBookingModal
				isOpen={showNewBookingModal}
				onClose={handleCloseNewBooking}
				onBookingCreated={handleBookingCreated}
				userPermissions={currentUser.permissions}
			/>
		</>
	);
};