script.js

// WeAD RedFlag - Psychological Safety Monitor
// ✅ MATCHING INDEX.HTML IMPLEMENTATION EXACTLY

// Global variables (matching index.html)
let recognition;
let isRecording = false;
let finalTranscript = '';
let websocket;
let currentSessionId = null;
let redFlagsDetected = false; // NEW: Track if red flags were detected
let forceStop = false; // Force stop flag for manual stop

// ✅ NEW: Mobile Navigation State
let currentMobileSection = 'voice';
let isMobileView = window.innerWidth <= 768;

// Debug logging function (matching index.html)
function debugLog(message, type = 'info') {
    const timestamp = new Date().toLocaleTimeString();
    const logArea = document.getElementById('debugLog');
    if (logArea) {
        logArea.value += `[${timestamp}] ${message}\n`;
        logArea.scrollTop = logArea.scrollHeight;
    }
    console.log(`[${timestamp}] ${message}`);
}

// ✅ NEW: Mobile Navigation Functions
function initializeMobileNavigation() {
    if (!isMobileView) return;
    
    debugLog('📱 Initializing mobile navigation...');
    
    const navTabs = document.querySelectorAll('.nav-tab');
    const sections = document.querySelectorAll('.content-section');
    
    navTabs.forEach(tab => {
        tab.addEventListener('click', () => {
            const targetSection = tab.getAttribute('data-section');
            switchMobileSection(targetSection);
        });
    });
    
    // Add touch/swipe support for mobile
    addSwipeSupport();
    
    debugLog('✅ Mobile navigation initialized');
}

function switchMobileSection(sectionName) {
    if (currentMobileSection === sectionName) return;
    
    debugLog(`🔄 Switching to section: ${sectionName}`);
    
    // Update navigation tabs
    document.querySelectorAll('.nav-tab').forEach(tab => {
        tab.classList.remove('active');
        if (tab.getAttribute('data-section') === sectionName) {
            tab.classList.add('active');
        }
    });
    
    // Update sections
    document.querySelectorAll('.content-section').forEach(section => {
        section.classList.remove('active');
        if (section.getAttribute('data-section') === sectionName) {
            section.classList.add('active');
        }
    });
    
    currentMobileSection = sectionName;
    
    // Smooth scroll to section
    const targetSection = document.getElementById(`${sectionName}-section`);
    if (targetSection) {
        targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
    
    // Update URL hash for bookmarking
    window.location.hash = `#${sectionName}`;
    
    debugLog(`✅ Switched to section: ${sectionName}`);
}

function addSwipeSupport() {
    let startX = 0;
    let startY = 0;
    let endX = 0;
    let endY = 0;
    
    const controlPanel = document.querySelector('.control-panel');
    if (!controlPanel) return;
    
    controlPanel.addEventListener('touchstart', (e) => {
        startX = e.touches[0].clientX;
        startY = e.touches[0].clientY;
    });
    
    controlPanel.addEventListener('touchend', (e) => {
        endX = e.changedTouches[0].clientX;
        endY = e.changedTouches[0].clientY;
        
        const diffX = startX - endX;
        const diffY = startY - endY;
        
        // Only handle horizontal swipes (ignore vertical scrolling)
        if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
            if (diffX > 0) {
                // Swipe left - next section
                navigateToNextSection();
            } else {
                // Swipe right - previous section
                navigateToPreviousSection();
            }
        }
    });
}

function navigateToNextSection() {
    const sections = ['voice', 'analysis', 'guide', 'settings', 'music'];
    const currentIndex = sections.indexOf(currentMobileSection);
    const nextIndex = (currentIndex + 1) % sections.length;
    switchMobileSection(sections[nextIndex]);
}

function navigateToPreviousSection() {
    const sections = ['voice', 'analysis', 'guide', 'settings', 'music'];
    const currentIndex = sections.indexOf(currentMobileSection);
    const prevIndex = currentIndex === 0 ? sections.length - 1 : currentIndex - 1;
    switchMobileSection(sections[prevIndex]);
}

// ✅ NEW: Handle window resize for responsive behavior
function handleWindowResize() {
    const wasMobile = isMobileView;
    isMobileView = window.innerWidth <= 768;
    
    if (wasMobile !== isMobileView) {
        debugLog(`📱 View mode changed: ${isMobileView ? 'Mobile' : 'Desktop'}`);
        
        if (isMobileView) {
            // Switched to mobile - initialize navigation
            initializeMobileNavigation();
            
            // Check URL hash for initial section
            const hash = window.location.hash.replace('#', '');
            if (hash && ['voice', 'analysis', 'guide', 'settings', 'music'].includes(hash)) {
                switchMobileSection(hash);
            }
        } else {
            // Switched to desktop - show all sections
            document.querySelectorAll('.mobile-section').forEach(section => {
                section.classList.add('active');
            });
        }
    }
}

// Update status indicator (matching index.html)
function updateStatus(elementId, status, message) {
    const element = document.getElementById(elementId);
    if (element) {
        const statusText = element.querySelector('.status-text');
        if (statusText) {
            statusText.textContent = message;
        }
        // Update status color based on status
        const statusIcon = element.querySelector('.status-icon');
        if (statusIcon) {
            switch(status) {
                case 'success':
                    statusIcon.textContent = '✅';
                    break;
                case 'error':
                    statusIcon.textContent = '❌';
                    break;
                case 'warning':
                    statusIcon.textContent = '⚠️';
                    break;
                default:
                    statusIcon.textContent = '🔄';
            }
        }
    }
}

// ✅ NEW: Update system status indicator
function updateSystemStatus(state, message) {
    const statusElement = document.getElementById('system-status');
    const statusIcon = document.getElementById('status-icon');
    const statusText = document.getElementById('status-text');
    
    if (statusElement && statusIcon && statusText) {
        // Remove all status classes
        statusElement.classList.remove('status-ready', 'status-listening', 'status-analyzing');
        
        // Add appropriate class and update content
        switch(state) {
            case 'ready':
                statusElement.classList.add('status-ready');
                statusIcon.textContent = '⏸️';
                statusText.textContent = message || 'Ready to start';
                break;
            case 'listening':
                statusElement.classList.add('status-listening');
                statusIcon.textContent = '🎤';
                statusText.textContent = message || 'Listening...';
                break;
            case 'analyzing':
                statusElement.classList.add('status-analyzing');
                statusIcon.textContent = '🧠';
                statusText.textContent = message || 'AI Analyzing...';
                break;
            case 'transcribing':
                statusElement.classList.add('status-listening');
                statusIcon.textContent = '📝';
                statusText.textContent = message || 'Transcribing...';
                break;
            default:
                statusElement.classList.add('status-ready');
                statusIcon.textContent = '⏸️';
                statusText.textContent = message || 'Ready';
        }
    }
}

// Initialize system checks (matching index.html with mobile improvements)
function initializeSystem() {
    debugLog('🚀 Initializing WeAD RedFlag Voice System...');
    
    // ✅ NEW: Set initial system status
    updateSystemStatus('ready', 'Initializing system...');
    
    // Check if we're on mobile
    const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    if (isMobile) {
        debugLog('📱 Mobile device detected - applying mobile optimizations');
    }
    
    // Check HTTPS
    if (location.protocol === 'https:' || location.hostname === 'localhost') {
        updateStatus('connection-status', 'success', 'Secure Connection');
        debugLog('✅ HTTPS check passed', 'success');
    } else {
        updateStatus('connection-status', 'error', 'HTTPS Required');
        debugLog('❌ HTTPS required for Speech Recognition API', 'error');
        return;
    }

    // Check browser support
    if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
        updateStatus('speech-status', 'success', 'Voice Ready');
        debugLog('✅ Browser supports Speech Recognition', 'success');
        setupSpeechRecognition();
    } else {
        updateStatus('speech-status', 'error', 'Not Supported');
        debugLog('❌ Browser does not support Speech Recognition', 'error');
        return;
    }

    // Setup WebSocket for Claude AI
    setupWebSocket();
    
    // Setup UI event listeners
    setupEventListeners();
    
    // Set initial system status
    updateSystemStatus('ready', 'Ready to start listening');
}

// Setup Speech Recognition (matching index.html with mobile improvements)
function setupSpeechRecognition() {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SpeechRecognition) {
        debugLog('❌ Speech Recognition API not supported', 'error');
        updateStatus('speech-status', 'error', 'Not Supported');
        return;
    }
    
    recognition = new SpeechRecognition();
    
    // Check if we're on mobile
    const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    
    // ✅ FIXED: Consistent settings for both mobile and desktop
    recognition.continuous = true; // Enable continuous mode for both mobile and desktop
    recognition.interimResults = true;
    recognition.lang = document.getElementById('language')?.value || 'en-US';
    recognition.maxAlternatives = 3; // Consistent for both mobile and desktop for better accuracy
    
    // Mobile-specific optimizations
    if (isMobile) {
        debugLog('📱 Mobile: Using continuous mode like desktop for better user experience');
        
        // iOS Safari specific settings
        if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
            debugLog('📱 iOS detected - applying iOS-specific settings');
            // iOS can be more sensitive to silence, so we'll handle restarts more gracefully
        }
        
        // Android specific settings
        if (/Android/i.test(navigator.userAgent)) {
            debugLog('📱 Android detected - applying Android-specific settings');
            // Android devices may need different handling for continuous mode
        }
    }

    debugLog('🎙️ Speech Recognition configured');

    recognition.onstart = function() {
        debugLog('🎤 Speech recognition started', 'success');
        isRecording = true;
        forceStop = false; // Reset force stop when starting
        
        const startBtn = document.getElementById('startListening');
        const stopBtn = document.getElementById('stopListening');
        const transcriptStatus = document.getElementById('transcript-status');
        
        if (startBtn) startBtn.disabled = true;
        if (stopBtn) stopBtn.disabled = false;
        if (transcriptStatus) transcriptStatus.textContent = 'Listening...';
        
        updateStatus('speech-status', 'success', 'Listening');
        updateSystemStatus('listening', 'Listening for speech...');
    };

    recognition.onresult = function(event) {
        let interimTranscript = '';
        const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        
        debugLog(`📝 Processing ${event.results.length} results (mobile: ${isMobile})`);
        
        // Show transcribing status when we get results
        updateSystemStatus('transcribing', 'Transcribing speech...');
        
        for (let i = event.resultIndex; i < event.results.length; i++) {
            const result = event.results[i];
            const transcript = result[0].transcript;
            const confidence = result[0].confidence || 0;
            
            debugLog(`📝 Result ${i}: "${transcript}" (confidence: ${confidence}, final: ${result.isFinal})`);
            
            if (result.isFinal) {
                // Use same confidence threshold for both mobile and desktop
                const minConfidence = 0.1; // Very low threshold to capture all speech
                
                if (confidence > minConfidence) {
                    finalTranscript += transcript + ' ';
                    debugLog(`📝 Final: "${transcript}" (confidence: ${confidence})`, 'success');
                    
                    // ✅ FIXED: Only analyze if we have enough text and WebSocket is available
                    if (websocket && websocket.readyState === WebSocket.OPEN && currentSessionId) {
                        const selectedLanguage = document.getElementById('language')?.value || 'en-US';
                        
                        // Show analyzing status
                        updateSystemStatus('analyzing', 'AI analyzing psychological patterns...');

                        // Show MBTI loading indicator
                        showMBTILoading();

                        // 🔒 Include authentication information
                        const currentUser = simpleLogin?.currentUser || null;
                        const token = localStorage.getItem('wead_token');

                        websocket.send(JSON.stringify({
                            type: 'analyze_text',
                            text: transcript,
                            language: selectedLanguage,
                            sessionId: currentSessionId,
                            batteryLevel: navigator.getBattery ? 1.0 : 1.0,
                            connectionType: navigator.connection ? navigator.connection.effectiveType : 'unknown',
                            // 🔒 Include user authentication info
                            authenticated: !!token,
                            userId: currentUser?.id || null,
                            username: currentUser?.username || null
                        }));
                        debugLog(`📤 Sent text to WebSocket for analysis (language: ${selectedLanguage})`);
                    } else {
                        debugLog('⚠️ WebSocket not available for analysis - will analyze when connection is restored');
                    }
                } else {
                    debugLog(`⚠️ Skipping low confidence result: "${transcript}" (confidence: ${confidence})`);
                }
            } else {
                // Show interim results with same threshold for both mobile and desktop
                const minInterimConfidence = 0.1; // Very low threshold to show all interim results
                if (confidence > minInterimConfidence) {
                    interimTranscript += transcript;
                    debugLog(`📝 Interim: "${transcript}" (confidence: ${confidence})`);
                }
            }
        }

        // Update UI with better mobile handling
        const interimElement = document.getElementById('interimText');
        const finalElement = document.getElementById('finalText');
        const placeholderElement = document.querySelector('.placeholder-text');
        
        debugLog(`📱 UI Update - Interim: "${interimTranscript}", Final: "${finalTranscript}"`);
        
        if (interimElement) {
            interimElement.textContent = interimTranscript;
            debugLog(`📱 Updated interim element: ${interimElement.textContent}`);
        }
        
        if (finalElement) {
            finalElement.textContent = finalTranscript;
            debugLog(`📱 Updated final element: ${finalElement.textContent}`);
        }
        
        if (placeholderElement) {
            if (interimTranscript || finalTranscript) {
                placeholderElement.style.display = 'none';
                debugLog('📱 Hidden placeholder text');
            } else {
                placeholderElement.style.display = 'block';
                debugLog('📱 Showed placeholder text');
            }
        }
        
        // Force a UI update for mobile with enhanced visibility
        if (isMobile && (interimTranscript || finalTranscript)) {
            // Trigger a small delay to ensure UI updates
            setTimeout(() => {
                if (interimElement) {
                    interimElement.style.display = 'block';
                    interimElement.style.visibility = 'visible';
                    interimElement.style.opacity = '1';
                    interimElement.style.minHeight = '20px';
                    interimElement.style.marginBottom = '8px';
                    // Force a reflow
                    interimElement.offsetHeight;
                }
                if (finalElement) {
                    finalElement.style.display = 'block';
                    finalElement.style.visibility = 'visible';
                    finalElement.style.opacity = '1';
                    finalElement.style.minHeight = '20px';
                    finalElement.style.marginBottom = '8px';
                    // Force a reflow
                    finalElement.offsetHeight;
                }
                
                // Ensure transcript container is visible
                const transcriptContainer = document.querySelector('.transcript-container');
                if (transcriptContainer) {
                    transcriptContainer.style.display = 'block';
                    transcriptContainer.style.visibility = 'visible';
                    transcriptContainer.style.opacity = '1';
                    transcriptContainer.style.border = '2px solid #00d4aa';
                    transcriptContainer.style.background = 'rgba(0, 0, 0, 0.3)';
                }
                
                // Scroll to transcript on mobile
                if (transcriptContainer) {
                    transcriptContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                }
                
                debugLog('📱 Mobile: Forced UI visibility update');
            }, 100);
        }
    };

    recognition.onerror = function(event) {
        debugLog(`❌ Speech recognition error: ${event.error}`, 'error');
        
        // Provide more helpful error messages for mobile
        let errorMessage = event.error;
        const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        
        if (isMobile) {
            switch(event.error) {
                case 'not-allowed':
                    errorMessage = 'Microphone access denied. Please allow microphone access.';
                    break;
                case 'no-speech':
                    errorMessage = 'No speech detected. Please try speaking louder or check your microphone.';
                    break;
                case 'audio-capture':
                    errorMessage = 'Microphone not available. Please check your device microphone.';
                    break;
                case 'network':
                    errorMessage = 'Network error. Please check your internet connection.';
                    break;
                case 'service-not-allowed':
                    errorMessage = 'Speech recognition service not allowed. Please check your browser settings.';
                    break;
            }
        }
        
        updateStatus('speech-status', 'error', `Error: ${errorMessage}`);
        resetRecording();
    };

    recognition.onend = function() {
        const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        debugLog(`🛑 Speech recognition ended (mobile: ${isMobile}, forceStop: ${forceStop}, isRecording: ${isRecording})`);
        
        // ✅ PRIORITY: If forceStop is true, don't restart regardless of other conditions
        if (forceStop) {
            debugLog('🛑 Force stop detected - not restarting recognition');
            // Don't call resetRecording() here - let the stopRecording function handle it
            return;
        }
        
        // ✅ CONTINUOUS MONITORING: Only restart if in continuous mode and not force stopped
        if (isRecording && !forceStop) {
            debugLog('🔄 Speech recognition ended while in continuous monitoring - restarting');
            updateSystemStatus('listening', 'Restarting listening...');
            // Small delay before restarting to prevent rapid restarts
            setTimeout(() => {
                if (isRecording && !forceStop && recognition) {
                    try {
                        debugLog('🔄 Restarting speech recognition for continuous monitoring');
                        recognition.start();
                    } catch (error) {
                        debugLog(`❌ Failed to restart recognition: ${error.message}`, 'error');
                        resetRecording();
                    }
                }
            }, 100);
        } else {
            debugLog('🛑 Speech recognition ended - recording was already stopped or force stopped');
            // Don't update status here - let stopRecording handle it
        }
    };
}

