document.addEventListener('DOMContentLoaded', function() {
    // Initialize variables
    let currentPage = 1;
    let totalPages = parseInt(document.getElementById('totalPages').textContent) || 1;
    let isFetching = false;
    
    // Get filter elements
    const notifTypeFilter = document.getElementById('notifTypeFilter');
    const dateRangeFilter = document.getElementById('dateRangeFilter');
    const clearFiltersBtn = document.getElementById('clearFilters');
    const markAllReadBtn = document.getElementById('markAllRead');
    
    // Get pagination elements
    const prevPageBtn = document.getElementById('prevPage');
    const nextPageBtn = document.getElementById('nextPage');
    const currentPageSpan = document.getElementById('currentPage');
    const totalPagesSpan = document.getElementById('totalPages');
    const notifsTableBody = document.getElementById('notifsTableBody');
    
    // Notification details modal
    const notifDetailsModal = document.getElementById('notifDetailsModal');
    const notifDetailsContent = document.getElementById('notifDetailsContent');
    
    // Function to update URL with current filters
    function updateURL() {
        const params = new URLSearchParams(window.location.search);
        params.set('notif_type', notifTypeFilter.value);
        params.set('date_range', dateRangeFilter.value);
        params.set('page', currentPage);
        window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
    }
    
    // Function to fetch notifications
    function fetchNotifications() {
        if (isFetching) return;
        isFetching = true;
        
        // Show loading state
        notifsTableBody.innerHTML = '<tr><td colspan="6" class="text-center">Loading...</td></tr>';
        
        const params = new URLSearchParams({
            notif_type: notifTypeFilter.value,
            date_range: dateRangeFilter.value,
            page: currentPage,
            ajax: 'true'
        });
        
        fetch(`${window.location.pathname}?${params.toString()}`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text();
        })
        .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const newTableBody = doc.getElementById('notifsTableBody');
            
            if (newTableBody) {
                notifsTableBody.innerHTML = newTableBody.innerHTML;
                
                // Update pagination
                const newCurrentPage = parseInt(doc.getElementById('currentPage').textContent);
                const newTotalPages = parseInt(doc.getElementById('totalPages').textContent);
                currentPage = newCurrentPage;
                totalPages = newTotalPages;
                currentPageSpan.textContent = currentPage;
                totalPagesSpan.textContent = totalPages;
                
                // Update pagination buttons
                prevPageBtn.disabled = currentPage === 1;
                nextPageBtn.disabled = currentPage === totalPages;
                
                // Update URL
                updateURL();
                
                // Reattach event listeners
                attachEventListeners();
            } else {
                console.error('Could not find notifications table in response');
                notifsTableBody.innerHTML = '<tr><td colspan="6" class="text-center">Error loading notifications</td></tr>';
            }
        })
        .catch(error => {
            console.error('Error fetching notifications:', error);
            notifsTableBody.innerHTML = '<tr><td colspan="6" class="text-center">Error loading notifications</td></tr>';
        })
        .finally(() => {
            isFetching = false;
        });
    }
    
    // Function to get notification type badge
    function getNotifTypeBadge(type) {
        const badges = {
            'account_created': '<span class="badge bg-success">Account Created</span>',
            'password_reset': '<span class="badge bg-warning">Password Reset</span>',
            'account_deleted': '<span class="badge bg-danger">Account Deleted</span>',
            'account_updated': '<span class="badge bg-info">Account Updated</span>',
            'room_invite': '<span class="badge bg-primary">Room Invite</span>',
            'room_invite_removed': '<span class="badge bg-secondary">Room Invite Removed</span>',
            'conversation_invite': '<span class="badge bg-primary">Conversation Invite</span>',
            'conversation_invite_removed': '<span class="badge bg-secondary">Conversation Invite Removed</span>',
            'conversation_message': '<span class="badge bg-info">Conversation Message</span>'
        };
        return badges[type] || `<span class="badge bg-secondary">${type}</span>`;
    }
    
    // Function to load notification details
    function loadNotifDetails(notifId) {
        fetch(`/api/notifications/${notifId}`)
            .then(response => response.json())
            .then(data => {
                const detailsContent = document.getElementById('notifDetailsContent');
                if (data.details) {
                    detailsContent.textContent = JSON.stringify(data.details, null, 2);
                } else {
                    detailsContent.textContent = 'No additional details available';
                }
            })
            .catch(error => {
                console.error('Error loading notification details:', error);
                document.getElementById('notifDetailsContent').textContent = 'Error loading notification details';
            });
    }
    
    // Function to mark notification as read
    function markAsRead(notifId) {
        fetch(`/api/notifications/${notifId}/read`, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                fetchNotifications();
            }
        })
        .catch(error => {
            console.error('Error marking notification as read:', error);
        });
    }
    
    // Function to delete notification
    function deleteNotification(notifId) {
        if (!confirm('Are you sure you want to delete this notification?')) {
            return;
        }
        
        fetch(`/api/notifications/${notifId}`, {
            method: 'DELETE',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                fetchNotifications();
            }
        })
        .catch(error => {
            console.error('Error deleting notification:', error);
        });
    }
    
    // Function to mark all notifications as read
    function markAllAsRead() {
        fetch('/api/notifications/mark-all-read', {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                fetchNotifications();
            }
        })
        .catch(error => {
            console.error('Error marking all notifications as read:', error);
        });
    }
    
    // Function to attach event listeners
    function attachEventListeners() {
        // Mark as read buttons
        document.querySelectorAll('.mark-read').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const notifId = e.target.closest('.mark-read').dataset.notifId;
                markAsRead(notifId);
            });
        });
        
        // Delete buttons
        document.querySelectorAll('.delete-notif').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const notifId = e.target.closest('.delete-notif').dataset.notifId;
                deleteNotification(notifId);
            });
        });
        
        // View details buttons
        document.querySelectorAll('[data-bs-target="#notifDetailsModal"]').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const notifId = e.target.closest('[data-notif-id]').dataset.notifId;
                loadNotifDetails(notifId);
            });
        });
    }
    
    // Add event listeners for filters with debounce
    let filterTimeout;
    function debouncedFetch() {
        clearTimeout(filterTimeout);
        filterTimeout = setTimeout(() => {
            currentPage = 1; // Reset to first page when filters change
            fetchNotifications();
        }, 300);
    }
    
    notifTypeFilter.addEventListener('change', debouncedFetch);
    dateRangeFilter.addEventListener('change', debouncedFetch);
    
    // Add event listener for clear filters
    clearFiltersBtn.addEventListener('click', () => {
        notifTypeFilter.value = '';
        dateRangeFilter.value = '7d';
        currentPage = 1;
        fetchNotifications();
    });
    
    // Add event listener for mark all as read
    markAllReadBtn.addEventListener('click', markAllAsRead);
    
    // Add event listeners for pagination
    prevPageBtn.addEventListener('click', () => {
        if (currentPage > 1) {
            currentPage--;
            fetchNotifications();
        }
    });
    
    nextPageBtn.addEventListener('click', () => {
        if (currentPage < totalPages) {
            currentPage++;
            fetchNotifications();
        }
    });
    
    // Initialize filters from URL parameters
    const params = new URLSearchParams(window.location.search);
    notifTypeFilter.value = params.get('notif_type') || '';
    dateRangeFilter.value = params.get('date_range') || '7d';
    currentPage = parseInt(params.get('page')) || 1;
    
    // Initial fetch if filters are set
    if (notifTypeFilter.value || dateRangeFilter.value !== '7d') {
        fetchNotifications();
    }
    
    // Attach initial event listeners
    attachEventListeners();
});