class ImportDialog extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.data = [];
        this.products = [];
        this.atas = [];
    }

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

    // 接收父组件传递的选项数据
    setOptions(products, atas) {
        this.products = products;
        this.atas = atas;
        this.updateProductOptions();
        this.updateAtaOptions();
    }

    updateProductOptions() {
        const select = this.shadowRoot.querySelector('#product-select');
        select.innerHTML = `
            <option value="">请选择构型</option>
            ${this.products.map(product => `
                <option value="${product}">${product}</option>
            `).join('')}
        `;
    }

    updateAtaOptions() {
        const select = this.shadowRoot.querySelector('#ata-select');
        select.innerHTML = `
            <option value="">请选择ATA章节</option>
            ${this.atas.map(ata => `
                <option value="${ata}">${ata}</option>
            `).join('')}
        `;
    }

    show(data) {
        this.data = data;
        this.updateTable();
        this.style.display = 'block';
    }

    hide() {
        this.style.display = 'none';
    }

    updateTable() {
        const tbody = this.shadowRoot.querySelector('tbody');
        const lowercaseCheckbox = this.shadowRoot.querySelector('#lowercase-checkbox');
        const shouldLowercase = lowercaseCheckbox.checked;
        
        tbody.innerHTML = this.data.map(item => `
            <tr>
                <td>${shouldLowercase ? item.name.toLowerCase() : item.name}</td>
                <td>${item.variableType || '-'}</td>
                <td>${item.structName}</td>
                <td>${item.isArray ? '是' : '否'}</td>
                <td>${item.arraySize1 || '-'}</td>
                <td>${item.arraySize2 || '-'}</td>
                <td>${item.description}</td>
            </tr>
        `).join('');
    }

    addEventListeners() {
        const closeBtn = this.shadowRoot.querySelector('.close-btn');
        const confirmBtn = this.shadowRoot.querySelector('.confirm-btn');
        const cancelBtn = this.shadowRoot.querySelector('.cancel-btn');
        const lowercaseCheckbox = this.shadowRoot.querySelector('#lowercase-checkbox');

        closeBtn.addEventListener('click', () => this.hide());
        cancelBtn.addEventListener('click', () => this.hide());
        
        // 添加小写复选框的事件监听
        lowercaseCheckbox.addEventListener('change', () => {
            this.updateTable();
        });

        confirmBtn.addEventListener('click', () => {
            const productSelect = this.shadowRoot.querySelector('#product-select');
            const ataSelect = this.shadowRoot.querySelector('#ata-select');
            const modelInput = this.shadowRoot.querySelector('#model-input');

            if (!productSelect.value) {
                alert('请选择构型');
                return;
            }
            if (!ataSelect.value) {
                alert('请选择ATA章节');
                return;
            }
            if (!modelInput.value.trim()) {
                alert('请输入模型名称');
                return;
            }

            const modelName = modelInput.value.trim();
            
            // 处理数据，转换为数据库格式
            const processedData = this.data.map(item => ({
                SystemName: 'XNSim', // 系统名称固定为XNSim
                ProductName: productSelect.value,
                ATAName: ataSelect.value,
                ModelStructName: `${modelName}_${item.structName}`,
                InterfaceName: lowercaseCheckbox.checked ? item.name.toLowerCase() : item.name,
                InterfaceType: item.variableType || '',
                InterfaceOption: 1,
                InterfaceIsArray: item.isArray ? 1 : 0,  // 确保是数字类型
                InterfaceArraySize_1: item.arraySize1 || 0,  // 确保是数字类型
                InterfaceArraySize_2: item.arraySize2 || 0,  // 确保是数字类型
                InterfaceNotes: item.description || ''  // 确保不是null
            }));

            // 验证数据
            const invalidData = processedData.find(item => {
                return !item.InterfaceType || 
                       (item.InterfaceIsArray === 1 && (!item.InterfaceArraySize_1 || item.InterfaceArraySize_1 <= 1));
            });

            if (invalidData) {
                alert('数据格式不正确，请检查：\n1. 变量类型不能为空\n2. 如果是数组，第一维大小必须大于1');
                return;
            }

            this.dispatchEvent(new CustomEvent('confirm-import', {
                detail: processedData,
                bubbles: true,
                composed: true
            }));
            this.hide();
        });
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: none;
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.5);
                    z-index: 1000;
                }

                .dialog {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: white;
                    padding: 20px;
                    border-radius: 8px;
                    min-width: 800px;
                    max-width: 90%;
                    max-height: 90vh;
                    display: flex;
                    flex-direction: column;
                }

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

                .title {
                    font-size: 1.2em;
                    font-weight: bold;
                }

                .close-btn {
                    background: none;
                    border: none;
                    font-size: 1.5em;
                    cursor: pointer;
                    padding: 0;
                    color: #666;
                }

                .options {
                    margin-bottom: 20px;
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 16px;
                }

                .option-group {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                }

                .option-group label {
                    font-weight: bold;
                }

                select, input[type="text"] {
                    padding: 8px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    font-size: 14px;
                }

                .checkbox-group {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    margin-top: 24px;
                }

                .content {
                    flex: 1;
                    overflow: auto;
                    margin-bottom: 20px;
                }

                table {
                    width: 100%;
                    border-collapse: collapse;
                }

                th, td {
                    border: 1px solid #ddd;
                    padding: 8px;
                    text-align: left;
                }

                th {
                    background-color: #f5f5f5;
                    position: sticky;
                    top: 0;
                }

                .footer {
                    display: flex;
                    justify-content: flex-end;
                    gap: 10px;
                }

                button {
                    padding: 8px 16px;
                    border-radius: 4px;
                    border: none;
                    cursor: pointer;
                }

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

                .cancel-btn {
                    background-color: #f44336;
                    color: white;
                }
            </style>
            <div class="dialog">
                <div class="header">
                    <div class="title">导入数据预览</div>
                    <button class="close-btn">&times;</button>
                </div>
                <div class="options">
                    <div class="option-group">
                        <label for="product-select">构型</label>
                        <select id="product-select">
                            <option value="">请选择构型</option>
                        </select>
                    </div>
                    <div class="option-group">
                        <label for="ata-select">ATA章节</label>
                        <select id="ata-select">
                            <option value="">请选择ATA章节</option>
                        </select>
                    </div>
                    <div class="option-group">
                        <label for="model-input">模型名称</label>
                        <input type="text" id="model-input" placeholder="请输入模型名称">
                    </div>
                    <div class="option-group">
                        <div class="checkbox-group">
                            <input type="checkbox" id="lowercase-checkbox">
                            <label for="lowercase-checkbox">小写所有变量名</label>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <table>
                        <thead>
                            <tr>
                                <th>变量名称</th>
                                <th>变量类型</th>
                                <th>结构体</th>
                                <th>是否数组</th>
                                <th>第一维大小</th>
                                <th>第二维大小</th>
                                <th>描述</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <div class="footer">
                    <button class="confirm-btn">确认导入</button>
                    <button class="cancel-btn">取消</button>
                </div>
            </div>
        `;
    }
}

customElements.define('import-dialog', ImportDialog);