console.log("Content script starting...");

// 代理操作类型常量
const ProxyActionType = {
    SET_PROXY_CONFIG: 'SET_PROXY_CONFIG',
    CLEAR_PROXY_CONFIG: 'CLEAR_PROXY_CONFIG',
    GET_PROXY_STATUS: 'GET_PROXY_STATUS',
    GET_PROXY_CONFIGS: 'GET_PROXY_CONFIGS',
    UPDATE_PROXY_CONFIG: 'UPDATE_PROXY_CONFIG'
};

// 在文件顶部添加常量声明
const YAK_ICON_URL = chrome.runtime.getURL('/images/yak.svg');

// 添加一个通用的消息发送函数
async function sendMessageWithRetry(message, maxRetries = 3) {
    for (let i = 0; i < maxRetries; i++) {
        try {
            return await chrome.runtime.sendMessage(message);
        } catch (error) {
            console.warn(`Attempt ${i + 1} failed:`, error);
            if (i === maxRetries - 1) {
                throw error;
            }
            // 等待一小段时间后重试
            await new Promise(resolve => setTimeout(resolve, 500));
        }
    }
}

// 获取当前代理状态
async function getCurrentProxy() {
    try {
        const response = await sendMessageWithRetry({ 
            action: ProxyActionType.GET_PROXY_STATUS
        });
        
        if (!response || !response.success) {
            console.log('No valid response from background script');
            return { enable: false, proxy: '', currentMode: 'direct' };
        }

        const status = response.data;
        console.log('Proxy status from background:', status);

        // 返回当前模式
        return {
            enable: status.enabled,
            proxy: status.mode === 'system' ? 'system' : '',
            currentMode: status.mode || 'direct'  // 使用 mode 来判断当前激活的代理
        };
    } catch (error) {
        console.error('Error getting proxy status:', error);
        return { enable: false, proxy: '', currentMode: 'direct' };
    }
}

// 获取所有代理配置
async function getProxyConfigs() {
    try {
        const response = await sendMessageWithRetry({ 
            action: ProxyActionType.GET_PROXY_CONFIGS
        });
        
        if (!response) {
            console.log('No response from background script');
            return [];
        }
        if (!response.success) {
            console.error('Error in response:', response.error);
            return [];
        }
        return response.data || [];
    } catch (error) {
        console.error('Error getting proxy configs:', error);
        return [];
    }
}

// 切换代理
async function switchProxy(config) {
    try {
        console.log('Switching proxy:', config);
        
        // 根据配置类型构建正确的配置对象
        let proxyConfig;
        if (config.proxyType === 'system') {
            proxyConfig = {
                id: 'system',
                name: '[系统代理]',
                proxyType: 'system',
                enabled: true
            };
        } else if (config.proxyType === 'direct') {
            proxyConfig = {
                id: 'direct',
                name: '[直接连接]',
                proxyType: 'direct',
                enabled: false
            };
        } else {
            proxyConfig = {
                ...config,
                enabled: true
            };
        }

        // 发送配置更改消息
        await sendMessageWithRetry({
            action: ProxyActionType.SET_PROXY_CONFIG,
            config: proxyConfig
        });
        
        await PanelManager.updatePanel();
    } catch (error) {
        console.error('Error switching proxy:', error);
    }
}

// 清除代理
async function clearProxy() {
    try {
        const response = await sendMessageWithRetry({
            action: ProxyActionType.SET_PROXY_CONFIG,
            config: {
                id: 'direct',
                name: '[直接连接]',
                proxyType: 'direct',
                enabled: false
            }
        });
        
        console.log('Clear proxy response:', response);
        // 使用 PanelManager 的 updatePanel 方法
        await PanelManager.updatePanel();
    } catch (error) {
        console.error('Error clearing proxy:', error);
    }
}

