/**
 * 模型配置组件
 * @type {module}
 */
import {
    formatXml, escapeHtml, isValidElementName
} from './model-config/utils.js';

import {
    loadModelFiles as apiLoadModelFiles,
    loadFileContent as apiLoadFileContent,
    saveFileContent as apiSaveFileContent,
    createNewConfig as apiCreateNewConfig,
    saveFileAs as apiSaveFileAs
} from './model-config/api.js';

import {
    parseXmlContent, updateXmlFromVisualEditor, ensureCommandListFormat,
    updateElementByPath, updateElementValue, addElement, deleteElement
} from './model-config/xml-handler.js';

import {
    renderBasicInfoSection, renderAdvancedSection, renderElements, renderOtherSettingsSection
} from './model-config/ui-elements.js';

import {
    renderCommandListTable, renderCommandList
} from './model-config/command-handler.js';

import {
    showDateTimeDialog
} from './model-config/datetime.js';

import {
    showAddElementDialog, showEditElementDialog, showNewConfigDialog,
    showSaveAsDialog, showAddCommandDialog, showEditCommandDialog
} from './model-config/dialogs.js';

import {
    getStyles
} from './model-config/styles.js';

class ModelConfig extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.selectedFile = null;
        this.xmlContent = '';
        this.xmlDoc = null;
        this.isEdited = false;
        this.modelFiles = [];
        this.isActive = true; // 添加活动状态标记
    }

    async connectedCallback() {
        this.isActive = true;
        this.render();
        await this.loadModelFiles();
        this.setupEventListeners();
        
        // 延迟调用renderComplete，确保DOM已更新
        setTimeout(() => {
            this.renderComplete();
        }, 100);
    }
    
    disconnectedCallback() {
        this.isActive = false;
    }
    
    // 在组件完成渲染后恢复状态（与run-env-config组件一致）
    renderComplete() {
        // 在DOM渲染完成后更新文件选择器
        setTimeout(() => {
            // 如果有选中的文件，尝试恢复它
            if (this.selectedFile && (this.xmlContent || this.xmlDoc)) {
                const fileSelector = this.shadowRoot.getElementById('fileSelector');
                if (fileSelector) {
                    // 确认文件在列表中
                    const fileExists = Array.from(fileSelector.options).some(opt => opt.value === this.selectedFile);
                    
                    if (fileExists) {
                        // 设置选中的文件
                        fileSelector.value = this.selectedFile;
                        
                        // 更新内容显示
                        const contentArea = this.shadowRoot.querySelector('#contentArea');
                        if (contentArea && this.xmlDoc) {
                            contentArea.innerHTML = `
                                <div class="editor-container">
                                    <div class="editor-panel active" id="visualEditor"></div>
                                </div>
                            `;
                            
                            const visualEditor = this.shadowRoot.querySelector('#visualEditor');
                            if (visualEditor) {
                                this.renderVisualEditor(visualEditor, this.xmlDoc);
                                
                                // 恢复编辑状态标记
                                if (this.isEdited) {
                                    this.markEdited();
                                }
                            }
                        } else {
                            console.log('ModelConfig: 无法找到内容区域或XML文档不存在');
                        }
                    } else {
                        // 文件不存在，清除状态
                        this.selectedFile = null;
                        this.xmlContent = '';
                        this.xmlDoc = null;
                        this.isEdited = false;
                    }
                } else {
                    console.log('ModelConfig: 未找到文件选择器');
                }
            }
        }, 50); // 增加延迟确保DOM已经完全加载
    }

    // 重新激活组件的方法（当标签页重新被选中时调用）
    async reactivate() {
        if (this.isActive) {
            return;
        }
        
        this.isActive = true;
        
        try {
            // 先重新渲染一次UI以确保Shadow DOM结构完整
            this.render();
            
            // 加载文件列表
            await this.loadModelFiles();
            
            // 设置事件监听器
            this.setupEventListeners();
            
            // 调用renderComplete来恢复状态（这是核心改进）
            this.renderComplete();
        } catch (error) {
            console.error('ModelConfig: 重新激活组件时出错:', error);
        }
    }

    async loadModelFiles() {
        try {
            this.modelFiles = await apiLoadModelFiles();
            this.updateFileSelector();
        } catch (error) {
            console.error('加载模型文件失败:', error);
            
            // 如果请求失败，可能是API不存在，等待一段时间后重试
            const retryLoadFiles = async () => {
                try {
                    console.log('尝试重新加载模型文件列表...');
                    this.modelFiles = await apiLoadModelFiles();
                    this.updateFileSelector();
                } catch (retryError) {
                    console.error('重试加载模型文件失败:', retryError);
                }
            };

            // 延迟3秒后重试
            setTimeout(retryLoadFiles, 3000);
        }
    }

    updateFileSelector() {
        const fileSelector = this.shadowRoot.getElementById('fileSelector');
        if (!fileSelector) return;

        // 清空现有选项
        fileSelector.innerHTML = '<option value="">-- 选择模型配置文件 --</option>';

        // 按修改时间排序，最新的在前面
        const sortedFiles = [...this.modelFiles].sort((a, b) => 
            new Date(b.mtime) - new Date(a.mtime)
        );

        // 添加文件到选择器
        sortedFiles.forEach(file => {
            const option = document.createElement('option');
            option.value = file.path;
            option.textContent = file.name;
            fileSelector.appendChild(option);
        });
    }

    async loadFileContent(filePath) {
        try {
            const content = await apiLoadFileContent(filePath);
            this.selectedFile = filePath;
            this.xmlContent = content;
            
            // 解析XML内容
            const { xmlDoc, error, basicXml } = parseXmlContent(content);
            
            if (error && !basicXml) {
                // 显示错误信息
                const configContent = this.shadowRoot.querySelector('.config-content');
                configContent.innerHTML = `
                    <div class="error-message">
                        <h3>XML解析错误</h3>
                        <p>文件内容不是有效的XML格式。</p>
                        <pre>${escapeHtml(content)}</pre>
                    </div>
                `;
                return;
            }
            
            this.xmlDoc = xmlDoc;
            
            if (basicXml) {
                this.xmlContent = basicXml;
            }
            
            // 特殊处理CommandList元素，确保命令以属性方式存储
            ensureCommandListFormat(this.xmlDoc);
            
            this.updateFileContent();
            this.resetEditState();
        } catch (error) {
            console.error('加载文件内容失败:', error);
            const configContent = this.shadowRoot.querySelector('.config-content');
            configContent.innerHTML = `
                <div class="error-message">
                    <h3>加载失败</h3>
                    <p>${error.message}</p>
                </div>
            `;
        }
    }

    updateFileContent() {
        const contentArea = this.shadowRoot.querySelector('#contentArea');
        
        if (!this.xmlDoc || !this.selectedFile) {
            contentArea.innerHTML = `<div class="no-file-selected">请选择一个模型配置文件查看内容</div>`;
            return;
        }
        
        contentArea.innerHTML = `
            <div class="editor-container">
                <div class="editor-panel active" id="visualEditor"></div>
            </div>
        `;
        
        const visualEditor = this.shadowRoot.querySelector('#visualEditor');
        this.renderVisualEditor(visualEditor, this.xmlDoc);
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>${getStyles()}</style>
            <div class="config-container">
                <div class="config-header">
                    <div class="file-selector-header">
                        <div class="file-selector-label">模型配置文件：</div>
                        <select id="fileSelector">
                            <option value="">-- 请选择模型配置文件 --</option>
                        </select>
                        <button class="refresh-button" id="refreshFiles" title="刷新文件列表"></button>
                    </div>
                    <div class="action-buttons">
                        <button class="action-button" id="newConfig">新建</button>
                        <button class="action-button save-button" id="saveConfig">保存</button>
                        <button class="action-button" id="saveAsConfig">另存为</button>
                    </div>
                </div>
                <div class="config-content">
                    <div id="contentArea">
                        <div class="no-file-selected">请选择一个模型配置文件查看内容</div>
                    </div>
                </div>
            </div>
        `;
    }

    setupEventListeners() {
        // 文件选择器
        const fileSelector = this.shadowRoot.getElementById('fileSelector');
        fileSelector.addEventListener('change', async (e) => {
            const filePath = e.target.value;
            if (filePath) {
                // 检查是否需要保存当前文件
                if (await this.checkSaveNeeded()) {
                    this.loadFileContent(filePath);
                } else {
                    // 如果用户取消或保存失败，恢复选择器的值
                    fileSelector.value = this.selectedFile || '';
                }
            }
        });
        
        // 刷新文件列表
        const refreshButton = this.shadowRoot.getElementById('refreshFiles');
        refreshButton.addEventListener('click', async () => {
            // 检查是否需要保存当前文件
            if (await this.checkSaveNeeded()) {
                refreshButton.classList.add('refreshing');
                try {
                    // 重新加载文件列表
                    await this.loadModelFiles();
                    
                    // 清除编辑状态和内容
                    this.resetEditState();
                    
                    // 清空内容区域
                    this.xmlContent = '';
                    this.xmlDoc = null;
                    
                    const contentArea = this.shadowRoot.querySelector('#contentArea');
                    if (contentArea) {
                        contentArea.innerHTML = `<div class="no-file-selected">请选择一个模型配置文件查看内容</div>`;
                    }
                    
                    // 清空文件选择
                    const fileSelector = this.shadowRoot.getElementById('fileSelector');
                    if (fileSelector) {
                        fileSelector.value = '';
                    }
                    
                    // 重置选中的文件
                    this.selectedFile = null;
                } catch (error) {
                    console.error('刷新文件列表失败:', error);
                    alert('刷新文件列表失败: ' + error.message);
                } finally {
                    // 无论成功失败，都移除刷新动画
                    setTimeout(() => {
                        refreshButton.classList.remove('refreshing');
                    }, 500);
                }
            }
            // 如果用户点击取消，什么也不做，保留当前内容
        });
        
        // 新建配置
        const newButton = this.shadowRoot.getElementById('newConfig');
        newButton.addEventListener('click', async () => {
            // 检查是否需要保存当前文件
            if (await this.checkSaveNeeded()) {
                showNewConfigDialog(async (result) => {
                    await this.loadModelFiles();
                    await this.loadFileContent(result.path);
                }, this);
            }
        });
        
        // 保存配置
        const saveButton = this.shadowRoot.getElementById('saveConfig');
        saveButton.addEventListener('click', async () => {
            if (!this.selectedFile) {
                alert('请先选择一个文件或创建新文件');
                return;
            }
            
            await this.saveCurrentFile();
        });
        
        // 另存为
        const saveAsButton = this.shadowRoot.getElementById('saveAsConfig');
        saveAsButton.addEventListener('click', () => {
            if (!this.xmlContent) {
                alert('没有内容可保存');
                return;
            }
            
            showSaveAsDialog(this.xmlContent, this.selectedFile, async (result) => {
                this.selectedFile = result.path;
                this.resetEditState();
                await this.loadModelFiles();
            }, this);
        });
    }

    renderVisualEditor(container, xmlDoc) {
        if (!xmlDoc || !container) return;
        
        // 添加样式
        const style = document.createElement('style');
        style.textContent = `
            .visual-editor {
                padding: 10px;
            }
            
            .section-title {
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 10px;
                color: #333;
                border-bottom: 1px solid #e0e0e0;
                padding-bottom: 8px;
            }
            
            .section {
                margin-bottom: 20px;
                background-color: white;
                border: 1px solid #e0e0e0;
                border-radius: 4px;
                padding: 16px;
            }
            
            .property-row {
                display: flex;
                margin-bottom: 12px;
                align-items: center;
            }
            
            .property-label {
                width: 150px;
                font-weight: 500;
                color: #555;
            }
            
            .property-input {
                flex: 1;
                padding: 8px 10px;
                border: 1px solid #ddd;
                border-radius: 4px;
                font-size: 14px;
            }
            
            .property-input:focus {
                border-color: #7986E7;
                outline: none;
                box-shadow: 0 0 0 2px rgba(121, 134, 231, 0.2);
            }
            
            .section-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 15px;
            }
            
            .section-title-text {
                font-size: 18px;
                font-weight: bold;
                color: #333;
            }
            
            .section-buttons {
                display: flex;
                gap: 8px;
            }
            
            .section-button {
                background-color: #7986E7;
                color: white;
                border: none;
                border-radius: 4px;
                padding: 6px 12px;
                cursor: pointer;
                font-size: 14px;
                transition: background-color 0.3s;
            }
            
            .section-button:hover {
                background-color: #6875D6;
            }
            
            .error-message {
                color: #d32f2f;
                background-color: #ffebee;
                padding: 10px;
                border-radius: 4px;
                margin-bottom: 15px;
            }
        `;
        
        const visualEditor = document.createElement('div');
        visualEditor.className = 'visual-editor';
        
        // 获取根元素
        const rootElement = xmlDoc.documentElement;
        
        // 只处理Model根元素
        if (rootElement.nodeName === 'Model') {
            // 创建模态对话框容器
            const modalContainer = document.createElement('div');
            modalContainer.className = 'modal';
            modalContainer.id = 'propertyModal';
            container.appendChild(modalContainer);
            
            // 渲染基本信息部分
            renderBasicInfoSection(
                visualEditor, 
                rootElement, 
                xmlDoc, 
                (inputElement) => this.showDateTimeDialogWrapper(inputElement),
                () => this.markEdited()
            );
            
            // 渲染高级设置部分
            renderAdvancedSection(
                visualEditor, 
                rootElement, 
                xmlDoc, 
                (container, rootElement) => this.renderCommandListTableWrapper(container, rootElement),
                () => this.markEdited()
            );
            
            // 渲染其他设置部分
            renderOtherSettingsSection(
                visualEditor, 
                rootElement, 
                (container, parentElement, parentPath, level = 0) => this.renderElementsWrapper(
                    container, parentElement, parentPath, level
                )
            );
        } else {
            // 不是Model根元素，显示错误信息
            visualEditor.innerHTML = `<div class="error-message">
                无法编辑：XML文档的根元素不是Model。
                请确保XML文档的根元素是Model。
            </div>`;
        }
        
        container.appendChild(style);
        container.appendChild(visualEditor);
        
        // 自动保存配置到XML
        this.autoSaveToXml();
    }
    
    // 自动保存表单内容到XML
    autoSaveToXml() {
        // 为所有输入框添加change事件
        const inputs = this.shadowRoot.querySelectorAll('.property-input');
        inputs.forEach(input => {
            input.addEventListener('change', () => {
                this.updateXmlFromVisualEditor(); // 更新XML
                this.markEdited(); // 标记已编辑
            });
        });
    }
    
    // 显示日期时间对话框包装方法
    showDateTimeDialogWrapper(inputElement) {
        showDateTimeDialog(inputElement, this.xmlDoc, () => this.markEdited(), this);
    }
    
    // 渲染命令列表表格包装方法
    renderCommandListTableWrapper(container, rootElement) {
        renderCommandListTable(
            container, 
            rootElement, 
            (rootElement) => this.showAddCommandDialogWrapper(rootElement),
            (command, index) => this.showEditCommandDialogWrapper(command, index),
            (command, index) => this.deleteCommandWrapper(command, index)
        );
    }
    
    // 渲染元素包装方法
    renderElementsWrapper(container, parentElement, parentPath, level = 0) {
        renderElements(
            container, 
            parentElement, 
            parentPath, 
            level,
            isValidElementName,
            (path, value) => this.updateElementByPathWrapper(path, value),
            (element, elementPath) => this.deleteElementWrapper(element, elementPath),
            (parentElement, name, value) => this.addElementWrapper(parentElement, name, value),
            (parentElement, parentPath) => this.showAddElementDialogWrapper(parentElement, parentPath),
            (element, elementPath) => this.showEditElementDialogWrapper(element, elementPath)
        );
    }
    
    // 更新元素路径包装方法
    updateElementByPathWrapper(path, value) {
        if (updateElementByPath(this.xmlDoc, path, value)) {
            this.updateXmlFromVisualEditor();
            this.markEdited();
            return true;
        }
        return false;
    }
    
    // 删除元素包装方法
    deleteElementWrapper(element, elementPath) {
        // 确认删除
        if (!confirm(`确定要删除元素 ${element.nodeName} 吗？此操作不可撤销。`)) {
            return;
        }
        
        if (deleteElement(element)) {
            this.updateXmlFromVisualEditor();
            this.markEdited();
            
            // 重新渲染元素列表
            const container = this.shadowRoot.querySelector('#otherSettingsContainer');
            if (container) {
                container.innerHTML = '';
                this.renderElementsWrapper(container, this.xmlDoc.documentElement, '/' + this.xmlDoc.documentElement.nodeName);
            }
            
            return true;
        }
        
        return false;
    }
    
    // 添加元素包装方法
    addElementWrapper(parentElement, name, value) {
        const newElement = addElement(this.xmlDoc, parentElement, name, value);
        if (newElement) {
            this.updateXmlFromVisualEditor();
            this.markEdited();
            return true;
        }
        return false;
    }
    
    // 显示添加元素对话框包装方法
    showAddElementDialogWrapper(parentElement, parentPath) {
        showAddElementDialog(parentElement, parentPath, this.xmlDoc, () => {
            this.updateXmlFromVisualEditor();
            this.markEdited();
            
            // 重新渲染元素列表
            const container = this.shadowRoot.querySelector('#otherSettingsContainer');
            if (container) {
                container.innerHTML = '';
                this.renderElementsWrapper(container, this.xmlDoc.documentElement, '/' + this.xmlDoc.documentElement.nodeName);
            }
        }, this);
    }
    
    // 显示编辑元素对话框包装方法
    showEditElementDialogWrapper(element, elementPath) {
        showEditElementDialog(element, elementPath, this.xmlDoc, () => {
            this.updateXmlFromVisualEditor();
            this.markEdited();
            
            // 更新UI中的值
            const inputElement = this.shadowRoot.querySelector(`input[data-path="${elementPath}"]`);
            if (inputElement) {
                inputElement.value = element.textContent;
            }
        }, this);
    }
    
    // 显示添加命令对话框包装方法
    showAddCommandDialogWrapper(rootElement) {
        showAddCommandDialog(rootElement, this.xmlDoc, () => {
            this.updateXmlFromVisualEditor();
            this.markEdited();
            
            // 重新渲染命令列表
            const commandListContainer = this.shadowRoot.querySelector('#commandListContainer');
            const visualEditor = this.shadowRoot.querySelector('#visualEditor');
            if (commandListContainer && visualEditor) {
                // 清空当前渲染
                visualEditor.innerHTML = '';
                // 重新渲染整个编辑器
                this.renderVisualEditor(visualEditor, this.xmlDoc);
            }
        }, this);
    }
    
    // 显示编辑命令对话框包装方法
    showEditCommandDialogWrapper(commandElement, index) {
        showEditCommandDialog(commandElement, index, () => {
            this.updateXmlFromVisualEditor();
            this.markEdited();
            
            // 更新表格行
            const row = this.shadowRoot.querySelector(`.command-row[data-index="${index}"]`);
            if (row) {
                const name = commandElement.getAttribute('Name') || '';
                const call = commandElement.getAttribute('Call') || '';
                const description = commandElement.getAttribute('Description') || '';
                
                row.querySelectorAll('.command-cell')[0].textContent = name;
                row.querySelectorAll('.command-cell')[1].textContent = call;
                row.querySelectorAll('.command-cell')[2].textContent = description || `${name}描述`;
            } else {
                // 如果找不到行，重新渲染整个编辑器
                const visualEditor = this.shadowRoot.querySelector('#visualEditor');
                if (visualEditor) {
                    visualEditor.innerHTML = '';
                    this.renderVisualEditor(visualEditor, this.xmlDoc);
                }
            }
        }, this);
    }
    
    // 删除命令包装方法
    deleteCommandWrapper(commandElement, index) {
        if (!confirm('确定要删除此命令吗？此操作不可撤销。')) {
            return;
        }
        
        if (deleteElement(commandElement)) {
            this.updateXmlFromVisualEditor();
            this.markEdited();
            
            // 从表格中移除行
            const row = this.shadowRoot.querySelector(`.command-row[data-index="${index}"]`);
            if (row) {
                row.parentNode.removeChild(row);
                
                // 更新索引
                const rows = this.shadowRoot.querySelectorAll('.command-row');
                rows.forEach((r, i) => {
                    r.dataset.index = i;
                });
            } else {
                // 如果找不到行，重新渲染整个编辑器
                const visualEditor = this.shadowRoot.querySelector('#visualEditor');
                if (visualEditor) {
                    visualEditor.innerHTML = '';
                    this.renderVisualEditor(visualEditor, this.xmlDoc);
                }
            }
            
            return true;
        }
        
        return false;
    }
    
    // 从可视化编辑器更新XML
    updateXmlFromVisualEditor() {
        if (!this.xmlDoc) return;
        
        this.xmlContent = updateXmlFromVisualEditor(this.xmlDoc);
    }

    // 标记为已编辑
    markEdited() {
        this.isEdited = true;
        // 更新保存按钮样式
        const saveButton = this.shadowRoot.getElementById('saveConfig');
        if (saveButton) {
            saveButton.classList.add('modified');
        }
    }

    // 重置编辑状态
    resetEditState() {
        this.isEdited = false;
        // 更新保存按钮样式
        const saveButton = this.shadowRoot.getElementById('saveConfig');
        if (saveButton) {
            saveButton.classList.remove('modified');
        }
    }

    // 更新命令列表部分
    updateCommandListSection() {
        if (!this.xmlDoc) return;
        
        const visualEditorContainer = document.getElementById('visualEditorContainer');
        if (!visualEditorContainer) return;
        
        // 移除已有的命令列表容器
        const existingContainer = document.getElementById('commandListContainer');
        if (existingContainer) {
            existingContainer.remove();
        }
        
        // 获取根元素和命令列表元素
        const rootElement = this.xmlDoc.documentElement;
        const commandListElement = ensureCommandListFormat(this.xmlDoc);
        
        // 渲染命令列表
        renderCommandList(
            visualEditorContainer, 
            commandListElement, 
            rootElement, 
            (rootElement) => this.showAddCommandDialogWrapper(rootElement),
            (command, index) => this.showEditCommandDialogWrapper(command, index),
            (command, index) => this.deleteCommandWrapper(command, index)
        );
    }

    // 添加检查未保存更改的方法
    async checkSaveNeeded() {
        if (this.isEdited) {
            // 使用自定义对话框替代简单的confirm
            const dialogResult = await new Promise(resolve => {
                // 创建模态框
                const modal = document.createElement('div');
                modal.className = 'modal';
                modal.id = 'saveConfirmModal';
                
                modal.innerHTML = `
                    <style>
                        .modal {
                            display: block;
                            position: fixed;
                            z-index: 1000;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            overflow: auto;
                            background-color: rgba(0,0,0,0.4);
                        }
                        .modal-content {
                            background-color: #fefefe;
                            margin: 15% auto;
                            padding: 20px;
                            border: 1px solid #888;
                            width: 80%;
                            max-width: 400px;
                            border-radius: 5px;
                            position: relative;
                            text-align: center;
                        }
                        .modal-title {
                            margin-top: 0;
                            color: #333;
                            font-size: 18px;
                            margin-bottom: 20px;
                        }
                        .modal-buttons {
                            display: flex;
                            justify-content: center;
                            gap: 10px;
                            margin-top: 20px;
                        }
                        .btn {
                            padding: 8px 15px;
                            border: none;
                            border-radius: 4px;
                            cursor: pointer;
                            font-size: 14px;
                            min-width: 80px;
                        }
                        .btn-save {
                            background-color: #7986E7;
                            color: white;
                        }
                        .btn-save:hover {
                            background-color: #6875D6;
                        }
                        .btn-dont-save {
                            background-color: #E77979;
                            color: white;
                        }
                        .btn-dont-save:hover {
                            background-color: #D66868;
                        }
                        .btn-cancel {
                            background-color: #f5f5f5;
                            color: #333;
                        }
                        .btn-cancel:hover {
                            background-color: #e0e0e0;
                        }
                    </style>
                    <div class="modal-content">
                        <h3 class="modal-title">当前文件有未保存的更改</h3>
                        <p>您想要保存这些更改吗？</p>
                        <div class="modal-buttons">
                            <button class="btn btn-save" id="saveBtn">保存</button>
                            <button class="btn btn-dont-save" id="dontSaveBtn">不保存</button>
                            <button class="btn btn-cancel" id="cancelBtn">取消</button>
                        </div>
                    </div>
                `;
                
                document.body.appendChild(modal);
                
                // 添加事件监听
                const saveBtn = modal.querySelector('#saveBtn');
                const dontSaveBtn = modal.querySelector('#dontSaveBtn');
                const cancelBtn = modal.querySelector('#cancelBtn');
                
                const closeModal = () => {
                    document.body.removeChild(modal);
                };
                
                saveBtn.addEventListener('click', () => {
                    closeModal();
                    resolve('save');
                });
                
                dontSaveBtn.addEventListener('click', () => {
                    closeModal();
                    resolve('dont-save');
                });
                
                cancelBtn.addEventListener('click', () => {
                    closeModal();
                    resolve('cancel');
                });
                
                // 点击模态窗口外部也取消
                modal.addEventListener('click', (event) => {
                    if (event.target === modal) {
                        closeModal();
                        resolve('cancel');
                    }
                });
            });
            
            // 根据对话框结果执行相应操作
            if (dialogResult === 'save') {
                try {
                    await this.saveCurrentFile();
                    return true; // 继续执行后续操作
                } catch (error) {
                    console.error('保存出错:', error);
                    return false; // 保存失败，不继续执行
                }
            } else if (dialogResult === 'dont-save') {
                // 不保存，但继续执行后续操作
                return true;
            } else {
                // 用户取消，不执行后续操作
                return false;
            }
        }
        
        // 没有编辑状态，直接返回true允许继续操作
        return true;
    }
    
    // 检查未保存更改 (兼容旧版的使用)
    checkUnsavedChanges() {
        // 由于无法同步返回Promise结果，这个方法保留为返回布尔值
        // 但为了向前兼容，仍保留这个方法
        return this.isEdited;
    }

    // 保存当前文件
    async saveCurrentFile() {
        if (!this.selectedFile || !this.isEdited) return false;
        
        try {
            await apiSaveFileContent(this.selectedFile, this.xmlContent);
            this.resetEditState();
            return true;
        } catch (error) {
            alert('保存失败: ' + error.message);
            return false;
        }
    }
}

customElements.define('model-config', ModelConfig);