// ✅ FIXED: Setup WebSocket connection with authentication
function setupWebSocket() {
    try {
        const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
        const wsUrl = `${protocol}//${location.host}`;

        console.log(`🔗 Attempting WebSocket connection to: ${wsUrl}`);

        // 🔒 Include authentication token if available
        const token = localStorage.getItem('wead_token');
        const headers = {};
        if (token) {
            headers.authorization = `Bearer ${token}`;
            debugLog('🔐 WebSocket: Including authentication token');
        } else {
            debugLog('👤 WebSocket: No token available, connecting as guest');
        }

        // WebSocket doesn't support custom headers in browser, so we'll send auth on first message
        websocket = new WebSocket(wsUrl);

        websocket.onopen = function() {
            updateStatus('ai-status', 'success', 'AI Connected');
            debugLog('🔗 WebSocket connected', 'success');
            
            // Wait a moment before creating session to ensure connection is stable
            setTimeout(() => {
                const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
                if (isMobile) {
                    debugLog('📱 Mobile: WebSocket connected successfully');
                }
                
                // Double-check WebSocket is still open before creating session
                if (websocket && websocket.readyState === WebSocket.OPEN) {
                    debugLog('✅ WebSocket confirmed open - creating session');
                    createSession();
                } else {
                    debugLog('❌ WebSocket not ready when attempting to create session');
                }
            }, 1000);
        };

        websocket.onclose = function(event) {
            updateStatus('ai-status', 'error', 'AI Disconnected');
            debugLog(`🔗 WebSocket disconnected (code: ${event.code}, reason: ${event.reason})`, 'error');
            currentSessionId = null;
            
            // Attempt to reconnect after a delay
            setTimeout(() => {
                if (!websocket || websocket.readyState === WebSocket.CLOSED) {
                    debugLog('🔄 Attempting WebSocket reconnection...');
                    setupWebSocket();
                }
            }, 5000);
        };

        websocket.onerror = function(error) {
            debugLog(`🔗 WebSocket error: ${error}`, 'error');
            console.error('WebSocket error details:', error);
            updateStatus('ai-status', 'error', 'Connection Error');
            
            const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            if (isMobile) {
                debugLog('📱 Mobile: WebSocket connection failed - this may be due to network issues');
            }
        };

        // ✅ FIXED: Proper message handling for analysis results (matching index.html)
        websocket.onmessage = function(event) {
            debugLog(`📨 Raw WebSocket message received: ${event.data}`);
            
            try {
                const data = JSON.parse(event.data);
                debugLog(`📨 Parsed WebSocket message: ${data.type}`);
                console.log('Full WebSocket message:', data);
                
                switch(data.type) {
                    case 'session_created':
                        currentSessionId = data.session?.id || data.sessionId;
                        debugLog(`✅ Session created: ${currentSessionId}`);
                        break;
                        
                    case 'analysis_result':
                        debugLog('🧠 Analysis result received');
                        if (data.analysis) {
                            displayAIAnalysis(data.analysis);
                            // ✅ FIXED: Don't automatically reset recording - let displayAIAnalysis handle the logic
                            // The displayAIAnalysis function will decide whether to stop or continue based on risk score
                        } else {
                            debugLog('❌ Analysis result missing analysis data', 'error');
                            updateSystemStatus('ready', 'Analysis failed - Ready to retry');
                        }
                        break;
                        
                    case 'mobile_optimizations':
                        debugLog('📱 Mobile optimizations enabled');
                        break;
                        
                    case 'error':
                        debugLog(`❌ WebSocket error: ${data.message}`, 'error');

                        // Hide MBTI loading indicator on error
                        hideMBTILoading();

                        // ✅ FIXED: Handle Error 2099 specifically
                        if (data.errorCode === '2099' || data.message.includes('Error 2099')) {
                            updateSystemStatus('ready', 'AI Analysis Failed - Please try again');
                            updateStatus('ai-status', 'error', 'AI Analysis Failed');

                            // Show error alert to user
                            const errorMessage = data.message || 'AI Analysis Failed (Error 2099)';
                            alert(`🚨 ${errorMessage}\n\nPlease check your internet connection and try again.`);

                            // Reset recording state
                            resetRecording();
                        } else {
                            debugLog(`❌ WebSocket error: ${data.message}`);
                            console.error('WebSocket error details:', data);
                            updateSystemStatus('ready', `Error: ${data.message || 'Unknown error'} - Ready to retry`);
                        }
                        break;
                        
                    default:
                        debugLog(`📨 Unknown message type: ${data.type}`);
                }
            } catch (error) {
                debugLog(`❌ Error parsing WebSocket message: ${error.message}`, 'error');
                console.error('WebSocket message parsing error:', error);
                updateSystemStatus('ready', 'Message parsing error - Ready to retry');
            }
        };
    } catch (error) {
        debugLog(`🔗 WebSocket setup failed: ${error}`, 'error');
        updateStatus('ai-status', 'warning', 'Offline Mode');
        
        // Fallback: try to create session without WebSocket
        setTimeout(() => {
            if (!currentSessionId) {
                currentSessionId = 'offline-' + Date.now();
                debugLog(`📱 Created offline session: ${currentSessionId}`);
            }
        }, 1000);
    }
}

// ✅ NEW: Create session via WebSocket (matching index.html)
function createSession() {
    debugLog('🔧 Attempting to create session...');

    if (!websocket) {
        debugLog('❌ WebSocket not initialized');
        return;
    }

    if (websocket.readyState !== WebSocket.OPEN) {
        debugLog(`❌ WebSocket not ready (state: ${websocket.readyState})`);
        return;
    }

    try {
        // 🔒 Include user information if authenticated
        const currentUser = simpleLogin?.currentUser || null;
        const token = localStorage.getItem('wead_token');

        const sessionMessage = {
            type: 'create_session',
            isMobile: /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
            batteryLevel: 1.0, // Default
            connectionType: 'unknown',
            // 🔒 Include authentication info
            authenticated: !!token,
            userId: currentUser?.id || null,
            username: currentUser?.username || null
        };

        debugLog(`📤 Sending session creation message: ${JSON.stringify(sessionMessage)}`);
        websocket.send(JSON.stringify(sessionMessage));
        debugLog('✅ Session creation request sent successfully');
    } catch (error) {
        debugLog(`❌ Error sending session creation message: ${error.message}`);
        console.error('Session creation error:', error);
    }
}

// Setup UI event listeners (matching index.html)
function setupEventListeners() {
    // Voice control buttons
    const startBtn = document.getElementById('startListening');
    const stopBtn = document.getElementById('stopListening');
    const clearBtn = document.getElementById('clearTranscript');

    if (startBtn) {
        startBtn.addEventListener('click', startRecording);
        debugLog('✅ Start button event listener added');
    } else {
        debugLog('❌ Start button not found', 'error');
    }
    
    if (stopBtn) {
        stopBtn.addEventListener('click', function() {
            // ✅ FIXED: Use proper context and add null checks
            const button = this;
            if (button) {
                // ✅ IMMEDIATE VISUAL FEEDBACK
                button.style.transform = 'scale(0.95)';
                button.style.opacity = '0.8';
                
                // Call stopRecording
                stopRecording();
                
                // ✅ RESTORE BUTTON APPEARANCE AFTER SHORT DELAY
                setTimeout(() => {
                    if (button) {
                        button.style.transform = '';
                        button.style.opacity = '';
                    }
                }, 150);
            }
        });
        debugLog('✅ Stop button event listener added');
    } else {
        debugLog('❌ Stop button not found', 'error');
    }
    
    if (clearBtn) {
        clearBtn.addEventListener('click', clearTranscript);
        debugLog('✅ Clear button event listener added');
    } else {
        debugLog('❌ Clear button not found', 'error');
    }

    // Tab switching
    const tabBtns = document.querySelectorAll('.tab-btn');
    if (tabBtns.length > 0) {
        tabBtns.forEach(btn => {
            btn.addEventListener('click', () => switchTab(btn.dataset.tab));
        });
        debugLog(`✅ Tab buttons event listeners added (${tabBtns.length} buttons)`);
    } else {
        debugLog('❌ Tab buttons not found', 'error');
    }

    // Settings
    const languageSelect = document.getElementById('language');
    if (languageSelect) {
        languageSelect.addEventListener('change', (e) => {
            if (recognition) {
                recognition.lang = e.target.value;
                debugLog(`🌐 Language changed to: ${e.target.value}`);
            }
        });
        debugLog('✅ Language select event listener added');
    } else {
        debugLog('❌ Language select not found', 'error');
    }

    // Action buttons
    const exportBtn = document.getElementById('export-data');
    const resetBtn = document.getElementById('reset-session');
    const saveBtn = document.getElementById('save-settings');

    if (exportBtn) {
        exportBtn.addEventListener('click', exportData);
        debugLog('✅ Export button event listener added');
    } else {
        debugLog('❌ Export button not found', 'error');
    }
    
    if (resetBtn) {
        resetBtn.addEventListener('click', resetSession);
        debugLog('✅ Reset button event listener added');
    } else {
        debugLog('❌ Reset button not found', 'error');
    }
    
    if (saveBtn) {
        saveBtn.addEventListener('click', saveSettings);
        debugLog('✅ Save settings button event listener added');
    } else {
        debugLog('❌ Save settings button not found', 'error');
    }
    
    debugLog('✅ All event listeners setup completed');
}

