document.addEventListener('DOMContentLoaded', () => {
    // Initialize
    const loginScreen = document.getElementById('login-screen');
    const appContainer = document.getElementById('app-container');
    const loginBtn = document.getElementById('login-btn');
    const chatInterface = document.getElementById('chat-interface');
    const minimizeChat = document.getElementById('minimize-chat');
    const chatInput = document.getElementById('chat-input');
    const sendChat = document.getElementById('send-chat');
    const chatMessages = document.getElementById('chat-messages');
    const webview = document.getElementById('main-webview');
    const loadingOverlay = document.getElementById('loading-overlay');
    const tabBar = document.getElementById('tab-bar');
    
    // Simulate login
    loginBtn.addEventListener('click', () => {
        loginScreen.classList.add('motion-blur-active');
        
        setTimeout(() => {
            loginScreen.classList.add('hidden');
            loginScreen.classList.remove('motion-blur-active');
            appContainer.classList.remove('hidden');
            // Add first tab - fallback to DuckDuckGo if Google fails
            addNewTab('New Tab', 'https://www.google.com').catch(() => {
                addNewTab('New Tab', 'https://duckduckgo.com');
            });
// Show chat after slight delay
            setTimeout(() => {
                chatInterface.classList.remove('hidden');
                chatInterface.classList.add('animate-slideIn');
                
                // Add welcome message
                addChatMessage('agent', 'Hello! How can I help you today?');
            }, 1000);
        }, 300);
    });
    
    // Chat functionality
    let isChatMinimized = false;
    
    minimizeChat.addEventListener('click', () => {
        isChatMinimized = !isChatMinimized;
        const messagesContainer = chatInterface.querySelector('#chat-messages');
        const inputContainer = chatInterface.querySelector('div:last-child');
        
        if (isChatMinimized) {
            messagesContainer.classList.add('hidden');
            inputContainer.classList.add('hidden');
            minimizeChat.innerHTML = feather.icons.maximize.toSvg();
        } else {
            messagesContainer.classList.remove('hidden');
            inputContainer.classList.remove('hidden');
            minimizeChat.innerHTML = feather.icons.minus.toSvg();
        }
    });
    
    function addChatMessage(sender, text) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `chat-bubble ${sender} animate-slideIn`;
        messageDiv.textContent = text;
        chatMessages.appendChild(messageDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }
    
    sendChat.addEventListener('click', () => {
        const message = chatInput.value.trim();
        if (message) {
            addChatMessage('user', message);
            chatInput.value = '';
            
            // Simulate response
            setTimeout(() => {
                const responses = [
                    "I'm here to help with any proxy issues!",
                    "Would you like me to check your connection?",
                    "Our servers are operating normally.",
                    "Try clearing your cache if you're having issues.",
                    "You can bookmark the current page for later."
                ];
                addChatMessage('agent', responses[Math.floor(Math.random() * responses.length)]);
            }, 1000);
        }
    });
    
    chatInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            sendChat.click();
        }
    });
    
    // Tab management
    let tabs = [];
    let activeTabIndex = 0;
    function addNewTab(title, url) {
        return new Promise((resolve, reject) => {
const tabId = Date.now();
        const tab = {
            id: tabId,
            title: title,
            url: url,
            favicon: null
        };
        
        tabs.push(tab);
        activeTabIndex = tabs.length - 1;
        renderTabs();
        navigateToUrl(url).then(resolve).catch(reject);
}
    
    function renderTabs() {
        tabBar.innerHTML = '';
        
        tabs.forEach((tab, index) => {
            const tabElement = document.createElement('div');
            tabElement.className = `tab flex items-center px-4 py-2 cursor-pointer text-sm border-r border-gray-700 ${index === activeTabIndex ? 'active bg-gray-900 text-fuchsia-300' : 'text-gray-400 hover:bg-gray-700'}`;
            tabElement.innerHTML = `
                ${tab.favicon ? `<img src="${tab.favicon}" class="w-4 h-4 mr-2">` : `<i data-feather="globe" class="w-4 h-4 mr-2"></i>`}
                <span class="truncate max-w-xs">${tab.title}</span>
                <button class="ml-2 text-gray-400 hover:text-white">
                    <i data-feather="x" class="w-4 h-4"></i>
                </button>
            `;
            
            tabElement.addEventListener('click', () => {
                switchToTab(index);
            });
            
            const closeBtn = tabElement.querySelector('button');
            closeBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                closeTab(index);
            });
            
            tabBar.appendChild(tabElement);
        });
        
        // Add new tab button
        const newTabBtn = document.createElement('div');
        newTabBtn.className = 'flex items-center px-3 py-2 cursor-pointer text-gray-400 hover:text-fuchsia-400';
        newTabBtn.innerHTML = `<i data-feather="plus" class="w-4 h-4"></i>`;
        newTabBtn.addEventListener('click', () => {
            addNewTab('New Tab', 'https://www.google.com');
        });
        tabBar.appendChild(newTabBtn);
        
        feather.replace();
    }
    function switchToTab(index) {
        if (index >= 0 && index < tabs.length) {
            activeTabIndex = index;
            const tab = tabs[activeTabIndex];
            navigateToUrl(tab.url).catch(() => {
                // If navigation fails, fall back to DuckDuckGo
                tab.url = 'https://duckduckgo.com';
                navigateToUrl(tab.url);
            });
            renderTabs();
        }
}
    
    function closeTab(index) {
        if (tabs.length <= 1) {
            // Don't close the last tab
            return;
        }
        
        tabs.splice(index, 1);
        
        if (activeTabIndex >= index) {
            activeTabIndex = Math.max(0, activeTabIndex - 1);
        }
        
        if (tabs.length > 0) {
            const tab = tabs[activeTabIndex];
            navigateToUrl(tab.url);
        }
        
        renderTabs();
    }
    function navigateToUrl(url) {
        return new Promise((resolve, reject) => {
            loadingOverlay.classList.remove('hidden');
            webview.classList.add('opacity-0');
            
            setTimeout(() => {
                webview.src = url;
                
                const errorHandler = () => {
                    webview.removeEventListener('error', errorHandler);
                    loadingOverlay.classList.add('hidden');
                    webview.classList.remove('opacity-0');
                    reject();
                };
                
                webview.addEventListener('error', errorHandler);
                
                webview.onload = () => {
                    webview.removeEventListener('error', errorHandler);
                    setTimeout(() => {
                        loadingOverlay.classList.add('hidden');
                        webview.classList.remove('opacity-0');
                        resolve();
// Update tab title
                    try {
                        const title = webview.contentDocument.title || new URL(webview.src).hostname;
                        tabs[activeTabIndex].title = title;
                        
                        // Try to get favicon
                        const favicon = webview.contentDocument.querySelector('link[rel*="icon"]');
                        if (favicon) {
                            const faviconUrl = new URL(favicon.href, webview.src).href;
                            tabs[activeTabIndex].favicon = faviconUrl;
                        }
                        
                        renderTabs();
                    } catch (e) {
                        console.log("Couldn't access iframe document due to CORS");
                    }
                }, 300);
            };
        }, 300);
    }
    
    // Initialize with one tab
    window.addEventListener('load', () => {
        // In a real proxy, you would handle the actual proxying here
        // This is just the UI implementation
    });
});