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) {
        console.log('Loading details for event:', eventId);
        fetch(`/api/events/${eventId}`)
            .then(response => {
                console.log('Response status:', response.status);
                return response.json();
            })
            .then(data => {
                console.log('Received event data:', data);
                
                // Format the details for display
                const formattedDetails = {
                    // 'Event ID': data.id,
                    // 'Event Type': data.event_type,
                    // 'Timestamp': new Date(data.timestamp).toLocaleString(),
                    // 'User': data.user ? `${data.user.username} (${data.user.last_name})` : 'N/A',
                    // 'IP Address': data.ip_address || 'N/A',
                    // 'User Agent': data.user_agent || 'N/A'
                };
                
                // Handle details separately
                if (data.details) {
                    if (typeof data.details === 'object') {
                        formattedDetails['Details'] = JSON.stringify(data.details, null, 2);
                    } else {
                        formattedDetails['Details'] = data.details;
                    }
                } else {
                    formattedDetails['Details'] = 'No additional details';
                }
                
                // Convert to formatted string
                const detailsText = Object.entries(formattedDetails)
                    .map(([key, value]) => `${key}: ${value}`)
                    .join('\n\n');
                
                console.log('Formatted details:', detailsText);
                eventDetailsContent.textContent = detailsText;
            })
            .catch(error => {
                console.error('Error loading event details:', error);
                eventDetailsContent.textContent = 'Error loading event details. Please try again.';
            });
    }
    
    // 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;
});