// ✅ NEW: Continuous monitoring functions
function toggleContinuousMonitoring() {
    const continuousBtn = document.getElementById('continuousMonitoring');
    const startBtn = document.getElementById('startListening');
    const stopBtn = document.getElementById('stopListening');
    
    if (!forceStop) { // Only toggle if not force stopped
        forceStop = true; // Force stop to break restart loop
        
        // Update continuous button
        continuousBtn.classList.remove('active');
        continuousBtn.querySelector('.btn-text').textContent = 'Continuous Monitoring';
        continuousBtn.querySelector('.btn-icon').textContent = '🔍';
        
        // Re-enable normal recording buttons
        if (startBtn) startBtn.disabled = false;
        if (stopBtn) stopBtn.disabled = true; // Stop should be disabled when not recording
        
        debugLog('🔍 Continuous monitoring mode DEACTIVATED', 'success');
        updateStatus('speech-status', 'success', 'Voice Ready');
        
        // Stop recording
        if (isRecording) {
            stopRecording();
        }
    } else {
        // Start continuous monitoring
        forceStop = false; // Reset force stop
        
        // Update continuous button
        continuousBtn.classList.add('active');
        continuousBtn.querySelector('.btn-text').textContent = 'Stop Monitoring';
        continuousBtn.querySelector('.btn-icon').textContent = '🛑';
        
        // Disable normal recording buttons during continuous monitoring
        if (startBtn) startBtn.disabled = true;
        if (stopBtn) stopBtn.disabled = true;
        
        debugLog('🔍 Continuous monitoring mode ACTIVATED', 'warning');
        updateStatus('speech-status', 'warning', 'Continuous Monitoring Active');
        
        // Start recording for continuous monitoring
        startRecordingForContinuous();
    }
}

// NEW: Separate function for starting recording in continuous mode
function startRecordingForContinuous() {
    const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    
    if (!recognition) {
        debugLog('❌ Speech recognition not available', 'error');
        return;
    }
    
    // Request microphone permission
    navigator.mediaDevices.getUserMedia({ 
        audio: {
            echoCancellation: true,
            noiseSuppression: true,
            autoGainControl: true
        } 
    })
    .then(function(stream) {
        updateStatus('speech-status', 'success', 'Continuous Monitoring Active');
        debugLog('🎤 Microphone permission granted for continuous monitoring', 'success');
        
        stream.getTracks().forEach(track => track.stop());
        
        setTimeout(() => {
            try {
                recognition.start();
                debugLog('🎤 Continuous monitoring recording started');
            } catch (error) {
                debugLog(`❌ Failed to start continuous monitoring: ${error.message}`, 'error');
                updateStatus('speech-status', 'error', 'Failed to start monitoring');
            }
        }, 300);
    })
    .catch(function(error) {
        debugLog(`🎤 Microphone error for continuous monitoring: ${error.message}`, 'error');
        updateStatus('speech-status', 'error', `Mic Error: ${error.message}`);
    });
}

// UPDATED: Start recording function - only for normal mode
function startRecording() {
    if (isRecording) return;
    forceStop = false;
    redFlagsDetected = false;

    const startBtn = document.getElementById('startListening');
    const stopBtn = document.getElementById('stopListening');
    if (startBtn) {
        startBtn.disabled = true;
        startBtn.querySelector('.btn-text').textContent = 'Listening...';
    }
    if (stopBtn) stopBtn.disabled = false;

    const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    
    if (!recognition) {
        debugLog('❌ Speech recognition not available', 'error');
        return;
    }
    
    // Additional check for mobile devices
    if (isMobile) {
        debugLog('📱 Mobile: Checking speech recognition state...');
        if (!recognition.start) {
            debugLog('❌ Mobile: Speech recognition start method not available', 'error');
            updateStatus('speech-status', 'error', 'Speech recognition not properly initialized');
            return;
        }
    }

    if (isMobile) {
        debugLog('📱 Mobile device detected - using mobile-optimized permission flow');
    }

    // Request microphone permission with better error handling
    navigator.mediaDevices.getUserMedia({ 
        audio: {
            echoCancellation: true,
            noiseSuppression: true,
            autoGainControl: true
        } 
    })
        .then(function(stream) {
            updateStatus('speech-status', 'success', 'Microphone Ready');
            debugLog('🎤 Microphone permission granted', 'success');
            
            // Stop the stream (we just needed permission)
            stream.getTracks().forEach(track => track.stop());
            
            // Small delay for mobile devices to ensure permission is fully processed
            setTimeout(() => {
                try {
                    // For mobile, we need to handle the start more carefully
                    if (isMobile) {
                        // Clear any existing recognition state
                        if (recognition && recognition.abort) {
                            recognition.abort();
                        }
                        
                        // Small additional delay for mobile
                        setTimeout(() => {
                            recognition.start();
                            debugLog('🎤 Speech recognition started on mobile');
                        }, 200);
                    } else {
                        recognition.start();
                        debugLog('🎤 Speech recognition started on desktop');
                    }
                } catch (error) {
                    debugLog(`❌ Failed to start recognition: ${error.message}`, 'error');
                    updateStatus('speech-status', 'error', 'Failed to start recognition');
                }
            }, isMobile ? 300 : 100);
        })
        .catch(function(error) {
            let errorMessage = error.message;
            
            // Provide more helpful error messages for mobile
            if (isMobile) {
                switch(error.name) {
                    case 'NotAllowedError':
                        errorMessage = 'Microphone access denied. Please allow microphone access in your browser settings.';
                        break;
                    case 'NotFoundError':
                        errorMessage = 'No microphone found. Please check your device has a microphone.';
                        break;
                    case 'NotReadableError':
                        errorMessage = 'Microphone is in use by another application. Please close other apps using the microphone.';
                        break;
                    case 'SecurityError':
                        errorMessage = 'Microphone access blocked for security reasons. Please check your browser settings.';
                        break;
                }
            }
            
            updateStatus('speech-status', 'error', `Mic Error: ${errorMessage}`);
            debugLog(`🎤 Microphone error: ${errorMessage}`, 'error');
        });
}

// UPDATED: Stop recording function - works for both modes
function stopRecording() {
    debugLog('🛑 Stop Listening button pressed');
    
    // ✅ IMMEDIATE UI UPDATE: Show analyzing status right away
    updateSystemStatus('analyzing', 'Stopping and analyzing...');
    
    // ✅ IMMEDIATE BUTTON STATE: Disable stop button immediately
    const stopBtn = document.getElementById('stopListening');
    if (stopBtn) stopBtn.disabled = true;
    
    // ✅ SET FLAGS IMMEDIATELY: Prevent race conditions
    forceStop = true;
    isRecording = false;
    
    // ✅ STOP RECOGNITION IMMEDIATELY
    if (recognition) {
        try {
            recognition.stop();
            debugLog('🛑 Speech recognition stop() called');
        } catch (error) {
            debugLog(`❌ Error stopping recognition: ${error.message}`, 'error');
        }
    }
    
    // ✅ IMMEDIATE TRANSCRIPT STATUS UPDATE
    document.getElementById('transcript-status').textContent = 'Analyzing...';
    
    // ✅ ANALYZE FINAL TRANSCRIPT
    if (finalTranscript && finalTranscript.trim().length > 0) {
        debugLog('🛑 Stopping recording - analyzing final transcript');
        updateSystemStatus('analyzing', 'AI analyzing final transcript...');
        
        // Send final transcript for analysis
        if (websocket && websocket.readyState === WebSocket.OPEN && currentSessionId) {
            const selectedLanguage = document.getElementById('language')?.value || 'en-US';

            // Show MBTI loading indicator
            showMBTILoading();

            websocket.send(JSON.stringify({
                type: 'analyze_text',
                text: finalTranscript.trim(),
                language: selectedLanguage,
                sessionId: currentSessionId,
                batteryLevel: navigator.getBattery ? 1.0 : 1.0,
                connectionType: navigator.connection ? navigator.connection.effectiveType : 'unknown'
            }));
            debugLog(`📤 Sent final transcript for analysis: "${finalTranscript.trim()}"`);
            
            // ✅ FIXED: Don't reset immediately - let analysis complete first
            // The reset will happen when analysis result is received
        } else {
            debugLog('❌ Cannot analyze final transcript - WebSocket not available');
            updateSystemStatus('ready', 'Analysis failed - Ready to retry');
            resetRecording(); // Only reset if analysis failed
        }
    } else {
        debugLog('🛑 Stopping recording - no transcript to analyze');
        updateSystemStatus('ready', 'No speech detected - Ready to start');
        resetRecording(); // Only reset if no transcript
    }
}

// UPDATED: Reset recording state
function resetRecording() {
    const startBtn = document.getElementById('startListening');
    const stopBtn = document.getElementById('stopListening');
    if (startBtn) {
        startBtn.disabled = false;
        // ✅ FIXED: Check if we should show "Continue Listening" or "Start Listening"
        if (redFlagsDetected) {
            startBtn.querySelector('.btn-text').textContent = 'Continue Listening';
        } else {
            startBtn.querySelector('.btn-text').textContent = 'Start Listening';
        }
    }
    if (stopBtn) stopBtn.disabled = true;
    
    const transcriptStatus = document.getElementById('transcript-status');
    if (transcriptStatus) transcriptStatus.textContent = 'Ready';
    
    updateStatus('speech-status', 'success', 'Voice Ready');
    updateSystemStatus('ready', 'Ready to start listening');
}

// Refresh page (matching index.html)
function clearTranscript() {
    debugLog('🔄 Refreshing page...');
    
    // Stop any ongoing recording
    if (isRecording) {
        stopRecording();
    }
    
    // Close WebSocket connection if open
    if (websocket && websocket.readyState === WebSocket.OPEN) {
        websocket.close();
    }
    
    // Refresh the page
    window.location.reload();
}

// Switch tabs (matching index.html)
function switchTab(tabName) {
    // Remove active class from all tabs and panels
    document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
    document.querySelectorAll('.tab-panel').forEach(panel => panel.classList.remove('active'));
    
    // Add active class to selected tab and panel
    const selectedBtn = document.querySelector(`[data-tab="${tabName}"]`);
    const selectedPanel = document.getElementById(`${tabName}-tab`);
    
    if (selectedBtn) selectedBtn.classList.add('active');
    if (selectedPanel) selectedPanel.classList.add('active');
    
    debugLog(`📋 Switched to ${tabName} tab`);
}

