document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var modal = document.getElementById('booking-modal');
    var closeButton = document.querySelector('.close-button');
    var bookingForm = document.getElementById('modal-booking-form');
    var calendar;
    var currentSelectionInfo;

    if (calendarEl) {
        calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'timeGridWeek',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            events: 'get_bookings.php',
            slotMinTime: '08:00:00',
            slotMaxTime: '22:00:00',
            allDaySlot: false,
            slotDuration: '00:15:00',
            slotLabelInterval: '00:15:00',
            snapDuration: '00:15:00',
            selectable: true,
            editable: true,
            selectLongPressDelay: 200,
            longPressDelay: 200,
            select: function(info) {
                // Force 1-hour selection
                info.end = new Date(info.start.getTime() + 60 * 60 * 1000);
                info.endStr = info.end.toISOString();

                currentSelectionInfo = info;
                modal.style.display = 'block';
                document.getElementById('organizer-name').focus();
            },
            eventDrop: function(info) {
                updateBooking(info.event);
            },
            eventResize: function(info) {
                updateBooking(info.event);
            }
        });
        calendar.render();
    }

    if (closeButton) {
        closeButton.onclick = function() {
            modal.style.display = 'none';
        }
    }

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    }

    if (bookingForm) {
        bookingForm.onsubmit = function(e) {
            e.preventDefault();
            var title = document.getElementById('organizer-name').value;
            var sport = document.getElementById('modal-sport').value;

            if (title && sport && currentSelectionInfo) {
                var newEvent = {
                    title: title,
                    sport: sport,
                    start: currentSelectionInfo.startStr,
                    end: currentSelectionInfo.endStr
                };

                fetch('create_booking.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(newEvent),
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        modal.style.display = 'none';
                        bookingForm.reset();
                        calendar.refetchEvents();
                    } else {
                        alert('Error creating booking: ' + data.message);
                    }
                });
            }
            calendar.unselect();
        }
    }

    function updateBooking(event) {
        var eventData = {
            id: event.id,
            start: event.startStr,
            end: event.endStr
        };
        fetch('update_booking.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(eventData),
        })
        .then(response => response.json())
        .then(data => {
            if (data.status !== 'success') {
                alert('Error updating booking: ' + data.message);
                // Revert the event's position
                // Note: The `revert()` function is not available on the `event` object directly in v5.
                // Instead, you would refetch events or handle this state differently.
                calendar.refetchEvents(); 
            }
        });
    }
});