// Main application functionality
document.addEventListener('DOMContentLoaded', () => {
    // Global socket variable - initialize as null
    let socket = null;
    let socketConnected = false;
    
    // Global state variables
    let isResearchInProgress = false;
    let currentResearchId = null;
    window.currentResearchId = null;
    
    // Polling interval for research status
    let pollingInterval = null;
    
    // Sound notification variables
    let successSound = null;
    let errorSound = null;
    let notificationsEnabled = true;
    
    // Add function to cleanup research resources globally
    window.cleanupResearchResources = function() {
        console.log('Cleaning up research resources');
        if (pollingInterval) {
            clearInterval(pollingInterval);
            pollingInterval = null;
        }
        isResearchInProgress = false;
        currentResearchId = null;
        window.currentResearchId = null;
        
        // Hide the terminate button if it exists
        const terminateBtn = document.getElementById('terminate-research-btn');
        if (terminateBtn) {
            terminateBtn.style.display = 'none';
        }
    };
    
    // Initialize notification sounds
    function initializeSounds() {
        successSound = new Audio('/research/static/sounds/success.mp3');
        errorSound = new Audio('/research/static/sounds/error.mp3');
        successSound.volume = 0.7;
        errorSound.volume = 0.7;
    }
    
    // Function to play a notification sound
    function playNotificationSound(type) {
        console.log(`Attempting to play ${type} notification sound`);
        if (!notificationsEnabled) {
            console.log('Notifications are disabled');
            return;
        }
        
        // Play sounds regardless of tab focus
        if (type === 'success' && successSound) {
            console.log('Playing success sound');
            successSound.play().catch(err => console.error('Error playing success sound:', err));
        } else if (type === 'error' && errorSound) {
            console.log('Playing error sound');
            errorSound.play().catch(err => console.error('Error playing error sound:', err));
        } else {
            console.warn(`Unknown sound type or sound not initialized: ${type}`);
        }
    }
    
    // Initialize socket only when needed with a timeout for safety
    function initializeSocket() {
        if (socket) {
            // If we already have a socket but it's disconnected, reconnect
            if (!socketConnected) {
                try {
                    console.log('Socket disconnected, reconnecting...');
                    socket.connect();
                } catch (e) {
                    console.error('Error reconnecting socket:', e);
                    // Create a new socket
                    socket = null;
                    return initializeSocket();
                }
            }
            return socket; 
        }
        
        console.log('Initializing socket connection...');
        // Create new socket connection with optimized settings for threading mode
        socket = io({
            path: '/research/socket.io',
            transports: ['polling', 'websocket'], // Try polling first, then websocket
            reconnection: true,
            reconnectionAttempts: 10,
            reconnectionDelay: 1000,
            timeout: 25000, // Increase timeout further
            autoConnect: true,
            forceNew: true,
            upgrade: false // Disable automatic transport upgrade for more stability
        });
        
        // Add event handlers
        socket.on('connect', () => {
            console.log('Socket connected');
            socketConnected = true;
            
            // If we're reconnecting and have a current research, resubscribe
            if (currentResearchId) {
                console.log(`Reconnected, resubscribing to research ${currentResearchId}`);
                socket.emit('subscribe_to_research', { research_id: currentResearchId });
            }
        });
        
        socket.on('disconnect', () => {
            console.log('Socket disconnected');
            socketConnected = false;
        });
        
        socket.on('connect_error', (error) => {
            console.error('Socket connection error:', error);
            socketConnected = false;
        });
        
        socket.on('error', (error) => {
            console.error('Socket error:', error);
        });
        
        // Set a timeout to detect hanging connections
        let connectionTimeoutId = setTimeout(() => {
            if (!socketConnected) {
                console.log('Socket connection timeout - forcing reconnect');
                try {
                    if (socket) {
                        // First try to disconnect cleanly
                        try {
                            socket.disconnect();
                        } catch (disconnectErr) {
                            console.warn('Error disconnecting socket during timeout:', disconnectErr);
                        }
                        
                        // Then try to reconnect
                        try {
                            socket.connect();
                        } catch (connectErr) {
                            console.warn('Error reconnecting socket during timeout:', connectErr);
                            // Create a new socket only if connect fails
                            socket = null;
                            socket = initializeSocket();
                        }
                    } else {
                        // Socket is already null, just create a new one
                        socket = initializeSocket();
                    }
                } catch (e) {
                    console.error('Error during forced reconnect:', e);
                    // Force create a new socket
                    socket = null;
                    socket = initializeSocket();
                }
            }
        }, 15000); // Longer timeout before forcing reconnection
        
        // Clean up timeout if socket connects
        socket.on('connect', () => {
            if (connectionTimeoutId) {
                clearTimeout(connectionTimeoutId);
                connectionTimeoutId = null;
            }
        });
        
        return socket;
    }
    
    // Function to safely disconnect socket
    window.disconnectSocket = function() {
        try {
            if (socket) {
                console.log('Manually disconnecting socket');
                try {
                    // First remove all listeners
                    socket.removeAllListeners();
                } catch (listenerErr) {
                    console.warn('Error removing socket listeners:', listenerErr);
                }
                
                try {
                    // Then disconnect
                    socket.disconnect();
                } catch (disconnectErr) {
                    console.warn('Error during socket disconnect:', disconnectErr);
                }
                
                // Always set to null to allow garbage collection
                socket = null;
                socketConnected = false;
            }
        } catch (e) {
            console.error('Error disconnecting socket:', e);
            // Ensure socket is nullified even if errors occur
            socket = null;
            socketConnected = false;
        }
    };
    
    // Helper function to connect to research updates
    window.connectToResearchSocket = function(researchId) {
        try {
            // Check if the research ID is valid
            if (!researchId) {
                console.error('Invalid research ID for socket connection');
                return false;
            }
            
            // First disconnect any existing socket to avoid duplicates
            window.disconnectSocket();
            
            // Initialize socket if needed
            socket = initializeSocket();
            
            if (!socket) {
                console.error('Failed to initialize socket for research updates');
                return false;
            }
            
            // Subscribe to research updates
            socket.emit('subscribe_to_research', { research_id: researchId });
            
            // Set up event listener for research progress
            const progressEventName = `research_progress_${researchId}`;
            
            // Remove existing listeners to prevent duplicates
            try {
                socket.off(progressEventName);
            } catch (e) {
                console.warn(`Error removing existing listeners for ${progressEventName}`, e);
            }
            
            // Add new listener
            socket.on(progressEventName, (data) => {
                console.log('Received research progress update:', data);
                
                // Handle different message types
                if (data.status === 'in_progress') {
                    // Update progress
                    updateProgressUI(data.progress, data.status, data.message);
                } else if (data.status === 'completed') {
                    // Research completed
                    console.log('Socket received research complete notification');
                    
                    // Clear polling interval
                    if (pollingInterval) {
                        console.log('Clearing polling interval from socket event');
                        clearInterval(pollingInterval);
                        pollingInterval = null;
                    }
                    
                    // Load the results
                    loadResearch(researchId);
                    
                    // Play notification sound
                    console.log('Playing success notification sound from socket event');
                    playNotificationSound('success');
                    
                    // Clean up resources
                    window.cleanupResearchResources();
                    
                    // Update navigation and research status display
                    updateNavigationBasedOnResearchStatus();
                    
                    // Update history item status if on history page
                    updateHistoryItemStatus(researchId, 'completed');
                    
                    // Dispatch event for any other components that need to know about completion
                    document.dispatchEvent(new CustomEvent('research_completed', { detail: data }));
                } else if (data.status === 'failed' || data.status === 'suspended') {
                    // Research failed or was suspended
                    console.log(`Socket received research final state: ${data.status}`);
                    
                    // Clear polling interval
                    if (pollingInterval) {
                        console.log('Clearing polling interval from socket event');
                        clearInterval(pollingInterval);
                        pollingInterval = null;
                    }
                    
                    // Get the error message from the socket response
                    const errorText = data.error || data.message || (data.status === 'failed' ? 'Research failed' : 'Research was suspended');
                    console.log(`Error message from socket: ${errorText}`);
                    
                    // Show error message
                    console.log(`Showing error message for status: ${data.status} from socket event`);
                    const errorMessage = document.getElementById('error-message');
                    if (errorMessage) {
                        errorMessage.style.display = 'block';
                        errorMessage.textContent = errorText;
                    }
                    
                    // Update UI with status
                    updateProgressUI(
                        0, 
                        data.status, 
                        errorText
                    );
                    
                    // Update history item status if on history page
                    updateHistoryItemStatus(researchId, data.status, errorText);
                    
                    // Update navigation
                    updateNavigationBasedOnResearchStatus();
                    
                    if (data.status === 'failed') {
                        console.log('Playing error notification sound from socket event');
                        playNotificationSound('error');
                    }
                    
                    // Clean up resources
                    window.cleanupResearchResources();
                    
                    // Update navigation and research status display
                    updateNavigationBasedOnResearchStatus();
                    
                    // Dispatch event for any other components that need to know about completion
                    document.dispatchEvent(new CustomEvent('research_completed', { detail: data }));
                }
                
                // Update the detailed log if on details page
                if (data.log_entry && document.getElementById('research-log')) {
                    updateDetailLogEntry(data.log_entry);
                }
            });
            
            return true;
        } catch (e) {
            console.error('Error connecting to research socket:', e);
            return false;
        }
    };
    
    // Check for active research on page load
    async function checkActiveResearch() {
        try {
            const response = await fetch(getApiUrl('/api/history'));
            const history = await response.json();
            
            // Find in-progress research
            const activeResearch = history.find(item => item.status === 'in_progress');
            
            if (activeResearch) {
                // Verify the research is truly active by checking its details
                try {
                    const detailsResponse = await fetch(getApiUrl(`/api/research/${activeResearch.id}`));
                    const details = await detailsResponse.json();
                    
                    // If status is not in_progress in the details, it's stale
                    if (details.status !== 'in_progress') {
                        console.log(`Research ${activeResearch.id} is stale (status: ${details.status}), ignoring`);
                        return;
                    }
                    
                    // Check when the research was started - if it's been more than 1 hour, it might be stale
                    if (details.created_at) {
                        const startTime = new Date(details.created_at);
                        const currentTime = new Date();
                        const hoursSinceStart = (currentTime - startTime) / (1000 * 60 * 60);
                        
                        if (hoursSinceStart > 1) {
                            console.log(`Research ${activeResearch.id} has been running for ${hoursSinceStart.toFixed(2)} hours, which is unusually long. Checking for activity...`);
                            
                            // Check if there has been log activity in the last 10 minutes
                            let recentActivity = false;
                            if (details.log && Array.isArray(details.log) && details.log.length > 0) {
                                const lastLogTime = new Date(details.log[details.log.length - 1].time);
                                const minutesSinceLastLog = (currentTime - lastLogTime) / (1000 * 60);
                                
                                if (minutesSinceLastLog < 10) {
                                    recentActivity = true;
                                } else {
                                    console.log(`No recent activity for ${minutesSinceLastLog.toFixed(2)} minutes, treating as stale`);
                                    return;
                                }
                            }
                        }
                    }
                    
                    // If we get here, the research seems to be genuinely active
                    isResearchInProgress = true;
                    currentResearchId = activeResearch.id;
                    window.currentResearchId = currentResearchId;
                    
                    // Check if we're on the new research page and redirect to progress
                    const currentPage = document.querySelector('.page.active');
                    
                    if (currentPage && currentPage.id === 'new-research') {
                        // Navigate to progress page
                        switchPage('research-progress');
                        
                        // Connect to socket for this research
                        window.connectToResearchSocket(currentResearchId);
                        
                        // Start polling for updates
                        pollResearchStatus(currentResearchId);
                    }
                } catch (detailsError) {
                    console.error('Error checking research details:', detailsError);
                }
            }
        } catch (error) {
            console.error('Error checking for active research:', error);
        }
    }
    
    // Add unload event listener
    window.addEventListener('beforeunload', function() {
        window.disconnectSocket();
    });
    
    // Function to start research
    async function startResearch(query, mode) {
        // Reset potentially stale state
        if (isResearchInProgress) {
            // Force a fresh check of active research status
            try {
                const response = await fetch(getApiUrl('/api/history'));
                const history = await response.json();
                
                // Find any in-progress research
                const activeResearch = history.find(item => item.status === 'in_progress');
                
                // If no active research is found, reset the state
                if (!activeResearch) {
                    console.log('Resetting stale research state - no active research found in history');
                    window.cleanupResearchResources();
                } else {
                    alert('Another research is already in progress. Please wait for it to complete or check its status in the history tab.');
                    return;
                }
            } catch (error) {
                console.error('Error checking for active research:', error);
            }
        }
        
        // Get the start button
        const startResearchBtn = document.getElementById('start-research-btn');
        if (!startResearchBtn) return;
        
        // Disable the start button while we attempt to start the research
        startResearchBtn.disabled = true;
        startResearchBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Starting...';
        
        try {
            // Set the favicon based on research mode
            setFavicon(mode);
            
            const response = await fetch(getApiUrl('/api/start_research'), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    query: query,
                    mode: mode
                })
            });
            
            const data = await response.json();
            
            if (data.status === 'success') {
                isResearchInProgress = true;
                currentResearchId = data.research_id;
                
                // Also update the window object
                window.currentResearchId = data.research_id;
                
                // Update the navigation to show Research in Progress
                updateNavigationBasedOnResearchStatus();
                
                // Update progress page
                document.getElementById('current-query').textContent = query;
                document.getElementById('progress-fill').style.width = '0%';
                document.getElementById('progress-percentage').textContent = '0%';
                document.getElementById('progress-status').textContent = 'Initializing research process...';
                
                // Navigate to progress page
                switchPage('research-progress');
                
                // Connect to socket for this research
                window.connectToResearchSocket(data.research_id);
                
                // Start polling for status
                pollResearchStatus(data.research_id);
                
                // Show the terminate button
                const terminateBtn = document.getElementById('terminate-research-btn');
                if (terminateBtn) {
                    terminateBtn.style.display = 'inline-flex';
                    terminateBtn.disabled = false;
                }
            } else {
                // Reset favicon to default on error
                createDynamicFavicon('⚡');
                
                alert('Error starting research: ' + (data.message || 'Unknown error'));
                startResearchBtn.disabled = false;
                startResearchBtn.innerHTML = '<i class="fas fa-rocket"></i> Start Research';
            }
        } catch (error) {
            // Reset favicon to default on error
            createDynamicFavicon('⚡');
            
            console.error('Error:', error);
            alert('An error occurred while starting the research. Please try again.');
            startResearchBtn.disabled = false;
            startResearchBtn.innerHTML = '<i class="fas fa-rocket"></i> Start Research';
        }
    }
    
    // Function to poll research status (as a backup to socket.io)
    function pollResearchStatus(researchId) {
        console.log(`Polling research status for ID: ${researchId}`);
        fetch(getApiUrl(`/api/research/${researchId}`))
        .then(response => {
            if (!response.ok) {
                throw new Error(`Server returned ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('Research status response:', data);
            
            // Get the latest progress and log data
            const progress = data.progress || 0;
            const status = data.status || 'in_progress';
            
            // Get the latest message from the log if available
            let latestMessage = "Processing research...";
            if (data.log && Array.isArray(data.log) && data.log.length > 0) {
                const latestLog = data.log[data.log.length - 1];
                if (latestLog && latestLog.message) {
                    latestMessage = latestLog.message;
                }
            }
            
            // Update the UI with the current progress - always
            updateProgressUI(progress, status, latestMessage);
            
            // If research is complete, show the completion buttons
            if (status === 'completed' || status === 'failed' || status === 'suspended') {
                console.log(`Research is in final state: ${status}`);
                // Clear the polling interval
                if (pollingInterval) {
                    console.log('Clearing polling interval');
                    clearInterval(pollingInterval);
                    pollingInterval = null;
                }
                
                // Update UI for completion
                if (status === 'completed') {
                    console.log('Research completed, loading results automatically');
                    // Hide the terminate button
                    const terminateBtn = document.getElementById('terminate-research-btn');
                    if (terminateBtn) {
                        terminateBtn.style.display = 'none';
                    }
                    
                    // Update history item status
                    updateHistoryItemStatus(researchId, 'completed');
                    
                    // Auto-load the results instead of showing a button
                    loadResearch(researchId);
                } else if (status === 'failed' || status === 'suspended') {
                    console.log(`Showing error message for status: ${status}`);
                    
                    // Get error message from metadata if available or use latest message
                    let errorText = latestMessage;
                    if (data.metadata && typeof data.metadata === 'string') {
                        try {
                            const metadataObj = JSON.parse(data.metadata);
                            if (metadataObj.error) {
                                errorText = metadataObj.error;
                            }
                        } catch (e) {
                            console.log('Error parsing metadata:', e);
                        }
                    }
                    
                    // Show error message in UI
                    const errorMessage = document.getElementById('error-message');
                    if (errorMessage) {
                        errorMessage.style.display = 'block';
                        errorMessage.textContent = errorText;
                        console.log('Set error message to:', errorText);
                    } else {
                        console.error('error-message element not found');
                    }
                    
                    // Update progress display with error
                    updateProgressUI(0, status, errorText);
                    
                    // Update history item status
                    updateHistoryItemStatus(researchId, status, errorText);
                }
                
                // Play notification sound based on status
                if (status === 'completed') {
                    console.log('Playing success notification sound');
                    playNotificationSound('success');
                } else if (status === 'failed') {
                    console.log('Playing error notification sound');
                    playNotificationSound('error');
                }
                
                // Update the navigation
                console.log('Updating navigation based on research status');
                updateNavigationBasedOnResearchStatus();
                
                // Force the UI to update with a manual trigger
                document.dispatchEvent(new CustomEvent('research_completed', { detail: data }));
                
                return;
            }
            
            // Continue polling if still in progress
            if (status === 'in_progress') {
                console.log('Research is still in progress, continuing polling');
                if (!pollingInterval) {
                    console.log('Setting up polling interval');
                    pollingInterval = setInterval(() => {
                        pollResearchStatus(researchId);
                    }, 10000);
                }
            }
        })
        .catch(error => {
            console.error('Error polling research status:', error);
        });
    }
    
    // Main initialization function
    function initializeApp() {
        console.log('Initializing application...');
        
        // Initialize the sounds
        initializeSounds();
        
        // Create a dynamic favicon with the lightning emoji by default
        createDynamicFavicon('⚡');
        
        // Get navigation elements
        const navItems = document.querySelectorAll('.sidebar-nav li');
        const mobileNavItems = document.querySelectorAll('.mobile-tab-bar li');
        const pages = document.querySelectorAll('.page');
        const mobileTabBar = document.querySelector('.mobile-tab-bar');
        
        // Handle responsive navigation based on screen size
        function handleResponsiveNavigation() {
            // Mobile tab bar should only be visible on small screens
            if (window.innerWidth <= 767) {
                if (mobileTabBar) {
                    mobileTabBar.style.display = 'flex';
                }
            } else {
                if (mobileTabBar) {
                    mobileTabBar.style.display = 'none';
                }
            }
        }
        
        // Call on initial load
        handleResponsiveNavigation();
        
        // Add resize listener for responsive design
        window.addEventListener('resize', handleResponsiveNavigation);
        
        // Setup navigation click handlers
        navItems.forEach(item => {
            if (!item.classList.contains('external-link')) {
                item.addEventListener('click', function() {
                    const pageId = this.dataset.page;
                    if (pageId) {
                        switchPage(pageId);
                    }
                });
            }
        });
        
        mobileNavItems.forEach(item => {
            if (!item.classList.contains('external-link')) {
                item.addEventListener('click', function() {
                    const pageId = this.dataset.page;
                    if (pageId) {
                        switchPage(pageId);
                    }
                });
            }
        });
        
        // Setup form submission
        const researchForm = document.getElementById('research-form');
        if (researchForm) {
            researchForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const query = document.getElementById('query').value.trim();
                if (!query) {
                    alert('Please enter a research query');
                    return;
                }
                
                const mode = document.querySelector('.mode-option.active')?.dataset.mode || 'quick';
                startResearch(query, mode);
            });
        }
        
        // Initialize research mode selection
        const modeOptions = document.querySelectorAll('.mode-option');
        modeOptions.forEach(option => {
            option.addEventListener('click', function() {
                modeOptions.forEach(opt => opt.classList.remove('active'));
                this.classList.add('active');
                
                // Update favicon based on selected mode
                const mode = this.dataset.mode;
                setFavicon(mode);
            });
        });
        
        // Load research history initially
        if (document.getElementById('history-list')) {
            loadResearchHistory();
        }
        
        // Check for active research
        checkActiveResearch();
        
        // Setup notification toggle and other form elements
        setupResearchForm();
        
        console.log('Application initialized');
    }
    
    // Initialize the app
    initializeApp();
    
    // Function to switch between pages
    function switchPage(pageId) {
        // Get elements directly from the DOM
        const pages = document.querySelectorAll('.page');
        const navItems = document.querySelectorAll('.sidebar-nav li');
        const mobileNavItems = document.querySelectorAll('.mobile-tab-bar li');
        
        // Remove active class from all pages
        pages.forEach(page => {
            page.classList.remove('active');
        });
        
        // Add active class to target page
        const targetPage = document.getElementById(pageId);
        if (targetPage) {
            targetPage.classList.add('active');
        }
        
        // Update sidebar navigation active states
        navItems.forEach(item => {
            if (item.getAttribute('data-page') === pageId) {
                item.classList.add('active');
            } else {
                item.classList.remove('active');
            }
        });
        
        // Update mobile tab bar active states
        mobileNavItems.forEach(item => {
            if (item.getAttribute('data-page') === pageId) {
                item.classList.add('active');
            } else {
                item.classList.remove('active');
            }
        });
        
        // Special handling for history page
        if (pageId === 'history') {
            loadResearchHistory();
        }
    }
    
    // Track termination status
    let isTerminating = false;
    
    // Check if we're on the history page and load history if needed
    const historyPage = document.getElementById('history');
    if (historyPage && historyPage.classList.contains('active')) {
        // Use setTimeout to ensure the DOM is fully loaded
        setTimeout(() => loadResearchHistory(), 100);
    }
    
    // Add a prefix helper function at the top of the file
    function getApiUrl(path) {
        // This function adds the /research prefix to all API URLs
        return `/research${path}`;
    }
    
    // Function to terminate research - exposed to window object
    async function terminateResearch(researchId) {
        if (!researchId) {
            console.error('No research ID provided for termination');
            return;
        }

        // Prevent multiple termination requests
        if (isTerminating) {
            console.log('Termination already in progress');
            return;
        }
        
        // Confirm with the user
        if (!confirm('Are you sure you want to terminate this research? This action cannot be undone.')) {
            return;
        }
        
        try {
            // Set terminating flag
            isTerminating = true;
            
            // Update UI to show we're processing
            const terminateBtn = document.getElementById('terminate-research-btn');
            if (terminateBtn) {
                terminateBtn.disabled = true;
                terminateBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Terminating...';
            }

            // Find all terminate buttons in history items and disable them
            const allTerminateBtns = document.querySelectorAll('.terminate-btn');
            allTerminateBtns.forEach(btn => {
                if (btn !== terminateBtn) {
                    btn.disabled = true;
                    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Terminating...';
                }
            });
            
            // Call the terminate API
            const response = await fetch(getApiUrl(`/api/research/${researchId}/terminate`), {
                method: 'POST'
            });
            
            const data = await response.json();
            
            if (data.status === 'success') {
                // The UI will be updated via socket events or polling
                console.log('Termination request sent successfully');
                
                // If we're on the history page, update the status of this item
                if (document.getElementById('history').classList.contains('active')) {
                    updateHistoryItemStatus(researchId, 'terminating', 'Terminating...');
                }
                
                // Set a timeout to reset UI if socket doesn't respond
                setTimeout(() => {
                    if (isTerminating) {
                        console.log('Termination timeout - resetting UI');
                        isTerminating = false;
                        resetProgressAnimations();
                        
                        // Update the navigation
                        updateNavigationBasedOnResearchStatus();
                    }
                }, 10000); // 10 second timeout
            } else {
                console.error('Termination request failed:', data.message);
                alert(`Failed to terminate research: ${data.message}`);
                
                // Reset the terminating flag
                isTerminating = false;
                
                // Reset the button
                if (terminateBtn) {
                    terminateBtn.disabled = false;
                    terminateBtn.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate Research';
                }
                
                // Reset history button states
                const allTerminateBtns = document.querySelectorAll('.terminate-btn');
                allTerminateBtns.forEach(btn => {
                    if (btn !== terminateBtn) {
                        btn.disabled = false;
                        btn.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate';
                    }
                });
            }
        } catch (error) {
            console.error('Error terminating research:', error);
            alert('An error occurred while trying to terminate the research.');
            
            // Reset the terminating flag
            isTerminating = false;
            
            // Reset the button
            const terminateBtn = document.getElementById('terminate-research-btn');
            if (terminateBtn) {
                terminateBtn.disabled = false;
                terminateBtn.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate Research';
            }
            
            // Reset history button states
            const allTerminateBtns = document.querySelectorAll('.terminate-btn');
            allTerminateBtns.forEach(btn => {
                if (btn !== terminateBtn) {
                    btn.disabled = false;
                    btn.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate';
                }
            });
        }
    }
    
    // Expose the terminate function to the window object
    window.terminateResearch = terminateResearch;
    
    // Function to update the progress UI
    function updateProgressUI(progress, status, message) {
        const progressFill = document.getElementById('progress-fill');
        const progressPercentage = document.getElementById('progress-percentage');
        const progressStatus = document.getElementById('progress-status');
        const errorMessage = document.getElementById('error-message');
        const tryAgainBtn = document.getElementById('try-again-btn');
        
        if (progressFill && progressPercentage) {
            progressFill.style.width = `${progress}%`;
            progressPercentage.textContent = `${progress}%`;
        }
        
        if (progressStatus && message) {
            progressStatus.textContent = message;
            
            // Update status class
            progressStatus.className = 'progress-status';
            if (status) {
                progressStatus.classList.add(`status-${status}`);
            }
        }
        
        // Show/hide terminate button based on status
        const terminateBtn = document.getElementById('terminate-research-btn');
        if (terminateBtn) {
            if (status === 'in_progress') {
                terminateBtn.style.display = 'inline-flex';
                terminateBtn.disabled = false;
                terminateBtn.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate Research';
                
                // Hide try again button when in progress
                if (tryAgainBtn) {
                    tryAgainBtn.style.display = 'none';
                }
            } else if (status === 'terminating') {
                terminateBtn.style.display = 'inline-flex';
                terminateBtn.disabled = true;
                terminateBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Terminating...';
            } else {
                terminateBtn.style.display = 'none';
                
                // Show try again button for failed or suspended research
                if (tryAgainBtn && (status === 'failed' || status === 'suspended')) {
                    tryAgainBtn.style.display = 'inline-flex';
                    
                    // Get the current query for retry
                    const currentQuery = document.getElementById('current-query');
                    const queryText = currentQuery ? currentQuery.textContent : '';
                    
                    // Add click event to try again button to go back to research form with the query preserved
                    tryAgainBtn.onclick = function() {
                        // Switch to the research form
                        switchPage('new-research');
                        
                        // Set the query text in the form
                        const queryTextarea = document.getElementById('query');
                        if (queryTextarea && queryText) {
                            queryTextarea.value = queryText;
                        }
                        
                        // Clean up any remaining research state
                        window.cleanupResearchResources();
                    };
                }
            }
        }
        
        // Show error message when there's an error
        if (errorMessage) {
            if (status === 'failed' || status === 'suspended') {
                errorMessage.style.display = 'block';
                errorMessage.textContent = message || (status === 'failed' ? 'Research failed' : 'Research was suspended');
            } else {
                errorMessage.style.display = 'none';
            }
        }
    }
    
    // Completely rewritten function to ensure reliable history loading
    async function loadResearchHistory() {
        const historyList = document.getElementById('history-list');
        
        // Make sure we have the history list element
        if (!historyList) {
            console.error('History list element not found');
            return;
        }
        
        historyList.innerHTML = '<div class="loading-spinner centered"><div class="spinner"></div></div>';
        
        try {
            const response = await fetch(getApiUrl('/api/history'));
            
            if (!response.ok) {
                throw new Error(`Server returned ${response.status}`);
            }
            
            const data = await response.json();
            
            // Clear the loading spinner
            historyList.innerHTML = '';
            
            // Handle empty data
            if (!data || !Array.isArray(data) || data.length === 0) {
                historyList.innerHTML = '<div class="empty-state">No research history found. Start a new research project!</div>';
                return;
            }
            
            // Check if any research is in progress
            const inProgressResearch = data.find(item => item.status === 'in_progress');
            
            // Get the start research button
            const startResearchBtn = document.getElementById('start-research-btn');
            
            if (inProgressResearch) {
                isResearchInProgress = true;
                currentResearchId = inProgressResearch.id;
                if (startResearchBtn) {
                    startResearchBtn.disabled = true;
                }
            } else {
                isResearchInProgress = false;
                if (startResearchBtn) {
                    startResearchBtn.disabled = false;
                }
            }
            
            // Display each history item
            data.forEach(item => {
                try {
                    // Skip if item is invalid
                    if (!item || !item.id) {
                        return;
                    }
                    
                    // Create container
                    const historyItem = document.createElement('div');
                    historyItem.className = 'history-item';
                    historyItem.dataset.researchId = item.id;
                    
                    // Create header with title and status
                    const header = document.createElement('div');
                    header.className = 'history-item-header';
                    
                    const title = document.createElement('div');
                    title.className = 'history-item-title';
                    title.textContent = item.query || 'Untitled Research';
                    
                    const status = document.createElement('div');
                    status.className = `history-item-status status-${item.status ? item.status.replace('_', '-') : 'unknown'}`;
                    status.textContent = item.status ? 
                        (item.status === 'in_progress' ? 'In Progress' : 
                         item.status.charAt(0).toUpperCase() + item.status.slice(1)) : 
                        'Unknown';
                    
                    header.appendChild(title);
                    header.appendChild(status);
                    historyItem.appendChild(header);
                    
                    // Create meta section
                    const meta = document.createElement('div');
                    meta.className = 'history-item-meta';
                    
                    const date = document.createElement('div');
                    date.className = 'history-item-date';
                    try {
                        // Use completed_at if available, fall back to created_at if not
                        const dateToUse = item.completed_at || item.created_at;
                        date.textContent = dateToUse ? formatDate(new Date(dateToUse)) : 'Unknown date';
                    } catch (e) {
                        date.textContent = item.completed_at || item.created_at || 'Unknown date';
                    }
                    
                    const mode = document.createElement('div');
                    mode.className = 'history-item-mode';
                    const modeIcon = item.mode === 'quick' ? 'bolt' : 'microscope';
                    const modeText = item.mode === 'quick' ? 'Quick Summary' : 'Detailed Report';
                    mode.innerHTML = `<i class="fas fa-${modeIcon}"></i> ${modeText}`;
                    
                    meta.appendChild(date);
                    meta.appendChild(mode);
                    historyItem.appendChild(meta);
                    
                    // Create actions section
                    const actions = document.createElement('div');
                    actions.className = 'history-item-actions';
                    
                    // View button
                    const viewBtn = document.createElement('button');
                    viewBtn.className = 'btn btn-sm btn-outline view-btn';
                    
                    if (item.status === 'completed') {
                        viewBtn.innerHTML = '<i class="fas fa-eye"></i> View';
                        viewBtn.addEventListener('click', (e) => {
                            e.stopPropagation();
                            loadResearch(item.id);
                        });
                        
                        // PDF button for completed research
                        const pdfBtn = document.createElement('button');
                        pdfBtn.className = 'btn btn-sm btn-outline pdf-btn';
                        pdfBtn.innerHTML = '<i class="fas fa-file-pdf"></i> PDF';
                        pdfBtn.addEventListener('click', (e) => {
                            e.stopPropagation();
                            generatePdfFromResearch(item.id);
                        });
                        actions.appendChild(pdfBtn);
                    } else if (item.status === 'in_progress') {
                        viewBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> In Progress';
                        viewBtn.addEventListener('click', (e) => {
                            e.stopPropagation();
                            navigateToResearchProgress({id: item.id, query: item.query, progress: 0});
                        });
                    } else {
                        viewBtn.innerHTML = '<i class="fas fa-eye"></i> View';
                        viewBtn.disabled = true;
                    }
                    
                    actions.appendChild(viewBtn);
                    
                    // Delete button
                    const deleteBtn = document.createElement('button');
                    deleteBtn.className = 'btn btn-sm btn-outline delete-btn';
                    deleteBtn.innerHTML = '<i class="fas fa-trash"></i> Delete';
                    deleteBtn.addEventListener('click', (e) => {
                        e.stopPropagation();
                        if (confirm(`Are you sure you want to delete this research: "${item.query}"?`)) {
                            deleteResearch(item.id);
                        }
                    });
                    actions.appendChild(deleteBtn);
                    
                    historyItem.appendChild(actions);
                    
                    // Add click handler for the entire item
                    historyItem.addEventListener('click', (e) => {
                        // Skip if clicking on a button
                        if (e.target.closest('button')) {
                            return;
                        }
                        
                        if (item.status === 'completed') {
                            loadResearch(item.id);
                        } else if (item.status === 'in_progress') {
                            navigateToResearchProgress({id: item.id, query: item.query, progress: 0});
                        }
                    });
                    
                    // Add to the history list
                    historyList.appendChild(historyItem);
                } catch (itemError) {
                    console.error('Error processing history item:', itemError, item);
                }
            });
            
        } catch (error) {
            console.error('Error loading history:', error);
            historyList.innerHTML = `
                <div class="error-message">
                    Error loading history: ${error.message}
                </div>
                <div style="text-align: center; margin-top: 1rem;">
                    <button id="retry-history-btn" class="btn btn-primary">
                        <i class="fas fa-sync"></i> Retry
                    </button>
                </div>`;
                
            const retryBtn = document.getElementById('retry-history-btn');
            if (retryBtn) {
                retryBtn.addEventListener('click', () => {
                    loadResearchHistory();
                });
            }
        }
        
        // Add a fallback in case something goes wrong and the history list is still empty
        setTimeout(() => {
            if (historyList.innerHTML === '' || historyList.innerHTML.includes('loading-spinner')) {
                console.warn('History list is still empty or showing spinner after load attempt - applying fallback');
                historyList.innerHTML = `
                    <div class="error-message">
                        Something went wrong while loading the history. 
                    </div>
                    <div style="text-align: center; margin-top: 1rem;">
                        <button id="fallback-retry-btn" class="btn btn-primary">
                            <i class="fas fa-sync"></i> Retry
                        </button>
                    </div>`;
                    
                const fallbackRetryBtn = document.getElementById('fallback-retry-btn');
                if (fallbackRetryBtn) {
                    fallbackRetryBtn.addEventListener('click', () => {
                        loadResearchHistory();
                    });
                }
            }
        }, 5000); // Check after 5 seconds
    }
    
    // Function to navigate to research progress
    function navigateToResearchProgress(research) {
        document.getElementById('current-query').textContent = research.query;
        document.getElementById('progress-fill').style.width = `${research.progress || 0}%`;
        document.getElementById('progress-percentage').textContent = `${research.progress || 0}%`;
        
        // Navigate to progress page
        switchPage('research-progress');
        
        // Connect to socket for this research
        window.connectToResearchSocket(research.id);
        
        // Start polling for status
        pollResearchStatus(research.id);
    }
    
    // Function to delete a research record
    async function deleteResearch(researchId) {
        try {
            const response = await fetch(getApiUrl(`/api/research/${researchId}/delete`), {
                method: 'DELETE'
            });
            
            if (response.ok) {
                // Reload the history
                loadResearchHistory();
            } else {
                alert('Failed to delete research. Please try again.');
            }
        } catch (error) {
            console.error('Error deleting research:', error);
            alert('An error occurred while deleting the research.');
        }
    }
    
    // Function to load research
    async function loadResearch(researchId) {
        try {
            const response = await fetch(getApiUrl(`/api/research/${researchId}`));
            if (!response.ok) {
                throw new Error('Failed to load research');
            }
            
            const data = await response.json();
            
            if (data.status === 'completed' && data.report_path) {
                // Set the favicon based on the research mode
                setFavicon(data.mode || 'quick');
                
                // Get report content
                const reportResponse = await fetch(getApiUrl(`/api/report/${researchId}`));
                if (!reportResponse.ok) {
                    throw new Error('Failed to load report');
                }
                
                const reportData = await reportResponse.json();
                
                if (reportData.status === 'success') {
                    // Update UI with report content
                    document.getElementById('result-query').textContent = data.query || 'Unknown query';
                    document.getElementById('result-mode').textContent = data.mode === 'detailed' ? 'Detailed Report' : 'Quick Summary';
                    
                    // Format date
                    const reportDate = data.completed_at ? formatDate(new Date(data.completed_at)) : 'Unknown';
                    document.getElementById('result-date').textContent = reportDate;
                    
                    // Render markdown content
                    const resultsContent = document.getElementById('results-content');
                    if (resultsContent) {
                        resultsContent.innerHTML = '';
                        resultsContent.classList.add('markdown-body');
                        
                        // Enable syntax highlighting
                        const renderedContent = marked.parse(reportData.content);
                        resultsContent.innerHTML = renderedContent;
                        
                        // Apply syntax highlighting
                        document.querySelectorAll('pre code').forEach((block) => {
                            hljs.highlightElement(block);
                        });
                    }
                    
                    // Switch to results page
                    switchPage('research-results');
                } else {
                    throw new Error(reportData.message || 'Failed to load report content');
                }
            } else if (data.status === 'in_progress') {
                // Set favicon based on the research mode 
                setFavicon(data.mode || 'quick');
                
                // Redirect to progress page
                navigateToResearchProgress(data);
            } else {
                // Show research details for failed or suspended research
                loadResearchDetails(researchId);
            }
        } catch (error) {
            console.error('Error loading research:', error);
            alert('Error loading research: ' + error.message);
            // Reset favicon to default on error
            createDynamicFavicon('⚡');
        }
    }
    
    // Function to load research details
    async function loadResearchDetails(researchId) {
        try {
            // Navigate to details page
            switchPage('research-details');
            
            const researchLog = document.getElementById('research-log');
            researchLog.innerHTML = '<div class="loading-spinner centered"><div class="spinner"></div></div>';
            
            const response = await fetch(getApiUrl(`/api/research/${researchId}/details`));
            if (!response.ok) {
                throw new Error('Failed to load research details');
            }
            
            const data = await response.json();
            
            // Set the favicon based on the research mode
            setFavicon(data.mode || 'quick');
            
            // Update UI with research details
            document.getElementById('detail-query').textContent = data.query || 'Unknown query';
            document.getElementById('detail-status').textContent = capitalizeFirstLetter(data.status || 'unknown');
            document.getElementById('detail-mode').textContent = data.mode === 'detailed' ? 'Detailed Report' : 'Quick Summary';
            
            // Update progress indicator
            const progress = data.progress || 0;
            document.getElementById('detail-progress-fill').style.width = `${progress}%`;
            document.getElementById('detail-progress-percentage').textContent = `${progress}%`;
            
            // Add status classes
            document.getElementById('detail-status').className = 'metadata-value status-' + (data.status || 'unknown');
            
            // Clear existing log entries
            researchLog.innerHTML = '';
            
            // Render log entries
            if (data.log && Array.isArray(data.log)) {
                renderLogEntries(data.log);
            } else {
                researchLog.innerHTML = '<div class="empty-message">No log entries available</div>';
            }
            
            // Update actions based on status
            const actionsContainer = document.getElementById('detail-actions');
            actionsContainer.innerHTML = '';
            
            if (data.status === 'completed' && data.report_path) {
                // Add button to view results
                const viewResultsBtn = document.createElement('button');
                viewResultsBtn.className = 'btn btn-primary';
                viewResultsBtn.innerHTML = '<i class="fas fa-eye"></i> View Results';
                viewResultsBtn.addEventListener('click', () => loadResearch(researchId));
                actionsContainer.appendChild(viewResultsBtn);
            } else if (data.status === 'in_progress') {
                // Add button to view progress
                const viewProgressBtn = document.createElement('button');
                viewProgressBtn.className = 'btn btn-primary';
                viewProgressBtn.innerHTML = '<i class="fas fa-spinner"></i> View Progress';
                viewProgressBtn.addEventListener('click', () => navigateToResearchProgress(data));
                actionsContainer.appendChild(viewProgressBtn);
                
                // Add button to terminate research
                const terminateBtn = document.createElement('button');
                terminateBtn.className = 'btn btn-outline terminate-btn';
                terminateBtn.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate Research';
                terminateBtn.addEventListener('click', () => terminateResearch(researchId));
                actionsContainer.appendChild(terminateBtn);
            }
            
            // Add delete button for all research items
            const deleteBtn = document.createElement('button');
            deleteBtn.className = 'btn btn-outline delete-btn';
            deleteBtn.innerHTML = '<i class="fas fa-trash"></i> Delete Research';
            deleteBtn.addEventListener('click', () => {
                if (confirm('Are you sure you want to delete this research? This action cannot be undone.')) {
                    deleteResearch(researchId);
                }
            });
            actionsContainer.appendChild(deleteBtn);
        } catch (error) {
            console.error('Error loading research details:', error);
            document.getElementById('research-log').innerHTML = '<div class="error-message">Error loading research details. Please try again later.</div>';
            // Reset favicon to default on error
            createDynamicFavicon('⚡');
        }
    }
    
    // Function to render log entries
    function renderLogEntries(logEntries) {
        const researchLog = document.getElementById('research-log');
        researchLog.innerHTML = '';
        
        if (!logEntries || logEntries.length === 0) {
            researchLog.innerHTML = '<div class="empty-state">No log entries available.</div>';
            return;
        }
        
        try {
            // Use a document fragment for better performance
            const fragment = document.createDocumentFragment();
            const template = document.getElementById('log-entry-template');
            
            if (!template) {
                console.error('Log entry template not found');
                researchLog.innerHTML = '<div class="error-message">Error rendering log entries: Template not found</div>';
                return;
            }
            
            logEntries.forEach(entry => {
                if (!entry) return; // Skip invalid entries
                
                try {
                    const clone = document.importNode(template.content, true);
                    
                    // Format the timestamp
                    let timeStr = 'N/A';
                    try {
                        if (entry.time) {
                            const time = new Date(entry.time);
                            timeStr = time.toLocaleTimeString();
                        }
                    } catch (timeErr) {
                        console.warn('Error formatting time:', timeErr);
                    }
                    
                    const timeEl = clone.querySelector('.log-entry-time');
                    if (timeEl) timeEl.textContent = timeStr;
                    
                    // Add message with phase highlighting if available
                    const messageEl = clone.querySelector('.log-entry-message');
                    if (messageEl) {
                        let phaseClass = '';
                        if (entry.metadata && entry.metadata.phase) {
                            phaseClass = `phase-${entry.metadata.phase}`;
                        }
                        messageEl.textContent = entry.message || 'No message';
                        messageEl.classList.add(phaseClass);
                    }
                    
                    // Add progress information if available
                    const progressEl = clone.querySelector('.log-entry-progress');
                    if (progressEl) {
                        if (entry.progress !== null && entry.progress !== undefined) {
                            progressEl.textContent = `Progress: ${entry.progress}%`;
                        } else {
                            progressEl.textContent = '';
                        }
                    }
                    
                    fragment.appendChild(clone);
                } catch (entryError) {
                    console.error('Error processing log entry:', entryError, entry);
                    // Continue with other entries
                }
            });
            
            researchLog.appendChild(fragment);
            
            // Scroll to the bottom
            researchLog.scrollTop = researchLog.scrollHeight;
        } catch (error) {
            console.error('Error rendering log entries:', error);
            researchLog.innerHTML = '<div class="error-message">Error rendering log entries. Please try again later.</div>';
        }
        
        // Connect to socket for updates if this is an in-progress research
        if (research && research.status === 'in_progress') {
            window.connectToResearchSocket(researchId);
        }
    }
    
    // Function to update detail log with a new entry
    function updateDetailLogEntry(logEntry) {
        if (!logEntry || !document.getElementById('research-details').classList.contains('active')) {
            return;
        }
        
        const researchLog = document.getElementById('research-log');
        const template = document.getElementById('log-entry-template');
        const clone = document.importNode(template.content, true);
        
        // Format the timestamp
        const time = new Date(logEntry.time);
        clone.querySelector('.log-entry-time').textContent = time.toLocaleTimeString();
        
        // Add message with phase highlighting if available
        const messageEl = clone.querySelector('.log-entry-message');
        let phaseClass = '';
        if (logEntry.metadata && logEntry.metadata.phase) {
            phaseClass = `phase-${logEntry.metadata.phase}`;
        }
        messageEl.textContent = logEntry.message;
        messageEl.classList.add(phaseClass);
        
        // Add progress information if available
        const progressEl = clone.querySelector('.log-entry-progress');
        if (logEntry.progress !== null && logEntry.progress !== undefined) {
            progressEl.textContent = `Progress: ${logEntry.progress}%`;
            
            // Also update the progress bar in the details view
            document.getElementById('detail-progress-fill').style.width = `${logEntry.progress}%`;
            document.getElementById('detail-progress-percentage').textContent = `${logEntry.progress}%`;
        } else {
            progressEl.textContent = '';
        }
        
        researchLog.appendChild(clone);
        
        // Scroll to the bottom
        researchLog.scrollTop = researchLog.scrollHeight;
    }
    
    // Back to history button handlers - using direct page switching
    document.getElementById('back-to-history')?.addEventListener('click', () => {
        switchPage('history');
    });
    
    document.getElementById('back-to-history-from-details')?.addEventListener('click', () => {
        switchPage('history');
    });
    
    // Helper functions
    function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
    
    function formatDate(date) {
        // Ensure we're handling the date properly
        if (!(date instanceof Date) || isNaN(date)) {
            console.warn('Invalid date provided to formatDate:', date);
            return 'Invalid date';
        }
        
        // Get current year to compare with date year
        const currentYear = new Date().getFullYear();
        const dateYear = date.getFullYear();
        
        // Get month name, day, and time
        const month = date.toLocaleString('en-US', { month: 'short' });
        const day = date.getDate();
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        
        // Format like "Feb 25, 08:09" or "Feb 25, 2022, 08:09" if not current year
        if (dateYear === currentYear) {
            return `${month} ${day}, ${hours}:${minutes}`;
        } else {
            return `${month} ${day}, ${dateYear}, ${hours}:${minutes}`;
        }
    }

    // Function to update progress UI from current research
    function updateProgressFromCurrentResearch() {
        if (!isResearchInProgress || !currentResearchId) return;
        
        // Fetch current status
        fetch(getApiUrl(`/api/research/${currentResearchId}`))
        .then(response => response.json())
        .then(data => {
            document.getElementById('current-query').textContent = data.query || '';
            document.getElementById('progress-fill').style.width = `${data.progress || 0}%`;
            document.getElementById('progress-percentage').textContent = `${data.progress || 0}%`;
            
            // Connect to socket for this research
            window.connectToResearchSocket(currentResearchId);
        })
        .catch(error => {
            console.error('Error fetching research status:', error);
        });
    }

    // Function to update the sidebar navigation based on research status
    function updateNavigationBasedOnResearchStatus() {
        console.log("Updating navigation based on research status");
        console.log("isResearchInProgress:", isResearchInProgress);
        console.log("currentResearchId:", currentResearchId);
        
        // Get nav items for each update to ensure we have fresh references
        const navItems = document.querySelectorAll('.sidebar-nav li');
        const mobileNavItems = document.querySelectorAll('.mobile-tab-bar li');
        // Get all pages
        const pages = document.querySelectorAll('.page');
        
        const newResearchNav = Array.from(navItems).find(item => 
            item.getAttribute('data-page') === 'new-research' || 
            (item.getAttribute('data-original-page') === 'new-research' && 
             item.getAttribute('data-page') === 'research-progress')
        );
        
        if (newResearchNav) {
            if (isResearchInProgress) {
                console.log("Research is in progress, updating navigation");
                // Change text to "Research in Progress"
                newResearchNav.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Research in Progress';
                
                // Also update the listener to navigate to progress page
                if (newResearchNav.getAttribute('data-page') !== 'research-progress') {
                    newResearchNav.setAttribute('data-original-page', 'new-research');
                    newResearchNav.setAttribute('data-page', 'research-progress');
                }
                
                // If on new-research page, redirect to research-progress
                if (document.getElementById('new-research').classList.contains('active')) {
                    pages.forEach(page => page.classList.remove('active'));
                    document.getElementById('research-progress').classList.add('active');
                    
                    // Update the research progress page
                    updateProgressFromCurrentResearch();
                }
            } else {
                console.log("Research is not in progress, resetting navigation");
                // Reset to "New Research" if there's no active research
                newResearchNav.innerHTML = '<i class="fas fa-search"></i> New Research';
                
                // Reset the listener
                if (newResearchNav.hasAttribute('data-original-page')) {
                    newResearchNav.setAttribute('data-page', newResearchNav.getAttribute('data-original-page'));
                    newResearchNav.removeAttribute('data-original-page');
                }
                
                // Reset progress UI elements
                const progressFill = document.getElementById('progress-fill');
                const progressPercentage = document.getElementById('progress-percentage');
                const progressStatus = document.getElementById('progress-status');
                
                if (progressFill) progressFill.style.width = '0%';
                if (progressPercentage) progressPercentage.textContent = '0%';
                if (progressStatus) {
                    const errorMessage = document.getElementById('error-message');
                    if (errorMessage && errorMessage.style.display === 'block') {
                        // If there's an error message displayed, show a more informative status
                        progressStatus.textContent = 'Research process encountered an error. Please check the error message above and try again.';
                        progressStatus.classList.add('status-failed');
                    } else {
                        progressStatus.textContent = 'Start a new research query when you\'re ready...';
                        progressStatus.classList.remove('status-failed');
                    }
                }
                
                // If the terminate button is visible, hide it
                const terminateBtn = document.getElementById('terminate-research-btn');
                if (terminateBtn) {
                    terminateBtn.style.display = 'none';
                    terminateBtn.disabled = false;
                    terminateBtn.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate Research';
                }
                
                // Also hide error message if visible
                const errorMessage = document.getElementById('error-message');
                if (errorMessage) {
                    errorMessage.style.display = 'none';
                    errorMessage.textContent = '';
                }
                
                // Reset research form submit button
                const startResearchBtn = document.getElementById('start-research-btn');
                if (startResearchBtn) {
                    startResearchBtn.disabled = false;
                    startResearchBtn.innerHTML = '<i class="fas fa-rocket"></i> Start Research';
                }
            }
            
            // Make sure the navigation highlights the correct item
            navItems.forEach(item => {
                if (item === newResearchNav) {
                    if (isResearchInProgress) {
                        if (document.getElementById('research-progress').classList.contains('active')) {
                            item.classList.add('active');
                        }
                    } else if (document.getElementById('new-research').classList.contains('active')) {
                        item.classList.add('active');
                    }
                }
            });
        }

        // Connect to socket for updates only if research is in progress
        if (isResearchInProgress && currentResearchId) {
            window.connectToResearchSocket(currentResearchId);
        } else {
            // Disconnect socket if no active research
            window.disconnectSocket();
            
            // Also reset the current research ID
            currentResearchId = null;
            window.currentResearchId = null;
        }
    }

    // Function to update the research progress page from nav click
    function updateProgressPage() {
        if (!isResearchInProgress || !currentResearchId) {
            return;
        }
        
        // Update the progress page
        fetch(getApiUrl(`/api/research/${currentResearchId}`))
            .then(response => response.json())
            .then(data => {
                // Update the query display
                document.getElementById('current-query').textContent = data.query;
                
                // Update the progress bar
                updateProgressUI(data.progress || 0, data.status);
                
                // Connect to socket for live updates
                window.connectToResearchSocket(currentResearchId);
                
                // Check if we need to show the terminate button
                if (data.status === 'in_progress') {
                    const terminateBtn = document.getElementById('terminate-research-btn');
                    if (terminateBtn) {
                        terminateBtn.style.display = 'inline-flex';
                        terminateBtn.disabled = false;
                    }
                }
            })
            .catch(error => {
                console.error('Error fetching research status:', error);
            });
    }

    // Function to update a specific history item without reloading the whole list
    function updateHistoryItemStatus(researchId, status, statusText) {
        const historyList = document.getElementById('history-list');
        
        // Format the status for display
        const displayStatus = statusText || 
            (status === 'in_progress' ? 'In Progress' : 
             status.charAt(0).toUpperCase() + status.slice(1));
        
        // Format the CSS class
        const statusClass = `status-${status.replace('_', '-')}`;
        
        // Look for the item in the active research banner
        const activeBanner = historyList.querySelector(`.active-research-banner[data-research-id="${researchId}"]`);
        if (activeBanner) {
            const statusEl = activeBanner.querySelector('.history-item-status');
            if (statusEl) {
                statusEl.textContent = displayStatus;
                statusEl.className = 'history-item-status';
                statusEl.classList.add(statusClass);
            }
            
            // Update buttons
            const terminateBtn = activeBanner.querySelector('.terminate-btn');
            if (terminateBtn) {
                terminateBtn.style.display = 'none';
            }
            
            const viewProgressBtn = activeBanner.querySelector('.view-progress-btn');
            if (viewProgressBtn) {
                if (status === 'suspended') {
                    viewProgressBtn.innerHTML = '<i class="fas fa-pause-circle"></i> Suspended';
                } else if (status === 'failed') {
                    viewProgressBtn.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Failed';
                }
                viewProgressBtn.disabled = true;
            }
            
            return;
        }
        
        // Look for the item in the regular list
        const historyItem = historyList.querySelector(`.history-item[data-research-id="${researchId}"]`);
        if (historyItem) {
            const statusEl = historyItem.querySelector('.history-item-status');
            if (statusEl) {
                statusEl.textContent = displayStatus;
                statusEl.className = 'history-item-status';
                statusEl.classList.add(statusClass);
            }
            
            // Update view button
            const viewBtn = historyItem.querySelector('.view-btn');
            if (viewBtn) {
                if (status === 'suspended') {
                    viewBtn.innerHTML = '<i class="fas fa-pause-circle"></i> Suspended';
                    viewBtn.disabled = true;
                } else if (status === 'failed') {
                    viewBtn.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Failed';
                    viewBtn.disabled = true;
                } else if (status === 'completed') {
                    viewBtn.innerHTML = '<i class="fas fa-eye"></i> View';
                    viewBtn.disabled = false;
                    
                    // Also make the PDF button visible if not already
                    const pdfBtn = historyItem.querySelector('.pdf-btn');
                    if (pdfBtn) {
                        pdfBtn.style.display = 'inline-flex';
                    }
                }
            }
        }
    }

    // PDF Generation Functions
    function generatePdf() {
        const resultsContent = document.getElementById('results-content');
        const query = document.getElementById('result-query').textContent;
        const date = document.getElementById('result-date').textContent;
        const mode = document.getElementById('result-mode').textContent;
        
        // Show loading indicator
        const loadingIndicator = document.createElement('div');
        loadingIndicator.className = 'loading-spinner centered';
        loadingIndicator.innerHTML = '<div class="spinner"></div><p style="margin-top: 10px;">Generating PDF...</p>';
        resultsContent.parentNode.insertBefore(loadingIndicator, resultsContent);
        resultsContent.style.display = 'none';
        
        // Create a clone of the content for PDF generation
        const contentClone = resultsContent.cloneNode(true);
        contentClone.style.display = 'block';
        contentClone.style.position = 'absolute';
        contentClone.style.left = '-9999px';
        contentClone.style.width = '800px';
        
        // Apply PDF-specific styling for better readability
        contentClone.style.background = '#ffffff';
        contentClone.style.color = '#333333';
        contentClone.style.padding = '20px';
        
        // Improve visibility by adjusting styles specifically for PDF
        const applyPdfStyles = (element) => {
            // Set all text to dark color for better readability on white background
            element.querySelectorAll('*').forEach(el => {
                // Skip elements that already have inline color styles
                if (!el.style.color) {
                    el.style.color = '#333333';
                }
                
                // Fix background colors
                if (el.style.backgroundColor && 
                    (el.style.backgroundColor.includes('var(--bg') || 
                     el.style.backgroundColor.includes('#121212') ||
                     el.style.backgroundColor.includes('#1e1e2d') ||
                     el.style.backgroundColor.includes('#2a2a3a'))) {
                    el.style.backgroundColor = '#f8f8f8';
                }
                
                // Handle code blocks specifically
                if (el.tagName === 'PRE' || el.tagName === 'CODE') {
                    el.style.backgroundColor = '#f5f5f5';
                    el.style.border = '1px solid #e0e0e0';
                    el.style.color = '#333333';
                }
                
                // Make links visible
                if (el.tagName === 'A') {
                    el.style.color = '#0066cc';
                    el.style.textDecoration = 'underline';
                }
            });
            
            // Fix specific syntax highlighting elements for PDF
            element.querySelectorAll('.hljs').forEach(hljs => {
                hljs.style.backgroundColor = '#f8f8f8';
                hljs.style.color = '#333333';
                
                // Fix common syntax highlighting colors for PDF
                hljs.querySelectorAll('.hljs-keyword').forEach(el => el.style.color = '#0000cc');
                hljs.querySelectorAll('.hljs-string').forEach(el => el.style.color = '#008800');
                hljs.querySelectorAll('.hljs-number').forEach(el => el.style.color = '#aa0000');
                hljs.querySelectorAll('.hljs-comment').forEach(el => el.style.color = '#888888');
                hljs.querySelectorAll('.hljs-function').forEach(el => el.style.color = '#880000');
            });
        };
        
        document.body.appendChild(contentClone);
        
        // Apply PDF-specific styles
        applyPdfStyles(contentClone);
        
        // Add title and metadata to the PDF content
        const headerDiv = document.createElement('div');
        headerDiv.innerHTML = `
            <h1 style="color: #6e4ff6; font-size: 24px; margin-bottom: 10px;">${query}</h1>
            <div style="margin-bottom: 20px; font-size: 14px; color: #666;">
                <p><strong>Generated:</strong> ${date}</p>
                <p><strong>Mode:</strong> ${mode}</p>
                <p><strong>Source:</strong> Deep Research Lab</p>
            </div>
            <hr style="margin-bottom: 20px; border: 1px solid #eee;">
        `;
        contentClone.insertBefore(headerDiv, contentClone.firstChild);
        
        setTimeout(() => {
            try {
                // Use window.jspdf which is from the UMD bundle
                const { jsPDF } = window.jspdf;
                const pdf = new jsPDF('p', 'pt', 'a4');
                const pdfWidth = pdf.internal.pageSize.getWidth();
                const pdfHeight = pdf.internal.pageSize.getHeight();
                const margin = 40;
                const contentWidth = pdfWidth - 2 * margin;
                
                // Create a more efficient PDF generation approach that keeps text selectable
                const generateTextBasedPDF = async () => {
                    try {
                        // Get all text elements and handle them differently than images and special content
                        const elements = Array.from(contentClone.children);
                        let currentY = margin;
                        let pageNum = 1;
                        
                        // Function to add a page with header
                        const addPageWithHeader = (pageNum) => {
                            if (pageNum > 1) {
                                pdf.addPage();
                            }
                            pdf.setFontSize(8);
                            pdf.setTextColor(100, 100, 100);
                            pdf.text(`Deep Research - ${query} - Page ${pageNum}`, margin, pdfHeight - 20);
                        };
                        
                        addPageWithHeader(pageNum);
                        
                        // Process each element
                        for (const element of elements) {
                            // Simple text content - handled directly by jsPDF
                            if ((element.tagName === 'P' || element.tagName === 'DIV') && 
                                !element.querySelector('img, canvas, svg') &&
                                element.children.length === 0) {
                                
                                pdf.setFontSize(11);
                                pdf.setTextColor(0, 0, 0);
                                
                                const text = element.textContent.trim();
                                if (!text) continue; // Skip empty text
                                
                                const textLines = pdf.splitTextToSize(text, contentWidth);
                                
                                // Check if we need a new page
                                if (currentY + (textLines.length * 14) > pdfHeight - margin) {
                                    pageNum++;
                                    addPageWithHeader(pageNum);
                                    currentY = margin;
                                }
                                
                                pdf.text(textLines, margin, currentY + 12);
                                currentY += (textLines.length * 14) + 10;
                            } 
                            // Handle headings
                            else if (['H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(element.tagName)) {
                                const fontSize = {
                                    'H1': 24,
                                    'H2': 20,
                                    'H3': 16,
                                    'H4': 14,
                                    'H5': 12,
                                    'H6': 11
                                }[element.tagName];
                                
                                // Add heading text as native PDF text 
                                pdf.setFontSize(fontSize);
                                
                                // Use a different color for headings to match styling
                                if (element.tagName === 'H1') {
                                    pdf.setTextColor(110, 79, 246); // Purple for main headers
                                } else if (element.tagName === 'H2') {
                                    pdf.setTextColor(70, 90, 150); // Darker blue for H2
                                } else {
                                    pdf.setTextColor(0, 0, 0); // Black for other headings
                                }
                                
                                const text = element.textContent.trim();
                                if (!text) continue; // Skip empty headings
                                
                                const textLines = pdf.splitTextToSize(text, contentWidth);
                                
                                // Check if we need a new page
                                if (currentY + (textLines.length * (fontSize + 4)) > pdfHeight - margin) {
                                    pageNum++;
                                    addPageWithHeader(pageNum);
                                    currentY = margin + 40; // Reset Y position after header
                                }
                                
                                pdf.text(textLines, margin, currentY + fontSize);
                                currentY += (textLines.length * (fontSize + 4)) + 10;
                                
                                // Add a subtle underline for H1 and H2
                                if (element.tagName === 'H1' || element.tagName === 'H2') {
                                    pdf.setDrawColor(110, 79, 246, 0.5);
                                    pdf.setLineWidth(0.5);
                                    pdf.line(
                                        margin, 
                                        currentY - 5, 
                                        margin + Math.min(contentWidth, pdf.getTextWidth(text) * 1.2), 
                                        currentY - 5
                                    );
                                    currentY += 5; // Add a bit more space after underlined headings
                                }
                            }
                            // Handle lists
                            else if (element.tagName === 'UL' || element.tagName === 'OL') {
                                pdf.setFontSize(11);
                                pdf.setTextColor(0, 0, 0);
                                
                                const listItems = element.querySelectorAll('li');
                                let itemNumber = 1;
                                
                                for (const item of listItems) {
                                    const prefix = element.tagName === 'UL' ? '• ' : `${itemNumber}. `;
                                    const text = item.textContent.trim();
                                    
                                    if (!text) continue; // Skip empty list items
                                    
                                    // Split text to fit width, accounting for bullet/number indent
                                    const textLines = pdf.splitTextToSize(text, contentWidth - 15);
                                    
                                    // Check if we need a new page
                                    if (currentY + (textLines.length * 14) > pdfHeight - margin) {
                                        pageNum++;
                                        addPageWithHeader(pageNum);
                                        currentY = margin;
                                    }
                                    
                                    // Add the bullet/number
                                    pdf.text(prefix, margin, currentY + 12);
                                    
                                    // Add the text with indent
                                    pdf.text(textLines, margin + 15, currentY + 12);
                                    currentY += (textLines.length * 14) + 5;
                                    
                                    if (element.tagName === 'OL') itemNumber++;
                                }
                                
                                currentY += 5; // Extra space after list
                            }
                            // Handle code blocks as text
                            else if (element.tagName === 'PRE' || element.querySelector('pre')) {
                                const codeElement = element.tagName === 'PRE' ? element : element.querySelector('pre');
                                const codeText = codeElement.textContent.trim();
                                
                                if (!codeText) continue; // Skip empty code blocks
                                
                                // Use monospace font for code
                                pdf.setFont("courier", "normal");
                                pdf.setFontSize(9); // Smaller font for code
                                
                                // Calculate code block size
                                const codeLines = codeText.split('\n');
                                const lineHeight = 10; // Smaller line height for code
                                const codeBlockHeight = (codeLines.length * lineHeight) + 20; // Add padding
                                
                                // Add a background for the code block
                                if (currentY + codeBlockHeight > pdfHeight - margin) {
                                    pageNum++;
                                    addPageWithHeader(pageNum);
                                    currentY = margin;
                                }
                                
                                // Draw code block background
                                pdf.setFillColor(245, 245, 245); // Light gray background
                                pdf.rect(margin - 5, currentY, contentWidth + 10, codeBlockHeight, 'F');
                                
                                // Draw a border
                                pdf.setDrawColor(220, 220, 220);
                                pdf.setLineWidth(0.5);
                                pdf.rect(margin - 5, currentY, contentWidth + 10, codeBlockHeight, 'S');
                                
                                // Add the code text
                                pdf.setTextColor(0, 0, 0);
                                currentY += 10; // Add padding at top
                                
                                codeLines.forEach(line => {
                                    // Handle indentation by preserving leading spaces
                                    const spacePadding = line.match(/^(\s*)/)[0].length;
                                    const visibleLine = line.trimLeft();
                                    
                                    // Calculate width of space character
                                    const spaceWidth = pdf.getStringUnitWidth(' ') * 9 / pdf.internal.scaleFactor;
                                    
                                    pdf.text(visibleLine, margin + (spacePadding * spaceWidth), currentY);
                                    currentY += lineHeight;
                                });
                                
                                currentY += 10; // Add padding at bottom
                                
                                // Reset to normal font
                                pdf.setFont("helvetica", "normal");
                                pdf.setFontSize(11);
                            }
                            // Handle tables as text
                            else if (element.tagName === 'TABLE' || element.querySelector('table')) {
                                const tableElement = element.tagName === 'TABLE' ? element : element.querySelector('table');
                                
                                if (!tableElement) continue;
                                
                                // Get table rows
                                const rows = Array.from(tableElement.querySelectorAll('tr'));
                                if (rows.length === 0) continue;
                                
                                // Calculate column widths
                                const headerCells = Array.from(rows[0].querySelectorAll('th, td'));
                                const numColumns = headerCells.length;
                                
                                if (numColumns === 0) continue;
                                
                                // Default column width distribution (equal)
                                const colWidth = contentWidth / numColumns;
                                
                                // Start drawing table
                                let tableY = currentY + 10;
                                
                                // Check if we need a new page
                                if (tableY + (rows.length * 20) > pdfHeight - margin) {
                                    pageNum++;
                                    addPageWithHeader(pageNum);
                                    tableY = margin + 10;
                                    currentY = margin;
                                }
                                
                                // Draw table header
                                pdf.setFillColor(240, 240, 240);
                                pdf.rect(margin, tableY, contentWidth, 20, 'F');
                                
                                pdf.setFont("helvetica", "bold");
                                pdf.setFontSize(10);
                                pdf.setTextColor(0, 0, 0);
                                
                                headerCells.forEach((cell, index) => {
                                    const text = cell.textContent.trim();
                                    const x = margin + (index * colWidth) + 5;
                                    pdf.text(text, x, tableY + 13);
                                });
                                
                                // Draw horizontal line after header
                                pdf.setDrawColor(200, 200, 200);
                                pdf.setLineWidth(0.5);
                                pdf.line(margin, tableY + 20, margin + contentWidth, tableY + 20);
                                
                                tableY += 20;
                                
                                // Draw table rows
                                pdf.setFont("helvetica", "normal");
                                for (let i = 1; i < rows.length; i++) {
                                    // Check if we need a new page
                                    if (tableY + 20 > pdfHeight - margin) {
                                        // Draw bottom border for last row on current page
                                        pdf.line(margin, tableY, margin + contentWidth, tableY);
                                        
                                        // Add new page
                                        pageNum++;
                                        addPageWithHeader(pageNum);
                                        tableY = margin + 10;
                                        
                                        // Redraw header on new page
                                        pdf.setFillColor(240, 240, 240);
                                        pdf.rect(margin, tableY, contentWidth, 20, 'F');
                                        
                                        pdf.setFont("helvetica", "bold");
                                        headerCells.forEach((cell, index) => {
                                            const text = cell.textContent.trim();
                                            const x = margin + (index * colWidth) + 5;
                                            pdf.text(text, x, tableY + 13);
                                        });
                                        
                                        pdf.line(margin, tableY + 20, margin + contentWidth, tableY + 20);
                                        tableY += 20;
                                        pdf.setFont("helvetica", "normal");
                                    }
                                    
                                    // Get cells for this row
                                    const cells = Array.from(rows[i].querySelectorAll('td, th'));
                                    
                                    // Alternate row background for better readability
                                    if (i % 2 === 0) {
                                        pdf.setFillColor(250, 250, 250);
                                        pdf.rect(margin, tableY, contentWidth, 20, 'F');
                                    }
                                    
                                    // Add cell content
                                    cells.forEach((cell, index) => {
                                        const text = cell.textContent.trim();
                                        const x = margin + (index * colWidth) + 5;
                                        pdf.text(text, x, tableY + 13);
                                    });
                                    
                                    // Draw horizontal line after row
                                    pdf.line(margin, tableY + 20, margin + contentWidth, tableY + 20);
                                    tableY += 20;
                                }
                                
                                // Draw vertical lines for columns
                                for (let i = 0; i <= numColumns; i++) {
                                    const x = margin + (i * colWidth);
                                    pdf.line(x, currentY + 10, x, tableY);
                                }
                                
                                currentY = tableY + 10;
                            }
                            // Images still need to be handled as images
                            else if (element.tagName === 'IMG' || element.querySelector('img')) {
                                const imgElement = element.tagName === 'IMG' ? element : element.querySelector('img');
                                
                                if (!imgElement || !imgElement.src) continue;
                                
                                try {
                                    // Create a new image to get dimensions
                                    const img = new Image();
                                    img.src = imgElement.src;
                                    
                                    // Calculate dimensions
                                    const imgWidth = contentWidth;
                                    const imgHeight = img.height * (contentWidth / img.width);
                                    
                                    // Check if we need a new page
                                    if (currentY + imgHeight > pdfHeight - margin) {
                                        pageNum++;
                                        addPageWithHeader(pageNum);
                                        currentY = margin;
                                    }
                                    
                                    // Add image to PDF
                                    pdf.addImage(img.src, 'JPEG', margin, currentY, imgWidth, imgHeight);
                                    currentY += imgHeight + 10;
                                } catch (imgError) {
                                    console.error('Error adding image:', imgError);
                                    pdf.text("[Image could not be rendered]", margin, currentY + 12);
                                    currentY += 20;
                                }
                            }
                            // Other complex elements still use html2canvas as fallback
                            else {
                                try {
                                const canvas = await html2canvas(element, {
                                        scale: 2,
                                    useCORS: true,
                                    logging: false,
                                    backgroundColor: '#FFFFFF'
                                });
                                
                                const imgData = canvas.toDataURL('image/png');
                                    const imgWidth = contentWidth;
                                const imgHeight = (canvas.height * contentWidth) / canvas.width;
                                
                                if (currentY + imgHeight > pdfHeight - margin) {
                                    pageNum++;
                                    addPageWithHeader(pageNum);
                                    currentY = margin;
                                }
                                
                                    pdf.addImage(imgData, 'PNG', margin, currentY, imgWidth, imgHeight);
                                currentY += imgHeight + 10;
                                } catch (canvasError) {
                                    console.error('Error rendering complex element:', canvasError);
                                    pdf.text("[Complex content could not be rendered]", margin, currentY + 12);
                                    currentY += 20;
                                }
                            }
                        }
                        
                        // Download the PDF
                        const filename = `${query.replace(/[^a-z0-9]/gi, '_').substring(0, 30).toLowerCase()}_research.pdf`;
                        pdf.save(filename);
                        
                        // Clean up
                        document.body.removeChild(contentClone);
                        resultsContent.style.display = 'block';
                        loadingIndicator.remove();
                    } catch (error) {
                        console.error('Error generating PDF:', error);
                        alert('An error occurred while generating the PDF. Please try again.');
                        document.body.removeChild(contentClone);
                        resultsContent.style.display = 'block';
                        loadingIndicator.remove();
                    }
                };
                
                generateTextBasedPDF();
            } catch (error) {
                console.error('Error initializing PDF generation:', error);
                alert('An error occurred while preparing the PDF. Please try again.');
                document.body.removeChild(contentClone);
                resultsContent.style.display = 'block';
                loadingIndicator.remove();
            }
        }, 100);
    }
    
    // Function to generate PDF from a specific research ID
    async function generatePdfFromResearch(researchId) {
        try {
            // Load research details
            const detailsResponse = await fetch(getApiUrl(`/api/research/${researchId}`));
            const details = await detailsResponse.json();
            
            // Load the report content
            const reportResponse = await fetch(getApiUrl(`/api/report/${researchId}`));
            const reportData = await reportResponse.json();
            
            if (reportData.status === 'success') {
                // Create a temporary container to render the content
                const tempContainer = document.createElement('div');
                tempContainer.className = 'results-content pdf-optimized';
                tempContainer.style.display = 'none';
                document.body.appendChild(tempContainer);
                
                // Render markdown with optimized styles for PDF
                const renderedContent = marked.parse(reportData.content);
                tempContainer.innerHTML = renderedContent;
                
                // Apply syntax highlighting
                tempContainer.querySelectorAll('pre code').forEach((block) => {
                    hljs.highlightElement(block);
                });
                
                // Format date
                let dateText = formatDate(new Date(details.completed_at || details.created_at));
                if (details.duration_seconds) {
                    let durationText = '';
                    const duration = parseInt(details.duration_seconds);
                    
                    if (duration < 60) {
                        durationText = `${duration}s`;
                    } else if (duration < 3600) {
                        durationText = `${Math.floor(duration / 60)}m ${duration % 60}s`;
                    } else {
                        durationText = `${Math.floor(duration / 3600)}h ${Math.floor((duration % 3600) / 60)}m`;
                    }
                    
                    dateText += ` (Duration: ${durationText})`;
                }
                
                // Set up data for PDF generation
                document.getElementById('result-query').textContent = details.query;
                document.getElementById('result-date').textContent = dateText;
                document.getElementById('result-mode').textContent = details.mode === 'quick' ? 'Quick Summary' : 'Detailed Report';
                
                // Replace the current content with our temporary content
                const resultsContent = document.getElementById('results-content');
                const originalContent = resultsContent.innerHTML;
                resultsContent.innerHTML = tempContainer.innerHTML;
                
                // Generate the PDF
                generatePdf();
                
                // Restore original content if we're not on the results page
                setTimeout(() => {
                    if (!document.getElementById('research-results').classList.contains('active')) {
                        resultsContent.innerHTML = originalContent;
                    }
                    document.body.removeChild(tempContainer);
                }, 500);
                
            } else {
                alert('Error loading report. Could not generate PDF.');
            }
        } catch (error) {
            console.error('Error generating PDF:', error);
            alert('An error occurred while generating the PDF. Please try again.');
        }
    }

    // Initialize the terminate button event listener
    const terminateBtn = document.getElementById('terminate-research-btn');
    if (terminateBtn) {
        terminateBtn.addEventListener('click', () => {
            if (confirm('Are you sure you want to terminate this research? This action cannot be undone.')) {
                if (currentResearchId) {
                    terminateResearch(currentResearchId);
                }
            }
        });
    }
    
    // Initialize PDF download button
    const downloadPdfBtn = document.getElementById('download-pdf-btn');
    if (downloadPdfBtn) {
        downloadPdfBtn.addEventListener('click', generatePdf);
    }

    // Function to set up the research form
    function setupResearchForm() {
        const researchForm = document.getElementById('research-form');
        const notificationToggle = document.getElementById('notification-toggle');
        
        // Set notification state from toggle
        if (notificationToggle) {
            notificationsEnabled = notificationToggle.checked;
            
            // Listen for changes to the toggle
            notificationToggle.addEventListener('change', function() {
                notificationsEnabled = this.checked;
                // Store preference in localStorage for persistence
                localStorage.setItem('notificationsEnabled', notificationsEnabled);
            });
            
            // Load saved preference from localStorage
            const savedPref = localStorage.getItem('notificationsEnabled');
            if (savedPref !== null) {
                notificationsEnabled = savedPref === 'true';
                notificationToggle.checked = notificationsEnabled;
            }
        }
        
        // ... existing form setup ...
    }

    // Add event listener for view results button
    const viewResultsBtn = document.getElementById('view-results-btn');
    if (viewResultsBtn) {
        viewResultsBtn.addEventListener('click', () => {
            console.log('View results button clicked');
            if (currentResearchId) {
                loadResearch(currentResearchId);
            } else {
                console.error('No research ID available');
            }
        });
    }
    
    // Add listener for research_completed custom event
    document.addEventListener('research_completed', (event) => {
        console.log('Research completed event received:', event.detail);
        const data = event.detail;
        
        // Mark research as no longer in progress
        isResearchInProgress = false;
        
        // Hide terminate button
        const terminateBtn = document.getElementById('terminate-research-btn');
        if (terminateBtn) {
            terminateBtn.style.display = 'none';
        }
        
        // Update navigation
        updateNavigationBasedOnResearchStatus();
    });

    // Function to reset progress animations and UI elements
    function resetProgressAnimations() {
        // Reset the progress bar animation
        const progressFill = document.getElementById('progress-fill');
        if (progressFill) {
            // Force a reflow to reset the animation
            progressFill.style.display = 'none';
            progressFill.offsetHeight; // Trigger reflow
            progressFill.style.display = 'block';
        }
        
        // Reset any spinning icons
        const spinners = document.querySelectorAll('.fa-spinner.fa-spin');
        spinners.forEach(spinner => {
            const parent = spinner.parentElement;
            if (parent && parent.tagName === 'BUTTON') {
                if (parent.classList.contains('terminate-btn')) {
                    parent.innerHTML = '<i class="fas fa-stop-circle"></i> Terminate Research';
                    parent.disabled = false;
                }
            }
        });
        
        // Ensure the isTerminating flag is reset
        isTerminating = false;
    }

    // Create a dynamic favicon
    function createDynamicFavicon(emoji = '⚡') {
        console.log(`Creating dynamic favicon with emoji: ${emoji}`);
        
        // Create a canvas element
        const canvas = document.createElement('canvas');
        canvas.width = 32;
        canvas.height = 32;
        
        // Get the canvas context
        const ctx = canvas.getContext('2d');
        
        // Clear the canvas with a transparent background
        ctx.clearRect(0, 0, 32, 32);
        
        // Set the font size and font family
        ctx.font = '24px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Draw the emoji in the center of the canvas
        ctx.fillText(emoji, 16, 16);
        
        // Convert canvas to favicon URL
        const faviconUrl = canvas.toDataURL('image/png');
        
        // Find existing favicon or create a new one
        let link = document.querySelector('link[rel="icon"]');
        if (!link) {
            link = document.createElement('link');
            link.rel = 'icon';
            link.id = 'dynamic-favicon';
            document.head.appendChild(link);
        }
        
        // Update the favicon
        link.type = 'image/x-icon';
        link.href = faviconUrl;
        
        return faviconUrl;
    }

    // Function to set favicon based on research mode
    function setFavicon(mode) {
        const emoji = mode === 'detailed' ? '🔬' : '⚡';
        return createDynamicFavicon(emoji);
    }
});