// ✅ FIXED: Display AI analysis with proper data mapping (matching index.html)
function displayAIAnalysis(analysis) {
    debugLog('🎨 Displaying AI analysis results');

    // ✅ FIXED: Only hide MBTI loading indicator for final results or errors
    // Keep it visible during progressive analysis intermediate results
    const isProgressive = analysis.analysisMethod === 'progressive';
    const isFinalProgressiveResult = isProgressive && analysis.chunksAnalyzed && analysis.chunksAnalyzed > 1;
    const hasMBTIError = analysis.mbti && (analysis.mbti.type === 'ERROR' || analysis.mbti.type === 'INSUFFICIENT_DATA');
    const hasValidMBTI = analysis.mbti && analysis.mbti.type && !analysis.mbti.type.includes('X') && !analysis.mbti.type.includes('?');

    debugLog(`🔍 MBTI Loading Logic - Progressive: ${isProgressive}, Final: ${isFinalProgressiveResult}, MBTI Type: ${analysis.mbti?.type}, Error: ${hasMBTIError}, Valid: ${hasValidMBTI}`);

    // Hide loading indicator only for:
    // 1. Non-progressive analysis (regular single analysis)
    // 2. Final progressive result (chunksAnalyzed > 1)
    // 3. Errors or insufficient data
    // 4. Valid MBTI results (successful analysis)
    if (!isProgressive || isFinalProgressiveResult || hasMBTIError || hasValidMBTI) {
        debugLog('✅ Hiding MBTI loading indicator (final/complete result or error)');
        hideMBTILoading();
    } else {
        debugLog('⏳ Keeping MBTI loading indicator visible (progressive analysis in progress)');
    }

    // ✅ FIXED: Add null check for analysis parameter
    if (!analysis) {
        debugLog('❌ Analysis data is null or undefined', 'error');
        updateSystemStatus('ready', 'Analysis failed - no data received');
        return;
    }
    
    // ✅ FIXED: Convert riskLevel to safetyScore (riskLevel: high=dangerous, safetyScore: high=safe)
    const riskLevel = analysis.riskLevel || 15; // Default to low risk if not provided
    const safetyScore = 100 - riskLevel; // Convert: high risk = low safety score
    const emotionalState = analysis.depressionDetected ? 
        `${analysis.depressionType || 'Detected'} (${analysis.depressionSeverity || 'Unknown'})` :
        (analysis.behaviorType === 'normal' ? 'Stable' : 'Concerning');
    const stressLevel = analysis.suicidalRisk === 'high' || analysis.suicidalRisk === 'critical' ? 'Critical' :
                       analysis.suicidalRisk === 'moderate' ? 'High' :
                       analysis.depressionDetected ? 'Elevated' : 'Normal';
    const communicationQuality = analysis.behaviorType === 'normal' ? 'Clear' :
                               analysis.behaviorType === 'narcissistic' ? 'Grandiose' :
                               analysis.behaviorType === 'psychopathic' ? 'Manipulative' :
                               analysis.behaviorType === 'sociopathic' ? 'Erratic' : 'Unclear';

    // Update safety score display with null checks
    const safetyScoreElement = document.getElementById('safety-score');
    const emotionalStateElement = document.getElementById('emotional-state');
    const stressLevelElement = document.getElementById('stress-level');
    const communicationQualityElement = document.getElementById('communication-quality');

    if (safetyScoreElement) {
        safetyScoreElement.textContent = riskLevel;
        debugLog(`✅ Updated safety score: ${safetyScore}`);
    } else {
        debugLog('❌ Safety score element not found', 'error');
    }
    
    // ✅ NEW: Update MBTI display
    if (analysis.mbti) {
        updateMBTIDisplay(analysis.mbti);
    }
    
    if (emotionalStateElement) {
        emotionalStateElement.textContent = emotionalState;
        debugLog(`✅ Updated emotional state: ${emotionalState}`);
    } else {
        debugLog('❌ Emotional state element not found', 'error');
    }
    
    if (stressLevelElement) {
        stressLevelElement.textContent = stressLevel;
        debugLog(`✅ Updated stress level: ${stressLevel}`);
    } else {
        debugLog('❌ Stress level element not found', 'error');
    }
    
    if (communicationQualityElement) {
        communicationQualityElement.textContent = communicationQuality;
        debugLog(`✅ Updated communication quality: ${communicationQuality}`);
    } else {
        debugLog('❌ Communication quality element not found', 'error');
    }

    // Update score circle color based on risk level (HIGHER risk = MORE DANGEROUS = RED)
    const scoreCircle = document.getElementById('safety-score-circle');
    if (scoreCircle) {
        if (riskLevel >= 75) {
            // High risk (critical) - RED
            scoreCircle.style.background = 'conic-gradient(#ff4444 0deg, #cc3333 180deg, #ff4444 360deg)';
        } else if (riskLevel >= 50) {
            // Medium-High risk - ORANGE
            scoreCircle.style.background = 'conic-gradient(#ffeb3b 0deg, #ff9800 180deg, #ffeb3b 360deg)';
        } else if (riskLevel >= 25) {
            // Low-Medium risk - YELLOW  
            scoreCircle.style.background = 'conic-gradient(#ffeb3b 0deg, #ffeb3b 360deg)';
        } else {
            // Low risk (safe) - GREEN
            scoreCircle.style.background = 'conic-gradient(#00d4aa 0deg, #00d4aa 360deg)';
        }
        debugLog(`✅ Updated score circle color for risk level: ${riskLevel}%`);
    } else {
        debugLog('❌ Score circle element not found', 'error');
    }

    // ✅ FIXED: Check if risk level is high enough to stop recording (≥ 75%)
    if (riskLevel >= 75) {
        debugLog(`🚨 HIGH RISK DETECTED (Risk Level: ${riskLevel}%) - Stopping recording and showing analysis`, 'error');
        
        // Stop recording immediately
        forceStop = true;
        isRecording = false;
        
        // Stop speech recognition
        if (recognition) {
            try {
                recognition.stop();
                debugLog('🛑 Speech recognition stopped due to high risk');
            } catch (error) {
                debugLog(`❌ Error stopping recognition: ${error.message}`, 'error');
            }
        }
        
        // Update button to "Continue Listening"
        const startBtn = document.getElementById('startListening');
        if (startBtn) {
            startBtn.disabled = false;
            startBtn.querySelector('.btn-text').textContent = 'Continue Listening';
            debugLog('✅ Changed button to "Continue Listening"');
        }
        
        // Update status
        updateStatus('speech-status', 'error', 'High Risk Detected - Recording Stopped');
        updateSystemStatus('ready', 'High risk detected - Analysis complete');
        
        // Show alert for high risk
        const alertMessage = `🚨 HIGH RISK DETECTED!\n\nRisk Score: ${safetyScore}%\n\nAnalysis has been completed and recording stopped for safety.`;
        alert(alertMessage);
        
        // Switch to detailed analysis tab to show results
        switchTab('detailed');
        
    } else {
        debugLog(`✅ Risk level ${riskLevel}% is below critical threshold (75%) - Continuing to listen`);
        
        // Continue listening - don't stop recording
        updateSystemStatus('listening', 'Analysis complete - Continuing to listen...');
        
        // Update status to show analysis was done but continuing
        updateStatus('speech-status', 'success', 'Listening (Analysis Complete)');
        
        // Don't change the button text - keep it as "Stop Listening"
        const startBtn = document.getElementById('startListening');
        if (startBtn) {
            startBtn.disabled = true; // Keep disabled while listening
        }
    }

    // ✅ FIXED: Update analysis panels with proper content and null checks (matching index.html)
    const overviewPanel = document.getElementById('analysis-overview');
    const detailedPanel = document.getElementById('detailed-analysis');
    const recommendationsPanel = document.getElementById('recommendations');

    if (overviewPanel) {
        overviewPanel.innerHTML = `
            <h4>🔮 Quantum Analysis Overview</h4>
            <p><strong>Overall Assessment:</strong> ${analysis.explanation || analysis.overview || 'Analysis completed successfully'}</p>
            <p><strong>Behavior Type:</strong> ${analysis.behaviorType || 'Normal'} (${analysis.confidence || 85}% confidence)</p>
            <p><strong>Red Flag Status:</strong> ${analysis.isRedFlag ? '🚨 DETECTED' : '✅ CLEAR'}</p>
            ${analysis.depressionDetected ? `<p><strong>Depression Alert:</strong> 🔴 ${analysis.depressionType || 'Detected'} - ${analysis.depressionSeverity || 'Unknown'} severity</p>` : ''}
            ${analysis.suicidalRisk === 'high' || analysis.suicidalRisk === 'critical' ? '<p><strong>⚠️ CRISIS ALERT:</strong> High suicidal risk detected - immediate intervention recommended</p>' : ''}
        `;
        debugLog('✅ Updated overview panel');
    } else {
        debugLog('❌ Overview panel element not found', 'error');
    }

    if (detailedPanel) {
        const redFlags = analysis.redFlags || [];
        const primaryConcerns = analysis.primaryConcerns || [];
        
        detailedPanel.innerHTML = `
            <h4>🧠 Detailed Psychological Profile</h4>
            <p><strong>Risk Level:</strong> ${riskLevel}%</p>
            <p><strong>Primary Concerns:</strong> ${primaryConcerns.join(', ') || 'None identified'}</p>
            <p><strong>Red Flags Detected:</strong> ${redFlags.length} total</p>
            ${redFlags.map(flag => `<p class="red-flag-item">• <strong>${flag.flag || 'Unknown'}</strong> (${flag.severity || 'Unknown'}): ${flag.description || 'No description'}</p>`).join('')}
            ${analysis.depressionDetected ? `
                <hr style="margin: 1rem 0; border: 1px solid rgba(255,255,255,0.2);">
                <h5>🏥 Depression Analysis</h5>
                <p><strong>Type:</strong> ${analysis.depressionType || 'Unspecified'}</p>
                <p><strong>Severity:</strong> ${analysis.depressionSeverity || 'Unknown'}</p>
                <p><strong>Symptoms:</strong> ${(analysis.depressionSymptoms || []).join(', ') || 'Not specified'}</p>
                <p><strong>Suicidal Risk:</strong> ${analysis.suicidalRisk || 'Low'}</p>
            ` : ''}
        `;
        debugLog('✅ Updated detailed panel');
    } else {
        debugLog('❌ Detailed panel element not found', 'error');
    }

    if (recommendationsPanel) {
        recommendationsPanel.innerHTML = `
            <h4>💡 AI Recommendations</h4>
            <div class="recommendations-content">
                <h5>🛡️ Safety Recommendations:</h5>
                    <p>${analysis.recommendations || analysis.safetyRecommendations || 'Continue normal interactions with general awareness.'}</p>
                    
                    ${analysis.depressionDetected || analysis.suicidalRisk === 'high' || analysis.suicidalRisk === 'critical' ? `
                        <h5>🏥 Mental Health Guidance:</h5>
                        <p>${analysis.mentalHealthRecommendations || 'Professional consultation recommended.'}</p>
                        
                        ${analysis.suicidalRisk === 'high' || analysis.suicidalRisk === 'critical' ? `
                            <div style="background: rgba(255,68,68,0.2); padding: 1rem; border-radius: 8px; border-left: 4px solid #ff4444; margin: 1rem 0;">
                                <h5 style="color: #ff4444;">⚠️ CRISIS INTERVENTION NEEDED</h5>
                                <p><strong>Immediate Actions:</strong></p>
                                <ul>
                                    <li>Contact National Suicide Prevention Lifeline: <strong>988</strong></li>
                                    <li>Text HOME to <strong>741741</strong> for Crisis Text Line</li>
                                    <li>Call Emergency Services: <strong>911</strong></li>
                                    <li>Do not leave the person alone</li>
                                </ul>
                            </div>
                        ` : ''}
                    ` : ''}
                    
                    <h5>📋 Next Steps:</h5>
                    <ul>
                        <li>Continue monitoring conversation patterns</li>
                        <li>Document any escalating behaviors</li>
                        <li>${analysis.isRedFlag ? 'Maintain safe boundaries and consider professional guidance' : 'Regular check-ins recommended'}</li>
                        ${analysis.depressionDetected ? '<li>Schedule professional mental health evaluation</li>' : ''}
                    </ul>
            </div>
        `;
        debugLog('✅ Updated recommendations panel');
    } else {
        debugLog('❌ Recommendations panel element not found', 'error');
    }

    debugLog('✅ Analysis display updated successfully');
}

// Clear analysis (matching index.html)
function clearAnalysis() {
    document.getElementById('safety-score').textContent = '--';
    document.getElementById('emotional-state').textContent = 'Analyzing...';
    document.getElementById('stress-level').textContent = 'Analyzing...';
    document.getElementById('communication-quality').textContent = 'Analyzing...';
    
    document.getElementById('analysis-overview').innerHTML = '<p class="placeholder-text">Analysis results will appear here after voice input...</p>';
    document.getElementById('detailed-analysis').innerHTML = '<p class="placeholder-text">Detailed psychological analysis will appear here...</p>';
    document.getElementById('recommendations').innerHTML = '<p class="placeholder-text">AI recommendations will appear here...</p>';

    // Reset score circle
    const scoreCircle = document.getElementById('safety-score-circle');
    if (scoreCircle) {
        scoreCircle.style.background = 'conic-gradient(#00d4aa 0deg, #ff4444 180deg, #00d4aa 360deg)';
    }
}

// Export data (matching index.html)
function exportData() {
    const data = {
        transcript: finalTranscript,
        timestamp: new Date().toISOString(),
        sessionId: currentSessionId,
        settings: {
            language: document.getElementById('language')?.value,
            sensitivity: document.getElementById('sensitivity')?.value,
            autoAnalyze: document.getElementById('auto-analyze')?.checked
        }
    };
    
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `redflag-session-${new Date().getTime()}.json`;
    a.click();
    URL.revokeObjectURL(url);
    
    debugLog('📊 Data exported successfully', 'success');
}

// Reset session (matching index.html)
function resetSession() {
    if (confirm('Are you sure you want to reset the entire session? This will clear all data.')) {
        clearTranscript();
        clearAnalysis();
        
        // End current session and create new one
        if (websocket && websocket.readyState === WebSocket.OPEN && currentSessionId) {
            websocket.send(JSON.stringify({
                type: 'end_session',
                sessionId: currentSessionId
            }));
            createSession();
        }
        
        debugLog('🔄 Session reset completed', 'success');
    }
}

// Save settings (matching index.html)
function saveSettings() {
    const settings = {
        language: document.getElementById('language')?.value,
        sensitivity: document.getElementById('sensitivity')?.value,
        autoAnalyze: document.getElementById('auto-analyze')?.checked,
        voiceFeedback: document.getElementById('voice-feedback')?.checked
    };
    
    localStorage.setItem('redflag-settings', JSON.stringify(settings));
    debugLog('💾 Settings saved successfully', 'success');
    
    // Show confirmation
    const saveBtn = document.getElementById('save-settings');
    const originalText = saveBtn.querySelector('.btn-text').textContent;
    saveBtn.querySelector('.btn-text').textContent = 'Saved!';
    setTimeout(() => {
        saveBtn.querySelector('.btn-text').textContent = originalText;
    }, 2000);
}