// 修改 PanelManager
const PanelManager = {
    panel: null,
    messageListener: null,
    _updating: false,
    _updateQueue: Promise.resolve(),
    _currentState: null, // 用于跟踪当前状态
    _lastUpdate: null,  // 添加最后更新时间戳
    _lastState: null,
    _pollingInterval: null,
    isDragging: false,
    startY: 0,
    currentY: 0,
    
    init() {
        // 确保 document.body 存在
        if (!document.body) {
            console.log('Body not ready, waiting...');
            this.waitForBody();
            return;
        }

        if (this.panel) {
            console.log('Panel already exists, updating...');
            this.updatePanel();
            return;
        }
        
        console.log('Creating new panel...');
        this.createPanel();
    },

    // 添加等待 body 的方法
    waitForBody() {
        if (document.body) {
            this.init();
            return;
        }

        console.log('Setting up MutationObserver for body');
        const observer = new MutationObserver((mutations, obs) => {
            if (document.body) {
                console.log('Body found via observer');
                obs.disconnect();
                this.init();
            }
        });

        observer.observe(document.documentElement, {
            childList: true,
            subtree: true
        });
    },
    
    createPanel() {
        if (!document.body) {
            console.log('Body not available during panel creation');
            return;
        }

        // 创建容器
        const container = document.createElement('div');
        container.id = 'yakit-proxy-panel';
        
        // 创建 shadow DOM
        const shadow = container.attachShadow({ mode: 'open' });
        
        // 添加样式
        const style = document.createElement('style');
        style.textContent = `
            .floating-panel {
                position: fixed;
                top: 30%;
                right: 0;
                transform: translateY(-30%);
                background: white;
                z-index: 2147483647;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                width: 50px;
                height: 40px;
                overflow: hidden;
                transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                            height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                            background-color 0.2s ease;
            }

            /* 吸附状态 */
            .floating-panel:not(.expanded):not(.dragging) {
                border-radius: 50px 0 0 50px;
                box-shadow: -4px 0 20px rgba(0,0,0,0.15);
                border: 1px solid #eee;
                border-right: none;
            }

            /* 拖动状态 */
            .floating-panel.dragging {
                cursor: grabbing !important;
                user-select: none;
                opacity: 0.95;
                transition: none;
            }

            .floating-panel.dragging * {
                cursor: grabbing !important;
            }

            .floating-panel:active {
                cursor: grabbing;
            }

            .floating-panel .panel-header {
                cursor: grab;
            }

            .floating-panel .panel-header:active {
                cursor: grabbing;
            }

            /* 吸附状态悬浮时 */
            .floating-panel:not(.expanded):hover {
                width: 120px;
                background: #fff7e6;
                border-color: #ffd591;
            }

            /* 展开状态 - 立即应用圆角变化 */
            .floating-panel.expanded {
                width: 180px;
                height: auto;
                max-height: 400px;
                border-radius: 8px 0 0 8px;
                box-shadow: -2px 0 10px rgba(0,0,0,0.1);
                border: 1px solid #eee;
                border-right: none;
                /* 展开时立即应用新的圆角 */
                transition: 
                    width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                    height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                    border-radius 0s,
                    background-color 0.2s ease;
            }

            .panel-header {
                height: 40px;
                min-height: 40px;
                display: flex;
                align-items: center;
                padding: 0 8px;
                cursor: pointer;
                user-select: none;
            }

            /* 吸附状态的头部 */
            .floating-panel:not(.expanded) .panel-header {
                background: transparent;
            }

            /* 展开状态的头部 */
            .floating-panel.expanded .panel-header {
                background: #f8f9fa;
                border-bottom: 1px solid #eee;
            }

            .header-content {
                display: flex;
                align-items: center;
                flex: 1;
                overflow: hidden;
            }

            /* 优化图标大小过渡 */
            .yak-icon {
                width: 36px;
                height: 36px;
                min-width: 36px;
                object-fit: contain;
                filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
                transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .floating-panel.expanded .yak-icon {
                width: 24px;
                height: 24px;
                min-width: 24px;
            }

            .active-proxy-info {
                display: flex;
                align-items: center;
                margin-left: 8px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #ff6b00;
                font-size: 13px;
                font-weight: 500;
            }

            .active-proxy-info span:first-child {
                margin-right: 6px;
                filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
            }

            .panel-content {
                display: none;
                background: white;
                overflow-y: auto;
                max-height: 360px;
                opacity: 0;
                transition: opacity 0.2s ease;
            }

            .floating-panel.expanded .panel-content {
                display: block;
                opacity: 1;
            }

            .panel-content::-webkit-scrollbar {
                width: 4px;
            }

            .panel-content::-webkit-scrollbar-track {
                background: #f5f5f5;
            }

            .panel-content::-webkit-scrollbar-thumb {
                background: #ddd;
                border-radius: 4px;
            }

            .panel-content::-webkit-scrollbar-thumb:hover {
                background: #ccc;
            }

            .proxy-item {
                display: flex;
                align-items: center;
                padding: 8px 12px;
                cursor: pointer;
                transition: all 0.2s;
                white-space: nowrap;
                position: relative;
            }

            .proxy-item:hover {
                background: #fff7e6;
            }

            .proxy-item.active {
                background: #fff7e6;
                color: #ff6b00;
            }

            .proxy-item span:first-child {
                margin-right: 8px;
                font-size: 16px;
                filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
            }

            .proxy-status {
                position: absolute;
                right: 12px;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #52c41a;
                box-shadow: 0 0 4px rgba(82,196,26,0.3);
            }

            .proxy-item.active .proxy-status {
                background: #ff6b00;
                box-shadow: 0 0 4px rgba(255,107,0,0.3);
            }

            .divider {
                height: 1px;
                background: #f0f0f0;
                margin: 4px 0;
            }

            .action-button {
                display: flex;
                align-items: center;
                padding: 8px 12px;
                cursor: pointer;
                transition: all 0.2s;
                white-space: nowrap;
                color: #666;
            }

            .action-button:hover {
                background: #fff7e6;
                color: #ff6b00;
            }

            .action-button span:first-child {
                margin-right: 8px;
                filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
            }
        `;

        // 创建面板内容
        const panel = document.createElement('div');
        panel.className = 'floating-panel';
        panel.innerHTML = `
            <div class="panel-header">
                <div class="header-content">
                    <img src="${YAK_ICON_URL}" class="yak-icon" alt="Yak" />
                    <div class="active-proxy-info">
                        <!-- 当前代理信息将动态更新 -->
                    </div>
                </div>
            </div>
            <div class="panel-content">
                <!-- 内容将由 _buildPanelHtml 方法动态生成 -->
            </div>
        `;

        // 将样式和面板添加到 shadow DOM
        shadow.appendChild(style);
        shadow.appendChild(panel);
        
        // 确保安全地添加到 body
        try {
            document.body.appendChild(container);
            this.panel = container;
            
            const floatingPanel = shadow.querySelector('.floating-panel');
            const header = shadow.querySelector('.panel-header');
            
            // 添加拖拽功能
            this._initDragFeature(header, floatingPanel);
            
            // 添加自动收起功能
            this._initAutoCollapse(floatingPanel);
            
            // 添加点击展开/收起功能
            header.addEventListener('click', (e) => {
                if (!this.isDragging) {
                    floatingPanel.classList.toggle('expanded');
                }
            });
            
            // 设置消息监听和开始轮询
            this.setupMessageListener();
            
            // 初始更新面板
            this.updatePanel();

            // 添加页面卸载时的清理
            window.addEventListener('unload', () => {
                if (this._pollingInterval) {
                    clearInterval(this._pollingInterval);
                }
                if (this.messageListener) {
                    chrome.runtime.onMessage.removeListener(this.messageListener);
                }
            });
        } catch (error) {
            console.error('Error creating panel:', error);
        }
    },
    
    setupMessageListener() {
        if (this.messageListener) {
            chrome.runtime.onMessage.removeListener(this.messageListener);
        }
        
        this.messageListener = async (message, sender) => {
            // 只检查消息是否来自同一个扩展
            if (sender.id !== chrome.runtime.id) {
                return;
            }

            // 处理状态更新消息
            if (message.action === 'PROXY_STATUS_CHANGED' || 
                message.action === 'PROXY_CONFIGS_UPDATED') {
                console.log('Received update message:', message, 'from:', sender);
                await this.updatePanel();
            }
        };
        
        chrome.runtime.onMessage.addListener(this.messageListener);
    },
    
    async updatePanel() {
        if (!this.panel || !document.body.contains(this.panel)) {
            console.log('Panel not in document, recreating...');
            this.createPanel();
            return;
        }
        
        const panel = this.panel.shadowRoot?.querySelector('.panel-content');
        if (!panel) return;

        // 使用更新队列确保更新按顺序执行
        this._updateQueue = this._updateQueue.then(async () => {
            if (this._updating) {
                console.log('Update already in progress, skipping...');
                return;
            }

            try {
                this._updating = true;

                // 获取最新状态
                const [currentProxy, configs] = await Promise.all([
                    getCurrentProxy(),
                    getProxyConfigs()
                ]);

                // 状态没有变化时不更新
                const newState = JSON.stringify({ currentProxy, configs });
                if (this._currentState === newState) {
                    console.log('State unchanged, skipping update');
                    return;
                }
                this._currentState = newState;

                // 再次检查面板状态
                if (!this.panel || !document.body.contains(this.panel)) {
                    console.log('Panel was removed during data fetch');
                    return;
                }

                console.log('Updating panel with:', { currentProxy, configs });

                if (!Array.isArray(configs)) {
                    console.error('Invalid configs:', configs);
                    return;
                }

                // 保存当前激活的项
                const currentActiveId = panel.querySelector('.proxy-item.active')?.dataset.id;

                // 构建新的 HTML
                const newHtml = this._buildPanelHtml(currentProxy, configs);
                
                // 创建一个临时容器来比较内容
                const temp = document.createElement('div');
                temp.innerHTML = newHtml;

                // 只在内容真正改变时更新
                if (panel.innerHTML !== temp.innerHTML) {
                    requestAnimationFrame(() => {
                        panel.innerHTML = newHtml;
                        this._bindEventListeners(panel, configs, currentProxy);
                        
                        // 验证更新后的状态
                        const newActiveId = panel.querySelector('.proxy-item.active')?.dataset.id;
                        if (currentActiveId !== newActiveId) {
                            console.log('Active state changed:', {
                                from: currentActiveId,
                                to: newActiveId
                            });
                        }
                    });
                }

                // 更新当前代理信息显示
                const activeProxyInfo = this.panel.shadowRoot?.querySelector('.active-proxy-info');
                if (activeProxyInfo) {
                    let proxyIcon = '🟢';
                    let proxyName = '直接连接';
                    
                    if (currentProxy.currentMode === 'system') {
                        proxyIcon = '⚙️';
                        proxyName = '系统代理';
                    } else if (currentProxy.currentMode === 'fixed_servers') {
                        const activeConfig = configs.find(c => c.enabled);
                        if (activeConfig) {
                            proxyIcon = activeConfig.proxyType === 'pac_script' ? '📜' : '🌐';
                            proxyName = activeConfig.name || '未命名代理';
                        }
                    }
                    
                    activeProxyInfo.innerHTML = `
                        <span>${proxyIcon}</span>
                        <span>${proxyName}</span>
                    `;
                }
            } catch (error) {
                console.error('Error updating panel:', error);
            } finally {
                this._updating = false;
            }
        }).catch(error => {
            console.error('Error in update queue:', error);
            this._updating = false;
        });

        return this._updateQueue;
    },

    // 将 HTML 构建逻辑抽离成单独的方法
    _buildPanelHtml(currentProxy, configs) {
        let html = `
            <div class="proxy-item ${currentProxy.currentMode === 'direct' ? 'active' : ''}" 
                 data-id="direct"
                 title="直接连接">
                <span>🟢</span>
                <span>直接连接</span>
                ${currentProxy.currentMode === 'direct' ? '<div class="proxy-status"></div>' : ''}
            </div>
            <div class="proxy-item ${currentProxy.currentMode === 'system' ? 'active' : ''}" 
                 data-id="system"
                 title="系统代理">
                <span>⚙️</span>
                <span>系统代理</span>
                ${currentProxy.currentMode === 'system' ? '<div class="proxy-status"></div>' : ''}
            </div>
            <div class="divider"></div>
        `;

        // 添加自定义代理配置
        configs.forEach(config => {
            if (config.proxyType !== 'direct' && config.proxyType !== 'system') {
                const isActive = currentProxy.currentMode === 'fixed_servers' && config.enabled;
                const proxyIcon = config.proxyType === 'pac_script' ? '📜' : '🌐';
                
                // 构建 title 提示信息
                let tooltipText;
                if (config.proxyType === 'pac_script') {
                    tooltipText = 'PAC Script';
                } else {
                    const scheme = config.scheme ? `${config.scheme.toUpperCase()} ` : '';
                    tooltipText = `${scheme}${config.host}:${config.port}`;
                }
                
                html += `
                    <div class="proxy-item ${isActive ? 'active' : ''}" 
                         data-id="${config.id}"
                         title="${tooltipText}">
                        <span>${proxyIcon}</span>
                        <span>${config.name || '未命名代理'}</span>
                        ${isActive ? '<div class="proxy-status"></div>' : ''}
                    </div>
                `;
            }
        });

        html += `
            <div class="divider"></div>
            <div class="action-button add-proxy">
                <span>➕</span>
                <span>添加代理</span>
            </div>
            <div class="action-button settings">
                <span>⚙️</span>
                <span>设置</span>
            </div>
        `;

        return html;
    },

    _bindEventListeners(panel, configs, currentProxy) {
        // 代理项点击事件
        panel.querySelectorAll('.proxy-item').forEach(item => {
            const id = item.dataset.id;
            
            // 使用事件委托来提高性能
            const clickHandler = async (e) => {
                e.stopPropagation();

                if (this._updating) {
                    console.log('Panel is updating, ignoring click');
                    return;
                }

                // 添加点击反馈
                const originalOpacity = item.style.opacity;
                item.style.opacity = '0.7';

                try {
                    // 立即更新 UI 状态，不等待响应
                    panel.querySelectorAll('.proxy-item').forEach(i => {
                        i.classList.remove('active');
                        i.querySelector('span').style.color = '#666';
                    });
                    item.classList.add('active');
                    item.querySelector('span').style.color = '#ff6b00';

                    if (id === 'direct') {
                        await clearProxy();
                    } else if (id === 'system') {
                        await switchProxy({
                            id: 'system',
                            name: '[系统代理]',
                            proxyType: 'system'
                        });
                    } else {
                        const config = configs.find(c => c.id === id);
                        if (config) {
                            await switchProxy(config);
                        }
                    }
                } catch (error) {
                    console.error('Error handling proxy item click:', error);
                    // 发生错误时恢复原状
                    await this.updatePanel();
                } finally {
                    item.style.opacity = originalOpacity;
                }
            };

            // 使用 { once: true } 确保事件监听器不会重复
            item.addEventListener('click', clickHandler, { once: true });
        });

        // 添加代理按钮
        panel.querySelector('.add-proxy')?.addEventListener('click', async () => {
            try {
                await sendMessageWithRetry({ 
                    action: 'OPEN_OPTIONS_PAGE',
                    triggerAdd: true
                });
            } catch (error) {
                console.error('Error handling add proxy:', error);
            }
        });

        // 设置按钮
        panel.querySelector('.settings')?.addEventListener('click', async () => {
            try {
                await sendMessageWithRetry({ 
                    action: 'OPEN_OPTIONS_PAGE'
                });
            } catch (error) {
                console.error('Error opening options page:', error);
            }
        });
    },
    
    _initDragFeature(header, panel) {
        let isDragging = false;
        let startY = 0;
        let startTop = 0;
        let rafId = null;

        const updatePosition = (e) => {
            if (!isDragging) return;
            
            const deltaY = e.clientY - startY;
            const newTop = startTop + deltaY;
            
            // 限制拖动范围在视窗内
            const maxTop = window.innerHeight - panel.offsetHeight;
            const boundedTop = Math.max(0, Math.min(newTop, maxTop));
            
            // 保持水平位置不变，只改变垂直位置
            panel.style.top = `${boundedTop}px`;
            panel.style.transform = 'translateY(0)'; // 移除默认的 translateY(-50%)
        };

        const onMouseDown = (e) => {
            // 如果点击时是展开状态，则处理展开/收起
            if (panel.classList.contains('expanded')) {
                panel.classList.remove('expanded');
                return;
            }

            if (e.button !== 0) return; // 只响应左键
            
            isDragging = true;
            startY = e.clientY;
            
            // 获取当前实际位置
            const rect = panel.getBoundingClientRect();
            startTop = rect.top;
            
            // 开始拖动时固定当前位置
            panel.style.top = `${startTop}px`;
            panel.style.transform = 'translateY(0)';
            
            // 添加拖动时的视觉反馈
            panel.style.transition = 'none';
            panel.classList.add('dragging');
            
            // 防止文本选择
            e.preventDefault();
        };
        
        const onMouseMove = (e) => {
            if (!isDragging) return;
            
            // 使用 requestAnimationFrame 优化性能
            if (rafId) cancelAnimationFrame(rafId);
            rafId = requestAnimationFrame(() => updatePosition(e));
        };
        
        const onMouseUp = () => {
            if (!isDragging) return;
            isDragging = false;
            
            // 清理
            if (rafId) {
                cancelAnimationFrame(rafId);
                rafId = null;
            }
            
            panel.classList.remove('dragging');
            panel.style.transition = '';
            
            // 保存位置
            const top = panel.getBoundingClientRect().top;
            const viewportHeight = window.innerHeight;
            const percentage = (top / viewportHeight) * 100;
            localStorage.setItem('yakitProxyPanelPosition', percentage.toString());
        };

        // 修改事件监听
        header.addEventListener('mousedown', onMouseDown);
        document.addEventListener('mousemove', onMouseMove, { passive: true });
        document.addEventListener('mouseup', onMouseUp);

        // 恢复保存的位置
        const savedPosition = localStorage.getItem('yakitProxyPanelPosition');
        if (savedPosition) {
            const top = (parseFloat(savedPosition) / 100) * window.innerHeight;
            panel.style.top = `${top}px`;
            panel.style.transform = 'translateY(0)';
        }
    },
    
    _initAutoCollapse(panel) {
        let leaveTimer = null;
        
        const onMouseLeave = () => {
            if (panel.classList.contains('expanded')) {
                leaveTimer = setTimeout(() => {
                    panel.classList.remove('expanded');
                }, 300); // 300ms 延迟，避免意外触发
            }
        };
        
        const onMouseEnter = () => {
            if (leaveTimer) {
                clearTimeout(leaveTimer);
                leaveTimer = null;
            }
        };
        
        panel.addEventListener('mouseleave', onMouseLeave);
        panel.addEventListener('mouseenter', onMouseEnter);
    }
};

// 修改初始化调用
console.log("Setting up initialization...");

// 根据文档状态决定初始化方式
if (document.readyState === 'loading') {
    console.log('Document still loading, waiting for DOMContentLoaded');
    document.addEventListener('DOMContentLoaded', () => {
        console.log('DOMContentLoaded fired');
        PanelManager.init();
    });
} else {
    console.log('Document already loaded, initializing immediately');
    PanelManager.init();
}

// 保留 load 事件作为备份
window.addEventListener('load', () => {
    console.log("Window load triggered");
    if (!PanelManager.panel) {
        PanelManager.init();
    }
});

// 添加更详细的日志
console.log("Document readyState:", document.readyState);
console.log("Document body exists:", !!document.body);
console.log("Document documentElement exists:", !!document.documentElement);