class InterfaceToolbar extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.showAdvancedSearch = false;
    }

    static get idlImportGuide() {
        return `
1. 支持从IDL文件(.idl)导入接口数据

2. IDL文件格式规范：
   module XNSim {
       // 机型名称
       module C909 {
           // ATA章节名称
           module ATAxx {
               // 输入结构体名称
               struct InputStrName { 
                   @optional 变量类型 变量名称;
                   ...
               }
               // 输出结构体名称
               struct OutputStrName { 
                   @optional 变量类型 变量名称;
                   ...
               }
               ...
           }
       }
   }

3. 导入过程中请勿关闭页面`;
    }

    static get icdImportGuide() {
        return `
1. 支持从Excel文件(.xlsx/.xls)导入接口数据

2. 请确保Excel文件具有Inputs和Outputs两个工作表

3. Inputs工作表必须包含以下几列：
   Input Variable Name
   Variable Type
   Description
   Variable Dimensions

4. Outputs工作表必须包含以下几列：
   Output Variable Name
   Variable Type
   Description
   Variable Dimensions

5. 导入过程中请勿关闭页面`;
    }

    connectedCallback() {
        this.render();
        this.addEventListeners();
    }

    addEventListeners() {
        const addBtn = this.shadowRoot.querySelector('.add-btn');
        const deleteBtn = this.shadowRoot.querySelector('.delete-btn');
        const importBtn = this.shadowRoot.querySelector('.import-btn');
        const codegenBtn = this.shadowRoot.querySelector('.codegen-btn');
        const searchInput = this.shadowRoot.querySelector('.search-input');
        const searchBtn = this.shadowRoot.querySelector('.search-btn');
        const resetBtn = this.shadowRoot.querySelector('.reset-btn');
        const advancedSearchBtn = this.shadowRoot.querySelector('.advanced-search-btn');
        const advancedSearchPanel = this.shadowRoot.querySelector('.advanced-search-panel');
        const ataSelect = this.shadowRoot.querySelector('#filterAta');
        const structSelect = this.shadowRoot.querySelector('#filterStruct');
        const importModal = this.shadowRoot.querySelector('#importModal');
        const importExcelBtn = this.shadowRoot.querySelector('#importExcelBtn');
        const importIdlBtn = this.shadowRoot.querySelector('#importIdlBtn');
        const cancelImportBtn = this.shadowRoot.querySelector('#cancelImportBtn');

        addBtn.addEventListener('click', () => {
            this.dispatchEvent(new CustomEvent('add-variable'));
        });

        deleteBtn.addEventListener('click', () => {
            this.dispatchEvent(new CustomEvent('delete-variable'));
        });

        importBtn.addEventListener('click', () => {
            importModal.style.display = 'block';
        });

        codegenBtn.addEventListener('click', async () => {
            // 获取当前构型ID和构型名称
            const savedSelection = localStorage.getItem('xnsim-selection');
            if (!savedSelection) {
                alert('请先选择构型');
                return;
            }
            let selection;
            try {
                selection = JSON.parse(savedSelection);
            } catch (e) {
                alert('构型信息解析失败');
                return;
            }
            const configurationId = selection.configurationId;
            if (!configurationId) {
                alert('请先选择构型');
                return;
            }
            
            this.showCodegenMask('准备生成代码...', 0);

            // 步骤配置
            const steps = [
                { url: '/api/interface-gen/step1', msg: '初始化接口生成参数...', body: { configID: configurationId } },
                { url: '/api/interface-gen/step2', msg: '获取接口数据...' },
                { url: '/api/interface-gen/step3', msg: '创建构型接口目录...' },
                { url: '/api/interface-gen/step4', msg: '生成IDL文件...' },
                { url: '/api/interface-gen/step5', msg: '生成FastDDS接口代码...' },
                { url: '/api/interface-gen/step6', msg: '生成DDS接口代码...' },
                { url: '/api/interface-gen/step7', msg: '生成CMakeLists文件...' },
                { url: '/api/interface-gen/step8', msg: 'CMake构建并安装...' },
                { url: '/api/interface-gen/step9', msg: '执行sudo ldconfig...' }
            ];
            let success = true;
            for (let i = 0; i < steps.length; i++) {
                const step = steps[i];
                const percent = Math.round((i / steps.length) * 100);
                this.updateCodegenProgress(step.msg, percent);
                try {
                    let response;
                    if (step.body) {
                        response = await fetch(step.url, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify(step.body)
                        });
                    } else {
                        response = await fetch(step.url, { method: 'POST' });
                    }
                    const result = await response.json();
                    if (!result.success) {
                        this.updateCodegenProgress(`❌ ${step.msg} 失败：${result.message}`, percent);
                        success = false;
                        break;
                    } else {
                        this.updateCodegenProgress(`✅ ${step.msg} 完成`, percent + 1);
                    }
                } catch (err) {
                    this.updateCodegenProgress(`❌ ${step.msg} 异常：${err.message}`, percent);
                    success = false;
                    break;
                }
                await new Promise(r => setTimeout(r, 400));
            }
            if (success) {
                this.updateCodegenProgress('🎉 代码生成全部完成！', 100);
                await new Promise(r => setTimeout(r, 400));
            }
            setTimeout(() => {
                this.hideCodegenMask();
                if (success) {
                    alert('代码生成全部完成！');
                } else {
                    alert('代码生成失败，请检查进度提示！');
                }
            }, 800);
        });

        importExcelBtn.addEventListener('click', () => {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.xlsx,.xls';
            input.onchange = (e) => {
                const file = e.target.files[0];
                if (file) {
                    this.dispatchEvent(new CustomEvent('import-data', {
                        detail: { file, type: 'excel' }
                    }));
                    importModal.style.display = 'none';
                }
            };
            input.click();
        });

        importIdlBtn.addEventListener('click', () => {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.idl';
            input.onchange = (e) => {
                const file = e.target.files[0];
                if (file) {
                    this.dispatchEvent(new CustomEvent('import-data', {
                        detail: { file, type: 'idl' }
                    }));
                    importModal.style.display = 'none';
                }
            };
            input.click();
        });

        cancelImportBtn.addEventListener('click', () => {
            importModal.style.display = 'none';
        });

        // 点击模态框外部关闭
        importModal.addEventListener('click', (e) => {
            if (e.target === importModal) {
                importModal.style.display = 'none';
            }
        });

        searchBtn.addEventListener('click', () => {
            const keyword = searchInput.value.trim();
            this.dispatchEvent(new CustomEvent('search', {
                detail: { keyword }
            }));
        });

        resetBtn.addEventListener('click', () => {
            // 重置搜索框
            searchInput.value = '';
            // 重置高级搜索下拉框
            ataSelect.value = '';
            structSelect.value = '';
            // 触发重置事件
            this.dispatchEvent(new CustomEvent('reset-search'));
        });

        advancedSearchBtn.addEventListener('click', () => {
            this.showAdvancedSearch = !this.showAdvancedSearch;
            advancedSearchPanel.style.display = this.showAdvancedSearch ? 'flex' : 'none';
            advancedSearchBtn.classList.toggle('active');
        });

        // 监听高级搜索的筛选条件变化
        [ataSelect, structSelect].forEach(select => {
            select.addEventListener('change', () => {
                this.dispatchEvent(new CustomEvent('advanced-search', {
                    detail: {
                        ataName: ataSelect.value,
                        structName: structSelect.value
                    }
                }));
            });
        });
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                .toolbar {
                    display: flex;
                    gap: 10px;
                    align-items: center;
                    padding: 10px;
                    background-color: #f5f5f5;
                    border-radius: 4px;
                }

                .toolbar-group {
                    display: flex;
                    gap: 10px;
                    align-items: center;
                }

                .toolbar-group.left {
                    flex: 1;
                }

                .toolbar-group.center {
                    display: flex;
                    gap: 10px;
                    align-items: center;
                }

                .toolbar-group.right {
                    flex: 1;
                    justify-content: flex-end;
                }

                .search-group {
                    display: flex;
                    align-items: center;
                    gap: 5px;
                }

                .search-input {
                    padding: 6px 10px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    width: 200px;
                }

                .btn {
                    padding: 6px 12px;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    gap: 5px;
                    background-color: #fff;
                    color: #333;
                }

                .btn img {
                    width: 16px;
                    height: 16px;
                }

                .btn:hover {
                    background-color: #f0f0f0;
                }

                .add-btn {
                    background-color: #4CAF50;
                    color: white;
                }

                .add-btn:hover {
                    background-color: #45a049;
                }

                .delete-btn {
                    background-color: #f44336;
                    color: white;
                }

                .delete-btn:hover {
                    background-color: #da190b;
                }

                .import-btn {
                    background-color: #2196F3;
                    color: white;
                }

                .import-btn:hover {
                    background-color: #1976D2;
                }

                .codegen-btn {
                    background-color: #2196F3;
                    color: white;
                }

                .codegen-btn:hover {
                    background-color: #1976D2;
                }

                .icon-btn {
                    padding: 6px;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    background: none;
                    color: #666;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .icon-btn img {
                    width: 16px;
                    height: 16px;
                }

                .icon-btn:hover {
                    background-color: #e0e0e0;
                }

                .advanced-search-btn {
                    padding: 6px 12px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    cursor: pointer;
                    background-color: #fff;
                }

                .advanced-search-btn.active {
                    background-color: #e0e0e0;
                }

                .advanced-search-panel {
                    display: none;
                    gap: 10px;
                    padding: 10px;
                    background-color: #f5f5f5;
                    border-radius: 4px;
                    margin-top: 10px;
                }

                .advanced-search-panel select {
                    padding: 6px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    min-width: 150px;
                }

                .modal {
                    display: none;
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.5);
                    z-index: 1000;
                }

                .modal-content {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background-color: white;
                    padding: 20px;
                    border-radius: 8px;
                    width: 1000px;
                    max-width: 95%;
                }

                .modal-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 20px;
                }

                .modal-title {
                    font-size: 18px;
                    font-weight: bold;
                }

                .modal-body {
                    display: flex;
                    gap: 30px;
                }

                .import-section {
                    flex: 1;
                    padding: 20px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    min-width: 450px;
                }

                .import-section h3 {
                    margin-top: 0;
                    margin-bottom: 15px;
                }

                .import-btn-section {
                    margin-bottom: 15px;
                }

                .import-description {
                    font-size: 14px;
                    color: #666;
                    line-height: 1.5;
                }

                .import-description pre {
                    font-family: 'Courier New', Courier, monospace;
                    background-color: #f8f9fa;
                    padding: 20px;
                    border-radius: 4px;
                    white-space: pre-wrap;
                    line-height: 1.6;
                    color: #333;
                    margin: 0;
                }

                .modal-footer {
                    margin-top: 20px;
                    text-align: right;
                }

                .cancel-btn {
                    padding: 8px 16px;
                    border: none;
                    border-radius: 4px;
                    background-color: #f5f5f5;
                    color: #333;
                    cursor: pointer;
                }

                .cancel-btn:hover {
                    background-color: #e0e0e0;
                }

                .codegen-mask {
                    display: none;
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100vw;
                    height: 100vh;
                    background: rgba(80,80,80,0.3);
                    z-index: 9999;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    font-size: 22px;
                    color: #333;
                    user-select: none;
                }

                .codegen-mask.show {
                    display: flex;
                }

                .codegen-progress {
                    background: #fff;
                    border-radius: 8px;
                    padding: 32px 48px;
                    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
                    font-size: 20px;
                    color: #333;
                    min-width: 300px;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }

                .progress-bar-container {
                    width: 320px;
                    margin-top: 32px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }

                .progress-bar-bg {
                    width: 100%;
                    height: 18px;
                    background: #eee;
                    border-radius: 9px;
                    overflow: hidden;
                    margin-bottom: 8px;
                }

                .progress-bar-fill {
                    height: 100%;
                    background: linear-gradient(90deg, #2196F3 0%, #4CAF50 100%);
                    border-radius: 9px 0 0 9px;
                    transition: width 0.3s;
                }

                .progress-bar-text {
                    font-size: 16px;
                    color: #2196F3;
                    font-weight: bold;
                }
            </style>
            <div class="toolbar">
                <div class="toolbar-group left">
                    <button class="btn add-btn">
                        <img src="assets/icons/png/plus.png" alt="添加">
                        添加变量
                    </button>
                    <button class="btn delete-btn">
                        <img src="assets/icons/png/delete.png" alt="删除">
                        删除变量
                    </button>
                </div>
                <div class="toolbar-group center">
                    <button class="btn import-btn">
                        <img src="assets/icons/png/upload.png" alt="导入">
                        导入数据
                    </button>
                    <button class="btn codegen-btn">
                        <img src="assets/icons/png/code.png" alt="代码生成">
                        代码生成
                    </button>
                </div>
                <div class="toolbar-group right">
                    <div class="search-group">
                        <input type="text" class="search-input" placeholder="搜索接口名称...">
                        <button class="icon-btn search-btn" title="搜索">
                            <img src="assets/icons/png/search_b.png" alt="搜索">
                        </button>
                        <button class="icon-btn reset-btn" title="重置">
                            <img src="assets/icons/png/refresh_b.png" alt="重置">
                        </button>
                        <button class="advanced-search-btn">高级搜索</button>
                    </div>
                </div>
            </div>
            <div class="codegen-mask" id="codegenMask">
                <div class="codegen-progress" id="codegenProgress">
                    <div id="codegenMsg">代码生成中，请稍候...</div>
                    <div class="progress-bar-container">
                        <div class="progress-bar-bg">
                            <div class="progress-bar-fill" id="codegenProgressBar" style="width:0%"></div>
                        </div>
                        <div class="progress-bar-text" id="codegenProgressText">0%</div>
                    </div>
                </div>
            </div>
            <div class="advanced-search-panel">
                <select id="filterAta">
                    <option value="">选择ATA章节</option>
                </select>
                <select id="filterStruct">
                    <option value="">选择接口结构体</option>
                </select>
            </div>
            <div class="modal" id="importModal">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="modal-title">导入数据</div>
                    </div>
                    <div class="modal-body">
                        <div class="import-section">
                            <h3>从ICD导入</h3>
                            <div class="import-btn-section">
                                <button class="btn import-btn" id="importExcelBtn">
                                    <img src="assets/icons/png/excel.png" alt="Excel">
                                    选择Excel文件
                                </button>
                            </div>
                            <div class="import-description">
                                <pre>${InterfaceToolbar.icdImportGuide}</pre>
                            </div>
                        </div>
                        <div class="import-section">
                            <h3>从IDL导入</h3>
                            <div class="import-btn-section">
                                <button class="btn import-btn" id="importIdlBtn">
                                    <img src="assets/icons/png/code.png" alt="IDL">
                                    选择IDL文件
                                </button>
                            </div>
                            <div class="import-description">
                                <pre>${InterfaceToolbar.idlImportGuide}</pre>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="cancel-btn" id="cancelImportBtn">取消</button>
                    </div>
                </div>
            </div>
        `;
    }

    updateFilterOptions(options) {
        const ataSelect = this.shadowRoot.querySelector('#filterAta');
        const structSelect = this.shadowRoot.querySelector('#filterStruct');

        // 更新ATA章节选项
        ataSelect.innerHTML = '<option value="">选择ATA章节</option>' +
            options.atas.map(ata => `<option value="${ata}">${ata}</option>`).join('');

        // 更新接口结构体选项
        structSelect.innerHTML = '<option value="">选择接口结构体</option>' +
            options.structs.map(struct => `<option value="${struct}">${struct}</option>`).join('');
    }

    showCodegenMask(msg = '代码生成中，请稍候...', percent = 0) {
        const mask = this.shadowRoot.getElementById('codegenMask');
        const msgDiv = this.shadowRoot.getElementById('codegenMsg');
        const bar = this.shadowRoot.getElementById('codegenProgressBar');
        const text = this.shadowRoot.getElementById('codegenProgressText');
        if (mask && msgDiv && bar && text) {
            msgDiv.textContent = msg;
            bar.style.width = `${percent}%`;
            text.textContent = `${percent}%`;
            mask.classList.add('show');
        }
    }

    updateCodegenProgress(msg, percent) {
        const msgDiv = this.shadowRoot.getElementById('codegenMsg');
        const bar = this.shadowRoot.getElementById('codegenProgressBar');
        const text = this.shadowRoot.getElementById('codegenProgressText');
        if (msgDiv && bar && text) {
            if (msg !== undefined) msgDiv.textContent = msg;
            if (percent !== undefined) {
                bar.style.width = `${percent}%`;
                text.textContent = `${percent}%`;
            }
        }
    }

    hideCodegenMask() {
        const mask = this.shadowRoot.getElementById('codegenMask');
        if (mask) {
            mask.classList.remove('show');
        }
    }
}

customElements.define('interface-toolbar', InterfaceToolbar);