// Load settings (matching index.html)
function loadSettings() {
    const savedSettings = localStorage.getItem('redflag-settings');
    if (savedSettings) {
        const settings = JSON.parse(savedSettings);
        
        if (settings.language) document.getElementById('language').value = settings.language;
        if (settings.sensitivity) document.getElementById('sensitivity').value = settings.sensitivity;
        if (typeof settings.autoAnalyze === 'boolean') document.getElementById('auto-analyze').checked = settings.autoAnalyze;
        if (typeof settings.voiceFeedback === 'boolean') document.getElementById('voice-feedback').checked = settings.voiceFeedback;
        
        debugLog('⚙️ Settings loaded from storage', 'success');
    }
}

// Initialize app when DOM is loaded (matching index.html)
document.addEventListener('DOMContentLoaded', function() {
    console.log('🚀 WeAD RedFlag initializing...');
    
    // Check mobile status
    const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    if (isMobile) {
        console.log('📱 Mobile device detected');
        debugLog('📱 Mobile device detected - applying mobile optimizations');
    }
    
    // ✅ FIXED: Ensure all required elements exist before proceeding
    const requiredElements = [
        'startListening',
        'stopListening', 
        'clearTranscript',
        'transcript-status',
        'interimText',
        'finalText',
        'safety-score',
        'emotional-state',
        'stress-level',
        'communication-quality',
        'analysis-overview',
        'detailed-analysis',
        'recommendations'
    ];
    
    const missingElements = requiredElements.filter(id => !document.getElementById(id));
    if (missingElements.length > 0) {
        console.error('❌ Missing required elements:', missingElements);
        debugLog(`❌ Missing required elements: ${missingElements.join(', ')}`, 'error');
    } else {
        console.log('✅ All required elements found');
        debugLog('✅ All required elements found');
    }
    
    // Load saved settings
    loadSettings();
    
    // ✅ Initialize music player
    if (typeof musicPlayer !== 'undefined') {
        musicPlayer.init();
        debugLog('🎵 Music player initialized');
    }
    
    // ✅ Initialize admin upload system
    if (typeof adminMusicUpload !== 'undefined') {
        adminMusicUpload.init();
        debugLog('🔐 Admin upload system initialized');
    }
    
    // ✅ Initialize simple login system
    if (typeof simpleLogin !== 'undefined') {
        simpleLogin.init();
        debugLog('🔐 Simple login system initialized');
    }
    
    // ✅ Initialize voice calibration system
    if (typeof voiceCalibration !== 'undefined') {
        voiceCalibration.init();
        debugLog('🎤 Voice calibration system initialized');
    }
    
    // ✅ FIXED: Hide loading screen after initialization with proper timing
    setTimeout(() => {
        const loadingScreen = document.getElementById('loading-screen');
        const mainApp = document.getElementById('main-app');
        
        if (loadingScreen && mainApp) {
            loadingScreen.style.display = 'none';
            mainApp.classList.add('loaded');
            console.log('✅ App loaded successfully');
            
            // Initialize system after UI is ready
            initializeSystem();
        } else {
            console.error('❌ Loading screen or main app elements not found');
            debugLog('❌ Loading screen or main app elements not found', 'error');
            // Still try to initialize even if loading screen is missing
            initializeSystem();
        }
    }, 2000);
    
    // Debug toggle functionality
    const debugToggle = document.getElementById('toggle-debug');
    const debugSection = document.getElementById('debug-section');
    
    if (debugToggle && debugSection) {
        debugToggle.addEventListener('click', () => {
            const isVisible = debugSection.style.display !== 'none';
            debugSection.style.display = isVisible ? 'none' : 'block';
            debugToggle.textContent = isVisible ? 'Show Debug' : 'Hide Debug';
        });
        debugLog('✅ Debug toggle functionality added');
    } else {
        debugLog('⚠️ Debug elements not found - debug functionality disabled');
    }
    
    // Mobile-specific debug info
    if (isMobile) {
        
        // Log mobile-specific information
        debugLog(`📱 User Agent: ${navigator.userAgent}`);
        debugLog(`📱 Platform: ${navigator.platform}`);
        debugLog(`📱 Connection: ${navigator.connection ? navigator.connection.effectiveType : 'unknown'}`);
        debugLog(`📱 Speech Recognition Support: ${'webkitSpeechRecognition' in window || 'SpeechRecognition' in window}`);
        
        // Ensure transcript elements are properly initialized for mobile
        const interimElement = document.getElementById('interimText');
        const finalElement = document.getElementById('finalText');
        const placeholderElement = document.querySelector('.placeholder-text');
        const transcriptContainer = document.querySelector('.transcript-container');
        
        if (interimElement) {
            debugLog(`📱 Interim element found: ${interimElement.id}`);
            interimElement.style.display = 'block';
            interimElement.style.visibility = 'visible';
            interimElement.style.opacity = '1';
        } else {
            debugLog('❌ Interim element not found!');
        }
        
        if (finalElement) {
            debugLog(`📱 Final element found: ${finalElement.id}`);
            finalElement.style.display = 'block';
            finalElement.style.visibility = 'visible';
            finalElement.style.opacity = '1';
        } else {
            debugLog('❌ Final element not found!');
        }
        
        if (placeholderElement) {
            debugLog('📱 Placeholder element found');
            placeholderElement.style.display = 'block';
        } else {
            debugLog('❌ Placeholder element not found!');
        }
        
        if (transcriptContainer) {
            debugLog('📱 Transcript container found');
            transcriptContainer.style.display = 'block';
            transcriptContainer.style.visibility = 'visible';
        } else {
            debugLog('❌ Transcript container not found!');
        }
        
            // Force mobile viewport and scroll fixes
    document.body.style.overflow = 'auto';
    document.body.style.webkitOverflowScrolling = 'touch';
    document.documentElement.style.overflow = 'auto';
    
    // ✅ NEW: Initialize mobile navigation
    initializeMobileNavigation();
    
    // ✅ NEW: Test ALL buttons on the page
    setTimeout(() => {
        debugLog('🔍 TESTING ALL BUTTONS ON THE PAGE...');
        
        // Find all buttons
        const allButtons = document.querySelectorAll('button');
        debugLog(`🔍 Found ${allButtons.length} buttons total:`);
        
        allButtons.forEach((btn, index) => {
            const id = btn.id || 'no-id';
            const text = btn.textContent.trim() || 'no-text';
            const classes = btn.className || 'no-classes';
            debugLog(`  Button ${index + 1}: id="${id}" text="${text}" classes="${classes}"`);
        });
        
        // Test login-related buttons specifically
        const loginBtn = document.getElementById('login-btn');
        const registerBtn = document.getElementById('register-btn');
        const logoutBtn = document.getElementById('logout-btn');
        
        debugLog('🔍 LOGIN BUTTONS CHECK:');
        debugLog('  login-btn:', loginBtn);
        debugLog('  register-btn:', registerBtn);
        debugLog('  logout-btn:', logoutBtn);
        
        // Add click listeners to ALL buttons for testing
        allButtons.forEach((btn, index) => {
            btn.addEventListener('click', (e) => {
                e.preventDefault();
                const id = btn.id || 'no-id';
                const text = btn.textContent.trim() || 'no-text';
                debugLog(`🎯 BUTTON CLICKED: id="${id}" text="${text}"`);
            });
        });
        
        debugLog('✅ All buttons now have click listeners for testing');
    }, 500);
    
    // ✅ NEW: Initialize voice calibration system  
    setTimeout(() => {
        if (typeof voiceCalibration !== 'undefined') {
            voiceCalibration.init();
            debugLog('🎤 Voice calibration system initialized');
        } else {
            debugLog('❌ Voice calibration system not found');
        }
    }, 150);
    
    // ✅ NEW: Add window resize listener for responsive behavior
    window.addEventListener('resize', handleWindowResize);
}

// ✅ NEW: Initialize mobile navigation for desktop users who resize to mobile
if (!isMobile) {
    window.addEventListener('resize', handleWindowResize);
}

debugLog('✅ DOM content loaded and initialization completed');
});

// Handle page visibility changes (matching index.html)
document.addEventListener('visibilitychange', function() {
    if (document.hidden && isRecording) {
        debugLog('⚠️ Page hidden while recording, stopping...', 'warning');
        stopRecording();
    }
});

// Handle beforeunload (matching index.html)
window.addEventListener('beforeunload', function(e) {
    if (isRecording) {
        e.preventDefault();
        e.returnValue = 'Recording is in progress. Are you sure you want to leave?';
    }
});

function checkForConcerningPatterns(analysis) {
    const concerningPatterns = [];
    
    // Check for psychological disorders
    if (analysis.behaviorType === 'narcissistic') {
        concerningPatterns.push('Narcissistic Behavior');
    }
    if (analysis.behaviorType === 'psychopathic') {
        concerningPatterns.push('Psychopathic Behavior');
    }
    if (analysis.behaviorType === 'sociopathic') {
        concerningPatterns.push('Sociopathic Behavior');
    }
    
    // Check for depression types
    if (analysis.depressionDetected) {
        const depressionType = analysis.depressionType || 'Depression';
        const severity = analysis.depressionSeverity || 'Unknown';
        concerningPatterns.push(`${depressionType} (${severity})`);
    }
    
    // Check for manipulation indicators
    if (analysis.redFlags && analysis.redFlags.length > 0) {
        const manipulationFlags = analysis.redFlags.filter(flag => 
            flag.flag && (
                flag.flag.toLowerCase().includes('manipulation') ||
                flag.flag.toLowerCase().includes('gaslighting') ||
                flag.flag.toLowerCase().includes('control') ||
                flag.flag.toLowerCase().includes('deception')
            )
        );
        if (manipulationFlags.length > 0) {
            concerningPatterns.push('Manipulation Detected');
        }
    }
    
    // Check for high risk levels
    if (analysis.riskLevel && analysis.riskLevel > 70) {
        concerningPatterns.push('High Risk Level');
    }
    
    // Check for suicidal risk
    if (analysis.suicidalRisk === 'high' || analysis.suicidalRisk === 'critical') {
        concerningPatterns.push('Critical Suicidal Risk');
    }
    return concerningPatterns;
}

function stopContinuousMonitoring(patterns) {
    forceStop = true;
    redFlagsDetected = true;
    debugLog(`🚨 STOPPING CONTINUOUS MONITORING - Patterns detected: ${patterns.join(', ')}`, 'error');
    
    // Stop recording
    if (isRecording) {
        stopRecording();
    }
    
    // Update UI
    const continuousBtn = document.getElementById('continuousMonitoring');
    if (continuousBtn) {
        continuousBtn.classList.remove('active');
        continuousBtn.querySelector('.btn-text').textContent = 'Continuous Monitoring';
        continuousBtn.querySelector('.btn-icon').textContent = '🔍';
    }
    
    // Show alert
    const alertMessage = `🚨 CONCERNING PATTERNS DETECTED!\n\nDetected patterns:\n${patterns.map(p => `• ${p}`).join('\n')}\n\nRecording stopped automatically for safety.`;
    alert(alertMessage);
    
    // Update status
    updateStatus('speech-status', 'error', 'Monitoring Stopped - Patterns Detected');
    
    // Update start button to 'Listen More'
    const startBtn = document.getElementById('startListening');
    if (startBtn) {
        startBtn.disabled = false;
        startBtn.querySelector('.btn-text').textContent = 'Listen More';
    }
    
    // Switch to detailed analysis tab to show results
    switchTab('detailed');
    
    debugLog('🔍 Continuous monitoring stopped due to concerning patterns', 'error');
}

