/**
 * @class ConfigurationConfig
 * @classdesc 构型配置开发组件，采用卡片风格，展示机型信息和构型信息。
 * @extends HTMLElement
 */
class ConfigurationConfig extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.currentView = 'planes'; // 'planes' 或 'configurations' 或 'editor'
        this.selectedPlane = null;
        this.selectedConfiguration = null;
        this.userAccessLevel = 0; // 添加用户权限级别属性
        
        /**
         * 初始化DOM结构，采用卡片风格，展示机型信息和构型信息。
         */
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    padding: 20px;
                    color: #333;
                    box-sizing: border-box;
                    height: calc(100vh - 40px);
                    overflow: hidden;
                }
                .page-header {
                    margin-bottom: 20px;
                }
                .page-title {
                    color: #5c6bc0;
                    font-weight: 500;
                    font-size: 24px;
                    margin-bottom: 8px;
                }
                .back-section {
                    margin-bottom: 15px;
                }
                .back-button {
                    display: inline-flex;
                    align-items: center;
                    cursor: pointer;
                    color: #5c6bc0;
                    font-size: 14px;
                    text-decoration: none;
                }
                .back-button:hover {
                    color: #3949ab;
                }
                .back-icon {
                    margin-right: 5px;
                    font-size: 16px;
                }
                .config-dev-container {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                    gap: 20px;
                    max-height: calc(100vh - 160px);
                    overflow-y: auto;
                    padding-right: 10px;
                    padding-top: 10px;
                    padding-bottom: 30px;
                    width: 100%;
                }
                .config-card {
                    background: white;
                    border-radius: 8px;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                    padding: 20px;
                    transition: transform 0.3s ease, box-shadow 0.3s ease;
                    cursor: pointer;
                    min-height: 280px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    overflow: hidden;
                }
                .config-card:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
                }
                .icon-container {
                    width: 160px;
                    height: 160px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 20px;
                    flex-shrink: 0;
                }
                .plane-icon {
                    max-width: 100%;
                    max-height: 100%;
                    object-fit: contain;
                }
                .text-container {
                    width: 100%;
                    text-align: center;
                    flex-grow: 1;
                }
                .config-title {
                    font-size: 22px;
                    font-weight: 600;
                    margin-bottom: 12px;
                    color: #333;
                    height: 26px;
                    line-height: 26px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .config-desc {
                    font-size: 16px;
                    color: #666;
                    text-align: center;
                    line-height: 1.4;
                    padding: 0 10px;
                }
                .loading {
                    text-align: center;
                    padding: 20px;
                    color: #666;
                }
                .error {
                    color: #f44336;
                    text-align: center;
                    padding: 20px;
                }
                .config-info {
                    font-size: 14px;
                    color: #666;
                    margin-top: 8px;
                }
                /* 构型卡片特定样式 */
                .config-dev-container.configurations {
                    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                    gap: 20px;
                }
                .config-card.configuration {
                    min-height: auto;
                    height: 80px;
                    padding: 0 20px;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    position: relative;
                }
                .config-card.configuration .config-title {
                    font-size: 18px;
                    margin: 0;
                    height: auto;
                    flex-grow: 1;
                    text-align: left;
                }
                .delete-button {
                    width: 24px;
                    height: 24px;
                    border: none;
                    background: none;
                    cursor: pointer;
                    padding: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #999;
                    transition: color 0.3s;
                    margin-left: 10px;
                }
                .delete-button:hover {
                    color: #f44336;
                }
                .delete-button svg {
                    width: 20px;
                    height: 20px;
                }
                /* 新建构型卡片样式 */
                .config-card.new-config {
                    border: 2px dashed #5c6bc0;
                    background: #f8f9ff;
                    box-shadow: none;
                    min-height: auto;
                    height: 80px;
                    padding: 0 20px;
                    flex-direction: row;
                    justify-content: center;
                }
                .config-card.new-config:hover {
                    background: #f0f2ff;
                    box-shadow: none;
                }
                .config-card.new-config .config-title {
                    color: #5c6bc0;
                    font-size: 18px;
                    margin: 0;
                    height: auto;
                }
                /* 构型编辑视图样式 */
                .editor-container {
                    background: white;
                    border-radius: 8px;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                    padding: 30px;
                    height: calc(100vh - 160px);
                    overflow-y: auto;
                    max-width: 1600px;
                    margin: 0 auto;
                    box-sizing: border-box;
                }
                .section {
                    margin-bottom: 30px;
                    padding-right: 10px;
                }
                .section-title {
                    font-size: 18px;
                    font-weight: 500;
                    color: #5c6bc0;
                    margin-bottom: 15px;
                    padding-bottom: 8px;
                    border-bottom: 2px solid #e8eaf6;
                }
                .form-group {
                    margin-bottom: 15px;
                }
                .form-row {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 25px;
                    margin-bottom: 15px;
                }
                .form-row-2 {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 30px;
                    margin-bottom: 15px;
                }
                .form-row-3 {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 25px;
                    margin-bottom: 15px;
                }
                .form-label {
                    display: block;
                    margin-bottom: 5px;
                    font-weight: 500;
                    color: #555;
                }
                .form-input {
                    width: 100%;
                    padding: 8px 12px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    font-size: 14px;
                    box-sizing: border-box;
                }
                .form-input:focus {
                    border-color: #5c6bc0;
                    outline: none;
                    box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.2);
                }
                .form-input[readonly] {
                    background-color: #f5f5f5;
                    border-color: #e0e0e0;
                    color: #666;
                    cursor: not-allowed;
                }
                .form-input[readonly]:focus {
                    border-color: #e0e0e0;
                    box-shadow: none;
                }
                .form-textarea {
                    width: 100%;
                    padding: 8px 12px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    font-size: 14px;
                    min-height: 100px;
                    resize: vertical;
                }
                .form-textarea:focus {
                    border-color: #5c6bc0;
                    outline: none;
                    box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.2);
                }
                .checkbox-group {
                    display: flex;
                    gap: 20px;
                    margin-top: 10px;
                }
                .checkbox-item {
                    display: flex;
                    align-items: center;
                    gap: 5px;
                }
                .checkbox-item input[type="checkbox"] {
                    width: 16px;
                    height: 16px;
                }
                .checkbox-item label {
                    font-size: 14px;
                    color: #555;
                }
                .button-group {
                    display: flex;
                    gap: 10px;
                    margin-top: 20px;
                }
                .button {
                    padding: 8px 16px;
                    border: none;
                    border-radius: 4px;
                    font-size: 14px;
                    cursor: pointer;
                    transition: background-color 0.3s;
                }
                .button-primary {
                    background-color: #5c6bc0;
                    color: white;
                }
                .button-primary:hover {
                    background-color: #3949ab;
                }
                .button-secondary {
                    background-color: #e8eaf6;
                    color: #5c6bc0;
                }
                .button-secondary:hover {
                    background-color: #c5cae9;
                }
                .log-section {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 30px;
                }
                .log-box {
                    background: #f5f5f5;
                    border-radius: 8px;
                    padding: 20px;
                }
                .log-box-title {
                    font-size: 16px;
                    font-weight: 500;
                    color: #5c6bc0;
                    margin-bottom: 15px;
                }
            </style>
            <div class="config-development">
                <div class="page-header">
                    <h2 class="page-title" id="pageTitle">机型</h2>
                    <div class="back-section" id="backSection" style="display: none;">
                        <a class="back-button" id="backButton">
                            <span class="back-icon">←</span>
                            <span>返回机型列表</span>
                        </a>
                    </div>
                </div>
                <div class="config-dev-container" id="contentContainer">
                    <div class="loading">加载中...</div>
                </div>
                <div class="editor-container" id="editorContainer" style="display: none;">
                    <div class="section">
                        <h3 class="section-title">基本信息</h3>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">构型名称</label>
                                <input type="text" class="form-input" id="confName" readonly />
                            </div>
                            <div class="form-group">
                                <label class="form-label">操作系统</label>
                                <input type="text" class="form-input" id="osName" />
                            </div>
                            <div class="form-group">
                                <label class="form-label">系统版本</label>
                                <input type="text" class="form-input" id="osVersion" />
                            </div>
                            <div class="form-group">
                                <label class="form-label">RTX版本</label>
                                <input type="text" class="form-input" id="rtxVersion" />
                            </div>
                        </div>
                    </div>
                    <div class="section">
                        <h3 class="section-title">系统配置</h3>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">CPU亲和性</label>
                                <input type="text" class="form-input" id="cpuAffinity" />
                            </div>
                            <div class="form-group">
                                <label class="form-label">域ID</label>
                                <input type="text" class="form-input" id="domainId" />
                            </div>
                        </div>
                        <div class="form-row-3">
                            <div class="form-group">
                                <label class="form-label">工作路径</label>
                                <input type="text" class="form-input" id="workPath" />
                            </div>
                            <div class="form-group">
                                <label class="form-label">模型路径</label>
                                <input type="text" class="form-input" id="modelsPath" />
                            </div>
                            <div class="form-group">
                                <label class="form-label">服务路径</label>
                                <input type="text" class="form-input" id="servicesPath" />
                            </div>
                        </div>
                    </div>
                    <div class="section">
                        <h3 class="section-title">输出配置</h3>
                        <div class="log-section">
                            <div class="log-box">
                                <div class="log-box-title">控制台输出配置</div>
                                <div class="checkbox-group">
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="consoleDebug" />
                                        <label for="consoleDebug">Debug</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="consoleInfo" />
                                        <label for="consoleInfo">Info</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="consoleWarning" />
                                        <label for="consoleWarning">Warning</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="consoleError" />
                                        <label for="consoleError">Error</label>
                                    </div>
                                </div>
                            </div>
                            <div class="log-box">
                                <div class="log-box-title">日志输出配置</div>
                                <div class="checkbox-group">
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="logDebug" />
                                        <label for="logDebug">Debug</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="logInfo" />
                                        <label for="logInfo">Info</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="logWarning" />
                                        <label for="logWarning">Warning</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="logError" />
                                        <label for="logError">Error</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="button-group">
                        <button class="button button-primary" id="saveButton">保存构型</button>
                        <button class="button button-secondary" id="cancelButton">取消</button>
                    </div>
                </div>
            </div>
        `;

        // 绑定事件
        this.shadowRoot.getElementById('backButton').addEventListener('click', (e) => {
            e.preventDefault();
            if (this.currentView === 'editor') {
                this.showConfigurations(this.selectedPlane);
            } else {
                this.showPlanes();
            }
        });

        // 绑定编辑器按钮事件
        this.shadowRoot.getElementById('saveButton').addEventListener('click', () => this.saveConfiguration());
        this.shadowRoot.getElementById('cancelButton').addEventListener('click', () => {
            this.showConfigurations(this.selectedPlane);
        });

        // 添加输入验证
        this.shadowRoot.getElementById('cpuAffinity').addEventListener('input', (e) => {
            // 只允许数字和英文逗号
            e.target.value = e.target.value.replace(/[^0-9,]/g, '');
        });

        this.shadowRoot.getElementById('domainId').addEventListener('input', (e) => {
            // 只允许数字
            e.target.value = e.target.value.replace(/[^0-9]/g, '');
            // 限制范围在0-232之间
            const value = parseInt(e.target.value);
            if (value > 232) {
                e.target.value = '232';
            }
        });
        
        // 获取机型数据
        this.loadPlanes();
    }

    /**
     * @method loadPlanes
     * @description 从服务器获取机型数据并更新UI
     */
    async loadPlanes() {
        try {
            const response = await fetch('/api/planes');
            if (!response.ok) {
                throw new Error('获取机型数据失败');
            }
            const planes = await response.json();
            this.renderPlanes(planes);
        } catch (error) {
            console.error('加载机型数据失败:', error);
            this.showError('加载机型数据失败，请稍后重试');
        }
    }

    /**
     * @method loadConfigurations
     * @description 从服务器获取构型数据并更新UI
     * @param {string} planeName - 机型名称
     */
    async loadConfigurations(planeName) {
        try {
            const response = await fetch(`/api/configurations?plane=${encodeURIComponent(planeName)}`);
            if (!response.ok) {
                throw new Error('获取构型数据失败');
            }
            const configs = await response.json();
            this.renderConfigurations(configs, planeName);
        } catch (error) {
            console.error('加载构型数据失败:', error);
            this.showError('加载构型数据失败，请稍后重试');
        }
    }

    /**
     * @method renderPlanes
     * @description 渲染机型卡片
     * @param {Array} planes - 机型数据数组
     */
    renderPlanes(planes) {
        const container = this.shadowRoot.getElementById('contentContainer');
        if (!planes || planes.length === 0) {
            container.innerHTML = '<div class="error">暂无机型数据</div>';
            return;
        }

        container.innerHTML = planes.map(plane => `
            <div class="config-card" data-plane="${plane.PlaneName}">
                <div class="icon-container">
                    ${plane.Icon ? `<img class="plane-icon" src="${plane.Icon}" alt="${plane.PlaneName}">` : ''}
                </div>
                <div class="text-container">
                    <div class="config-title">${plane.PlaneName || '未知机型'}</div>
                    <div class="config-desc">${plane.Description || '暂无描述'}</div>
                </div>
            </div>
        `).join('');

        // 添加点击事件
        container.querySelectorAll('.config-card').forEach(card => {
            card.addEventListener('click', () => {
                const planeName = card.dataset.plane;
                this.showConfigurations(planeName);
            });
        });
    }

    /**
     * @method showBaseConfigDialog
     * @description 显示基准构型选择对话框
     * @param {Array} configs - 构型数据数组
     * @param {string} planeName - 机型名称
     * @returns {Promise<Object|undefined>} 返回选择的基准构型或undefined（表示不使用基准构型）
     */
    showBaseConfigDialog(configs, planeName) {
        return new Promise((resolve) => {
            const dialog = document.createElement('div');
            dialog.className = 'base-config-dialog';
            dialog.innerHTML = `
                <style>
                    .base-config-dialog {
                        position: fixed;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background: rgba(0, 0, 0, 0.5);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        z-index: 1000;
                    }
                    .dialog-content {
                        background: white;
                        padding: 20px;
                        border-radius: 8px;
                        width: 400px;
                        max-width: 90%;
                    }
                    .dialog-title {
                        font-size: 18px;
                        font-weight: 500;
                        color: #333;
                        margin-bottom: 15px;
                    }
                    .select-container {
                        margin-bottom: 20px;
                    }
                    .select-label {
                        display: block;
                        margin-bottom: 8px;
                        color: #555;
                        font-size: 14px;
                    }
                    .select-input {
                        width: 100%;
                        padding: 8px 12px;
                        border: 1px solid #ddd;
                        border-radius: 4px;
                        font-size: 14px;
                        color: #333;
                        background-color: white;
                        cursor: pointer;
                        appearance: none;
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
                        background-repeat: no-repeat;
                        background-position: right 8px center;
                        background-size: 16px;
                    }
                    .select-input:focus {
                        border-color: #5c6bc0;
                        outline: none;
                        box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.2);
                    }
                    .dialog-buttons {
                        display: flex;
                        justify-content: flex-end;
                        gap: 10px;
                    }
                    .dialog-button {
                        padding: 8px 16px;
                        border: none;
                        border-radius: 4px;
                        cursor: pointer;
                        font-size: 14px;
                    }
                    .button-primary {
                        background: #5c6bc0;
                        color: white;
                    }
                    .button-secondary {
                        background: #e8eaf6;
                        color: #5c6bc0;
                    }
                </style>
                <div class="dialog-content">
                    <div class="dialog-title">选择基准构型</div>
                    <div class="select-container">
                        <label class="select-label">请选择基准构型：</label>
                        <select class="select-input" id="baseConfigSelect">
                            <option value="none">不使用基准构型</option>
                            ${configs.map(config => `
                                <option value="${config.ConfID}">${config.ConfName}</option>
                            `).join('')}
                        </select>
                    </div>
                    <div class="dialog-buttons">
                        <button class="dialog-button button-secondary" id="cancelButton">取消</button>
                        <button class="dialog-button button-primary" id="confirmButton">确认</button>
                    </div>
                </div>
            `;

            const select = dialog.querySelector('#baseConfigSelect');
            
            dialog.querySelector('#cancelButton').addEventListener('click', () => {
                document.body.removeChild(dialog);
                resolve(null);  // 取消时返回null
            });

            dialog.querySelector('#confirmButton').addEventListener('click', () => {
                const selectedValue = select.value;
                const selectedConfig = selectedValue === 'none' ? 
                    undefined :  // 选择"不使用基准构型"时返回undefined
                    configs.find(c => c.ConfID === parseInt(selectedValue));
                document.body.removeChild(dialog);
                resolve(selectedConfig);
            });

            document.body.appendChild(dialog);
        });
    }

    /**
     * @method checkUserAccessLevel
     * @description 检查用户访问权限级别
     */
    async checkUserAccessLevel() {
        try {
            const response = await fetch('/api/check-auth', {
                credentials: 'include'
            });
            const result = await response.json();
            
            if (result.success) {
                this.userAccessLevel = parseInt(result.user.access_level);
                // 重新渲染构型列表以更新删除按钮的显示状态
                if (this.currentView === 'configurations' && this.selectedPlane) {
                    this.loadConfigurations(this.selectedPlane);
                }
            }
        } catch (error) {
            console.error('获取用户权限失败:', error);
        }
    }

    /**
     * @method renderConfigurations
     * @description 渲染构型卡片
     * @param {Array} configs - 构型数据数组
     * @param {string} planeName - 机型名称
     */
    renderConfigurations(configs, planeName) {
        const container = this.shadowRoot.getElementById('contentContainer');
        if (!configs || configs.length === 0) {
            container.innerHTML = '<div class="error">暂无构型数据</div>';
            return;
        }

        // 添加新建构型卡片（根据权限显示）
        container.innerHTML = `
            ${this.userAccessLevel >= 2 ? `
                <div class="config-card new-config" id="newConfigCard">
                    <div class="config-title">+ 新建构型</div>
                </div>
            ` : ''}
            ${configs.map(config => `
                <div class="config-card configuration" data-config-id="${config.ConfID}">
                    <div class="config-title">${config.ConfName || '未知构型'}</div>
                    ${this.userAccessLevel >= 2 ? `
                        <button class="delete-button" data-config-id="${config.ConfID}" title="删除构型">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                        </button>
                    ` : ''}
                </div>
            `).join('')}
        `;

        // 添加新建构型卡片点击事件（仅在权限足够时添加）
        if (this.userAccessLevel >= 2) {
            container.querySelector('#newConfigCard')?.addEventListener('click', async () => {
                const baseConfig = await this.showBaseConfigDialog(configs, planeName);
                if (baseConfig !== null) {
                    const defaultConfig = {
                        ConfName: '',
                        OSName: baseConfig?.OSName || '',
                        OSVersion: baseConfig?.OSVersion || '',
                        RTXVersion: baseConfig?.RTXVersion || '',
                        CPUAffinity: baseConfig?.CPUAffinity || '',
                        DomainID: baseConfig?.DomainID || '',
                        WorkPath: baseConfig?.WorkPath || '',
                        ModelsPath: baseConfig?.ModelsPath || '',
                        ServicesPath: baseConfig?.ServicesPath || '',
                        ConsoleDebug: baseConfig?.ConsoleDebug ?? 1,
                        ConsoleInfo: baseConfig?.ConsoleInfo ?? 1,
                        ConsoleWarning: baseConfig?.ConsoleWarning ?? 1,
                        ConsoleError: baseConfig?.ConsoleError ?? 1,
                        LogDebug: baseConfig?.LogDebug ?? 0,
                        LogInfo: baseConfig?.LogInfo ?? 1,
                        LogWarning: baseConfig?.LogWarning ?? 1,
                        LogError: baseConfig?.LogError ?? 1,
                        sourceConfId: baseConfig?.ConfID  // 添加源构型ID
                    };
                    this.showEditor(defaultConfig, planeName, true);
                }
            });
        }

        // 添加构型卡片点击事件
        container.querySelectorAll('.config-card:not(.new-config)').forEach(card => {
            card.addEventListener('click', (e) => {
                // 如果点击的是删除按钮，不触发编辑
                if (e.target.closest('.delete-button')) {
                    return;
                }
                const configId = parseInt(card.dataset.configId, 10);
                const config = configs.find(c => c.ConfID === configId);
                if (config) {
                    this.showEditor(config, planeName, false);
                }
            });
        });

        // 添加删除按钮点击事件
        container.querySelectorAll('.delete-button').forEach(button => {
            button.addEventListener('click', async (e) => {
                e.stopPropagation(); // 阻止事件冒泡
                
                // 再次检查权限
                if (this.userAccessLevel < 2) {
                    alert('您没有删除构型的权限');
                    return;
                }

                const configId = parseInt(button.dataset.configId, 10);
                const config = configs.find(c => c.ConfID === configId);
                
                if (config && confirm(`确定要删除构型"${config.ConfName}"吗？\n注意：删除后将无法恢复，且会同时删除该构型下的所有模型组、模型和服务。`)) {
                    try {
                        const response = await fetch(`/api/configurations/${configId}`, {
                            method: 'DELETE',
                            credentials: 'include'
                        });

                        const responseData = await response.json();

                        if (!response.ok) {
                            throw new Error(responseData.error || '删除构型失败');
                        }

                        // 重新加载构型列表
                        this.loadConfigurations(planeName);
                    } catch (error) {
                        console.error('删除构型失败:', error);
                        alert(error.message || '删除构型失败，请稍后重试');
                    }
                }
            });
        });
    }

    /**
     * @method showEditor
     * @description 显示构型编辑器
     * @param {Object} configuration - 构型数据
     * @param {string} planeName - 机型名称
     * @param {boolean} isNew - 是否是新建构型
     */
    showEditor(configuration, planeName, isNew) {
        this.currentView = 'editor';
        this.selectedConfiguration = configuration;
        this.isNewConfiguration = isNew;
        
        // 更新UI
        const pageTitle = this.shadowRoot.getElementById('pageTitle');
        const backSection = this.shadowRoot.getElementById('backSection');
        const backButtonText = this.shadowRoot.querySelector('#backButton span:last-child');
        const contentContainer = this.shadowRoot.getElementById('contentContainer');
        const editorContainer = this.shadowRoot.getElementById('editorContainer');
        const confNameInput = this.shadowRoot.getElementById('confName');

        if (!pageTitle || !backSection || !contentContainer || !editorContainer) {
            return;
        }

        pageTitle.textContent = isNew ? `${planeName} - 新建构型` : `${planeName} - ${configuration.ConfName} 构型`;
        backSection.style.display = 'block';
        backButtonText.textContent = '返回构型列表';
        contentContainer.style.display = 'none';
        editorContainer.style.display = 'block';
        
        // 设置构型名称输入框状态
        confNameInput.readOnly = !isNew;
        if (isNew) {
            confNameInput.value = '';
        } else {
            confNameInput.value = configuration.ConfName || '';
        }
        
        // 填充其他表单数据
        this.shadowRoot.getElementById('osName').value = configuration.OSName || '';
        this.shadowRoot.getElementById('osVersion').value = configuration.OSVersion || '';
        this.shadowRoot.getElementById('rtxVersion').value = configuration.RTXVersion || '';
        this.shadowRoot.getElementById('cpuAffinity').value = configuration.CPUAffinity || '';
        this.shadowRoot.getElementById('domainId').value = configuration.DomainID !== undefined ? Math.floor(configuration.DomainID) : '';
        this.shadowRoot.getElementById('modelsPath').value = configuration.ModelsPath || '';
        this.shadowRoot.getElementById('servicesPath').value = configuration.ServicesPath || '';
        this.shadowRoot.getElementById('workPath').value = configuration.WorkPath || '';

        // 设置复选框状态
        this.shadowRoot.getElementById('consoleDebug').checked = configuration.ConsoleDebug === 1;
        this.shadowRoot.getElementById('consoleInfo').checked = configuration.ConsoleInfo === 1;
        this.shadowRoot.getElementById('consoleWarning').checked = configuration.ConsoleWarning === 1;
        this.shadowRoot.getElementById('consoleError').checked = configuration.ConsoleError === 1;
        this.shadowRoot.getElementById('logDebug').checked = configuration.LogDebug === 1;
        this.shadowRoot.getElementById('logInfo').checked = configuration.LogInfo === 1;
        this.shadowRoot.getElementById('logWarning').checked = configuration.LogWarning === 1;
        this.shadowRoot.getElementById('logError').checked = configuration.LogError === 1;
    }

    /**
     * @method ensurePathEndsWithSlash
     * @description 确保路径以斜杠结尾
     * @param {string} path - 要处理的路径
     * @returns {string} 处理后的路径
     */
    ensurePathEndsWithSlash(path) {
        if (!path) return path;
        return path.endsWith('/') ? path : path + '/';
    }

    /**
     * @method saveConfiguration
     * @description 保存构型配置
     */
    async saveConfiguration() {
        // 检查权限
        if (this.userAccessLevel < 2) {
            alert('您没有保存构型的权限');
            return;
        }

        // 验证域ID
        const domainId = parseInt(this.shadowRoot.getElementById('domainId').value);
        if (isNaN(domainId) || domainId < 0 || domainId > 232) {
            alert('域ID必须在0-232之间');
            return;
        }

        // 验证构型名称
        const confName = this.shadowRoot.getElementById('confName').value.trim();
        if (!confName) {
            alert('构型名称不能为空');
            return;
        }

        const updatedConfig = {
            ...this.selectedConfiguration,
            ConfName: confName,
            OSName: this.shadowRoot.getElementById('osName').value,
            OSVersion: this.shadowRoot.getElementById('osVersion').value,
            RTXVersion: this.shadowRoot.getElementById('rtxVersion').value,
            CPUAffinity: this.shadowRoot.getElementById('cpuAffinity').value,
            DomainID: domainId,
            ModelsPath: this.ensurePathEndsWithSlash(this.shadowRoot.getElementById('modelsPath').value),
            ServicesPath: this.ensurePathEndsWithSlash(this.shadowRoot.getElementById('servicesPath').value),
            WorkPath: this.ensurePathEndsWithSlash(this.shadowRoot.getElementById('workPath').value),
            ConsoleDebug: this.shadowRoot.getElementById('consoleDebug').checked ? 1 : 0,
            ConsoleInfo: this.shadowRoot.getElementById('consoleInfo').checked ? 1 : 0,
            ConsoleWarning: this.shadowRoot.getElementById('consoleWarning').checked ? 1 : 0,
            ConsoleError: this.shadowRoot.getElementById('consoleError').checked ? 1 : 0,
            LogDebug: this.shadowRoot.getElementById('logDebug').checked ? 1 : 0,
            LogInfo: this.shadowRoot.getElementById('logInfo').checked ? 1 : 0,
            LogWarning: this.shadowRoot.getElementById('logWarning').checked ? 1 : 0,
            LogError: this.shadowRoot.getElementById('logError').checked ? 1 : 0
        };

        // 如果是新建构型，保留源构型ID
        if (this.isNewConfiguration && this.selectedConfiguration.sourceConfId) {
            updatedConfig.sourceConfId = this.selectedConfiguration.sourceConfId;
        }

        try {
            const url = this.isNewConfiguration ? 
                '/api/configurations' : 
                `/api/configurations/${this.selectedConfiguration.ConfID}`;
            
            const method = this.isNewConfiguration ? 'POST' : 'PUT';

            const response = await fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(updatedConfig),
                credentials: 'include'
            });

            const responseData = await response.json();

            if (!response.ok) {
                if (responseData.error === '路径验证失败') {
                    const errorMessages = responseData.details.map(detail => 
                        `${detail.path === 'workPath' ? '工作路径' : 
                          detail.path === 'modelsPath' ? '模型路径' : '服务路径'}: ${detail.error}`
                    ).join('\n');
                    alert(`路径验证失败：\n${errorMessages}`);
                } else {
                    throw new Error(responseData.error || '保存构型失败');
                }
                return;
            }

            this.selectedConfiguration = responseData;
            this.showConfigurations(this.selectedPlane);
        } catch (error) {
            console.error('保存构型失败:', error);
            alert(error.message || '保存构型失败，请稍后重试');
        }
    }

    /**
     * @method showConfigurations
     * @description 显示指定机型的构型列表
     * @param {string} planeName - 机型名称
     */
    async showConfigurations(planeName) {
        this.currentView = 'configurations';
        this.selectedPlane = planeName;
        
        // 更新UI
        this.shadowRoot.getElementById('pageTitle').textContent = `${planeName} - 构型列表`;
        this.shadowRoot.getElementById('backSection').style.display = 'block';
        this.shadowRoot.querySelector('#backButton span:last-child').textContent = '返回机型列表';
        this.shadowRoot.getElementById('contentContainer').classList.add('configurations');
        this.shadowRoot.getElementById('contentContainer').style.display = 'grid';
        this.shadowRoot.getElementById('editorContainer').style.display = 'none';
        
        // 检查用户权限
        await this.checkUserAccessLevel();
        
        // 加载构型数据
        this.loadConfigurations(planeName);
    }

    /**
     * @method showPlanes
     * @description 显示机型列表
     */
    showPlanes() {
        this.currentView = 'planes';
        this.selectedPlane = null;
        this.selectedConfiguration = null;
        
        // 更新UI
        this.shadowRoot.getElementById('pageTitle').textContent = '机型';
        this.shadowRoot.getElementById('backSection').style.display = 'none';
        this.shadowRoot.getElementById('contentContainer').classList.remove('configurations');
        this.shadowRoot.getElementById('contentContainer').style.display = 'grid';
        this.shadowRoot.getElementById('editorContainer').style.display = 'none';
        
        // 重新加载机型数据
        this.loadPlanes();
    }

    /**
     * @method showError
     * @description 显示错误信息
     * @param {string} message - 错误信息
     */
    showError(message) {
        const container = this.shadowRoot.getElementById('contentContainer');
        container.innerHTML = `<div class="error">${message}</div>`;
    }
}

// 注册自定义元素
customElements.define('configuration-config', ConfigurationConfig);