document.addEventListener('DOMContentLoaded', function() {
    // Initialize session status
    let sessionStatus = 'ANONYMOUS';
    let lastUpdateTime = null;
    let activeCookies = {};
    
    // DOM elements
    const cookieInput = document.getElementById('cookieInput');
    const injectCookieBtn = document.getElementById('injectCookie');
    const sessionStatusElement = document.getElementById('sessionStatus');
    const lastUpdateElement = document.getElementById('lastUpdate');
    const cookieListElement = document.getElementById('cookieList');
    const proxyUrlInput = document.getElementById('proxyUrl');
    const aiCoreSelect = document.getElementById('aiCore');
    const initBootBtn = document.getElementById('initBoot');
    const inputStream = document.getElementById('inputStream');
    const executeChainBtn = document.getElementById('executeChain');
    const responseStream = document.getElementById('responseStream');
    
    // Update UI with current session status
    function updateSessionUI() {
        sessionStatusElement.textContent = sessionStatus;
        sessionStatusElement.className = 'px-2 py-1 rounded text-xs font-medium ';
        
        switch(sessionStatus) {
            case 'ESTABLISHED':
                sessionStatusElement.classList.add('bg-green-100', 'dark:bg-green-900', 'text-green-800', 'dark:text-green-200');
                break;
            case 'ANONYMOUS':
                sessionStatusElement.classList.add('bg-yellow-100', 'dark:bg-yellow-900', 'text-yellow-800', 'dark:text-yellow-200');
                break;
            case 'ERROR':
                sessionStatusElement.classList.add('bg-red-100', 'dark:bg-red-900', 'text-red-800', 'dark:text-red-200');
                break;
            default:
                sessionStatusElement.classList.add('bg-gray-100', 'dark:bg-gray-700', 'text-gray-800', 'dark:text-gray-200');
        }
        
        lastUpdateElement.textContent = lastUpdateTime ? new Date(lastUpdateTime).toLocaleString() : 'Never';
        updateCookieList();
    }
    
    // Update the cookie list display
    function updateCookieList() {
        if (Object.keys(activeCookies).length === 0) {
            cookieListElement.innerHTML = '<div class="p-2 bg-gray-100 dark:bg-gray-700 rounded">No cookies detected</div>';
            return;
        }
        
        cookieListElement.innerHTML = '';
        for (const [name, value] of Object.entries(activeCookies)) {
            const isSecure = name.startsWith('__Secure-') || name.startsWith('__Host-');
            const cookieElement = document.createElement('div');
            cookieElement.className = 'p-2 bg-gray-100 dark:bg-gray-700 rounded flex justify-between items-center';
            cookieElement.innerHTML = `
                <span class="truncate flex-1">${name}</span>
                ${isSecure ? '<i data-feather="lock" class="text-blue-500 ml-2 w-4 h-4"></i>' : ''}
            `;
            cookieListElement.appendChild(cookieElement);
        }
        feather.replace();
    }
    
    // Parse cookie header string
    function parseCookieHeader(header) {
        const cookies = {};
        header.split(';').forEach(pair => {
            const [name, value] = pair.trim().split('=');
            if (name && value) {
                cookies[name] = value;
            }
        });
        return cookies;
    }
    
    // Simulate cookie injection
    function injectCookies() {
        const header = cookieInput.value.trim();
        if (!header) {
            showResponse('Error: No cookie header provided', 'error');
            return;
        }
        
        try {
            activeCookies = parseCookieHeader(header);
            sessionStatus = activeCookies['__Secure-1PSID'] ? 'ESTABLISHED' : 'ANONYMOUS';
            lastUpdateTime = new Date();
            
            // Simulate handshake
            setTimeout(() => {
                showResponse('Cookie injection successful. Session established.', 'success');
                updateSessionUI();
                
                // Start session monitoring
                startSessionMonitor();
            }, 1000);
        } catch (error) {
            showResponse(`Error parsing cookies: ${error.message}`, 'error');
            sessionStatus = 'ERROR';
            updateSessionUI();
        }
    }
    
    // Start monitoring session changes
    function startSessionMonitor() {
        // In a real implementation, this would monitor document.cookie or API responses
        setInterval(() => {
            // Simulate occasional session updates
            if (Math.random() > 0.8) {
                lastUpdateTime = new Date();
                updateSessionUI();
            }
        }, 5000);
    }
    
    // Show response in the terminal
    function showResponse(message, type = 'info') {
        const responseElement = document.createElement('div');
        responseElement.className = `terminal-output ${type}`;
        responseElement.innerHTML = `[${new Date().toLocaleTimeString()}] <span class="${type}">${message}</span>`;
        responseStream.appendChild(responseElement);
        responseStream.scrollTop = responseStream.scrollHeight;
    }
    // Execute inference chain
    function executeChain() {
        const input = inputStream.value.trim();
        if (!input) {
            return;
        }

        // Add user message to chat
        const chatContainer = document.getElementById('chatContainer');
        const userMessage = document.createElement('div');
        userMessage.className = 'chat-message user-message mb-3 p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 shadow-sm max-w-3/4 ml-auto';
        userMessage.innerHTML = `
            <div class="flex items-start justify-end">
                <div>
                    <p class="font-medium text-blue-600 dark:text-blue-400 mb-1 text-right">You</p>
                    <p class="text-gray-700 dark:text-gray-300">${input}</p>
                </div>
                <div class="flex-shrink-0 bg-blue-100 dark:bg-blue-800 rounded-full p-2 ml-3">
                    <i data-feather="user" class="text-blue-500 dark:text-blue-400 w-4 h-4"></i>
                </div>
            </div>
        `;
        chatContainer.appendChild(userMessage);
        chatContainer.scrollTop = chatContainer.scrollHeight;
        
        // Clear input
        inputStream.value = '';
        
        // Show typing indicator
        const typingIndicator = document.createElement('div');
        typingIndicator.className = 'chat-message ai-message mb-3 p-3 rounded-lg bg-white dark:bg-gray-800 shadow-sm max-w-3/4';
        typingIndicator.innerHTML = `
            <div class="flex items-start">
                <div class="flex-shrink-0 bg-blue-100 dark:bg-blue-900 rounded-full p-2 mr-3">
                    <i data-feather="cpu" class="text-blue-500 dark:text-blue-400 w-4 h-4"></i>
                </div>
                <div>
                    <p class="font-medium text-blue-600 dark:text-blue-400 mb-1">AI Assistant</p>
                    <p class="text-gray-700 dark:text-gray-300 typing">Typing...</p>
                </div>
            </div>
        `;
        chatContainer.appendChild(typingIndicator);
        chatContainer.scrollTop = chatContainer.scrollHeight;
        
        // Simulate AI processing
        setTimeout(() => {
            // Remove typing indicator
            chatContainer.removeChild(typingIndicator);
            
            // Add AI response
            const aiResponse = document.createElement('div');
            aiResponse.className = 'chat-message ai-message mb-3 p-3 rounded-lg bg-white dark:bg-gray-800 shadow-sm max-w-3/4';
            aiResponse.innerHTML = `
                <div class="flex items-start">
                    <div class="flex-shrink-0 bg-blue-100 dark:bg-blue-900 rounded-full p-2 mr-3">
                        <i data-feather="cpu" class="text-blue-500 dark:text-blue-400 w-4 h-4"></i>
                    </div>
                    <div>
                        <p class="font-medium text-blue-600 dark:text-blue-400 mb-1">AI Assistant</p>
                        <p class="text-gray-700 dark:text-gray-300">I've processed your request successfully. This confirms the system is communicating with the AI backend. How else can I assist you?</p>
                    </div>
                </div>
            `;
            chatContainer.appendChild(aiResponse);
            chatContainer.scrollTop = chatContainer.scrollHeight;
            
            feather.replace();
        }, 1500);
    }
// Initialize boot sequence
    function initiateBoot() {
        const proxyUrl = proxyUrlInput.value.trim();
        const aiCore = aiCoreSelect.value;
        
        showResponse(`Initiating boot sequence with ${aiCore} core...`, 'info');
        
        setTimeout(() => {
            if (aiCore === 'gemini') {
                showResponse("Connecting to Gemini cloud services...", 'info');
                setTimeout(() => {
                    if (proxyUrl) {
                        showResponse(`Proxy configured: ${proxyUrl}`, 'success');
                    }
                    showResponse("Gemini connection established. Ready for inference.", 'success');
                }, 1500);
            } else {
                showResponse("Loading local transformers model...", 'info');
                setTimeout(() => {
                    showResponse("Local model loaded successfully. Ready for inference.", 'success');
                }, 2500);
            }
        }, 1000);
    }
    
    // Event listeners
    injectCookieBtn.addEventListener('click', injectCookies);
    executeChainBtn.addEventListener('click', executeChain);
    initBootBtn.addEventListener('click', initiateBoot);
    
    // Initialize UI
    updateSessionUI();
    feather.replace();
});