// ✅ NEW: Music Player Functionality
const musicPlayer = {
    audio: null,
    currentTrack: 0,
    isPlaying: false,
    playlist: [
        '1_ホワイトブリッジ_White_Bridge_AI_English_Japan_Mix.mp3',
        'Bunny Zombie By WeAD.mp3',
        'Chilin on the couch By WeAD.mp3',
        'Come on luv time to wake up by WeAD.mp3',
        'Dear_World_Bank,_I_wrote_to_you_but_you_aint_replying_By_WeAD.mp3',
        'Eldorado Gold x WeAD.mp3',
        'Gonana From Nigeria By WeAD.mp3',
        'Gonana Yo Papa.mp3',
        'Jay Koh Web 3 Pioneer.mp3',
        'Just until the dawn breaks By WeAD.mp3',
        'Leveling UP 1 ( For Game Marketing Free to Use ) By WeAD.mp3',
        'Lukso Lukso Good By WeAD Club Mix.mp3',
        'New beginning Korean Rap By WeAD.mp3',
        'Quick Quick Double Time Rap By WeAD.mp3',
        'Real World Asset Coin Crib Friday Club Mix By WeAD.mp3',
        'Said I d comeback for you. Sunday Night Relax by WeAD.mp3',
        'Seal it for me By WeAD.mp3',
        'Start the revolution By WeAd.mp3',
        'Tears of Joy in the shadow.mp3',
        'Tears of Joy in the Shadows By WeAD.mp3',
        'The Lost King of Gobekli Tepe WeAD RPG.mp3',
        'This feeling Piano Loffy By WeAD.mp3',
        'Tough .FT  Taejin Park(Korean Hip Hop By WeAD).mp3',
        'Trapped inside these four walls next to a lemon tree By WeAD.mp3',
        'We Ad Your Ad My Ad Our Ad.mp3',
        'We are WeAD Games.mp3',
        'WeAd_Your_Ad_My_Ad_Our_Ad_Trend_Maker_Song_WeAD_Deep_House_2.mp3',
        'Web 3 Builders of India Friday Night Club Mix By WeAD.mp3',
        'Woke up happy this morning By WeAD.mp3',
        'Xenon s Crypto Gang 2 By WeAD.mp3',
        'Xenon\'s Crypto Gang By WeAD.mp3'
    ],

    async init() {
        this.audio = document.getElementById('audioPlayer');
        this.setupEventListeners();
        this.updateTrackInfo();
        await this.loadPlaylistFromServer();
        this.generatePlaylist();
    },

    async loadPlaylistFromServer() {
        try {
            debugLog('🎵 Loading playlist from server...', 'info');
            const response = await fetch('/api/music-list');
            const result = await response.json();

            if (result.success && Array.isArray(result.files)) {
                this.playlist = result.files;
                debugLog(`✅ Loaded ${result.files.length} tracks from server`, 'success');

                // ✅ FIXED: Update the playlist button text with correct count
                this.updatePlaylistButtonText(result.files.length);
            } else {
                debugLog('⚠️ Using default playlist - server playlist unavailable', 'warning');
                // Fallback to default playlist count
                this.updatePlaylistButtonText(this.playlist.length);
            }
        } catch (error) {
            debugLog(`❌ Failed to load playlist from server: ${error.message}`, 'error');
            debugLog('⚠️ Using default playlist', 'warning');
            // Fallback to default playlist count
            this.updatePlaylistButtonText(this.playlist.length);
        }
    },

    setupEventListeners() {
        const playPauseBtn = document.getElementById('playPauseBtn');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const stopBtn = document.getElementById('stopBtn');
        const playlistToggle = document.getElementById('playlistToggle');
        const closePlaylist = document.getElementById('closePlaylist');

        if (playPauseBtn) playPauseBtn.addEventListener('click', () => this.togglePlay());
        if (prevBtn) prevBtn.addEventListener('click', () => this.previousTrack());
        if (nextBtn) nextBtn.addEventListener('click', () => this.nextTrack());
        if (stopBtn) stopBtn.addEventListener('click', () => this.stop());
        if (playlistToggle) playlistToggle.addEventListener('click', () => this.togglePlaylist());
        if (closePlaylist) closePlaylist.addEventListener('click', () => this.togglePlaylist());

        if (this.audio) {
            this.audio.addEventListener('timeupdate', () => this.updateProgress());
            this.audio.addEventListener('ended', () => this.nextTrack());
            this.audio.addEventListener('loadedmetadata', () => this.updateDuration());
        }
    },

    updateTrackInfo() {
        const trackTitle = document.getElementById('track-title');
        if (trackTitle) {
            const fileName = this.playlist[this.currentTrack];
            const cleanName = fileName.replace(/\.mp3$/, '').replace(/By WeAD/g, '').replace(/_/g, ' ').trim();
            trackTitle.textContent = cleanName;
        }
    },

    loadTrack() {
        if (this.audio) {
            const fileName = this.playlist[this.currentTrack];
            this.audio.src = `music/${fileName}`;
            this.updateTrackInfo();
            this.updatePlaylistHighlight();
        }
    },

    togglePlay() {
        if (!this.audio.src) {
            this.loadTrack();
        }

        if (this.isPlaying) {
            this.pause();
        } else {
            this.play();
        }
    },

    play() {
        if (this.audio) {
            this.audio.play();
            this.isPlaying = true;
            const playPauseBtn = document.getElementById('playPauseBtn');
            if (playPauseBtn) playPauseBtn.textContent = '⏸️';
        }
    },

    pause() {
        if (this.audio) {
            this.audio.pause();
            this.isPlaying = false;
            const playPauseBtn = document.getElementById('playPauseBtn');
            if (playPauseBtn) playPauseBtn.textContent = '▶️';
        }
    },

    stop() {
        if (this.audio) {
            this.audio.pause();
            this.audio.currentTime = 0;
            this.isPlaying = false;
            const playPauseBtn = document.getElementById('playPauseBtn');
            if (playPauseBtn) playPauseBtn.textContent = '▶️';
            this.updateProgress();
        }
    },

    nextTrack() {
        this.currentTrack = (this.currentTrack + 1) % this.playlist.length;
        this.loadTrack();
        if (this.isPlaying) {
            this.play();
        }
    },

    previousTrack() {
        this.currentTrack = this.currentTrack === 0 ? this.playlist.length - 1 : this.currentTrack - 1;
        this.loadTrack();
        if (this.isPlaying) {
            this.play();
        }
    },

    updateProgress() {
        if (this.audio) {
            const progress = document.getElementById('progress');
            const currentTime = document.getElementById('currentTime');
            
            if (progress && this.audio.duration) {
                const percent = (this.audio.currentTime / this.audio.duration) * 100;
                progress.style.width = percent + '%';
            }
            
            if (currentTime) {
                currentTime.textContent = this.formatTime(this.audio.currentTime);
            }
        }
    },

    updateDuration() {
        if (this.audio) {
            const duration = document.getElementById('duration');
            if (duration) {
                duration.textContent = this.formatTime(this.audio.duration);
            }
        }
    },

    formatTime(seconds) {
        if (isNaN(seconds)) return '0:00';
        const mins = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return `${mins}:${secs.toString().padStart(2, '0')}`;
    },

    togglePlaylist() {
        const playlistContainer = document.getElementById('playlistContainer');
        if (playlistContainer) {
            const isVisible = playlistContainer.style.display !== 'none';
            playlistContainer.style.display = isVisible ? 'none' : 'block';
        }
    },

    generatePlaylist() {
        const playlistItems = document.getElementById('playlistItems');
        if (playlistItems) {
            playlistItems.innerHTML = '';
            this.playlist.forEach((fileName, index) => {
                const cleanName = fileName.replace(/\.mp3$/, '').replace(/By WeAD/g, '').replace(/_/g, ' ').trim();
                const item = document.createElement('div');
                item.className = 'playlist-item';
                item.textContent = `${index + 1}. ${cleanName}`;
                item.addEventListener('click', () => {
                    this.currentTrack = index;
                    this.loadTrack();
                    if (this.isPlaying) {
                        this.play();
                    }
                });
                playlistItems.appendChild(item);
            });
            this.updatePlaylistHighlight();
        }
    },

    updatePlaylistHighlight() {
        const playlistItems = document.querySelectorAll('.playlist-item');
        playlistItems.forEach((item, index) => {
            item.classList.toggle('active', index === this.currentTrack);
        });
    },

    // ✅ NEW: Update playlist button text with correct track count
    updatePlaylistButtonText(trackCount) {
        const playlistToggle = document.getElementById('playlistToggle');
        if (playlistToggle) {
            const btnText = playlistToggle.querySelector('.btn-text');
            if (btnText) {
                btnText.textContent = `Show Playlist (${trackCount} tracks)`;
                debugLog(`🎵 Updated playlist button: ${trackCount} tracks`, 'info');
            }
        }
    }
};

