/**
 * API配置管理器 v2.0
 * 支持动态服务商管理和多模型配置
 */

import { app } from "../../../../scripts/app.js";
import { logger } from '../utils/logger.js';
import {
    createSettingsDialog,
    createFormGroup,
    createInputGroup,
    createSelectGroup,
    createHorizontalFormGroup,
    createSwitchControl,
    createConfirmPopup,
    createContextMenu,
    createTooltip,
    createMultiSelectListbox
} from "./uiComponents.js";
import { APIService } from "../services/api.js";
import { tUI } from "../utils/uiI18n.js";

// Sortable库已通过script标签加载，直接使用全局变量

class APIConfigManager {
    // 预置服务商ID列表（不可编辑/删除）
    static PRESET_SERVICE_IDS = ['zhipu', 'xFlow', 'ollama'];

    constructor() {
        // 服务商数据
        this.services = [];
        this.currentServices = { llm: null, vlm: null };

        // 百度翻译配置
        this.baiduConfig = { app_id: '', secret_key: '' };
    }

    /**
     * 通知系统 API 配置已更新
     * 触发 pa-config-updated 事件，通知 settings.js 等模块刷新
     */
    notifyConfigChange() {
        logger.debug('分发 API 配置更新事件: pa-config-updated');
        window.dispatchEvent(new CustomEvent('pa-config-updated'));
    }

    /**
     * 显示API配置弹窗
     */
    async showAPIConfigModal() {
        try {
            logger.debug('打开API配置弹窗 v2.0');

            createSettingsDialog({
                title: `<i class="pi pi-cog" style="margin-right: 8px;"></i>${tUI('API管理器')}`,
                dialogClassName: 'api-config-dialog-v2',
                disableBackdropAndCloseOnClickOutside: true,
                hideFooter: true,  // 不显示底部的保存/取消按钮
                renderNotice: (noticeArea) => {
                    const subtitle = document.createElement('div');
                    subtitle.className = 'api-config-warning';
                    subtitle.textContent = `*${tUI('免责声明：本插件仅提供 API 调用工具，第三方服务责任与本插件无关，插件所涉用户配置信息均存储于本地。对于因账号使用产生的任何问题，本插件不承担责任！')}`;
                    noticeArea.appendChild(subtitle);
                },
                renderContent: async (container) => {
                    await this._loadAllConfigs();
                    this._createAPIConfigUI(container);
                },
                onSave: async () => {
                    // 不再需要手动保存，因为已经实时保存了
                }
            });
        } catch (error) {
            logger.error(`打开API配置弹窗失败: ${error.message}`);
            app.extensionManager.toast.add({
                severity: "error",
                summary: "打开配置失败",
                detail: error.message,
                life: 3000
            });
        }
    }

    /**
     * 加载所有配置
     */
    async _loadAllConfigs() {
        try {
            // 加载服务商列表
            const servicesRes = await fetch(APIService.getApiUrl('/services'));
            const servicesData = await servicesRes.json();

            if (servicesData.success) {
                this.services = servicesData.services || [];
            }

            // 加载百度翻译配置
            const baiduRes = await fetch(APIService.getApiUrl('/config/baidu_translate'));
            this.baiduConfig = await baiduRes.json();

            // 加载当前服务配置以获取current_services
            const llmRes = await fetch(APIService.getApiUrl('/config/llm'));
            const llmConfig = await llmRes.json();
            if (llmConfig.provider) {
                this.currentServices.llm = llmConfig.provider;
            }

            const vlmRes = await fetch(APIService.getApiUrl('/config/vision'));
            const vlmConfig = await vlmRes.json();
            if (vlmConfig.provider) {
                this.currentServices.vlm = vlmConfig.provider;
            }

            logger.debug('配置加载完成', {
                services: this.services.length,
                currentLLM: this.currentServices.llm,
                currentVLM: this.currentServices.vlm
            });
        } catch (error) {
            logger.error('加载配置失败', error);
            throw error;
        }
    }

    /**
     * 保存所有配置
     */
    async _saveAllConfigs() {
        try {
            // 保存百度翻译配置
            await fetch(APIService.getApiUrl('/config/baidu_translate'), {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(this.baiduConfig)
            });

            app.extensionManager.toast.add({
                severity: "success",
                summary: "配置已保存",
                life: 3000
            });
        } catch (error) {
            logger.error('保存配置失败', error);
            app.extensionManager.toast.add({
                severity: "error",
                summary: "保存失败",
                detail: error.message,
                life: 3000
            });
            throw error;
        }
    }

    /**
     * 保存百度翻译配置
     */
    async _saveBaiduConfig() {
        try {
            await fetch(APIService.getApiUrl('/config/baidu_translate'), {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(this.baiduConfig)
            });

            logger.debug('百度翻译配置已保存');

            // 触发配置同步事件
            this.notifyConfigChange();

            // 显示成功提示
            app.extensionManager.toast.add({
                severity: "success",
                summary: "百度翻译配置已保存",
                life: 2000
            });
        } catch (error) {
            logger.error('保存百度翻译配置失败', error);
            app.extensionManager.toast.add({
                severity: "error",
                summary: "保存失败",
                detail: error.message,
                life: 3000
            });
        }
    }

    /**
     * 创建API配置UI
     */
    _createAPIConfigUI(container) {
        // 创建标签页容器
        const tabContainer = document.createElement('div');
        tabContainer.className = 'api-config-tabs';

        // 创建标签页头部（动态生成所有服务商标签）
        const tabHeader = this._createTabHeader();
        tabContainer.appendChild(tabHeader);

        // 创建标签页内容容器
        const tabContent = document.createElement('div');
        tabContent.className = 'tab-content';

        // 创建百度翻译标签页
        const baiduContent = this._createBaiduTab();
        tabContent.appendChild(baiduContent);

        // 动态创建每个服务商的标签页内容
        this.services.forEach(service => {
            const serviceContent = this._createServiceContentTab(service);
            tabContent.appendChild(serviceContent);
        });

        tabContainer.appendChild(tabContent);
        container.appendChild(tabContainer);

        // 默认显示第一个标签页
        this._switchTab('baidu', tabHeader, tabContent);
    }

    /**
     * 创建标签页头部（包含所有服务商）
     */
    _createTabHeader() {
        const header = document.createElement('div');
        header.className = 'tab-header';

        // 百度翻译标签
        const baiduTab = this._createTabButton('baidu', tUI('百度翻译'), tUI('机器翻译'));
        header.appendChild(baiduTab);

        // 动态创建服务商标签
        this.services.forEach(service => {
            const tabButton = this._createTabButton(
                service.id,
                service.name || '未命名服务',
                service.description || ''
            );
            header.appendChild(tabButton);
        });

        // 创建"+"新增标签按钮
        const addButton = document.createElement('button');
        addButton.className = 'service-tab-add';
        addButton.innerHTML = '<i class="pi pi-plus"></i>';
        addButton.addEventListener('click', () => this._addNewService(header, header.nextElementSibling));
        header.appendChild(addButton);

        // 初始化拖拽排序
        new Sortable(header, {
            handle: '.tab-button',
            draggable: '.tab-button',
            filter: '.service-tab-add',  // 排除"+"按钮
            animation: 150,
            onEnd: async (evt) => {
                await this._updateServicesOrder();
            }
        });

        return header;
    }

    /**
     * 更新服务商顺序
     */
    async _updateServicesOrder() {
        try {
            // 从DOM读取当前标签顺序
            const header = document.querySelector('.tab-header');
            const buttons = header.querySelectorAll('.tab-button');
            const serviceIds = [];

            buttons.forEach(btn => {
                const tabId = btn.dataset.tab;
                // 排除特殊标签(如百度翻译)
                if (tabId && tabId !== 'baidu') {
                    serviceIds.push(tabId);
                }
            });

            // 调用后端API保存顺序
            const res = await fetch(APIService.getApiUrl('/services/order'), {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ service_ids: serviceIds })
            });

            const result = await res.json();

