// js/chatbot/ui/embedding-config-ui.js
// Embedding API 配置面板
(function(window, document) {
  'use strict';

  if (window.EmbeddingConfigUILoaded) return;

  const PRESETS = {
    openai: {
      name: 'OpenAI格式',
      endpoint: 'https://api.openai.com/v1/embeddings'
    },
    jina: {
      name: 'Jina AI',
      endpoint: 'https://api.jina.ai/v1/embeddings'
    },
    zhipu: {
      name: '智谱AI',
      endpoint: 'https://open.bigmodel.cn/api/paas/v4/embeddings'
    },
    alibaba: {
      name: '阿里云百炼',
      endpoint: 'https://dashscope.aliyuncs.com/compatible-mode/v1/embeddings'
    }
  };

  // 阿里云百炼支持的模型和维度
  const ALIBABA_MODELS = {
    'text-embedding-v1': { name: 'text-embedding-v1 (中文)', dims: 1536 },
    'text-embedding-v2': { name: 'text-embedding-v2 (多语言)', dims: 1536 },
    'text-embedding-v3': { name: 'text-embedding-v3 (高性能)', dims: 1024 },
    'text-embedding-v4': { name: 'text-embedding-v4 (多语言，支持2048维)', dims: 2048 }
  };

  function createModal() {
    let modal = document.getElementById('embedding-config-modal');
    if (modal) return modal;

    modal = document.createElement('div');
    modal.id = 'embedding-config-modal';
    modal.style.cssText = `
      position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 520px; max-width: 90vw; max-height: 80vh;
      background: #fff; border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      display: none; z-index: 100001; padding: 0;
      overflow: hidden;
    `;

    modal.innerHTML = `
      <div style="padding: 20px 24px; border-bottom: 1px solid #e5e7eb;">
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <h3 style="margin: 0; font-size: 18px; font-weight: 600; color: #111827;">向量搜索与重排配置</h3>
          <button id="emb-close-btn" style="border: none; background: none; font-size: 24px; color: #6b7280; cursor: pointer;">&times;</button>
        </div>
      </div>

      <!-- Tabs -->
      <div style="display: flex; border-bottom: 1px solid #e5e7eb; background: #f9fafb;">
        <button id="emb-tab-vector" class="emb-tab active" style="flex: 1; padding: 12px 16px; border: none; background: none; font-size: 14px; font-weight: 600; color: #3b82f6; cursor: pointer; border-bottom: 2px solid #3b82f6; transition: all 0.2s;">
          向量搜索
        </button>
        <button id="emb-tab-rerank" class="emb-tab" style="flex: 1; padding: 12px 16px; border: none; background: none; font-size: 14px; font-weight: 500; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s;">
          重排 (Rerank)
        </button>
      </div>

      <!-- Tab Content Container -->
      <div style="padding: 24px; max-height: calc(80vh - 130px); overflow-y: auto;">
        <!-- 向量搜索 Tab -->
        <div id="emb-vector-content" class="emb-tab-content">
        <!-- 启用开关 -->
        <div style="margin-bottom: 20px;">
          <label style="display: flex; align-items: center; cursor: pointer;">
            <input type="checkbox" id="emb-enabled" style="width: 18px; height: 18px; margin-right: 10px; cursor: pointer;">
            <span style="font-weight: 600; color: #111827;">启用向量搜索</span>
          </label>
          <p style="margin: 8px 0 0 28px; font-size: 13px; color: #6b7280;">启用后将使用语义相似度检索，提升检索准确率</p>
        </div>

        <!-- 服务商选择 -->
        <div style="margin-bottom: 20px;">
          <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #374151;">服务商</label>
          <select id="emb-provider" style="width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; background: #fff;">
            <option value="openai">OpenAI格式</option>
            <option value="jina">Jina AI (多语言优化)</option>
            <option value="zhipu">智谱AI (GLM)</option>
            <option value="alibaba">阿里云百炼</option>
          </select>
        </div>

        <!-- API Key -->
        <div style="margin-bottom: 20px;">
          <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #374151;">API Key</label>
          <input type="password" id="emb-api-key" placeholder="sk-..." style="width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; box-sizing: border-box;">
        </div>

        <!-- API端点 -->
        <div id="emb-endpoint-wrap" style="margin-bottom: 20px; display: none;">
          <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #374151;">
            Base URL
            <span style="font-weight: normal; color: #6b7280; font-size: 12px;">(如 https://api.openai.com/v1)</span>
          </label>
          <input type="text" id="emb-endpoint" placeholder="https://api.openai.com/v1" style="width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; box-sizing: border-box;">
        </div>

        <!-- 模型选择 -->
        <div style="margin-bottom: 20px;">
          <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #374151;">模型ID</label>
          <div style="display: flex; gap: 8px;">
            <input type="text" id="emb-model" placeholder="请输入模型ID，如: text-embedding-3-small" style="flex: 1; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; box-sizing: border-box;">
            <button id="emb-fetch-models-btn" style="display: none; padding: 10px 12px; border: 1px solid #d1d5db; background: #fff; color: #374151; border-radius: 8px; font-size: 13px; cursor: pointer; white-space: nowrap; transition: all 0.2s;">
              获取列表
            </button>
          </div>
          <p id="emb-model-hint" style="margin-top: 6px; font-size: 12px; color: #6b7280;">
            请输入服务商支持的嵌入模型ID
          </p>
        </div>

        <!-- 向量维度 (OpenAI可选) -->
        <div id="emb-dims-wrap" style="margin-bottom: 20px; display: none;">
          <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #374151;">
            向量维度
            <span style="font-weight: normal; color: #6b7280; font-size: 12px;">(可选，留空使用默认)</span>
          </label>
          <input type="number" id="emb-dimensions" placeholder="1536" style="width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; box-sizing: border-box;">
          <p style="margin: 6px 0 0 0; font-size: 12px; color: #6b7280;">降低维度可减少存储和计算，但可能影响精度</p>
        </div>

        <!-- 测试按钮 -->
        <div style="margin-bottom: 20px;">
          <button id="emb-test-btn" style="width: 100%; padding: 10px; border: 1px solid #d1d5db; background: #fff; color: #374151; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s;">
            测试连接
          </button>
          <div id="emb-test-result" style="margin-top: 8px; font-size: 13px; display: none;"></div>
        </div>

        <!-- 保存按钮 -->
        <div style="display: flex; gap: 12px;">
          <button id="emb-save-btn" style="flex: 1; padding: 12px; border: none; background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s;">
            保存配置
          </button>
          <button id="emb-cancel-btn" style="flex: 1; padding: 12px; border: 1px solid #d1d5db; background: #fff; color: #374151; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s;">
            取消
          </button>
        </div>

        <!-- 索引管理 -->
        <div style="margin-top: 24px; padding-top: 20px; border-top: 1px solid #e5e7eb;">
          <h4 style="margin: 0 0 12px 0; font-size: 14px; font-weight: 600; color: #374151;">索引管理</h4>
          <div id="emb-index-status" style="padding: 10px 12px; background: #f9fafb; border-radius: 6px; font-size: 13px; color: #6b7280; margin-bottom: 12px;">
            未建立索引
          </div>
          <div style="display: flex; gap: 8px;">
            <button id="emb-build-index-btn" style="flex: 1; padding: 8px; border: 1px solid #d1d5db; background: #fff; color: #374151; border-radius: 6px; font-size: 13px; cursor: pointer;">
              建立索引
            </button>
            <button id="emb-rebuild-index-btn" style="flex: 1; padding: 8px; border: 1px solid #d1d5db; background: #fff; color: #374151; border-radius: 6px; font-size: 13px; cursor: pointer;">
              重建索引
            </button>
          </div>
        </div>
        </div>

        <!-- 重排 Tab -->
        <div id="emb-rerank-content" class="emb-tab-content" style="display: none;">
          <!-- 启用开关 -->
          <div style="margin-bottom: 20px;">
            <label style="display: flex; align-items: center; cursor: pointer;">
              <input type="checkbox" id="rerank-enabled" style="width: 18px; height: 18px; margin-right: 10px; cursor: pointer;">
              <span style="font-weight: 600; color: #111827;">启用重排</span>
            </label>
            <p style="margin: 8px 0 0 28px; font-size: 13px; color: #6b7280;">启用后将对搜索结果进行二次排序，提升相关性</p>
          </div>

          <!-- 应用范围选择 -->
          <div id="rerank-scope-wrap" style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #374151;">应用范围</label>
            <div style="display: flex; flex-direction: column; gap: 8px;">
              <label style="display: flex; align-items: center; cursor: pointer;">
                <input type="radio" name="rerank-scope" value="vector-only" style="width: 16px; height: 16px; margin-right: 8px; cursor: pointer;">
                <span style="font-size: 14px; color: #374151;">仅向量搜索使用重排</span>
              </label>
              <label style="display: flex; align-items: center; cursor: pointer;">
                <input type="radio" name="rerank-scope" value="all" style="width: 16px; height: 16px; margin-right: 8px; cursor: pointer;">
                <span style="font-size: 14px; color: #374151;">所有搜索都使用重排（包括BM25等）</span>
              </label>
            </div>
            <p style="margin-top: 6px; font-size: 12px; color: #6b7280;">选择重排功能的应用范围，失败时自动降级为原始排序</p>
          </div>

          <!-- 服务商选择 -->
          <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #374151;">服务商</label>
            <select id="rerank-provider" style="width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; background: #fff;">
              <option value="jina">Jina AI Reranker</option>
              <option value="cohere">Cohere Rerank</option>
              <option value="openai">OpenAI格式</option>
            </select>
          </div>

          <!-- API Key -->
          <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #374151;">API Key</label>
            <input type="password" id="rerank-api-key" placeholder="jina_..." style="width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; box-sizing: border-box;">
          </div>

          <!-- API端点 -->
          <div id="rerank-endpoint-wrap" style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #374151;">
              Base URL
              <span style="font-weight: normal; color: #6b7280; font-size: 12px;">(可选)</span>
            </label>
            <input type="text" id="rerank-endpoint" placeholder="https://api.jina.ai/v1/rerank" style="width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; box-sizing: border-box;">
          </div>

          <!-- 模型选择 -->
          <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #374151;">模型ID</label>
            <input type="text" id="rerank-model" placeholder="jina-reranker-v2-base-multilingual" style="width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; box-sizing: border-box;">
            <p id="rerank-model-hint" style="margin-top: 6px; font-size: 12px; color: #6b7280;">
              请输入服务商支持的重排模型ID
            </p>
          </div>

          <!-- Top N -->
          <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #374151;">
              Top N
              <span style="font-weight: normal; color: #6b7280; font-size: 12px;">(返回前N个结果)</span>
            </label>
            <input type="number" id="rerank-top-n" placeholder="10" value="10" min="1" max="50" style="width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; box-sizing: border-box;">
            <p style="margin: 6px 0 0 0; font-size: 12px; color: #6b7280;">建议 5-20，根据实际需求调整</p>
          </div>

          <!-- 测试按钮 -->
          <div style="margin-bottom: 20px;">
            <button id="rerank-test-btn" style="width: 100%; padding: 10px; border: 1px solid #d1d5db; background: #fff; color: #374151; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s;">
              测试连接
            </button>
            <div id="rerank-test-result" style="margin-top: 8px; font-size: 13px; display: none;"></div>
          </div>

          <!-- 保存按钮 -->
          <div style="display: flex; gap: 12px;">
            <button id="rerank-save-btn" style="flex: 1; padding: 12px; border: none; background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s;">
              保存配置
            </button>
            <button id="rerank-cancel-btn" style="flex: 1; padding: 12px; border: 1px solid #d1d5db; background: #fff; color: #374151; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s;">
              取消
            </button>
          </div>

          <!-- 说明 -->
          <div style="margin-top: 24px; padding: 12px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px;">
            <p style="margin: 0; font-size: 13px; color: #0c4a6e;">
              💡 <strong>重排工作原理</strong>：对向量搜索的结果进行二次排序，使用更精确的模型计算相关性分数，提升最终结果的准确度。
            </p>
          </div>
        </div>
      </div>
    `;

    // 遮罩层
    const overlay = document.createElement('div');
    overlay.id = 'embedding-config-overlay';
    overlay.style.cssText = `
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.5); display: none; z-index: 9999;
    `;

    document.body.appendChild(overlay);
    document.body.appendChild(modal);

    // 绑定事件
    bindEvents(modal, overlay);

    return modal;
  }

  function bindEvents(modal, overlay) {
    const $ = (id) => document.getElementById(id);

    // Tab切换
    const tabs = document.querySelectorAll('.emb-tab');
    const tabContents = document.querySelectorAll('.emb-tab-content');

    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        // 更新tab样式
        tabs.forEach(t => {
          t.classList.remove('active');
          t.style.color = '#6b7280';
          t.style.fontWeight = '500';
          t.style.borderBottomColor = 'transparent';
        });
        tab.classList.add('active');
        tab.style.color = '#3b82f6';
        tab.style.fontWeight = '600';
        tab.style.borderBottomColor = '#3b82f6';

        // 切换内容
        const targetId = tab.id.replace('-tab-', '-') + '-content';
        tabContents.forEach(content => {
          content.style.display = 'none';
        });
        const targetContent = document.getElementById(targetId);
        if (targetContent) {
          targetContent.style.display = 'block';
        }
      });
    });

    // 关闭
    $('emb-close-btn').onclick = () => close();
    $('emb-cancel-btn').onclick = () => close();
    $('rerank-cancel-btn').onclick = () => close();
    overlay.onclick = () => close();

    // 服务商切换
    $('emb-provider').onchange = function() {
      const provider = this.value;
      updateProviderUI(provider);
    };

    // 获取模型列表（仅 OpenAI格式）
    $('emb-fetch-models-btn').onclick = async () => {
      await fetchModels();
    };

    // 测试连接
    $('emb-test-btn').onclick = async () => {
      await testConnection();
    };

    // 保存
    $('emb-save-btn').onclick = () => {
      saveConfig();
    };

    // 建立索引
    $('emb-build-index-btn').onclick = async () => {
      await buildIndex(false);
    };

    // 重建索引
    $('emb-rebuild-index-btn').onclick = async () => {
      if (confirm('重建索引将删除现有索引，确定继续吗?')) {
        await buildIndex(true);
      }
    };

    // 重排tab事件
    // 测试连接
    $('rerank-test-btn').onclick = async () => {
      await testRerankConnection();
    };

    // 保存配置
    $('rerank-save-btn').onclick = () => {
      saveRerankConfig();
    };
  }

  function updateProviderUI(provider) {
    const $ = (id) => document.getElementById(id);
    const preset = PRESETS[provider];

    // 显示/隐藏获取模型列表按钮（仅 OpenAI格式支持）
    const fetchBtn = $('emb-fetch-models-btn');
    const modelHint = $('emb-model-hint');
    if (provider === 'openai') {
      fetchBtn.style.display = 'block';
      modelHint.textContent = '可手动输入模型ID，或点击"获取列表"从服务器获取';
    } else {
      fetchBtn.style.display = 'none';
      modelHint.textContent = '请输入服务商支持的嵌入模型ID';
    }

    // 更新端点（所有服务商都显示，允许修改）
    $('emb-endpoint-wrap').style.display = 'block';
    $('emb-endpoint').value = preset?.endpoint || window.EmbeddingClient?.config.endpoint || '';

    // OpenAI和阿里云百炼支持自定义维度
    $('emb-dims-wrap').style.display = (provider === 'openai' || provider === 'alibaba') ? 'block' : 'none';

    // 当选择阿里云百炼时，更新维度提示
    if (provider === 'alibaba') {
      const dimsInput = $('emb-dimensions');
      const dimsHint = dimsInput.nextElementSibling;
      const modelInput = $('emb-model');

      // 根据当前模型更新默认维度
      const updateDimensionsForModel = () => {
        const modelId = modelInput.value.trim();
        const modelInfo = ALIBABA_MODELS[modelId];
        if (modelInfo) {
          dimsInput.placeholder = `默认: ${modelInfo.dims}`;
          dimsHint.textContent = `默认维度: ${modelInfo.dims}。可输入1-${modelInfo.dims}之间的整数，留空使用默认。`;
        }
      };

      // 初始化时更新一次
      updateDimensionsForModel();

      // 模型改变时更新
      modelInput.addEventListener('change', updateDimensionsForModel);
    }
  }


  async function fetchModels() {
    const $ = (id) => document.getElementById(id);
    const btn = $('emb-fetch-models-btn');
    const modelInput = $('emb-model');
    const modelHint = $('emb-model-hint');

    const provider = $('emb-provider').value;
    const apiKey = $('emb-api-key').value;
    let endpoint = $('emb-endpoint').value;

    if (!apiKey) {
      modelHint.style.color = '#dc2626';
      modelHint.textContent = '❌ 请先输入 API Key';
      setTimeout(() => {
        modelHint.style.color = '#6b7280';
        modelHint.textContent = '可手动输入模型ID，或点击"获取列表"从服务器获取';
      }, 3000);
      return;
    }

    if (!endpoint) {
      endpoint = PRESETS[provider]?.endpoint || '';
    }

    // 构建 models 端点
    let modelsEndpoint = endpoint;
    if (modelsEndpoint.endsWith('/embeddings')) {
      modelsEndpoint = modelsEndpoint.replace('/embeddings', '/models');
    } else if (modelsEndpoint.endsWith('/v1')) {
      modelsEndpoint = modelsEndpoint + '/models';
    } else if (!modelsEndpoint.endsWith('/models')) {
      modelsEndpoint = modelsEndpoint.replace(/\/$/, '') + '/v1/models';
    }

    btn.textContent = '获取中...';
    btn.disabled = true;
    modelHint.style.color = '#6b7280';
    modelHint.textContent = '正在获取模型列表...';

    try {
      const response = await fetch(modelsEndpoint, {
        headers: {
          'Authorization': `Bearer ${apiKey}`,
          'Content-Type': 'application/json'
        }
      });

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      const data = await response.json();
      const models = data.data || [];

      // 过滤出嵌入模型（支持多种命名模式）
      const embeddingModels = models.filter(m => {
        const id = (m.id || '').toLowerCase();
        return id.includes('embedding') ||
               id.includes('embed') ||
               id.includes('bge') ||
               id.includes('text-similarity') ||
               id.includes('sentence') ||
               id.includes('vector');
      });

      if (embeddingModels.length === 0) {
        modelHint.style.color = '#f59e0b';
        modelHint.textContent = `⚠️ 未找到嵌入模型（共 ${models.length} 个模型）`;
        setTimeout(() => {
          modelHint.style.color = '#6b7280';
          modelHint.textContent = '可手动输入模型ID，或点击"获取列表"从服务器获取';
        }, 3000);
        return;
      }

      // 创建选择对话框
      showModelSelector(embeddingModels, modelInput);
      modelHint.style.color = '#059669';
      modelHint.textContent = `✅ 找到 ${embeddingModels.length} 个嵌入模型`;
      setTimeout(() => {
        modelHint.style.color = '#6b7280';
        modelHint.textContent = '可手动输入模型ID，或点击"获取列表"从服务器获取';
      }, 3000);

    } catch (error) {
      modelHint.style.color = '#dc2626';
      modelHint.textContent = `❌ 获取失败: ${error.message}`;
      setTimeout(() => {
        modelHint.style.color = '#6b7280';
        modelHint.textContent = '可手动输入模型ID，或点击"获取列表"从服务器获取';
      }, 3000);
    } finally {
      btn.textContent = '获取列表';
      btn.disabled = false;
    }
  }

  function showModelSelector(models, targetInput) {
    // 创建一个简单的选择对话框
    const container = document.createElement('div');
    container.style.cssText = `
      position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 400px; max-width: 90vw; max-height: 60vh;
      background: #fff; border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
      z-index: 100002; padding: 0; overflow: hidden;
    `;

    const header = document.createElement('div');
    header.style.cssText = 'padding: 16px 20px; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center;';
    header.innerHTML = `
      <h4 style="margin: 0; font-size: 16px; font-weight: 600; color: #111827;">选择嵌入模型</h4>
      <button id="model-selector-close" style="border: none; background: none; font-size: 24px; color: #6b7280; cursor: pointer; line-height: 1;">&times;</button>
    `;

    const list = document.createElement('div');
    list.style.cssText = 'max-height: 400px; overflow-y: auto; padding: 8px;';

    models.forEach(model => {
      const item = document.createElement('div');
      item.style.cssText = `
        padding: 12px 16px; margin: 4px 0; border-radius: 8px;
        cursor: pointer; transition: all 0.2s;
        border: 1px solid #e5e7eb;
      `;
      item.innerHTML = `
        <div style="font-weight: 500; color: #111827;">${model.id}</div>
        ${model.owned_by ? `<div style="font-size: 12px; color: #6b7280; margin-top: 2px;">by ${model.owned_by}</div>` : ''}
      `;

      item.onmouseover = () => {
        item.style.background = '#f3f4f6';
        item.style.borderColor = '#3b82f6';
      };
      item.onmouseout = () => {
        item.style.background = '#fff';
        item.style.borderColor = '#e5e7eb';
      };
      item.onclick = () => {
        targetInput.value = model.id;
        document.body.removeChild(overlay);
        document.body.removeChild(container);
      };

      list.appendChild(item);
    });

    container.appendChild(header);
    container.appendChild(list);

    const overlay = document.createElement('div');
    overlay.style.cssText = `
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.5); z-index: 100001;
    `;

    const closeHandler = () => {
      document.body.removeChild(overlay);
      document.body.removeChild(container);
    };

    overlay.onclick = closeHandler;
    header.querySelector('#model-selector-close').onclick = closeHandler;

    document.body.appendChild(overlay);
    document.body.appendChild(container);
  }

  async function testConnection() {
    const $ = (id) => document.getElementById(id);
    const resultDiv = $('emb-test-result');
    const btn = $('emb-test-btn');

    const config = {
      provider: $('emb-provider').value,
      apiKey: $('emb-api-key').value,
      endpoint: $('emb-endpoint').value || PRESETS[$('emb-provider').value].endpoint,
      model: $('emb-model').value,
      dimensions: parseInt($('emb-dimensions').value) || null
    };

    if (!config.apiKey) {
      resultDiv.style.display = 'block';
      resultDiv.style.color = '#dc2626';
      resultDiv.textContent = '❌ 请输入API Key';
      return;
    }

    btn.textContent = '测试中...';
    btn.disabled = true;
    resultDiv.style.display = 'none';

    try {
      // 确保 EmbeddingClient 已加载
      if (!window.EmbeddingClient || typeof window.EmbeddingClient.saveConfig !== 'function') {
        // 尝试动态加载
        try {
          const scripts = Array.from(document.getElementsByTagName('script'));
          const sem = scripts.find(s => (s.src || '').includes('semantic-vector-search.js'));
          const candidates = [];
          if (sem && sem.src) candidates.push(sem.src.replace('semantic-vector-search.js', 'embedding-client.js'));
          const rer = scripts.find(s => (s.src || '').includes('rerank-client.js'));
          if (rer && rer.src) candidates.push(rer.src.replace('rerank-client.js', 'embedding-client.js'));
          candidates.push('../../js/chatbot/agents/embedding-client.js');
          for (const url of Array.from(new Set(candidates))) {
            await new Promise((resolve, reject) => { const s=document.createElement('script'); s.src=url; s.async=true; s.onload=resolve; s.onerror=reject; document.head.appendChild(s); });
            if (window.EmbeddingClient && typeof window.EmbeddingClient.saveConfig === 'function') break;
          }
        } catch(_) {}
      }
      if (!window.EmbeddingClient || typeof window.EmbeddingClient.saveConfig !== 'function') {
        throw new Error('EmbeddingClient 未加载');
      }
      window.EmbeddingClient.saveConfig({ ...config, enabled: true });

      // 测试调用
      const testText = '测试文本';
      const vector = await window.EmbeddingClient.embed(testText);

      resultDiv.style.display = 'block';
      resultDiv.style.color = '#059669';
      resultDiv.textContent = `✅ 连接成功！向量维度: ${vector.length}`;

    } catch (error) {
      resultDiv.style.display = 'block';
      resultDiv.style.color = '#dc2626';
      resultDiv.textContent = `❌ 连接失败: ${error.message}`;
    } finally {
      btn.textContent = '测试连接';
      btn.disabled = false;
    }
  }

  function saveConfig() {
    const $ = (id) => document.getElementById(id);

    const config = {
      enabled: $('emb-enabled').checked,
      provider: $('emb-provider').value,
      apiKey: $('emb-api-key').value,
      endpoint: $('emb-endpoint').value || PRESETS[$('emb-provider').value].endpoint,
      model: $('emb-model').value,
      dimensions: parseInt($('emb-dimensions').value) || null
    };

    if (!window.EmbeddingClient || typeof window.EmbeddingClient.saveConfig !== 'function') {
      if (window.ChatbotUtils && window.ChatbotUtils.showToast) {
        window.ChatbotUtils.showToast('保存失败：EmbeddingClient 未加载', 'error', 3000);
      } else {
        alert('❌ 保存失败：EmbeddingClient 未加载');
      }
      return;
    }
    if (!window.EmbeddingClient || typeof window.EmbeddingClient.saveConfig !== 'function') {
      if (window.ChatbotUtils && window.ChatbotUtils.showToast) {
        window.ChatbotUtils.showToast('保存失败：EmbeddingClient 未加载', 'error', 3000);
      } else {
        alert('❌ 保存失败：EmbeddingClient 未加载');
      }
      return;
    }
    window.EmbeddingClient.saveConfig(config);

    if (window.ChatbotUtils?.showToast) {
      window.ChatbotUtils.showToast('配置已保存', 'success', 2000);
    }

    close();
  }

  // 重排相关函数
  async function testRerankConnection() {
    const $ = (id) => document.getElementById(id);
    const resultDiv = $('rerank-test-result');
    const btn = $('rerank-test-btn');

    const config = {
      provider: $('rerank-provider').value,
      apiKey: $('rerank-api-key').value,
      endpoint: $('rerank-endpoint').value,
      model: $('rerank-model').value,
      topN: parseInt($('rerank-top-n').value) || 10
    };

    if (!config.apiKey) {
      resultDiv.style.display = 'block';
      resultDiv.style.color = '#dc2626';
      resultDiv.textContent = '❌ 请输入API Key';
      return;
    }

    btn.textContent = '测试中...';
    btn.disabled = true;
    resultDiv.style.display = 'none';

    try {
      // 临时保存配置并测试
      if (!window.RerankClient) {
        throw new Error('RerankClient 未加载');
      }

      window.RerankClient.saveConfig({ ...config, enabled: true });

      // 测试调用
      const testQuery = '测试查询';
      const testDocs = ['文档1内容', '文档2内容', '文档3内容'];
      const results = await window.RerankClient.rerank(testQuery, testDocs);

      resultDiv.style.display = 'block';
      resultDiv.style.color = '#059669';
      resultDiv.textContent = `✅ 连接成功！返回 ${results.length} 个结果`;

    } catch (error) {
      resultDiv.style.display = 'block';
      resultDiv.style.color = '#dc2626';
      resultDiv.textContent = `❌ 连接失败: ${error.message}`;
    } finally {
      btn.textContent = '测试连接';
      btn.disabled = false;
    }
  }

  function saveRerankConfig() {
    const $ = (id) => document.getElementById(id);

    // 获取选中的scope
    const scopeRadios = document.getElementsByName('rerank-scope');
    let scope = 'vector-only';
    for (const radio of scopeRadios) {
      if (radio.checked) {
        scope = radio.value;
        break;
      }
    }

    const config = {
      enabled: $('rerank-enabled').checked,
      scope: scope,
      provider: $('rerank-provider').value,
      apiKey: $('rerank-api-key').value,
      endpoint: $('rerank-endpoint').value,
      model: $('rerank-model').value,
      topN: parseInt($('rerank-top-n').value) || 10
    };

    if (!window.RerankClient) {
      alert('RerankClient 未加载');
      return;
    }

    window.RerankClient.saveConfig(config);

    if (window.ChatbotUtils?.showToast) {
      window.ChatbotUtils.showToast('重排配置已保存', 'success', 2000);
    }

    close();
  }

  async function buildIndex(forceRebuild) {
    const groups = window.data?.semanticGroups;
    if (!groups || groups.length === 0) {
      alert('当前文档没有意群数据，请先生成意群');
      return;
    }

    const docId = window.ChatbotCore?.getCurrentDocId() || window.data?.id || 'default';

    try {
      await window.SemanticVectorSearch.indexGroups(groups, docId, {
        showProgress: true,
        forceRebuild
      });
      await updateIndexStatus();
    } catch (error) {
      alert(`建立索引失败: ${error.message}`);
    }
  }

  async function updateIndexStatus() {
    const $ = (id) => document.getElementById(id);
    const statusDiv = $('emb-index-status');

    if (!window.SemanticVectorSearch) {
      statusDiv.textContent = '向量搜索模块未加载';
      return;
    }

    const docId = window.ChatbotCore?.getCurrentDocId() || window.data?.id || 'default';

    try {
      const status = await window.SemanticVectorSearch.getIndexStatus(docId);
      if (status.indexed) {
        statusDiv.innerHTML = `
          <div style="color: #059669; font-weight: 500;">✓ 已建立索引</div>
          <div style="margin-top: 4px; color: #6b7280;">
            意群数: ${status.count} | 维度: ${status.dimensions} | 大小: ${status.size}
          </div>
        `;
      } else {
        statusDiv.textContent = '未建立索引';
      }
    } catch (error) {
      statusDiv.textContent = '无法获取索引状态';
    }
  }

  function open() {
    const modal = createModal();
    const overlay = document.getElementById('embedding-config-overlay');
    const $ = (id) => document.getElementById(id);

    // 加载向量搜索配置
    const config = window.EmbeddingClient?.config || {};
    $('emb-enabled').checked = config.enabled || false;
    $('emb-provider').value = config.provider || 'openai';
    $('emb-api-key').value = config.apiKey || '';
    $('emb-model').value = config.model || 'text-embedding-3-small';
    $('emb-dimensions').value = config.dimensions || '';

    updateProviderUI(config.provider || 'openai');
    updateIndexStatus();

    // 加载重排配置
    const rerankConfig = window.RerankClient?.config || {};
    $('rerank-enabled').checked = rerankConfig.enabled || false;
    $('rerank-provider').value = rerankConfig.provider || 'jina';
    $('rerank-api-key').value = rerankConfig.apiKey || '';
    $('rerank-endpoint').value = rerankConfig.endpoint || '';
    $('rerank-model').value = rerankConfig.model || 'jina-reranker-v2-base-multilingual';
    $('rerank-top-n').value = rerankConfig.topN || 10;

    // 设置scope单选按钮
    const scope = rerankConfig.scope || 'vector-only';
    const scopeRadios = document.getElementsByName('rerank-scope');
    for (const radio of scopeRadios) {
      if (radio.value === scope) {
        radio.checked = true;
        break;
      }
    }

    overlay.style.display = 'block';
    modal.style.display = 'block';
  }

  function close() {
    const modal = document.getElementById('embedding-config-modal');
    const overlay = document.getElementById('embedding-config-overlay');
    if (modal) modal.style.display = 'none';
    if (overlay) overlay.style.display = 'none';
  }

  // 导出
  window.EmbeddingConfigUI = { open, close };
  window.EmbeddingConfigUILoaded = true;

  console.log('[EmbeddingConfigUI] 配置面板已加载');

})(window, document);