// ✅ NEW: Admin Music Upload System
const adminMusicUpload = {
    adminPassword: 'Evilwoman@1997',
    isAuthenticated: false,
    uploadQueue: [],
    
    init() {
        this.setupEventListeners();
    },
    
    setupEventListeners() {
        // Prevent duplicate event listeners by checking if already set up
        if (this.listenersSetup) {
            debugLog('🎧 Event listeners already set up');
            return;
        }
        this.listenersSetup = true;

        const adminLoginBtn = document.getElementById('admin-login');
        const adminLogoutBtn = document.getElementById('admin-logout');
        const adminPasswordInput = document.getElementById('admin-password');
        const browseBtn = document.getElementById('browse-files');
        const fileInput = document.getElementById('music-file-input');
        const uploadFilesBtn = document.getElementById('upload-files');
        const clearQueueBtn = document.getElementById('clear-queue');
        const removeDuplicatesBtn = document.getElementById('remove-duplicates');

        if (adminLoginBtn) {
            adminLoginBtn.addEventListener('click', () => this.handleLogin());
            debugLog('✅ Admin login button listener added');
        }
        if (adminLogoutBtn) {
            adminLogoutBtn.addEventListener('click', () => this.handleLogout());
            debugLog('✅ Admin logout button listener added');
        }
        if (adminPasswordInput) {
            adminPasswordInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') this.handleLogin();
            });
            debugLog('✅ Admin password input listener added');
        }

        if (browseBtn) {
            browseBtn.addEventListener('click', () => fileInput?.click());
            debugLog('✅ Browse files button listener added');
        }

        if (fileInput) {
            fileInput.addEventListener('change', (e) => this.handleFileSelect(e));
            debugLog('✅ File input listener added');
        }
        if (uploadFilesBtn) {
            uploadFilesBtn.addEventListener('click', (e) => {
                e.preventDefault();
                debugLog('🎵 Upload button clicked');
                this.uploadFiles();
            });
            debugLog('✅ Upload files button listener added');
        }
        if (clearQueueBtn) {
            clearQueueBtn.addEventListener('click', () => this.clearQueue());
            debugLog('✅ Clear queue button listener added');
        }
        if (removeDuplicatesBtn) {
            removeDuplicatesBtn.addEventListener('click', () => this.removeDuplicates());
            debugLog('✅ Remove duplicates button listener added');
        }

        // Ensure no stale listeners for a removed button
        const removeProbitBtn = document.getElementById('remove-probit');
        if (removeProbitBtn) {
            removeProbitBtn.remove();
        }

        debugLog('✅ All admin event listeners set up');
    },
    
    handleLogin() {
        const passwordInput = document.getElementById('admin-password');
        const password = passwordInput?.value;
        
        if (password === this.adminPassword) {
            this.isAuthenticated = true;
            this.showAdminPanel();
            this.showStatus('✅ Admin access granted!', 'success');
            debugLog('🔐 Admin authentication successful');
        } else {
            this.showStatus('⚠️ Access Denied: This is for admin only!', 'error');
            debugLog('🔐 Admin authentication failed - incorrect password');
            passwordInput.value = '';
            passwordInput.style.borderColor = 'var(--mars-red)';
            setTimeout(() => {
                passwordInput.style.borderColor = '';
            }, 3000);
        }
    },
    
    handleLogout() {
        this.isAuthenticated = false;
        this.hideAdminPanel();
        this.clearQueue();
        document.getElementById('admin-password').value = '';
        this.removeStatus();
        debugLog('🔐 Admin logged out');
    },
    
    showAdminPanel() {
        const authSection = document.getElementById('admin-auth');
        const adminPanel = document.getElementById('admin-panel');
        const adminControls = document.getElementById('admin-controls');

        if (authSection) authSection.style.display = 'none';
        if (adminPanel) adminPanel.style.display = 'block';
        if (adminControls) adminControls.style.display = 'block'; // Always show admin controls when logged in

        this.showStatus('✅ Admin access granted!', 'success');
        debugLog('🔐 Admin authentication successful');
    },
    
    hideAdminPanel() {
        const authSection = document.getElementById('admin-auth');
        const adminPanel = document.getElementById('admin-panel');
        const adminControls = document.getElementById('admin-controls');
        const uploadQueue = document.getElementById('upload-queue');

        if (authSection) authSection.style.display = 'block';
        if (adminPanel) adminPanel.style.display = 'none';
        if (adminControls) adminControls.style.display = 'none';
        if (uploadQueue) uploadQueue.style.display = 'none'; // Also hide upload queue on logout
    },
    
    
    handleFileSelect(e) {
        const files = Array.from(e.target.files);
        this.addFilesToQueue(files);
    },
    
    addFilesToQueue(files) {
        const validFiles = files.filter(file => this.validateFile(file));
        
        validFiles.forEach(file => {
            if (!this.uploadQueue.some(queueFile => queueFile.name === file.name)) {
                this.uploadQueue.push(file);
            }
        });
        
        this.updateQueueDisplay();
        this.updateUploadButton();
    },
    
    validateFile(file) {
        const maxSize = 50 * 1024 * 1024; // 50MB
        const allowedTypes = ['audio/mpeg', 'audio/wav', 'audio/ogg'];
        
        if (!allowedTypes.includes(file.type)) {
            this.showStatus(`❌ Invalid file type: ${file.name}. Only MP3, WAV, OGG allowed.`, 'error');
            return false;
        }
        
        if (file.size > maxSize) {
            this.showStatus(`❌ File too large: ${file.name}. Max size is 50MB.`, 'error');
            return false;
        }
        
        return true;
    },
    
    updateQueueDisplay() {
        const uploadQueue = document.getElementById('upload-queue');
        const queueItems = document.getElementById('queue-items');
        
        if (this.uploadQueue.length === 0) {
            uploadQueue.style.display = 'none';
            return;
        }
        
        uploadQueue.style.display = 'block';
        queueItems.innerHTML = '';
        
        this.uploadQueue.forEach((file, index) => {
            const queueItem = document.createElement('div');
            queueItem.className = 'queue-item';
            queueItem.innerHTML = `
                <div class="queue-item-info">
                    <div class="queue-item-name">${file.name}</div>
                    <div class="queue-item-size">${this.formatFileSize(file.size)}</div>
                </div>
                <button class="queue-item-remove" onclick="adminMusicUpload.removeFromQueue(${index})">Remove</button>
            `;
            queueItems.appendChild(queueItem);
        });
    },
    
    removeFromQueue(index) {
        this.uploadQueue.splice(index, 1);
        this.updateQueueDisplay();
        this.updateUploadButton();
    },
    
    clearQueue() {
        this.uploadQueue = [];
        this.updateQueueDisplay();
        this.updateUploadButton();
    },
    
    updateUploadButton() {
        const uploadBtn = document.getElementById('upload-files');
        if (uploadBtn) {
            uploadBtn.disabled = this.uploadQueue.length === 0;
            const fileText = this.uploadQueue.length === 1 ? 'File' : 'Files';
            uploadBtn.querySelector('.btn-text').textContent = this.uploadQueue.length === 0 ? 'Upload Files' : `Upload ${this.uploadQueue.length} ${fileText}`;
        }
    },
    
    async uploadFiles() {
        if (this.uploadQueue.length === 0) return;
        
        const uploadBtn = document.getElementById('upload-files');
        if (uploadBtn) {
            uploadBtn.disabled = true;
            uploadBtn.querySelector('.btn-text').textContent = 'Uploading...';
        }
        
        try {
            let successCount = 0;
            for (let i = 0; i < this.uploadQueue.length; i++) {
                const file = this.uploadQueue[i];
                await this.uploadSingleFile(file, i + 1, this.uploadQueue.length);
                successCount++;
            }
            
            // Show success message with confirmation
            this.showStatus(`✅ OK - ${successCount} files uploaded successfully!`, 'success');
            this.clearQueue();
            
            // Refresh the music player playlist
            if (typeof musicPlayer !== 'undefined') {
                await this.refreshPlaylist();
            }
            
            // Auto-logout after 3 seconds
            setTimeout(() => {
                this.handleLogout();
                this.showStatus('🔐 Upload complete - Logged out automatically', 'success');
            }, 3000);
            
        } catch (error) {
            this.showStatus(`❌ Upload failed: ${error.message}`, 'error');
            debugLog(`❌ Upload error: ${error.message}`, 'error');
        } finally {
            if (uploadBtn) {
                uploadBtn.disabled = false;
                uploadBtn.querySelector('.btn-text').textContent = 'Upload Files';
            }
        }
    },
    
    async uploadSingleFile(file, current, total) {
        try {
            debugLog(`🎵 Starting upload: ${file.name} (${current}/${total})`);
            
            const formData = new FormData();
            formData.append('musicFile', file);
            formData.append('adminPassword', this.adminPassword);
            
            this.showStatus(`📤 Uploading ${current}/${total}: ${file.name}`, 'warning');
            
            const response = await fetch('/api/upload-music', {
                method: 'POST',
                body: formData
            });
            
            debugLog(`🎵 Upload response status: ${response.status}`);
            
            if (!response.ok) {
                const errorText = await response.text();
                debugLog(`❌ Upload error response: ${errorText}`);
                
                // Handle specific error cases
                if (response.status === 413) {
                    throw new Error('File too large! Please use files smaller than 100MB.');
                }
                
                let error;
                try {
                    error = JSON.parse(errorText);
                } catch (e) {
                    error = { message: errorText || 'Upload failed' };
                }
                throw new Error(error.message || 'Upload failed');
            }
            
            const result = await response.json();
            debugLog(`✅ Upload successful: ${file.name}`);
            return result;
        } catch (error) {
            debugLog(`❌ Upload error for ${file.name}: ${error.message}`);
            throw error;
        }
    },
    
    async refreshPlaylist() {
        try {
            const response = await fetch('/api/music-list');
            const musicList = await response.json();

            if (musicList.success && Array.isArray(musicList.files)) {
                musicPlayer.playlist = musicList.files;
                musicPlayer.generatePlaylist();

                // ✅ FIXED: Update playlist button with correct count after refresh
                musicPlayer.updatePlaylistButtonText(musicList.files.length);

                this.showStatus('🎵 Playlist updated with new tracks!', 'success');
            }
        } catch (error) {
            debugLog(`❌ Failed to refresh playlist: ${error.message}`, 'error');
        }
    },
    
    formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    },
    
    showStatus(message, type) {
        this.removeStatus();
        
        const statusDiv = document.createElement('div');
        statusDiv.className = `upload-status ${type}`;
        statusDiv.textContent = message;
        statusDiv.id = 'upload-status';
        
        const adminSection = document.querySelector('.admin-section');
        if (adminSection) {
            adminSection.appendChild(statusDiv);
        }
        
        // Auto-remove success messages after 5 seconds
        if (type === 'success') {
            setTimeout(() => this.removeStatus(), 5000);
        }
    },
    
    removeStatus() {
        const existingStatus = document.getElementById('upload-status');
        if (existingStatus) {
            existingStatus.remove();
        }
    },

    // ✅ NEW: Remove duplicate music files
    async removeDuplicates() {
        if (!this.isAuthenticated) {
            this.showStatus('❌ Please login first', 'error');
            return;
        }

        const removeBtn = document.getElementById('remove-duplicates');
        if (removeBtn) {
            // Prevent multiple rapid clicks
            if (removeBtn.disabled) {
                debugLog('🚫 Remove duplicates already in progress');
                return;
            }

            removeBtn.disabled = true;
            removeBtn.querySelector('.btn-text').textContent = 'Removing...';
        }

        try {
            debugLog('🧹 Starting duplicate removal process...');

            const response = await fetch('/api/remove-duplicate-music', {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    adminPassword: this.adminPassword
                })
            });

            const result = await response.json();
            debugLog(`📨 Server response:`, result);
            debugLog(`📊 Response status: ${response.status}`);
            debugLog(`📊 Response success: ${result.success}`);

            if (result.success) {
                this.showStatus(`✅ ${result.message}`, 'success');
                debugLog(`🧹 Removed ${result.deletedCount} duplicate files`);

                // Refresh the music player playlist with updated count
                if (typeof musicPlayer !== 'undefined') {
                    await musicPlayer.loadPlaylistFromServer();
                }
            } else {
                this.showStatus(`❌ ${result.message}`, 'error');
                debugLog(`❌ Duplicate removal failed: ${result.message}`);
            }

        } catch (error) {
            debugLog(`❌ Remove duplicates error: ${error.message}`, 'error');
            this.showStatus('❌ Failed to remove duplicates', 'error');
        } finally {
            // Re-enable the button
            if (removeBtn) {
                removeBtn.disabled = false;
                removeBtn.querySelector('.btn-text').textContent = 'Remove Duplicates';
            }
        }
    },

    // (Removed) ProBIT removal feature per requirements
};

// Old login system removed - using simpleLogin system instead

// ✅ NEW: Voice Calibration System
const voiceCalibration = {
    isCalibrating: false,
    calibrationRecognition: null,
    voiceProfile: null,
    
    init() {
        this.loadExistingProfile();
        this.setupCalibrationEventListeners();
        this.updateCalibrationStatus();
    },
    
    loadExistingProfile() {
        const savedProfile = localStorage.getItem('userVoiceProfile');
        if (savedProfile) {
            try {
                this.voiceProfile = JSON.parse(savedProfile);
                debugLog('✅ Voice profile loaded from storage');
            } catch (error) {
                debugLog('❌ Invalid voice profile data');
                localStorage.removeItem('userVoiceProfile');
            }
        }
    },
    
    setupCalibrationEventListeners() {
        console.log('🎯 Setting up voice calibration event listeners...');
        const calibrateVoiceBtn = document.getElementById('calibrate-voice-btn');
        const startRecordingBtn = document.getElementById('start-calibration-recording');
        const stopRecordingBtn = document.getElementById('stop-calibration-recording');
        const closeModalBtn = document.getElementById('close-calibration-modal');
        
        console.log('🎯 Calibrate button found:', calibrateVoiceBtn);
        
        if (calibrateVoiceBtn) {
            calibrateVoiceBtn.addEventListener('click', () => {
                console.log('🎯 Calibrate button clicked!');
                this.openCalibrationModal();
            });
            console.log('✅ Calibrate button event listener added');
        } else {
            console.log('❌ Calibrate button not found!');
        }
        if (startRecordingBtn) startRecordingBtn.addEventListener('click', () => this.startCalibration());
        if (stopRecordingBtn) stopRecordingBtn.addEventListener('click', () => this.stopCalibration());
        if (closeModalBtn) closeModalBtn.addEventListener('click', () => this.closeCalibrationModal());
    },
    
    updateCalibrationStatus() {
        // Status display removed - calibration is now done via modal only
        console.log('Voice calibration status updated');
    },
    
    openCalibrationModal() {
        console.log('🎯 Opening voice calibration window...');
        const features = 'width=700,height=600,scrollbars=yes,resizable=yes,status=yes,location=no,toolbar=no,menubar=no';
        const win = window.open('/calibration.html', 'voiceCalibration', features);
        if (!win) {
            alert('Please allow popups for voice calibration to work properly.');
        }
    },
    
    closeCalibrationModal() {
        const modal = document.getElementById('voice-calibration-modal');
        if (modal) modal.style.display = 'none';
        this.resetCalibrationUI();
    },
    
    async startCalibration() {
        debugLog('🎙️ Starting voice calibration...');
        
        try {
            // Setup speech recognition for calibration
            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
            if (!SpeechRecognition) {
                alert('Speech recognition not supported in this browser');
                return;
            }
            
            this.calibrationRecognition = new SpeechRecognition();
            this.calibrationRecognition.continuous = true;
            this.calibrationRecognition.interimResults = true;
            this.calibrationRecognition.lang = 'en-US';
            
            // Request microphone access
            const stream = await navigator.mediaDevices.getUserMedia({ 
                audio: {
                    echoCancellation: true,
                    noiseSuppression: true,
                    autoGainControl: true,
                    channelCount: 2,
                    sampleRate: 48000
                } 
            });
            
            // Start calibration recording
            this.isCalibrating = true;
            this.updateCalibrationUI('recording');
            
            // Setup audio analysis for voice fingerprinting
            this.analyzeVoiceStream(stream);
            
            this.calibrationRecognition.start();
            
            // Stop after 10 seconds
            setTimeout(() => {
                if (this.isCalibrating) {
                    this.stopCalibration();
                }
            }, 10000);
            
        } catch (error) {
            debugLog(`❌ Calibration error: ${error.message}`, 'error');
            alert('Could not access microphone. Please check permissions.');
            this.resetCalibrationUI();
        }
    },
    
    stopCalibration() {
        if (this.calibrationRecognition) {
            this.calibrationRecognition.stop();
            this.calibrationRecognition = null;
        }
        
        this.isCalibrating = false;
        this.updateCalibrationUI('processing');
        
        // Simulate processing and save profile
        setTimeout(() => {
            this.saveVoiceProfile();
            this.updateCalibrationUI('complete');
            
            setTimeout(() => {
                this.closeCalibrationModal();
                this.updateCalibrationStatus();
            }, 2000);
        }, 2000);
    },
    
    analyzeVoiceStream(stream) {
        // Basic voice analysis (simplified version)
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
        const analyser = audioContext.createAnalyser();
        const microphone = audioContext.createMediaStreamSource(stream);
        
        microphone.connect(analyser);
        analyser.fftSize = 256;
        
        const bufferLength = analyser.frequencyBinCount;
        const dataArray = new Uint8Array(bufferLength);
        
        const analyzePitch = () => {
            analyser.getByteFrequencyData(dataArray);
            
            // Find dominant frequency (simplified)
            let maxIndex = 0;
            let maxValue = 0;
            for (let i = 0; i < bufferLength; i++) {
                if (dataArray[i] > maxValue) {
                    maxValue = dataArray[i];
                    maxIndex = i;
                }
            }
            
            const dominantFreq = (maxIndex * audioContext.sampleRate) / (analyser.fftSize * 2);
            
            if (!this.voiceAnalysisData) {
                this.voiceAnalysisData = { frequencies: [], volumes: [] };
            }
            
            this.voiceAnalysisData.frequencies.push(dominantFreq);
            this.voiceAnalysisData.volumes.push(maxValue);
            
            if (this.isCalibrating) {
                requestAnimationFrame(analyzePitch);
            } else {
                stream.getTracks().forEach(track => track.stop());
                audioContext.close();
            }
        };
        
        analyzePitch();
    },
    
    saveVoiceProfile() {
        if (!this.voiceAnalysisData) return;
        
        // Create voice fingerprint
        const frequencies = this.voiceAnalysisData.frequencies.filter(f => f > 80 && f < 1000);
        const avgFreq = frequencies.reduce((a, b) => a + b, 0) / frequencies.length;
        const freqVariance = this.calculateVariance(frequencies, avgFreq);
        
        this.voiceProfile = {
            userID: 'user_' + Date.now(),
            fundamentalFreq: Math.round(avgFreq),
            freqRange: [Math.round(avgFreq - freqVariance), Math.round(avgFreq + freqVariance)],
            createdAt: new Date().toISOString(),
            confidence: 0.8
        };
        
        localStorage.setItem('userVoiceProfile', JSON.stringify(this.voiceProfile));
        debugLog('✅ Voice profile saved successfully');
    },
    
    calculateVariance(values, mean) {
        const squaredDiffs = values.map(value => Math.pow(value - mean, 2));
        return Math.sqrt(squaredDiffs.reduce((a, b) => a + b, 0) / values.length);
    },
    
    updateCalibrationUI(state) {
        const startBtn = document.getElementById('start-calibration-recording');
        const stopBtn = document.getElementById('stop-calibration-recording');
        const progress = document.getElementById('calibration-progress');
        const progressFill = document.getElementById('calibration-progress-fill');
        const progressText = progress?.querySelector('.progress-text');
        
        switch (state) {
            case 'recording':
                if (startBtn) startBtn.style.display = 'none';
                if (stopBtn) stopBtn.style.display = 'inline-flex';
                if (progress) progress.style.display = 'block';
                if (progressText) progressText.textContent = 'Recording your voice...';
                if (progressFill) progressFill.style.width = '30%';
                break;
                
            case 'processing':
                if (stopBtn) stopBtn.style.display = 'none';
                if (progressText) progressText.textContent = 'Analyzing voice patterns...';
                if (progressFill) progressFill.style.width = '70%';
                break;
                
            case 'complete':
                if (progressText) progressText.textContent = 'Calibration complete!';
                if (progressFill) progressFill.style.width = '100%';
                break;
        }
    },
    
    resetCalibrationUI() {
        const startBtn = document.getElementById('start-calibration-recording');
        const stopBtn = document.getElementById('stop-calibration-recording');
        const progress = document.getElementById('calibration-progress');
        const progressFill = document.getElementById('calibration-progress-fill');
        
        if (startBtn) startBtn.style.display = 'inline-flex';
        if (stopBtn) stopBtn.style.display = 'none';
        if (progress) progress.style.display = 'none';
        if (progressFill) progressFill.style.width = '0%';
    }
};

