document.addEventListener('DOMContentLoaded', function() {
    // Initialize variables
    let currentPage = 1;
    const totalPages = parseInt(document.getElementById('totalPages').textContent);
    
    // Get filter elements
    const eventTypeFilter = document.getElementById('eventTypeFilter');
    const dateRangeFilter = document.getElementById('dateRangeFilter');
    const userFilter = document.getElementById('userFilter');
    const applyFiltersBtn = document.getElementById('applyFilters');
    
    // Get pagination elements
    const prevPageBtn = document.getElementById('prevPage');
    const nextPageBtn = document.getElementById('nextPage');
    const currentPageSpan = document.getElementById('currentPage');
    
    // Event details modal
    const eventDetailsModal = document.getElementById('eventDetailsModal');
    const eventDetailsContent = document.getElementById('eventDetailsContent');
    
    // Function to update URL with current filters
    function updateURL() {
        const params = new URLSearchParams(window.location.search);
        params.set('page', currentPage);
        if (eventTypeFilter.value) params.set('event_type', eventTypeFilter.value);
        if (dateRangeFilter.value) params.set('date_range', dateRangeFilter.value);
        if (userFilter.value) params.set('user_id', userFilter.value);
        window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
    }
    
    // Function to load events with current filters
    function loadEvents() {
        const params = new URLSearchParams();
        params.set('page', currentPage);
        if (eventTypeFilter.value) params.set('event_type', eventTypeFilter.value);
        if (dateRangeFilter.value) params.set('date_range', dateRangeFilter.value);
        if (userFilter.value) params.set('user_id', userFilter.value);
        
        window.location.href = `${window.location.pathname}?${params.toString()}`;
    }
    
    // Function to load event details
    function loadEventDetails(eventId) {
        fetch(`/api/events/${eventId}`)
            .then(response => response.json())
            .then(data => {
                const formattedDetails = JSON.stringify(data.details, null, 2);
                eventDetailsContent.textContent = formattedDetails;
            })
            .catch(error => {
                console.error('Error loading event details:', error);
                eventDetailsContent.textContent = 'Error loading event details';
            });
    }
    
    // Event listeners for filters
    applyFiltersBtn.addEventListener('click', function() {
        currentPage = 1;
        loadEvents();
    });
    
    // Event listeners for pagination
    prevPageBtn.addEventListener('click', function() {
        if (currentPage > 1) {
            currentPage--;
            loadEvents();
        }
    });
    
    nextPageBtn.addEventListener('click', function() {
        if (currentPage < totalPages) {
            currentPage++;
            loadEvents();
        }
    });
    
    // Event listener for event details modal
    eventDetailsModal.addEventListener('show.bs.modal', function(event) {
        const button = event.relatedTarget;
        const eventId = button.getAttribute('data-event-id');
        loadEventDetails(eventId);
    });
    
    // Initialize filters from URL parameters
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has('event_type')) eventTypeFilter.value = urlParams.get('event_type');
    if (urlParams.has('date_range')) dateRangeFilter.value = urlParams.get('date_range');
    if (urlParams.has('user_id')) userFilter.value = urlParams.get('user_id');
    if (urlParams.has('page')) currentPage = parseInt(urlParams.get('page'));
    
    // Update pagination buttons state
    prevPageBtn.disabled = currentPage === 1;
    nextPageBtn.disabled = currentPage === totalPages;
    currentPageSpan.textContent = currentPage;
});