/**
 * 弹窗工厂模式 - 统一管理所有弹窗的创建和显示
 * 提取公共属性，各弹窗JS类只需加载自身特色功能
 * 支持通过简称调用弹窗，自动从常量配置获取路径信息
 */

class ModalFactory {
    constructor() {
        this.loadedModals = {}; // 缓存弹窗实例：{modalType: {modalElement, isInitialized}}
        this.modalContainer = null;
        this.isConfigLoaded = false;
        this.styleElement = null; // 用于存储动态插入的样式元素
    }
    
    // 获取弹窗配置（必须使用MODAL_TYPES枚举值）
    getModalConfig(modalType) {
        if (!window.FactoryConfig) {
            throw new Error('工厂配置未加载');
        }
        
        const config = window.FactoryConfig.getModalConfig(modalType);
        if (!config) {
            throw new Error(`未找到弹窗配置: ${modalType}`);
        }
        
        return config;
    }
    
    // 创建弹窗容器
    createModalContainer() {
        console.log('工厂创建弹窗容器');
        if (!this.modalContainer) {
            this.modalContainer = document.createElement('div');
            this.modalContainer.id = 'modalContainer';
            document.body.appendChild(this.modalContainer);
        }
        return this.modalContainer;
    }
    
    // 公共方法：绑定关闭事件（所有弹窗共用）
    bindCommonCloseEvents(modal) {
        // 查找关闭按钮
        const closeBtn = modal.querySelector('.modal-close');
        if (closeBtn) {
            const closeIcon = closeBtn.querySelector('img');
            if (closeIcon) {
                // 统一设置关闭图标
                closeIcon.src = chrome.runtime.getURL('icons/font/AliExpress_close.png');
                
                // 统一错误处理
                closeIcon.onerror = function() {
                    console.error('关闭图标加载失败');
                };
            }
            
            // 统一关闭事件
            closeBtn.onclick = () => {
                this.hideModal(modal);
            };
        }
        
        // 统一外部点击关闭
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                this.hideModal(modal);
            }
        });
    }
    
    // 公共方法：动态插入关闭按钮的CSS样式
    insertCloseButtonStyles() {
        // 检查样式元素是否已经存在
        if (this.styleElement) {
            return;
        }
        
        // 创建样式元素
        this.styleElement = document.createElement('style');
        
        // 定义关闭按钮的CSS样式
        const closeButtonStyles = `
            /* 通用关闭按钮样式 */
            .modal-close {
                background: none;
                border: none;
                cursor: pointer;
                padding: 4px;
                border-radius: 4px;
                transition: background-color 0.2s;
                position: relative;
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .modal-close:hover {
                background-color: #f0f0f0;
            }
            
            .modal-close img {
                width: 20px;
                height: 20px;
                display: block;
            }
            
            /* 针对不同弹窗类型的特定样式 */
            .pricing-modal .modal-close {
                font-size: 20px;
                color: var(--text-light);
                padding: 2px 8px;
            }
            
            .pricing-modal .modal-close:hover {
                color: var(--text-color);
                background-color: transparent;
            }
            
            .sku-pricing-modal .modal-close {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        `;
        
        // 设置样式内容
        this.styleElement.textContent = closeButtonStyles;
        
        // 添加到文档头部
        document.head.appendChild(this.styleElement);
        console.log('动态插入关闭按钮CSS样式');
    }
    
    // 公共方法：显示弹窗（所有弹窗共用）
    showModal(modal) {
        modal.style.display = 'flex';
        
        // 强制重排确保居中
        void modal.offsetWidth;
    }
    
    // 公共方法：隐藏弹窗（所有弹窗共用）
    hideModal(modal) {
        modal.style.display = 'none';
    }
    
    // 公共方法：加载HTML内容（所有弹窗共用）
    async loadHTMLContent(htmlFile) {
        console.log(`工厂加载HTML内容: ${htmlFile}`);
        const response = await fetch(chrome.runtime.getURL(htmlFile));
        return await response.text();
    }
    
    // 公共方法：加载JS文件（所有弹窗共用）
    loadScript(jsFile) {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = chrome.runtime.getURL(jsFile);
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
            console.log(`工厂加载JS文件: ${jsFile}`);
        });
    }
    
    // 工厂方法：创建弹窗（必须使用MODAL_TYPES枚举值）
    async createModal(modalType, customConfig = null) {
        console.log(`工厂创建弹窗: ${modalType}`);
        
        // 获取弹窗配置
        const config = customConfig || this.getModalConfig(modalType);
        
        // 检查是否已加载并缓存
        if (this.loadedModals[modalType] && this.loadedModals[modalType].isInitialized) {
            console.log(`弹窗已缓存并初始化，直接显示: ${modalType}`);
            const cachedModal = this.loadedModals[modalType];
            this.showModal(cachedModal.modalElement);
            return cachedModal.modalElement;
        }
        
        try {
            // 创建容器
            const container = this.createModalContainer();
            
            // 加载HTML内容
            const htmlContent = await this.loadHTMLContent(config.htmlFile);
            
            // 解析HTML内容
            const tempContainer = document.createElement('div');
            tempContainer.innerHTML = htmlContent;
            
            // 提取弹窗元素
            let modalElement = tempContainer.querySelector('.modal-overlay');
            if (!modalElement) {
                const bodyElement = tempContainer.querySelector('body');
                modalElement = bodyElement ? bodyElement : tempContainer;
            }
            
            // 创建弹窗包装器
            const modalWrapper = document.createElement('div');
            modalWrapper.id = `${modalType}ModalWrapper`;
            modalWrapper.innerHTML = modalElement.outerHTML;
            container.appendChild(modalWrapper);
            
            // 获取弹窗DOM元素
            const modal = document.getElementById(config.modalId);
            if (!modal) {
                throw new Error(`弹窗元素未找到: ${config.modalId}`);
            }
            
            // 绑定公共关闭事件
            this.bindCommonCloseEvents(modal);
            
            // 动态插入关闭按钮的CSS样式
            this.insertCloseButtonStyles();
            
            // JS文件已通过content_scripts加载，无需动态注入
            // await this.loadScript(config.jsFile);
            
            // 缓存弹窗实例
            this.loadedModals[modalType] = {
                modalElement: modal,
                isInitialized: false
            };
            
            // 调用对应的初始化函数（工厂类每次调用弹窗时调用主JS方法的initModal）
            const initFunctionName = `init${modalType.charAt(0).toUpperCase() + modalType.slice(1)}Modal`;
            
            console.log(`工厂检查初始化函数是否存在: ${initFunctionName}`);
            // 等待JS文件完全执行，确保初始化函数已注册到全局作用域
            await new Promise((resolve) => {
                const checkFunction = () => {
                    if (window[initFunctionName]) {
                        console.log(`工厂调用弹窗初始化函数: ${initFunctionName}`);
                        window[initFunctionName]();
                        this.loadedModals[modalType].isInitialized = true;
                        console.log(`弹窗初始化完成: ${modalType}`);
                        resolve();
                    } else {
                        // 如果函数还未注册，等待一段时间后重试
                        setTimeout(checkFunction, 100);
                    }
                };
                
                // 立即开始检查
                checkFunction();
            });
            
            // 显示弹窗
            this.showModal(modal);
            
            console.log(`弹窗创建并缓存成功: ${modalType}`);
            return modal;
            
        } catch (error) {
            console.error(`弹窗创建失败: ${modalType}`, error);
            throw error;
        }
    }
    
    // 简化调用方法：通过枚举类型创建弹窗
    async showModalByType(modalType) {
        return await this.createModal(modalType);
    }
    
    // 获取所有可用的弹窗类型枚举值
    async getAvailableModalTypes() {
        return window.FactoryConfig ? window.FactoryConfig.getAvailableModalTypes() : {};
    }
    
    // 检查弹窗是否存在（必须使用MODAL_TYPES枚举值）
    async hasModal(modalType) {
        return window.FactoryConfig ? window.FactoryConfig.hasModal(modalType) : false;
    }
}

// 导出工厂类
window.ModalFactory = ModalFactory;