// ✅ NEW: Update MBTI Display Function
function updateMBTIDisplay(mbtiData) {
    try {
        if (!mbtiData) return;

        // Handle ERROR type from server
        if (mbtiData.type === 'ERROR') {
            debugLog('⚠️ MBTI analysis error received from server:', mbtiData.error);
            return; // Don't update the display with error data
        }

        // Update MBTI type
        const mbtiTypeElement = document.getElementById('mbti-type');
        if (mbtiTypeElement) {
            mbtiTypeElement.textContent = mbtiData.type || '--';
        }
        
        // Update trait values
        const energyElement = document.getElementById('mbti-energy');
        const infoElement = document.getElementById('mbti-info');
        const decisionElement = document.getElementById('mbti-decision');
        const lifestyleElement = document.getElementById('mbti-lifestyle');
        
        if (energyElement && mbtiData.traits.energy) {
            energyElement.textContent = mbtiData.traits.energy.name || '--';
        }
        if (infoElement && mbtiData.traits.information) {
            infoElement.textContent = mbtiData.traits.information.name || '--';
        }
        if (decisionElement && mbtiData.traits.decision) {
            decisionElement.textContent = mbtiData.traits.decision.name || '--';
        }
        if (lifestyleElement && mbtiData.traits.lifestyle) {
            lifestyleElement.textContent = mbtiData.traits.lifestyle.name || '--';
        }
        
        // Update description
        const descriptionElement = document.getElementById('mbti-description');
        if (descriptionElement && mbtiData.description) {
            const desc = mbtiData.description;

            // Handle both string and object formats
            if (typeof desc === 'string') {
                // For INSUFFICIENT_DATA - description is a string
                descriptionElement.innerHTML = `
                    <h4>${mbtiData.name || 'Analysis Result'}</h4>
                    <p><strong>Description:</strong> ${desc}</p>
                    ${mbtiData.warning ? `<p class="warning-text"><em>${mbtiData.warning}</em></p>` : ''}
                `;
            } else if (typeof desc === 'object') {
                // For normal MBTI types - description is an object
                descriptionElement.innerHTML = `
                    <h4>${desc.name || 'Unknown Type'}</h4>
                    <p><strong>Description:</strong> ${desc.description || 'No description available'}</p>
                    ${desc.strengths && desc.strengths.length > 0 ? `<p><strong>Strengths:</strong> ${desc.strengths.join(', ')}</p>` : ''}
                    ${desc.weaknesses && desc.weaknesses.length > 0 ? `<p><strong>Areas for Growth:</strong> ${desc.weaknesses.join(', ')}</p>` : ''}
                    ${desc.career ? `<p><strong>Career Paths:</strong> ${desc.career}</p>` : ''}
                    ${desc.relationships ? `<p><strong>Relationships:</strong> ${desc.relationships}</p>` : ''}
                `;
            }
        }
        
        debugLog(`✅ MBTI display updated: ${mbtiData.type}`);
    } catch (error) {
        debugLog('❌ Error updating MBTI display:', error);
    }
}

// ===== 🧬 MBTI LOADING INDICATOR =====
function showMBTILoading() {
    const loadingDiv = document.getElementById('mbti-loading-indicator');

    if (loadingDiv) {
        loadingDiv.style.display = 'flex';
        debugLog('🧠 Showing MBTI loading indicator');

        // Auto-hide after 30 seconds as fallback
        setTimeout(() => {
            if (loadingDiv.style.display !== 'none') {
                hideMBTILoading();
                debugLog('⚠️ MBTI loading timeout - hiding automatically');
            }
        }, 30000);
    }
}

function hideMBTILoading() {
    const loadingDiv = document.getElementById('mbti-loading-indicator');

    if (loadingDiv) {
        loadingDiv.style.display = 'none';
        debugLog('✅ Hiding MBTI loading indicator');
    }
}

// ===== 🔐 SIMPLE LOGIN SYSTEM =====
const simpleLogin = {
    currentUser: null,

    init() {
        console.log('🔐 Initializing simple login system...');
        this.setupButtons();
        this.checkSavedUser();
        console.log('✅ Simple login system ready');
    },
    
    setupButtons() {
        console.log('🔍 Looking for login buttons...');
        const loginBtn = document.getElementById('login-btn');
        const registerBtn = document.getElementById('register-btn');
        const logoutBtn = document.getElementById('logout-btn');
        
        console.log('🔍 Login button found:', loginBtn);
        console.log('🔍 Register button found:', registerBtn);
        console.log('🔍 Logout button found:', logoutBtn);
        
        if (loginBtn) {
            loginBtn.addEventListener('click', (e) => {
                e.preventDefault();
                console.log('🔐 Login status item clicked!');
                this.showModal('login');
            });
            console.log('✅ Login status item connected');
        } else {
            console.error('❌ Login status item NOT FOUND');
        }
        
        if (registerBtn) {
            registerBtn.addEventListener('click', (e) => {
                e.preventDefault();
                console.log('🔐 Register status item clicked!');
                this.showModal('register');
            });
            console.log('✅ Register status item connected');
        } else {
            console.error('❌ Register status item NOT FOUND');
        }
        
        if (logoutBtn) {
            logoutBtn.addEventListener('click', (e) => {
                e.preventDefault();
                console.log('🔐 Logout button clicked!');
                this.logout();
            });
            console.log('✅ Logout button connected');
        } else {
            console.error('❌ Logout button NOT FOUND');
        }
    },
    
    showModal(mode) {
        console.log('🔍 showModal called with mode:', mode);
        const modal = document.getElementById('login-modal');
        const title = document.getElementById('modal-title');
        const submitBtn = document.getElementById('submit-btn');
        
        console.log('🔍 Modal element found:', modal);
        console.log('🔍 Title element found:', title);
        console.log('🔍 Submit button found:', submitBtn);
        
        if (!modal) {
            console.error('❌ Login modal not found');
            return;
        }
        
        // Set mode
        if (mode === 'login') {
            if (title) title.textContent = 'Login to WeAD RedFlag';
            if (submitBtn) submitBtn.textContent = 'Login';
        } else {
            if (title) title.textContent = 'Register for WeAD RedFlag';
            if (submitBtn) submitBtn.textContent = 'Register';
        }
        
        // Show modal
        console.log('🔍 Setting modal display to flex...');
        modal.style.display = 'flex';
        console.log('🔍 Modal style after setting:', modal.style.display);
        console.log(`✅ ${mode} modal should now be visible!`);
        
        // Setup form if not already done
        this.setupForm();
    },
    
    setupForm() {
        const form = document.getElementById('login-form');
        const closeBtn = document.getElementById('modal-close');
        const modal = document.getElementById('login-modal');
        
        if (form && !form.hasAttribute('data-setup')) {
            form.addEventListener('submit', (e) => this.handleSubmit(e));
            form.setAttribute('data-setup', 'true');
            console.log('✅ Form events connected');
        }
        
        if (closeBtn) {
            closeBtn.addEventListener('click', () => this.hideModal());
        }
        
        if (modal) {
            modal.addEventListener('click', (e) => {
                if (e.target === modal) this.hideModal();
            });
        }
    },
    
    hideModal() {
        const modal = document.getElementById('login-modal');
        if (modal) {
            modal.style.display = 'none';
            this.clearForm();
            console.log('✅ Modal closed');
        }
    },
    
    clearForm() {
        const username = document.getElementById('username');
        const password = document.getElementById('password');
        const message = document.getElementById('form-message');
        
        if (username) username.value = '';
        if (password) password.value = '';
        if (message) message.className = 'form-message';
    },
    
    async handleSubmit(e) {
        e.preventDefault();
        
        const username = document.getElementById('username').value.trim();
        const password = document.getElementById('password').value;
        const isLogin = document.getElementById('submit-btn').textContent === 'Login';
        
        if (!username || !password) {
            this.showMessage('Please fill in all fields', 'error');
            return;
        }
        
        this.showMessage('Processing...', 'info');
        
        try {
            const endpoint = isLogin ? '/api/login' : '/api/register';
            const response = await fetch(endpoint, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    // 🔒 Include authentication if already logged in
                    ...(localStorage.getItem('wead_token') ? {
                        'Authorization': `Bearer ${localStorage.getItem('wead_token')}`
                    } : {})
                },
                body: JSON.stringify({ username, password })
            });
            
            const result = await response.json();
            
            if (result.success) {
                this.currentUser = result.user;
                localStorage.setItem('wead_user', JSON.stringify(result.user));
                localStorage.setItem('wead_token', result.token);
                this.showMessage(result.message, 'success');
                
                setTimeout(() => {
                    this.hideModal();
                    this.updateUI();
                }, 1500);
                
                console.log(`✅ ${isLogin ? 'Login' : 'Registration'} successful`);
            } else {
                this.showMessage(result.message, 'error');
            }
        } catch (error) {
            console.error('Login error:', error);
            this.showMessage('Connection error. Please try again.', 'error');
        }
    },
    
    logout() {
        this.currentUser = null;
        localStorage.removeItem('wead_user');
        localStorage.removeItem('wead_token');
        this.updateUI();
        console.log('✅ User logged out');
    },
    
    checkSavedUser() {
        const saved = localStorage.getItem('wead_user');
        if (saved) {
            try {
                this.currentUser = JSON.parse(saved);
                this.updateUI();
                console.log(`✅ Auto-login: ${this.currentUser.username}`);
            } catch (error) {
                localStorage.removeItem('wead_user');
            }
        }
    },
    
    updateUI() {
        const userControls = document.getElementById('user-controls');
        const loginControls = document.getElementById('login-controls');
        const loginStatus = document.getElementById('login-status');
        const registerStatus = document.getElementById('register-status');
        const userName = document.getElementById('user-name');
        
        if (this.currentUser) {
            if (userControls) userControls.style.display = 'flex';
            if (loginControls) loginControls.style.display = 'none';
            if (loginStatus) loginStatus.style.display = 'none';
            if (registerStatus) registerStatus.style.display = 'none';
            if (userName) userName.textContent = this.currentUser.username;
        } else {
            if (userControls) userControls.style.display = 'none';
            if (loginControls) loginControls.style.display = 'none';
            if (loginStatus) loginStatus.style.display = 'flex';
            if (registerStatus) registerStatus.style.display = 'flex';
        }
    },
    
    showMessage(message, type) {
        const messageEl = document.getElementById('form-message');
        if (messageEl) {
            messageEl.textContent = message;
            messageEl.className = `form-message ${type}`;
        }
    }
};