            if (result.success) {
                // 更新本地服务列表顺序
                const orderedServices = [];
                serviceIds.forEach(id => {
                    const service = this.services.find(s => s.id === id);
                    if (service) {
                        orderedServices.push(service);
                    }
                });

                // 添加未在orderedServices中的服务
                this.services.forEach(s => {
                    if (!orderedServices.find(os => os.id === s.id)) {
                        orderedServices.push(s);
                    }
                });

                this.services = orderedServices;

                logger.debug('服务商顺序已更新', { order: serviceIds });

                // 触发配置同步事件
                this.notifyConfigChange();
            } else {
                throw new Error(result.error || '更新顺序失败');
            }
        } catch (error) {
            logger.error('更新服务商顺序失败', error);
            app.extensionManager.toast.add({
                severity: "error",
                summary: "更新顺序失败",
                detail: error.message,
                life: 3000
            });
        }
    }


    /**
     * 创建单个标签按钮
     */
    _createTabButton(tabId, title, subtitle) {
        const button = document.createElement('button');
        button.className = 'tab-button';
        button.dataset.tab = tabId;

        // 标签标题
        const titleEl = document.createElement('div');
        titleEl.className = 'tab-title';
        titleEl.textContent = title;
        button.appendChild(titleEl);

        // 标签小字（介绍）
        if (subtitle) {
            const subtitleEl = document.createElement('div');
            subtitleEl.className = 'tab-subtitle';
            subtitleEl.textContent = subtitle;
            button.appendChild(subtitleEl);
        }

        // 点击切换标签
        button.addEventListener('click', () => {
            this._switchTab(tabId, button.parentElement, button.parentElement.nextElementSibling);
        });

        // 为服务商标签添加右键菜单（百度翻译和预置服务商除外）
        // 预置服务商不可编辑/删除，只有用户自定义的服务商才能使用右键菜单
        const isPresetService = APIConfigManager.PRESET_SERVICE_IDS.includes(tabId);
        if (tabId !== 'baidu' && !isPresetService) {
            this._attachServiceContextMenu(button, tabId, title);
        }

        return button;
    }

    /**
     * 切换标签页
     */
    _switchTab(tabId, header, contentContainer) {
        // 更新标签按钮状态
        header.querySelectorAll('.tab-button').forEach(btn => {
            if (btn.dataset.tab === tabId) {
                btn.classList.add('active');
            } else {
                btn.classList.remove('active');
            }
        });

        // 显示对应内容
        contentContainer.querySelectorAll('.tab-pane').forEach(pane => {
            pane.style.display = pane.dataset.tab === tabId ? 'block' : 'none';
        });
    }

    /**
     * 为服务标签附加右键菜单
     */
    _attachServiceContextMenu(button, serviceId, serviceName) {
        createContextMenu({
            target: button,
            items: [
                {
                    label: '修改服务商名称',
                    icon: 'pi-pencil',
                    onClick: () => {
                        this._editServiceName(button, serviceId, serviceName);
                    }
                },
                {
                    separator: true
                },
                {
                    label: '删除服务',
                    icon: 'pi-trash',
                    danger: true,  // 标记为危险操作，图标显示红色
                    onClick: () => {
                        this._deleteService(serviceId, serviceName);
                    }
                }
            ]
        });
    }

    /**
     * 修改服务商名称
     */
    _editServiceName(triggerButton, serviceId, currentName) {
        const service = this.services.find(s => s.id === serviceId);
        if (!service) return;

        createConfirmPopup({
            target: triggerButton,
            message: '修改服务商信息',
            icon: 'pi-pencil',
            position: 'bottom',
            confirmLabel: '保存',
            cancelLabel: '取消',
            renderFormContent: (formContainer) => {
                // 服务商名称输入框
                const nameInput = createInputGroup('服务商名称', '请输入服务商名称');
                nameInput.input.value = service.name || currentName;
                nameInput.input.dataset.fieldName = 'serviceName';
                formContainer.appendChild(nameInput.group);

                // 服务商介绍输入框
                const descInput = createInputGroup('服务商介绍', '请输入服务商介绍（可选）');
                descInput.input.value = service.description || '';
                descInput.input.dataset.fieldName = 'serviceDescription';
                formContainer.appendChild(descInput.group);
            },
            onConfirm: async (formContainer) => {
                try {
                    const nameInput = formContainer.querySelector('[data-field-name="serviceName"]');
                    const descInput = formContainer.querySelector('[data-field-name="serviceDescription"]');

                    const newName = nameInput.value.trim();
                    const newDescription = descInput.value.trim();

                    if (!newName) {
                        app.extensionManager.toast.add({
                            severity: "warn",
                            summary: "请输入服务商名称",
                            life: 2000
                        });
                        throw new Error('服务商名称不能为空');
                    }

                    // 更新服务商信息
                    await this._updateService(serviceId, {
                        name: newName,
                        description: newDescription
                    });

                    // 更新按钮显示
                    const titleEl = triggerButton.querySelector('.tab-title');
                    const subtitleEl = triggerButton.querySelector('.tab-subtitle');

                    if (titleEl) {
                        titleEl.textContent = newName;
                    }

                    if (subtitleEl) {
                        subtitleEl.textContent = newDescription;
                    } else if (newDescription) {
                        // 如果之前没有副标题，现在添加一个
                        const newSubtitleEl = document.createElement('div');
                        newSubtitleEl.className = 'tab-subtitle';
                        newSubtitleEl.textContent = newDescription;
                        triggerButton.appendChild(newSubtitleEl);
                    }

                    app.extensionManager.toast.add({
                        severity: "success",
                        summary: "服务商信息已更新",
                        detail: `${newName} ${tUI('更新成功')}`,
                        life: 2000
                    });
                } catch (error) {
                    logger.error('更新服务商信息失败', error);
                    app.extensionManager.toast.add({
                        severity: "error",
                        summary: "更新失败",
                        detail: error.message,
                        life: 3000
                    });
                    throw error;
                }
            }
        });
    }


    /**
     * 创建服务商内容标签页
     */
    _createServiceContentTab(service) {
        const pane = document.createElement('div');
        pane.className = 'tab-pane';
        pane.dataset.tab = service.id;
        pane.style.display = 'none';
        pane.style.padding = '16px';

        // 服务商配置卡片（复用现有的卡片创建逻辑）
        const card = this._createServiceCard(service);
        pane.appendChild(card);

        return pane;
    }

    /**
     * 新增服务商
     */
    async _addNewService(headerElement, contentElement) {
        // 获取触发按钮作为定位参考
        const triggerButton = headerElement.querySelector('.service-tab-add');

        // 显示确认气泡框
        createConfirmPopup({
            target: triggerButton,
            message: '创建新的服务商',
            icon: 'pi-plus-circle',
            position: 'left',
            confirmLabel: '创建',
            cancelLabel: '取消',
            renderFormContent: (formContainer) => {
                // 服务商名称输入框
                const nameInput = createInputGroup('服务商名称', '请输入服务商名称');
                nameInput.input.value = tUI('新服务商');
                nameInput.input.dataset.fieldName = 'serviceName';
                formContainer.appendChild(nameInput.group);

                // 服务商介绍输入框
                const descInput = createInputGroup('服务商介绍', '请输入服务商介绍（可选）');
                descInput.input.dataset.fieldName = 'serviceDescription';
                formContainer.appendChild(descInput.group);
            },
            onConfirm: async (formContainer) => {
                try {
                    // 获取表单数据
                    const nameInput = formContainer.querySelector('[data-field-name="serviceName"]');
                    const descInput = formContainer.querySelector('[data-field-name="serviceDescription"]');

                    const serviceName = nameInput.value.trim();
                    const serviceDescription = descInput.value.trim();

                    if (!serviceName) {
                        app.extensionManager.toast.add({
                            severity: "warn",
                            summary: "请输入服务商名称",
                            life: 2000
                        });
                        throw new Error('服务商名称不能为空');
                    }

                    // 创建服务商
                    const res = await fetch(APIService.getApiUrl('/services'), {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                            type: 'openai_compatible',
                            name: serviceName,
                            description: serviceDescription,
                            base_url: 'https://api.example.com/v1',
                            api_key: ''
                        })
                    });

                    const result = await res.json();

                    if (result.success) {
                        app.extensionManager.toast.add({
                            severity: "success",
                            summary: "新服务商已创建",
                            detail: `${serviceName} ${tUI('创建成功')}`,
                            life: 3000
                        });

                        // 重新加载配置
                        await this._loadAllConfigs();

                        // 获取新创建的服务
                        const newService = this.services.find(s => s.id === result.service_id);
                        if (newService) {
                            // 创建新标签按钮（插入到"+"按钮前）
                            const addButton = headerElement.querySelector('.service-tab-add');
                            const newTabButton = this._createTabButton(
                                newService.id,
                                newService.name || '未命名服务',
                                newService.description || ''
                            );
                            headerElement.insertBefore(newTabButton, addButton);

                            // 创建新内容标签页
                            const newContentPane = this._createServiceContentTab(newService);
                            contentElement.appendChild(newContentPane);

                            // 切换到新标签
                            this._switchTab(newService.id, headerElement, contentElement);
                        }

                        // 触发配置同步事件
                        this.notifyConfigChange();
                    } else {
                        throw new Error(result.error || '创建失败');
                    }
                } catch (error) {
                    logger.error('创建服务商失败', error);
                    app.extensionManager.toast.add({
                        severity: "error",
                        summary: "创建失败",
                        detail: error.message,
                        life: 3000
                    });
                    throw error;
                }
            }
        });
    }

    /**
     * 创建百度翻译标签页
     */
    _createBaiduTab() {
        const pane = document.createElement('div');
        pane.className = 'tab-pane';
        pane.dataset.tab = 'baidu';

        const section = createFormGroup('百度翻译配置', [
            { text: '开通百度翻译服务', url: 'https://fanyi-api.baidu.com/' }
        ]);
        section.classList.add('baidu-translate-section');

        // 为链接添加图标,与其他服务保持统一
        const linkElement = section.querySelector('.settings-service-link');
        if (linkElement) {
            const icon = document.createElement('i');
            icon.className = 'pi pi-star';
            icon.style.marginRight = '4px';
            linkElement.insertBefore(icon, linkElement.firstChild);
        }

        const appIdInput = createInputGroup('AppID', '请输入百度翻译 AppID');
        appIdInput.input.value = this.baiduConfig.app_id || '';
        appIdInput.input.addEventListener('input', (e) => {
            this.baiduConfig.app_id = e.target.value;
        });
        // 添加失焦保存
        appIdInput.input.addEventListener('blur', async () => {
            await this._saveBaiduConfig();
        });

        const secretInput = createInputGroup('Secret Key', '请输入百度翻译密钥');
        secretInput.input.type = 'password';
        secretInput.input.value = this.baiduConfig.secret_key || '';
        secretInput.input.addEventListener('input', (e) => {
            this.baiduConfig.secret_key = e.target.value;
        });
        // 添加失焦保存
        secretInput.input.addEventListener('blur', async () => {
            await this._saveBaiduConfig();
        });

        section.appendChild(appIdInput.group);
        section.appendChild(secretInput.group);
        pane.appendChild(section);

        return pane;
    }

    /**
     * 创建通用服务商标签页（二级标签页结构）
     */
    _createServicesTab() {
        const pane = document.createElement('div');
        pane.className = 'tab-pane services-tab-pane';
        pane.dataset.tab = 'services';
        // 样式已移至CSS

        // 二级标签页导航
        const subTabNav = document.createElement('div');
        subTabNav.className = 'service-sub-tabs';
        // 样式已移至CSS

        // 二级标签页内容容器
        const subTabContent = document.createElement('div');
        subTabContent.className = 'service-sub-content';

        // 获取通用服务商
        const genericServices = this.services.filter(s => s.type === 'openai_compatible');

        // 创建服务商标签
        genericServices.forEach((service, index) => {
            // 创建标签按钮
            const tabButton = this._createServiceTabButton(service);
            subTabNav.appendChild(tabButton);

            // 创建标签内容
            const tabContentPane = this._createServiceTabContent(service);
            subTabContent.appendChild(tabContentPane);

            // 默认选中第一个
            if (index === 0) {
                tabButton.classList.add('active');
                tabContentPane.style.display = 'block';
            }
        });

        // 创建"+"新增标签按钮
        const addTabButton = document.createElement('button');
        addTabButton.className = 'service-tab-add';
        addTabButton.textContent = '+';
        addTabButton.addEventListener('click', () => this._addNewServiceTab(subTabNav, subTabContent));
        subTabNav.appendChild(addTabButton);

        // 如果没有任何服务商，显示空状态
        if (genericServices.length === 0) {
            const emptyHint = document.createElement('div');
            emptyHint.className = 'empty-state-hint';
            emptyHint.innerHTML = `
                <div style="font-size: 48px; margin-bottom: 16px;">📦</div>
                <div style="font-size: 16px; margin-bottom: 8px;">暂无服务商</div>
                <div style="font-size: 14px;">点击右上角"+"按钮新增第一个服务商</div>
            `;
            subTabContent.appendChild(emptyHint);
        }

        pane.appendChild(subTabNav);
        pane.appendChild(subTabContent);
        return pane;
    }

    /**
     * 创建服务商标签按钮
     */
    _createServiceTabButton(service) {
        const button = document.createElement('button');
        button.className = 'service-tab-button';
        button.dataset.serviceId = service.id;

        // 标签标题
        const title = document.createElement('div');
        title.className = 'service-tab-title';
        title.textContent = service.name || '未命名服务';

        // 标签小字（介绍）
        const subtitle = document.createElement('div');
        subtitle.className = 'service-tab-subtitle';
        subtitle.textContent = service.description || '';

        button.appendChild(title);
        if (service.description) {
            button.appendChild(subtitle);
        }

        // 点击切换
        button.addEventListener('click', () => {
            this._switchServiceTab(service.id);
        });

        return button;
    }

    /**
     * 切换服务商标签
     */
    _switchServiceTab(serviceId) {
        const container = document.querySelector('.services-tab-pane');
        if (!container) return;

        // 更新标签按钮状态
        const buttons = container.querySelectorAll('.service-tab-button');
        buttons.forEach(btn => {
            if (btn.dataset.serviceId === serviceId) {
                btn.classList.add('active');
                btn.style.background = 'var(--p-primary-500)';
                btn.style.color = 'white';
                btn.querySelector('.service-tab-title').style.color = 'white';
                const subtitle = btn.querySelector('.service-tab-subtitle');
                if (subtitle) {
                    subtitle.style.color = 'rgba(255, 255, 255, 0.8)';
                }
            } else {
                btn.classList.remove('active');
                btn.style.background = 'transparent';
                btn.style.color = 'var(--p-text-color)';
                btn.querySelector('.service-tab-title').style.color = 'var(--p-text-color)';
                const subtitle = btn.querySelector('.service-tab-subtitle');
                if (subtitle) {
                    subtitle.style.color = 'var(--p-text-muted-color)';
                }
            }
        });

        // 更新内容显示
        const panes = container.querySelectorAll('.service-content-pane');
        panes.forEach(pane => {
            pane.style.display = pane.dataset.serviceId === serviceId ? 'block' : 'none';
        });
    }

    /**
     * 创建服务商标签内容
     */
    _createServiceTabContent(service) {
        const contentPane = document.createElement('div');
        contentPane.className = 'service-content-pane';
        contentPane.dataset.serviceId = service.id;
        contentPane.style.cssText = `
            display: none;
        `;

        // 这里先创建一个简单的占位内容，后续会完善
        const card = this._createServiceCard(service);
        contentPane.appendChild(card);

        return contentPane;
    }

    /**
     * 添加新服务商标签
     */
    async _addNewServiceTab(navContainer, contentContainer) {
        // 调用后端API创建新服务商
        try {
            const res = await fetch(APIService.getApiUrl('/services'), {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    type: 'openai_compatible',
                    name: tUI('新服务商'),
                    description: '',
                    base_url: 'https://api.example.com/v1',
                    api_key: ''
                })
            });

            const result = await res.json();

            if (result.success) {
                app.extensionManager.toast.add({
                    severity: "success",
                    summary: "新服务商已创建",
                    detail: tUI("请填写配置信息"),
                    life: 3000
                });

                // 重新加载配置
                await this._loadAllConfigs();

                // 获取新创建的服务
                const newService = this.services.find(s => s.id === result.service_id);
                if (newService) {
                    // 创建新标签按钮（插入到"+"按钮前）
                    const newTabButton = this._createServiceTabButton(newService);
                    const addButton = navContainer.querySelector('.service-tab-add');
                    navContainer.insertBefore(newTabButton, addButton);

                    // 创建新内容
                    const newContentPane = this._createServiceTabContent(newService);
                    contentContainer.appendChild(newContentPane);

                    // 移除空状态提示（如果有）
                    const emptyHint = contentContainer.querySelector('.empty-state-hint');
                    if (emptyHint) {
                        emptyHint.remove();
                    }

                    // 切换到新标签
                    this._switchServiceTab(newService.id);
                }
            } else {
                throw new Error(result.error || '创建失败');
            }
        } catch (error) {
            logger.error('创建服务商失败', error);
            app.extensionManager.toast.add({
                severity: "error",
                summary: "创建失败",
                detail: error.message,
                life: 3000
            });
        }
    }

    /**
     * 创建Ollama标签页
     */
    _createOllamaTab() {
        const pane = document.createElement('div');
        pane.className = 'tab-pane';
        pane.dataset.tab = 'ollama';
        // 样式已移至CSS

        const ollamaService = this.services.find(s => s.type === 'ollama');

        if (ollamaService) {
            const card = this._createServiceCard(ollamaService);
            pane.appendChild(card);
        } else {
            const hint = document.createElement('div');
            hint.className = 'empty-state-hint-small';
            hint.textContent = 'Ollama服务未配置';
            pane.appendChild(hint);
        }

        return pane;
    }

    /**
     * 创建服务商卡片
     */
    _createServiceCard(service) {
        const card = document.createElement('div');
        card.className = 'service-card';
        card.dataset.serviceId = service.id;  // 添加serviceId到dataset

        // 服务商标题 - 根据服务名称检测是否需要添加外部链接
        const titleText = service.name || service.id;
        const descText = service.description ? ` ${tUI('信息配置')}` : '';
        const fullTitle = `1️⃣ ${titleText}${descText}`;

        // 检测服务名称,添加对应的申请链接
        const links = [];
        const serviceName = (service.name || '').toLowerCase();
        const serviceId = (service.id || '').toLowerCase();
        const searchText = `${serviceName} ${serviceId}`.toLowerCase();

        // 智谱服务检测
        if (searchText.includes('智谱') || searchText.includes('zhipu')) {
            links.push({
                text: '开通智谱API服务',
                url: 'https://www.bigmodel.cn/invite?icode=Wz1tQAT40T9M8vwp%2F1db7nHEaazDlIZGj9HxftzTbt4%3D',
                icon: 'pi-star'
            });
        }

        // 硅基流动服务检测
        if (searchText.includes('硅基') || searchText.includes('siliconflow') || searchText.includes('silicon')) {
            links.push({
                text: '开通硅基流动API服务',
                url: 'https://cloud.siliconflow.cn/i/FCDL2zBQ',
                icon: 'pi-star'
            });
        }

        // xflow服务检测
        if (searchText.includes('xflow')) {
            links.push({
                text: '开通xflow API服务',
                url: 'https://api.xflow.cc/register?aff=Z063',
                icon: 'pi-star'
            });
        }

        // 使用createFormGroup创建带链接的标题,或者普通标题
        let titleSection;
        if (links.length > 0) {
            titleSection = createFormGroup(fullTitle, links.map(link => ({
                text: link.text,
                url: link.url
            })));
            // 为链接添加图标
            const linkElements = titleSection.querySelectorAll('.settings-service-link');
            linkElements.forEach((linkElem, index) => {
                if (links[index] && links[index].icon) {
                    const icon = document.createElement('i');
                    icon.className = `pi ${links[index].icon}`;
                    icon.style.marginRight = '4px';
                    linkElem.insertBefore(icon, linkElem.firstChild);
                }
            });
        } else {
            // 没有链接时,创建普通标题
            titleSection = document.createElement('div');
            titleSection.className = 'settings-form-section';
            const titleElement = document.createElement('h3');
            titleElement.className = 'settings-form-section-title';
            titleElement.textContent = fullTitle;
            titleSection.appendChild(titleElement);
        }

        // 如果是 Ollama 服务，在标题后方添加提示 tooltip
        if (service.type === 'ollama') {
            const titleElement = titleSection.querySelector('.settings-form-section-title');
            if (titleElement) {
                // 确保 h3 可以包含其他元素，设置为 flex 以对齐图标
                titleElement.style.display = 'inline-flex';
                titleElement.style.alignItems = 'center';

                const icon = document.createElement('i');
                icon.className = 'pi pi-info-circle service-setting-info-icon';
                icon.style.marginLeft = '8px';
                icon.style.fontSize = '14px';
                icon.style.color = 'var(--p-text-muted-color)';
                icon.style.cursor = 'help';
                titleElement.appendChild(icon);
                
                createTooltip({
                    target: icon,
                    content: '建议不要在地址后方添加 /v1。不加 /v1 会走原生 Ollama API，加了 /v1 则会走 OpenAI 兼容请求格式。',
                    position: 'top'
                });
            }
        }

        card.appendChild(titleSection);

        // 基本信息
        const baseUrlInput = createInputGroup('Base URL', 'https://api.example.com/v1');
        baseUrlInput.input.value = service.base_url || '';
        // 智谱和 xflow 服务的 Base URL 禁用修改
        if (service.id === 'zhipu' || service.id === 'xFlow') {
            baseUrlInput.input.disabled = true;
            baseUrlInput.input.title = tUI('该预置服务商的 Base URL 不可修改');
            baseUrlInput.input.classList.add('pa-input-disabled');
        }

        baseUrlInput.input.addEventListener('change', async (e) => {
            await this._updateService(service.id, { base_url: e.target.value });
        });

        // API Key输入框（简化版，直接使用明文）
        const apiKeyInput = createInputGroup('API Key', '请输入API Key');
        apiKeyInput.input.type = 'password';
        apiKeyInput.input.value = service.api_key || '';

        // 失焦时保存
        apiKeyInput.input.addEventListener('blur', async (e) => {
            const newApiKey = e.target.value.trim();
            if (newApiKey !== service.api_key) {
                await this._updateService(service.id, { api_key: newApiKey });
                service.api_key = newApiKey;
            }
        });

        card.appendChild(baseUrlInput.group);
        card.appendChild(apiKeyInput.group);

        // === 服务配置区域（简化版） ===
        // 创建配置项容器
        const settingsInlineContainer = document.createElement('div');
        settingsInlineContainer.className = 'service-settings-inline';

        // 思维链控制开关
        const thinkingContainer = document.createElement('div');
        thinkingContainer.className = 'service-setting-item';

        const thinkingLabel = document.createElement('span');
        thinkingLabel.className = 'service-setting-label';
        thinkingLabel.textContent = tUI('关闭思维链');

        const thinkingIcon = document.createElement('i');
        thinkingIcon.className = 'pi pi-info-circle service-setting-info-icon';

        // 添加 tooltip
        createTooltip({
            target: thinkingIcon,
            content: '针对部分支持关闭思维链的模型进行关闭。⚠️：并不是所有模型都支持，关闭思维链的模型会在日志中的模型信息后面多出一个“✏️”符号。',
            position: 'top'
        });

        const thinkingLabelWrapper = document.createElement('div');
        thinkingLabelWrapper.className = 'service-setting-label-wrapper';
        thinkingLabelWrapper.appendChild(thinkingLabel);
        thinkingLabelWrapper.appendChild(thinkingIcon);

        // 创建开关
        const thinkingSwitchWrapper = document.createElement('label');
        thinkingSwitchWrapper.className = 'switch-wrapper';

        const thinkingInput = document.createElement('input');
        thinkingInput.type = 'checkbox';
        thinkingInput.checked = service.disable_thinking ?? true;

        const thinkingSlider = document.createElement('span');
        thinkingSlider.className = `switch-slider${thinkingInput.checked ? ' checked' : ''}`;

        const thinkingButton = document.createElement('span');
        thinkingButton.className = `switch-button${thinkingInput.checked ? ' checked' : ''}`;
        thinkingSlider.appendChild(thinkingButton);

        thinkingInput.addEventListener('change', async (e) => {
            const isChecked = e.target.checked;
            if (isChecked) {
                thinkingSlider.classList.add('checked');
                thinkingButton.classList.add('checked');
            } else {
                thinkingSlider.classList.remove('checked');
                thinkingButton.classList.remove('checked');
            }
            await this._updateService(service.id, { disable_thinking: isChecked });
            service.disable_thinking = isChecked;
        });

        thinkingSwitchWrapper.appendChild(thinkingInput);
        thinkingSwitchWrapper.appendChild(thinkingSlider);

        thinkingContainer.appendChild(thinkingLabelWrapper);
        thinkingContainer.appendChild(thinkingSwitchWrapper);
        settingsInlineContainer.appendChild(thinkingContainer);

        // ---启用高级参数开关---
        const advancedParamsContainer = document.createElement('div');
        advancedParamsContainer.className = 'service-setting-item';

        const advancedParamsLabel = document.createElement('span');
        advancedParamsLabel.className = 'service-setting-label';
        advancedParamsLabel.textContent = tUI('启用高级参数');

        const advancedParamsIcon = document.createElement('i');
        advancedParamsIcon.className = 'pi pi-info-circle service-setting-info-icon';

        // 添加 tooltip
        createTooltip({
            target: advancedParamsIcon,
            content: '启用后将发送 temperature、top_p、max_tokens 参数以精细控制模型行为,限制最大tonken数来提升速度。如果关闭则可以提升兼容性。',
            position: 'top'
        });

        const advancedParamsLabelWrapper = document.createElement('div');
        advancedParamsLabelWrapper.className = 'service-setting-label-wrapper';
        advancedParamsLabelWrapper.appendChild(advancedParamsLabel);
        advancedParamsLabelWrapper.appendChild(advancedParamsIcon);

        // 创建开关
        const advancedParamsSwitchWrapper = document.createElement('label');
        advancedParamsSwitchWrapper.className = 'switch-wrapper';

        const advancedParamsInput = document.createElement('input');
        advancedParamsInput.type = 'checkbox';
        advancedParamsInput.checked = service.enable_advanced_params ?? false;

        const advancedParamsSlider = document.createElement('span');
        advancedParamsSlider.className = `switch-slider${advancedParamsInput.checked ? ' checked' : ''}`;

        const advancedParamsButton = document.createElement('span');
        advancedParamsButton.className = `switch-button${advancedParamsInput.checked ? ' checked' : ''}`;
        advancedParamsSlider.appendChild(advancedParamsButton);

        advancedParamsInput.addEventListener('change', async (e) => {
            const isChecked = e.target.checked;
            if (isChecked) {
                advancedParamsSlider.classList.add('checked');
                advancedParamsButton.classList.add('checked');
            } else {
                advancedParamsSlider.classList.remove('checked');
                advancedParamsButton.classList.remove('checked');
            }
            await this._updateService(service.id, { enable_advanced_params: isChecked });
            service.enable_advanced_params = isChecked;
        });

        advancedParamsSwitchWrapper.appendChild(advancedParamsInput);
        advancedParamsSwitchWrapper.appendChild(advancedParamsSlider);

        advancedParamsContainer.appendChild(advancedParamsLabelWrapper);
        advancedParamsContainer.appendChild(advancedParamsSwitchWrapper);
        settingsInlineContainer.appendChild(advancedParamsContainer);

        // ---过滤思维链输出开关---
        const filterThinkingContainer = document.createElement('div');
        filterThinkingContainer.className = 'service-setting-item';

        const filterThinkingLabel = document.createElement('span');
        filterThinkingLabel.className = 'service-setting-label';
        filterThinkingLabel.textContent = tUI('过滤思维链输出');

        const filterThinkingIcon = document.createElement('i');
        filterThinkingIcon.className = 'pi pi-info-circle service-setting-info-icon';

        // 添加 tooltip
        createTooltip({
            target: filterThinkingIcon,
            content: '针对无法关闭思维链模型，移除思考过程内容。默认开启。',
            position: 'top'
        });

        const filterThinkingLabelWrapper = document.createElement('div');
        filterThinkingLabelWrapper.className = 'service-setting-label-wrapper';
        filterThinkingLabelWrapper.appendChild(filterThinkingLabel);
        filterThinkingLabelWrapper.appendChild(filterThinkingIcon);

        // 创建开关
        const filterThinkingSwitchWrapper = document.createElement('label');
        filterThinkingSwitchWrapper.className = 'switch-wrapper';

        const filterThinkingInput = document.createElement('input');
        filterThinkingInput.type = 'checkbox';
        filterThinkingInput.checked = service.filter_thinking_output ?? true;

        const filterThinkingSlider = document.createElement('span');
        filterThinkingSlider.className = `switch-slider${filterThinkingInput.checked ? ' checked' : ''}`;

        const filterThinkingButton = document.createElement('span');
        filterThinkingButton.className = `switch-button${filterThinkingInput.checked ? ' checked' : ''}`;
        filterThinkingSlider.appendChild(filterThinkingButton);

        filterThinkingInput.addEventListener('change', async (e) => {
            const isChecked = e.target.checked;
            if (isChecked) {
                filterThinkingSlider.classList.add('checked');
                filterThinkingButton.classList.add('checked');
            } else {
                filterThinkingSlider.classList.remove('checked');
                filterThinkingButton.classList.remove('checked');
            }
            await this._updateService(service.id, { filter_thinking_output: isChecked });
            service.filter_thinking_output = isChecked;
        });

        filterThinkingSwitchWrapper.appendChild(filterThinkingInput);
        filterThinkingSwitchWrapper.appendChild(filterThinkingSlider);

        filterThinkingContainer.appendChild(filterThinkingLabelWrapper);
        filterThinkingContainer.appendChild(filterThinkingSwitchWrapper);
        settingsInlineContainer.appendChild(filterThinkingContainer);

        // Ollama专属:自动释放模型开关(仅前端UI)
        if (service.type === 'ollama') {
            const autoUnloadContainer = document.createElement('div');
            autoUnloadContainer.className = 'service-setting-item';

            const autoUnloadLabel = document.createElement('span');
            autoUnloadLabel.className = 'service-setting-label';
            autoUnloadLabel.textContent = tUI('自动释放模型');

            const autoUnloadIcon = document.createElement('i');
            autoUnloadIcon.className = 'pi pi-info-circle service-setting-info-icon';

            // 添加 tooltip
            createTooltip({
                target: autoUnloadIcon,
                content: '请求完成后自动卸载模型以释放显存。⚠️该选项对针对前端小助手生效，节点有独立的选项。',
                position: 'top'
            });

            const autoUnloadLabelWrapper = document.createElement('div');
            autoUnloadLabelWrapper.className = 'service-setting-label-wrapper';
            autoUnloadLabelWrapper.appendChild(autoUnloadLabel);
            autoUnloadLabelWrapper.appendChild(autoUnloadIcon);

            // 创建开关
            const autoUnloadSwitchWrapper = document.createElement('label');
            autoUnloadSwitchWrapper.className = 'switch-wrapper';

            const autoUnloadInput = document.createElement('input');
            autoUnloadInput.type = 'checkbox';
            autoUnloadInput.checked = service.auto_unload !== false;

            const autoUnloadSlider = document.createElement('span');
            autoUnloadSlider.className = `switch-slider${autoUnloadInput.checked ? ' checked' : ''}`;

            const autoUnloadButton = document.createElement('span');
            autoUnloadButton.className = `switch-button${autoUnloadInput.checked ? ' checked' : ''}`;
            autoUnloadSlider.appendChild(autoUnloadButton);

            autoUnloadInput.addEventListener('change', async (e) => {
                const isChecked = e.target.checked;
                if (isChecked) {
                    autoUnloadSlider.classList.add('checked');
                    autoUnloadButton.classList.add('checked');
                } else {
                    autoUnloadSlider.classList.remove('checked');
                    autoUnloadButton.classList.remove('checked');
                }
                await this._updateService(service.id, { auto_unload: isChecked });
                service.auto_unload = isChecked;
            });

            autoUnloadSwitchWrapper.appendChild(autoUnloadInput);
            autoUnloadSwitchWrapper.appendChild(autoUnloadSlider);

            autoUnloadContainer.appendChild(autoUnloadLabelWrapper);
            autoUnloadContainer.appendChild(autoUnloadSwitchWrapper);
            settingsInlineContainer.appendChild(autoUnloadContainer);
        }

        card.appendChild(settingsInlineContainer);

        // LLM模型部分
        const llmSection = this._createModelSection(service, 'llm');
        card.appendChild(llmSection);

        // VLM模型部分
        const vlmSection = this._createModelSection(service, 'vlm');
        card.appendChild(vlmSection);

        return card;
    }


    /**
     * 创建模型配置部分
     */
    _createModelSection(service, modelType) {
        const section = document.createElement('div');
        section.className = 'settings-form-section';
        section.style.marginTop = '16px';

        // 标题行（包含模型类型和+按钮）
        const titleRow = document.createElement('div');
        titleRow.style.cssText = `
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        `;

        const title = document.createElement('h5');
        title.className = 'settings-form-section-title';
        title.textContent = modelType === 'llm'
            ? tUI('2️⃣ 添加翻译、提示词优化的大语言模型 (LLM)')
            : tUI('3️⃣ 添加图像、视频反推的视觉模型 (VLM)');
        title.style.margin = '0';
        title.style.display = 'inline-flex';
        title.style.alignItems = 'center';

        const modelHintIcon = document.createElement('i');
        modelHintIcon.className = 'pi pi-exclamation-circle service-setting-info-icon';
        modelHintIcon.style.marginLeft = '8px';
        modelHintIcon.style.fontSize = '14px';
        modelHintIcon.style.color = 'var(--p-text-muted-color)';
        modelHintIcon.style.cursor = 'help';
        title.appendChild(modelHintIcon);

        createTooltip({
            target: modelHintIcon,
            content: '建议优先选择非思考模型或指令型（-instruct）模型，以减少思维链输出、截断和响应不稳定的问题。',
            position: 'top'
        });

        // 添加模型按钮
        const addButton = document.createElement('button');
        addButton.className = 'p-button p-component p-button-sm';
        addButton.innerHTML = `<span class="p-button-icon-left pi pi-plus"></span><span class="p-button-label">${tUI('添加模型')}</span>`;
        addButton.addEventListener('click', () => this._showAddModelDialog(service, modelType, modelsContainer));

        titleRow.appendChild(title);
        titleRow.appendChild(addButton);
        section.appendChild(titleRow);

        // 模型标签容器（可拖动排序）
        const modelsContainer = document.createElement('div');
        modelsContainer.className = 'models-container';
        modelsContainer.dataset.serviceId = service.id;
        modelsContainer.dataset.modelType = modelType;

        const models = modelType === 'llm' ? service.llm_models : service.vlm_models;

        if (models && models.length > 0) {
            models.forEach((model) => {
                const modelTag = this._createModelTag(model, service, modelType);
                modelsContainer.appendChild(modelTag);
            });

            // 初始化Sortable拖动排序并保存实例
            modelsContainer.sortableInstance = new Sortable(modelsContainer, {
                animation: 150,
                ghostClass: 'sortable-ghost',
                handle: '.model-tag',  // 整个标签都可以拖动
                onEnd: async (evt) => {
                    // 拖动结束后更新模型顺序
                    await this._updateModelOrder(service.id, modelType, modelsContainer);
                }
            });
        } else {
            const emptyHint = document.createElement('div');
            emptyHint.className = 'empty-hint';
            emptyHint.textContent = tUI('暂无配置模型，点击"+ 添加模型"开始配置');
            emptyHint.style.cssText = `
                font-size: 12px;
                color: var(--p-text-muted-color);
                padding: 8px;
            `;
            modelsContainer.appendChild(emptyHint);
        }

        section.appendChild(modelsContainer);

        // 移除固定的高级设置区域 - 现在点击模型标签时弹出气泡框编辑

        return section;
    }

    /**
     * 创建模型标签
     */
    _createModelTag(model, service, modelType) {
        const tag = document.createElement('div');
        tag.className = `model-tag${model.is_default ? ' default' : ''}`;
        tag.dataset.modelName = model.name;
        tag.dataset.selected = 'false';

        // 模型图标
        const iconSpan = document.createElement('i');
        iconSpan.className = 'pi pi-sparkles model-tag-icon';
        tag.appendChild(iconSpan);

        // 模型名称
        const nameSpan = document.createElement('span');
        nameSpan.className = 'model-tag-name';
        nameSpan.textContent = model.name;
        tag.appendChild(nameSpan);

        // 默认标记
        if (model.is_default) {
            const defaultBadge = document.createElement('span');
            defaultBadge.className = 'model-tag-badge';
            defaultBadge.textContent = tUI('默认');
            tag.appendChild(defaultBadge);
        }

        // 删除按钮
        const deleteBtn = document.createElement('button');
        deleteBtn.innerHTML = '×';
        deleteBtn.className = 'model-delete-btn';
        deleteBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            this._deleteModel(service, modelType, model.name, tag);
        });
        tag.appendChild(deleteBtn);

        // ---点击选中状态---
        tag.addEventListener('click', (e) => {
            // 如果点击的是删除按钮,不触发选中
            if (e.target.closest('.model-delete-btn')) {
                return;
            }
            // 移除同容器内其他标签的选中状态
            const container = tag.parentElement;
            if (container) {
                container.querySelectorAll('.model-tag.selected').forEach(t => {
                    t.classList.remove('selected');
                });
            }
            // 添加当前标签的选中状态
            tag.classList.add('selected');
        });

        // ---右键菜单---
        // 使用函数形式动态获取菜单项,确保每次显示菜单时都能获取最新的模型状态
        const getMenuItems = () => {
            // 从本地数据中获取最新的模型状态
            const models = modelType === 'llm' ? service.llm_models : service.vlm_models;
            const currentModel = models.find(m => m.name === model.name);
            const isDefault = currentModel ? currentModel.is_default : false;

            return [
                {
                    label: '设为默认模型',
                    icon: 'pi-star',
                    disabled: isDefault, // 动态获取当前是否为默认模型
                    onClick: () => {
                        this._setDefaultModel(service, modelType, model.name, tag);
                    }
                },
                { separator: true }, // 分隔线
                {
                    label: '修改模型参数设置',
                    icon: 'pi-cog',
                    onClick: () => {
                        this._selectModelForEdit(service, modelType, model.name, tag);
                    }
                }
            ];
        };

        createContextMenu({
            target: tag,
            items: getMenuItems
        });

        return tag;
    }

    /**
     * 选中模型进行编辑（弹出气泡框）
     */
    _selectModelForEdit(service, modelType, modelName, tagElement) {
        // 保存this引用
        const self = this;

        // 获取模型数据
        const models = modelType === 'llm' ? service.llm_models : service.vlm_models;
        const selectedModel = models.find(m => m.name === modelName);

        if (!selectedModel) return;

        // 弹出气泡框编辑参数
        createConfirmPopup({
            target: tagElement,
            message: `模型参数设置`,
            icon: 'pi-cog',
            position: 'top',
            confirmLabel: '保存',
            cancelLabel: '取消',
            renderFormContent: (formContainer) => {
                // 为表单容器添加横向布局类
                formContainer.classList.add('model-params-form');

                // 温度 (Temperature)
                const tempInput = createInputGroup('温度 (Temperature)', '0.0 - 2.0', 'number');
                tempInput.input.min = '0';
                tempInput.input.max = '2';
                tempInput.input.step = '0.1';
                tempInput.input.value = selectedModel.temperature ?? 0.7;
                tempInput.input.dataset.fieldName = 'temperature';
                tempInput.group.style.width = '135px';
                formContainer.appendChild(tempInput.group);

                // 核采样 (Top-P)
                const topPInput = createInputGroup('核采样 (Top-P)', '0.0 - 1.0', 'number');
                topPInput.input.min = '0';
                topPInput.input.max = '1';
                topPInput.input.step = '0.1';
                topPInput.input.value = selectedModel.top_p ?? 0.9;
                topPInput.input.dataset.fieldName = 'top_p';
                topPInput.group.style.width = '135px';
                formContainer.appendChild(topPInput.group);

                // 最大Token数
                const maxTokensInput = createInputGroup('最大Token数', '1 - 8192', 'number');
                maxTokensInput.input.min = '1';
                maxTokensInput.input.max = '8192';
                maxTokensInput.input.step = '1';
                maxTokensInput.input.value = selectedModel.max_tokens ?? 4096;
                maxTokensInput.input.dataset.fieldName = 'max_tokens';
                maxTokensInput.group.style.width = '135px';
                formContainer.appendChild(maxTokensInput.group);
            },
            onConfirm: async (formContainer) => {
                try {
                    // 获取表单数据
                    const temperature = parseFloat(formContainer.querySelector('[data-field-name="temperature"]').value);
                    const top_p = parseFloat(formContainer.querySelector('[data-field-name="top_p"]').value);
                    const max_tokens = parseInt(formContainer.querySelector('[data-field-name="max_tokens"]').value);

                    // 验证数据
                    if (isNaN(temperature) || temperature < 0 || temperature > 2) {
                        app.extensionManager.toast.add({
                            severity: "warn",
                            summary: "温度值无效",
                            detail: "温度值应在 0 到 2 之间",
                            life: 2000
                        });
                        throw new Error('温度值无效');
                    }

                    if (isNaN(top_p) || top_p < 0 || top_p > 1) {
                        app.extensionManager.toast.add({
                            severity: "warn",
                            summary: "核采样值无效",
                            detail: "核采样值应在 0 到 1 之间",
                            life: 2000
                        });
                        throw new Error('核采样值无效');
                    }

                    if (isNaN(max_tokens) || max_tokens < 1 || max_tokens > 8192) {
                        app.extensionManager.toast.add({
                            severity: "warn",
                            summary: "最大Token数无效",
                            detail: "最大Token数应在 1 到 8192 之间",
                            life: 2000
                        });
                        throw new Error('最大Token数无效');
                    }

                    // 使用self代替this来调用方法
                    await self._updateModelParams(service.id, modelType, modelName, {
                        temperature,
                        top_p,
                        max_tokens
                    });

                    // 更新本地数据
                    selectedModel.temperature = temperature;
                    selectedModel.top_p = top_p;
                    selectedModel.max_tokens = max_tokens;

                    app.extensionManager.toast.add({
                        severity: "success",
                        summary: "参数已更新",
                        detail: `${modelName} ${tUI('的参数已保存')}`,
                        life: 2000
                    });
                } catch (error) {
                    logger.error('更新模型参数失败', error);
                    app.extensionManager.toast.add({
                        severity: "error",
                        summary: "更新失败",
                        detail: error.message,
                        life: 3000
                    });
                    throw error;
                }
            }
        });
    }

    /**
     * 批量更新模型参数
     */
    async _updateModelParams(serviceId, modelType, modelName, params) {
        if (!serviceId) {
            logger.error("更新模型参数失败: serviceId为空");
            throw new Error("服务ID不能为空");
        }
        try {
            // 依次更新每个参数
            for (const [paramName, paramValue] of Object.entries(params)) {
                const url = APIService.getApiUrl(`/services/${encodeURIComponent(serviceId)}/models/parameter`);
                logger.debug(`[v2] 正在更新参数: ${url}`, { modelType, modelName, paramName, paramValue });

                const res = await fetch(url, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        model_type: modelType,
                        model_name: modelName,
                        parameter_name: paramName,
                        parameter_value: paramValue
                    })
                });

                if (!res.ok) {
                    const text = await res.text();
                    logger.error(`更新参数请求失败: ${res.status} ${res.statusText}`, text);
                    throw new Error(`请求失败: ${res.status} ${res.statusText}`);
                }

                const text = await res.text();
                try {
                    const result = JSON.parse(text);
                    if (!result.success) {
                        throw new Error(result.error || '更新参数失败');
                    }
                } catch (e) {
                    logger.error(`解析响应JSON失败: ${text}`, e);
                    throw new Error(`解析响应失败: ${e.message}`);
                }
            }

            logger.debug(`已批量更新模型参数: ${modelName}`, params);

        } catch (error) {
            logger.error('批量更新模型参数失败', error);
            throw error;
        }
    }


    /**
     * 获取可用模型列表
     */
    async _getAvailableModels(service, modelType) {
        try {
            // 调用后端API获取模型列表
            const res = await fetch(APIService.getApiUrl(`/services/${service.id}/models?model_type=${modelType}`));
            const result = await res.json();

            // 返回结果包含success、models或error
            return result;

        } catch (error) {
            logger.error(`获取模型列表异常: ${error.message}`);
            return {
                success: false,
                error: `网络错误: ${error.message}`
            };
        }
    }

    /**
     * 显示添加模型列表框（使用多选组件）
     */
    _showAddModelDialog(service, modelType, container) {
        // 获取触发按钮
        const addBtn = event.target.closest('button');

        // 使用新的多选listbox组件
        createMultiSelectListbox({
            triggerElement: addBtn,
            placeholder: `${tUI('搜索')}${modelType === 'llm' ? 'LLM' : 'VLM'}${tUI('模型...')}`,
            fetchItems: async () => {
                const result = await this._getAvailableModels(service, modelType);

                if (!result.success) {
                    throw new Error(result.error || '获取模型列表失败');
                }

                return result.models[modelType] || [];
            },
            onConfirm: async (selectedModels, searchInputValue) => {
                // 如果没有勾选模型,但搜索框有内容,则将搜索框内容作为模型名称添加
                if (selectedModels.length === 0 && searchInputValue && searchInputValue.trim()) {
                    const modelName = searchInputValue.trim();
                    await this._addModel(service, modelType, modelName, container);
                } else {
                    // 批量添加选中的模型
                    for (const modelName of selectedModels) {
                        await this._addModel(service, modelType, modelName, container);
                    }
                }
            }
        });
    }

    /**
     * 获取推荐模型列表（已移除，返回空数组）
     */
    async _getRecommendedModels(modelType) {
        // 推荐模型已移除，所有模型从服务商API获取
        return [];
    }

    /**
     * 添加模型
     */
    async _addModel(service, modelType, modelName, container) {
        try {
            // 调用后端API添加模型
            const res = await fetch(APIService.getApiUrl(`/services/${service.id}/models`), {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    model_type: modelType,
                    model_name: modelName,
                    temperature: 0.7,
                    top_p: 0.9,
                    max_tokens: 4096
                })
            });

            const result = await res.json();

            if (!result.success) {
                throw new Error(result.error || '添加模型失败');
            }

            // 更新本地数据
            const modelList = modelType === 'llm' ? service.llm_models : service.vlm_models;
            if (!modelList) {
                if (modelType === 'llm') {
                    service.llm_models = [];
                } else {
                    service.vlm_models = [];
                }
            }

            const updatedList = modelType === 'llm' ? service.llm_models : service.vlm_models;
            updatedList.push({
                name: modelName,
                is_default: updatedList.length === 0,
                temperature: 0.7,
                top_p: 0.9,
                max_tokens: 4096
            });

            // 移除空提示
            const emptyHint = container.querySelector('.empty-hint');
            if (emptyHint) {
                emptyHint.remove();
            }

            // 添加新标签
            const newTag = this._createModelTag({
                name: modelName,
                is_default: updatedList.length === 1
            }, service, modelType);
            container.appendChild(newTag);

            // 初始化或更新Sortable（确保新添加的标签可以拖动）
            // 先销毁旧的Sortable实例（如果存在）
            if (container.sortableInstance) {
                container.sortableInstance.destroy();
            }

            // 创建新的Sortable实例
            container.sortableInstance = new Sortable(container, {
                animation: 150,
                ghostClass: 'sortable-ghost',
                handle: '.model-tag',
                onEnd: async (evt) => {
                    await this._updateModelOrder(service.id, modelType, container);
                }
            });

            app.extensionManager.toast.add({
                severity: "success",
                summary: "模型已添加",
                life: 2000
            });

        } catch (error) {
            logger.error('添加模型失败', error);
            app.extensionManager.toast.add({
                severity: "error",
                summary: "添加失败",
                detail: error.message,
                life: 3000
            });
        }
    }

    /**
     * 删除模型
     */
    async _deleteModel(service, modelType, modelName, tagElement) {
        // 使用createSettingsDialog创建确认窗口
        createSettingsDialog({
            title: `<i class="pi pi-exclamation-triangle" style="margin-right: 8px; color: var(--p-orange-500);"></i>${tUI('确认删除')}`,
            isConfirmDialog: true,
            dialogClassName: 'confirm-dialog',
            saveButtonText: tUI('删除'),
            saveButtonIcon: 'pi-trash',
            isDangerButton: true,
            cancelButtonText: tUI('取消'),
            renderContent: (content) => {
                content.className = 'confirm-dialog-content-simple';

                const confirmMessage = document.createElement('p');
                confirmMessage.className = 'confirm-dialog-message-simple';
                confirmMessage.textContent = `${tUI('确定要删除模型')} "${modelName}" ${tUI('吗？')}`;

                content.appendChild(confirmMessage);
            },
            onSave: async () => {
                try {
                    // 调用后端API删除模型
                    const res = await fetch(APIService.getApiUrl(`/services/${service.id}/models/${modelType}/${encodeURIComponent(modelName)}`), {
                        method: 'DELETE'
                    });

                    const result = await res.json();

                    if (!result.success) {
                        throw new Error(result.error || '删除模型失败');
                    }

                    // 更新本地数据
                    const models = modelType === 'llm' ? service.llm_models : service.vlm_models;
                    const index = models.findIndex(m => m.name === modelName);
                    if (index >= 0) {
                        models.splice(index, 1);
                    }

                    // 移除标签
                    tagElement.remove();

                    // 如果删除后为空，显示空提示
                    const container = tagElement.parentElement;
                    if (container && container.children.length === 0) {
                        const emptyHint = document.createElement('div');
                        emptyHint.className = 'empty-hint';
                        emptyHint.textContent = tUI('暂无配置模型，点击"+ 添加模型"开始配置');
                        emptyHint.style.cssText = `
                            font-size: 12px;
                            color: var(--p-text-muted-color);
                            padding: 8px;
                        `;
                        container.appendChild(emptyHint);
                    }

                    app.extensionManager.toast.add({
                        severity: "success",
                        summary: "模型已删除",
                        life: 2000
                    });

                    return true; // 允许关闭对话框

                } catch (error) {
                    logger.error('删除模型失败', error);
                    app.extensionManager.toast.add({
                        severity: "error",
                        summary: "删除失败",
                        detail: error.message,
                        life: 3000
                    });
                    return false; // 阻止关闭对话框
                }
            }
        });
    }

    /**
     * 设置默认模型
     */
    async _setDefaultModel(service, modelType, modelName, tagElement) {
        try {
            // 调用后端API设置默认模型
            const res = await fetch(APIService.getApiUrl(`/services/${service.id}/models/default`), {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    model_type: modelType,
                    model_name: modelName
                })
            });

            const result = await res.json();

            if (!result.success) {
                throw new Error(result.error || '设置默认模型失败');
            }

            // 更新本地数据
            const models = modelType === 'llm' ? service.llm_models : service.vlm_models;
            models.forEach(m => {
                m.is_default = m.name === modelName;
            });

            // ---直接更新DOM，无需重新加载---
            const container = tagElement?.parentElement;
            if (container) {
                // 移除所有标签的默认状态
                container.querySelectorAll('.model-tag').forEach(tag => {
                    tag.classList.remove('default');
                    // 移除旧的默认标记
                    const oldBadge = tag.querySelector('.model-tag-badge');
                    if (oldBadge) {
                        oldBadge.remove();
                    }
                });

                // 为新的默认模型添加样式和标记
                if (tagElement) {
                    tagElement.classList.add('default');
                    // 在名称后面添加默认标记
                    const nameSpan = tagElement.querySelector('.model-tag-name');
                    if (nameSpan) {
                        const defaultBadge = document.createElement('span');
                        defaultBadge.className = 'model-tag-badge';
                        defaultBadge.textContent = tUI('默认');
                        nameSpan.after(defaultBadge);
                    }
                }
            }

            app.extensionManager.toast.add({
                severity: "success",
                summary: `${tUI('已设置')} "${modelName}" ${tUI('为默认模型')}`,
                life: 2000
            });

        } catch (error) {
            logger.error('设置默认模型失败', error);
            app.extensionManager.toast.add({
                severity: "error",
                summary: "设置失败",
                detail: error.message,
                life: 3000
            });
        }
    }

    /**
     * 更新模型顺序
     */
    async _updateModelOrder(serviceId, modelType, container) {
        try {
            const modelTags = container.querySelectorAll('.model-tag');
            const newOrder = Array.from(modelTags).map(tag => tag.dataset.modelName);

            // 调用后端API更新顺序
            const res = await fetch(APIService.getApiUrl(`/services/${serviceId}/models/order`), {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    model_type: modelType,
                    model_names: newOrder
                })
            });

            const result = await res.json();

            if (!result.success) {
                throw new Error(result.error || '更新模型顺序失败');
            }

            app.extensionManager.toast.add({
                severity: "success",
                summary: "模型顺序已更新",
                life: 2000
            });

        } catch (error) {
            logger.error('更新模型顺序失败', error);
            app.extensionManager.toast.add({
                severity: "error",
                summary: "更新失败",
                detail: error.message,
                life: 3000
            });
        }
    }

    /**
     * 删除服务商
     */
    async _deleteService(serviceId) {
        // 查找服务名称
        const service = this.services.find(s => s.id === serviceId);
        const serviceName = service ? service.name : serviceId;

        // 使用createSettingsDialog创建确认窗口
        createSettingsDialog({
            title: `<i class="pi pi-exclamation-triangle" style="margin-right: 8px; color: var(--p-orange-500);"></i>${tUI('确认删除')}`,
            isConfirmDialog: true,
            dialogClassName: 'confirm-dialog',
            saveButtonText: tUI('删除'),
            saveButtonIcon: 'pi-trash',
            isDangerButton: true,
            cancelButtonText: tUI('取消'),
            renderContent: (content) => {
                content.className = 'confirm-dialog-content-simple';

                const confirmMessage = document.createElement('p');
                confirmMessage.className = 'confirm-dialog-message-simple';
                confirmMessage.textContent = `${tUI('确定要删除服务商')} "${serviceName}" ${tUI('吗？')}`;

                content.appendChild(confirmMessage);
            },
            onSave: async () => {
                try {
                    const res = await fetch(APIService.getApiUrl(`/services/${serviceId}`), {
                        method: 'DELETE'
                    });

                    const result = await res.json();

                    if (result.success) {
                        app.extensionManager.toast.add({
                            severity: "success",
                            summary: "删除成功",
                            life: 3000
                        });

                        // 重新加载配置并刷新UI
                        await this._loadAllConfigs();

                        // 查找并移除对应的标签和内容
                        const tabButton = document.querySelector(`.tab-button[data-tab="${serviceId}"]`);
                        if (tabButton) {
                            tabButton.remove();
                        }

                        const tabPane = document.querySelector(`.tab-pane[data-tab="${serviceId}"]`);
                        if (tabPane) {
                            tabPane.remove();
                        }

                        // 自动切换到百度翻译标签
                        const header = document.querySelector('.tab-header');
                        const contentContainer = document.querySelector('.tab-content');
                        if (header && contentContainer) {
                            this._switchTab('baidu', header, contentContainer);
                        }

                        // 如果是最后一个服务商，显示空提示
                        const listContainer = document.querySelector('.services-list');
                        if (listContainer && this.services.length === 0) {
                            const emptyHint = document.createElement('div');
                            emptyHint.style.cssText = `
                                text-align: center;
                                padding: 40px;
                                color: var(--p-text-muted-color);
                            `;
                            emptyHint.textContent = tUI('暂无服务商，点击"新增服务商"开始配置');
                            listContainer.appendChild(emptyHint);
                        }

                        // 触发配置同步事件
                        this.notifyConfigChange();

                        return true; // 允许关闭对话框
                    } else {
                        throw new Error(result.error || '删除失败');
                    }
                } catch (error) {
                    logger.error('删除服务商失败', error);
                    app.extensionManager.toast.add({
                        severity: "error",
                        summary: "删除失败",
                        detail: error.message,
                        life: 3000
                    });
                    return false; // 阻止关闭对话框
                }
            }
        });
    }

    /**
     * 更新服务商配置
     */
    async _updateService(serviceId, updates) {
        try {
            const res = await fetch(APIService.getApiUrl(`/services/${serviceId}`), {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(updates)
            });

            const result = await res.json();

            if (!result.success) {
                throw new Error(result.error || '更新失败');
            }

            // 同步更新本地内存中的服务商数据
            const service = this.services.find(s => s.id === serviceId);
            if (service) {
                Object.assign(service, updates);
            }

            // 触发配置同步事件
            this.notifyConfigChange();

            logger.debug('服务商配置已更新', serviceId);

            // 显示成功提示
            app.extensionManager.toast.add({
                severity: "success",
                summary: "服务商配置已更新",
                life: 2000
            });
        } catch (error) {
            logger.error('更新服务商失败', error);
            app.extensionManager.toast.add({
                severity: "error",
                summary: "更新失败",
                detail: error.message,
                life: 3000
            });
        }
    }



    /**
     * 加载掩码后的API Key
     * @param {string} serviceId 服务商ID
     * @returns {Promise<string|null>} 掩码后的API Key
     */
    async _loadMaskedApiKey(serviceId) {
        try {
            const res = await fetch(APIService.getApiUrl(`/services/${serviceId}/masked`));
            const result = await res.json();

            if (result.success && result.service) {
                return result.service.api_key_masked || null;
            }

            return null;
        } catch (error) {
            logger.error('加载掩码API Key失败', error);
            return null;
        }
    }
}

// 导出API配置管理器实例
export const apiConfigManager = new APIConfigManager();