let apiKey = '';
let currentConfig = {};
let modelRoutingMeta = { models: [], pools: ['ssoBasic', 'ssoSuper'] };
let modelRoutingAssignments = {};
let modelRoutingDragId = '';
const byId = (id) => document.getElementById(id);
const NUMERIC_FIELDS = new Set([
  'timeout',
  'max_retry',
  'retry_backoff_base',
  'retry_backoff_factor',
  'retry_backoff_max',
  'retry_budget',
  'refresh_interval_hours',
  'super_refresh_interval_hours',
  'fail_threshold',
  'limit_mb',
  'save_delay_ms',
  'upload_concurrent',
  'upload_timeout',
  'download_concurrent',
  'download_timeout',
  'list_concurrent',
  'list_timeout',
  'list_batch_size',
  'delete_concurrent',
  'delete_timeout',
  'delete_batch_size',
  'reload_interval_sec',
  'stream_timeout',
  'final_timeout',
  'final_min_bytes',
  'medium_min_bytes',
  'concurrent',
  'batch_size'
]);

const LOCALE_MAP = {
  "app": {
    "label": "应用设置",
    "api_key": { title: "API 密钥", desc: "调用 Grok2API 服务的 Token（可选）。" },
    "app_key": { title: "后台密码", desc: "登录 Grok2API 管理后台的密码（必填）。" },
    "public_enabled": { title: "启用功能玩法", desc: "是否启用功能玩法入口（关闭则功能玩法页面不可访问）。" },
    "public_key": { title: "Public 密码", desc: "功能玩法页面的访问密码（可选）。" },
    "app_url": { title: "应用地址", desc: "当前 Grok2API 服务的外部访问 URL，用于文件链接访问。" },
    "image_format": { title: "图片格式", desc: "默认生成的图片格式（url 或 base64）。" },
    "video_format": { title: "视频格式", desc: "默认生成的视频格式（html 或 url，url 为处理后的链接）。" },
    "temporary": { title: "临时对话", desc: "是否默认启用临时对话模式。" },
    "disable_memory": { title: "禁用记忆", desc: "是否默认禁用 Grok 记忆功能。" },
    "stream": { title: "流式响应", desc: "是否默认启用流式输出。" },
    "thinking": { title: "思维链", desc: "是否默认启用思维链输出。" },
    "dynamic_statsig": { title: "动态指纹", desc: "是否默认启用动态生成 Statsig 指纹。" },
    "filter_tags": { title: "过滤标签", desc: "设置自动过滤 Grok 响应中的特殊标签。" },
    "app_log_enabled": { title: "应用运行日志", desc: "控制是否将服务运行日志写入 logs/app_YYYY-MM-DD.log，用于排查启动、接口错误和系统异常。" },
    "chat_capture_enabled": { title: "对话抓包日志", desc: "控制是否记录对话上游原始响应到抓包文件，用于排查图片来源、卡片附件和搜索结果关联问题。" },
    "chat_capture_file": { title: "对话抓包文件", desc: "对话抓包日志的写入路径，建议保留在 logs 目录下统一管理。" }
  },


  "proxy": {
    "label": "代理配置",
    "base_proxy_url": { title: "基础代理 URL", desc: "代理请求到 Grok 官网的基础服务地址。" },
    "asset_proxy_url": { title: "资源代理 URL", desc: "代理请求到 Grok 官网的静态资源（图片/视频）地址。" },
    "enabled": { title: "启用 CF 自动刷新", desc: "启用后将通过 FlareSolverr 自动获取 cf_clearance。" },
    "flaresolverr_url": { title: "FlareSolverr 地址", desc: "FlareSolverr 服务的 HTTP 地址（如 http://flaresolverr:8191）。" },
    "refresh_interval": { title: "刷新间隔（秒）", desc: "自动刷新 cf_clearance 的时间间隔，建议不低于 300 秒。" },
    "timeout": { title: "挑战超时（秒）", desc: "等待 FlareSolverr 解决 CF 挑战的最大时间。" },
    "cf_clearance": { title: "CF Clearance", desc: "Cloudflare Clearance Cookie，用于绕过反爬虫验证。启用自动刷新时由系统自动管理。" },
    "browser": { title: "浏览器指纹", desc: "curl_cffi 浏览器指纹标识（如 chrome136）。启用自动刷新时由系统自动管理。" },
    "user_agent": { title: "User-Agent", desc: "HTTP 请求的 User-Agent 字符串。启用自动刷新时由系统自动管理。" }
  },


  "retry": {
    "label": "重试策略",
    "max_retry": { title: "最大重试次数", desc: "请求 Grok 服务失败时的最大重试次数。" },
    "retry_status_codes": { title: "重试状态码", desc: "触发重试的 HTTP 状态码列表。" },
    "retry_backoff_base": { title: "退避基数", desc: "重试退避的基础延迟（秒）。" },
    "retry_backoff_factor": { title: "退避倍率", desc: "重试退避的指数放大系数。" },
    "retry_backoff_max": { title: "退避上限", desc: "单次重试等待的最大延迟（秒）。" },
    "retry_budget": { title: "退避预算", desc: "单次请求的最大重试总耗时（秒）。" }
  },


  "chat": {
    "label": "对话配置",
    "concurrent": { title: "并发上限", desc: "Reverse 接口并发上限。" },
    "timeout": { title: "请求超时", desc: "Reverse 接口超时时间（秒）。" },
    "stream_timeout": { title: "流空闲超时", desc: "流式空闲超时时间（秒）。" }
  },


  "video": {
    "label": "视频配置",
    "concurrent": { title: "并发上限", desc: "Reverse 接口并发上限。" },
    "timeout": { title: "请求超时", desc: "Reverse 接口超时时间（秒）。" },
    "stream_timeout": { title: "流空闲超时", desc: "流式空闲超时时间（秒）。" }
  },


  "image": {
    "label": "图像配置",
    "timeout": { title: "请求超时", desc: "WebSocket 请求超时时间（秒）。" },
    "stream_timeout": { title: "流空闲超时", desc: "WebSocket 流式空闲超时时间（秒）。" },
    "final_timeout": { title: "最终图超时", desc: "收到中等图后等待最终图的超时秒数。" },
    "nsfw": { title: "NSFW 模式", desc: "WebSocket 请求是否启用 NSFW。" },
    "medium_min_bytes": { title: "中等图最小字节", desc: "判定中等质量图的最小字节数。" },
    "final_min_bytes": { title: "最终图最小字节", desc: "判定最终图的最小字节数（通常 JPG > 100KB）。" }
  },


  "asset": {
    "label": "资产配置",
    "upload_concurrent": { title: "上传并发", desc: "上传接口的最大并发数。推荐 30。" },
    "upload_timeout": { title: "上传超时", desc: "上传接口超时时间（秒）。推荐 60。" },
    "download_concurrent": { title: "下载并发", desc: "下载接口的最大并发数。推荐 30。" },
    "download_timeout": { title: "下载超时", desc: "下载接口超时时间（秒）。推荐 60。" },
    "list_concurrent": { title: "查询并发", desc: "资产查询接口的最大并发数。推荐 10。" },
    "list_timeout": { title: "查询超时", desc: "资产查询接口超时时间（秒）。推荐 60。" },
    "list_batch_size": { title: "查询批次大小", desc: "单次查询可处理的 Token 数量。推荐 10。" },
    "delete_concurrent": { title: "删除并发", desc: "资产删除接口的最大并发数。推荐 10。" },
    "delete_timeout": { title: "删除超时", desc: "资产删除接口超时时间（秒）。推荐 60。" },
    "delete_batch_size": { title: "删除批次大小", desc: "单次删除可处理的 Token 数量。推荐 10。" }
  },


  "voice": {
    "label": "语音配置",
    "timeout": { title: "请求超时", desc: "Voice 请求超时时间（秒）。" },
    "livekit_url": { title: "LiveKit 地址", desc: "优先使用的 LiveKit 信令地址，留空则使用上游返回值。" },
    "livekit_urls": { title: "LiveKit 地址列表", desc: "可配置多个信令地址，连接时会按顺序回退。" },
    "signal_proxy_enabled": { title: "Signal 代理", desc: "开启后返回同域 WebSocket 代理地址，移动端可优先尝试。" },
    "signal_proxy_url": { title: "代理地址", desc: "同域 signal 代理的自定义地址，留空将自动按当前域名生成。" }
  },


  "token": {
    "label": "Token 池管理",
    "auto_refresh": { title: "自动刷新", desc: "是否开启 Token 自动刷新机制。" },
    "refresh_interval_hours": { title: "刷新间隔", desc: "普通 Token 刷新的时间间隔（小时）。" },
    "super_refresh_interval_hours": { title: "Super 刷新间隔", desc: "Super Token 刷新的时间间隔（小时）。" },
    "fail_threshold": { title: "失败阈值", desc: "单个 Token 连续失败多少次后被标记为不可用。" },
    "save_delay_ms": { title: "保存延迟", desc: "Token 变更合并写入的延迟（毫秒）。" },
    "reload_interval_sec": { title: "同步间隔", desc: "多 worker 场景下 Token 状态刷新间隔（秒）。" }
  },


  "model_routing": {
    "label": "模型池路由",
    "model_pools": { title: "模型到 Token 池映射", desc: "为每个模型手动指定使用哪个 Token 池。值支持字符串或字符串数组，例如 {\"grok-4.20-expert\":\"ssoSuper\",\"grok-4.20-auto\":[\"ssoBasic\",\"ssoSuper\"]}。" }
  },


  "cache": {
    "label": "缓存管理",
    "enable_auto_clean": { title: "自动清理", desc: "是否启用缓存自动清理，开启后按上限自动回收。" },
    "limit_mb": { title: "清理阈值", desc: "缓存大小阈值（MB），超过阈值会触发清理。" }
  },


  "nsfw": {
    "label": "NSFW 配置",
    "concurrent": { title: "并发上限", desc: "批量开启 NSFW 模式时的并发请求上限。推荐 10。" },
    "batch_size": { title: "批次大小", desc: "批量开启 NSFW 模式的单批处理数量。推荐 50。" },
    "timeout": { title: "请求超时", desc: "NSFW 开启相关请求的超时时间（秒）。推荐 60。" }
  },


  "usage": {
    "label": "Usage 配置",
    "concurrent": { title: "并发上限", desc: "批量刷新用量时的并发请求上限。推荐 10。" },
    "batch_size": { title: "批次大小", desc: "批量刷新用量的单批处理数量。推荐 50。" },
    "timeout": { title: "请求超时", desc: "用量查询接口的超时时间（秒）。推荐 60。" }
  }
};

// 配置部分说明（可选）
const SECTION_DESCRIPTIONS = {
  "proxy": "配置不正确将导致 403 错误。服务首次请求 Grok 时的 IP 必须与获取 CF Clearance 时的 IP 一致，后续服务器请求 IP 变化不会导致 403。",
  "model_routing": "这里可以手动指定每个模型优先走哪个 Token 池。未配置的模型仍会按系统默认路由。"
};

// CF 自动刷新联动禁用字段（全部在 proxy section 内）
const CF_MANAGED_PROXY_KEYS = ['cf_clearance', 'browser', 'user_agent'];
const CF_REFRESH_SUB_KEYS = ['flaresolverr_url', 'refresh_interval', 'timeout'];

const SECTION_ORDER = new Map(Object.keys(LOCALE_MAP).map((key, index) => [key, index]));
const HIDDEN_CONFIG_KEYS = new Map([
  ['chat', new Set(['capture_enabled', 'capture_file'])],
]);

function getText(section, key) {
  if (LOCALE_MAP[section] && LOCALE_MAP[section][key]) {
    return LOCALE_MAP[section][key];
  }
  return {
    title: key.replace(/_/g, ' '),
    desc: '暂无说明，请参考配置文档。'
  };
}

function getSectionLabel(section) {
  return (LOCALE_MAP[section] && LOCALE_MAP[section].label) || `${section} 设置`;
}

function sortByOrder(keys, orderMap) {
  if (!orderMap) return keys;
  return keys.sort((a, b) => {
    const ia = orderMap.get(a);
    const ib = orderMap.get(b);
    if (ia !== undefined && ib !== undefined) return ia - ib;
    if (ia !== undefined) return -1;
    if (ib !== undefined) return 1;
    return 0;
  });
}

function setInputMeta(input, section, key) {
  input.dataset.section = section;
  input.dataset.key = key;
}

function createOption(value, text, selectedValue) {
  const option = document.createElement('option');
  option.value = value;
  option.text = text;
  if (selectedValue !== undefined && selectedValue === value) option.selected = true;
  return option;
}

function buildBooleanInput(section, key, val) {
  const label = document.createElement('label');
  label.className = 'relative inline-flex items-center cursor-pointer';

  const input = document.createElement('input');
  input.type = 'checkbox';
  input.checked = val;
  input.className = 'sr-only peer';
  setInputMeta(input, section, key);

  const slider = document.createElement('div');
  slider.className = "w-9 h-5 bg-[var(--accents-2)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-black";

  label.appendChild(input);
  label.appendChild(slider);

  return { input, node: label };
}

function buildSelectInput(section, key, val, options) {
  const input = document.createElement('select');
  input.className = 'geist-input h-[34px]';
  setInputMeta(input, section, key);
  options.forEach(opt => {
    input.appendChild(createOption(opt.val, opt.text, val));
  });
  return { input, node: input };
}

function buildJsonInput(section, key, val) {
  const input = document.createElement('textarea');
  input.className = 'geist-input font-mono text-xs';
  input.rows = 4;
  input.value = JSON.stringify(val, null, 2);
  setInputMeta(input, section, key);
  input.dataset.type = 'json';
  return { input, node: input };
}

function buildTextInput(section, key, val) {
  const input = document.createElement('input');
  input.type = 'text';
  input.className = 'geist-input';
  input.value = val;
  setInputMeta(input, section, key);
  return { input, node: input };
}

function buildSecretInput(section, key, val) {
  const input = document.createElement('input');
  input.type = 'text';
  input.className = 'geist-input flex-1 h-[34px]';
  input.value = val;
  setInputMeta(input, section, key);

  const wrapper = document.createElement('div');
  wrapper.className = 'flex items-center gap-2';

  const genBtn = document.createElement('button');
  genBtn.className = 'flex-none w-[32px] h-[32px] flex items-center justify-center bg-black text-white rounded-md hover:opacity-80 transition-opacity';
  genBtn.type = 'button';
  genBtn.title = '生成';
  genBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7"/><polyline points="21 3 21 9 15 9"/></svg>`;
  genBtn.onclick = () => {
    input.value = randomKey(16);
  };

  const copyBtn = document.createElement('button');
  copyBtn.className = 'flex-none w-[32px] h-[32px] flex items-center justify-center bg-black text-white rounded-md hover:opacity-80 transition-opacity';
  copyBtn.type = 'button';
  copyBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
  copyBtn.onclick = () => copyToClipboard(input.value, copyBtn);

  wrapper.appendChild(input);
  wrapper.appendChild(genBtn);
  wrapper.appendChild(copyBtn);

  return { input, node: wrapper };
}

function randomKey(len) {
  const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  const out = [];
  if (window.crypto && window.crypto.getRandomValues) {
    const buf = new Uint8Array(len);
    window.crypto.getRandomValues(buf);
    for (let i = 0; i < len; i++) {
      out.push(chars[buf[i] % chars.length]);
    }
    return out.join('');
  }
  for (let i = 0; i < len; i++) {
    out.push(chars[Math.floor(Math.random() * chars.length)]);
  }
  return out.join('');
}

async function init() {
  apiKey = await ensureAdminKey();
  if (apiKey === null) return;
  await loadModelRoutingMeta();
  loadData();
}

async function loadModelRoutingMeta() {
  try {
    const res = await fetch('/v1/admin/model-routing/meta', {
      headers: buildAuthHeaders(apiKey)
    });
    if (!res.ok) return;
    const data = await res.json();
    if (Array.isArray(data.models)) {
      modelRoutingMeta.models = data.models;
    }
    if (Array.isArray(data.pools) && data.pools.length) {
      modelRoutingMeta.pools = data.pools;
    }
  } catch (e) {
    console.warn('模型池路由元数据加载失败', e);
  }
}

async function loadData() {
  try {
    const res = await fetch('/v1/admin/config', {
      headers: buildAuthHeaders(apiKey)
    });
    if (res.ok) {
      currentConfig = await res.json();
      renderConfig(currentConfig);
    } else if (res.status === 401) {
      logout();
    }
  } catch (e) {
    showToast('连接失败', 'error');
  }
}

function renderConfig(data) {
  const container = byId('config-container');
  if (!container) return;
  container.replaceChildren();

  const fragment = document.createDocumentFragment();
  const sections = sortByOrder(Object.keys(data), SECTION_ORDER);

  sections.forEach(section => {
    const items = data[section];
    const localeSection = LOCALE_MAP[section];
    const keyOrder = localeSection ? new Map(Object.keys(localeSection).map((k, i) => [k, i])) : null;

    const allKeys = sortByOrder(Object.keys(items), keyOrder);
    const hiddenKeys = HIDDEN_CONFIG_KEYS.get(section) || new Set();
    const visibleKeys = allKeys.filter(key => !(section === 'proxy' && key === 'cf_cookies') && !hiddenKeys.has(key));

    if (visibleKeys.length > 0) {
      const card = document.createElement('div');
      card.className = 'config-section';

      const header = document.createElement('div');
      header.innerHTML = `<div class="config-section-title">${getSectionLabel(section)}</div>`;

      if (section === 'proxy') {
        const actionRow = document.createElement('div');
        actionRow.className = 'config-section-actions';

        const refreshBtn = document.createElement('button');
        refreshBtn.type = 'button';
        refreshBtn.id = 'cf-refresh-btn';
        refreshBtn.className = 'geist-button-outline gap-2';
        refreshBtn.innerHTML = `
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 2v6h-6"></path>
            <path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path>
            <path d="M3 22v-6h6"></path>
            <path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path>
          </svg>
          手动刷新 CF
        `;
        refreshBtn.addEventListener('click', manualRefreshCfClearance);
        actionRow.appendChild(refreshBtn);
        header.appendChild(actionRow);
      }

      // 添加部分说明（如果有）
      if (SECTION_DESCRIPTIONS[section]) {
        const descP = document.createElement('p');
        descP.className = 'text-[var(--accents-4)] text-sm mt-1 mb-4';
        descP.textContent = SECTION_DESCRIPTIONS[section];
        header.appendChild(descP);
      }
      
      card.appendChild(header);

      const grid = document.createElement('div');
      grid.className = 'config-grid';

      visibleKeys.forEach(key => {
        const fieldCard = buildFieldCard(section, key, items[key]);
        grid.appendChild(fieldCard);
      });

      card.appendChild(grid);
      if (section === 'app') {
        const footerActions = document.createElement('div');
        footerActions.className = 'config-footer-actions';
        const clearLogsBtn = document.createElement('button');
        clearLogsBtn.type = 'button';
        clearLogsBtn.id = 'clear-logs-btn';
        clearLogsBtn.className = 'geist-button-danger gap-2';
        clearLogsBtn.innerHTML = `
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M3 6h18"></path>
            <path d="M8 6V4h8v2"></path>
            <path d="M19 6l-1 14H6L5 6"></path>
            <path d="M10 11v6"></path>
            <path d="M14 11v6"></path>
          </svg>
          清空日志文件夹
        `;
        clearLogsBtn.addEventListener('click', clearLogsDirectory);
        card.appendChild(footerActions);
        footerActions.appendChild(clearLogsBtn);
      }
      if (grid.children.length > 0) {
        fragment.appendChild(card);
      }
    }
  });

  container.appendChild(fragment);

  // 初始化 CF 自动刷新联动状态
  const cfEnabled = data.proxy && data.proxy.enabled;
  applyCfRefreshState(cfEnabled);
}

async function manualRefreshCfClearance() {
  const btn = byId('cf-refresh-btn');
  if (!btn) return;
  const originalHtml = btn.innerHTML;
  btn.disabled = true;
  btn.innerHTML = `
    <svg class="animate-spin" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
    </svg>
    刷新中...
  `;
  try {
    const res = await fetch('/v1/admin/config/cf-refresh', {
      method: 'POST',
      headers: buildAuthHeaders(apiKey)
    });
    const data = await res.json().catch(() => ({}));
    if (!res.ok) {
      throw new Error(data.detail || data.message || `HTTP ${res.status}`);
    }
    showToast(data.message || 'CF Clearance 已刷新', 'success');
    await loadData();
  } catch (e) {
    showToast(`刷新失败: ${e.message || e}`, 'error');
  } finally {
    btn.disabled = false;
    btn.innerHTML = originalHtml;
  }
}

function formatBytes(bytes) {
  const size = Number(bytes || 0);
  if (!size) return '0 B';
  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
  let value = size;
  let unitIndex = 0;
  while (value >= 1024 && unitIndex < units.length - 1) {
    value /= 1024;
    unitIndex += 1;
  }
  return `${value >= 10 || unitIndex === 0 ? value.toFixed(0) : value.toFixed(1)} ${units[unitIndex]}`;
}

async function clearLogsDirectory() {
  const btn = byId('clear-logs-btn');
  if (!btn) return;
  const confirmed = window.confirm('将清空 logs 文件夹中的全部日志文件，是否继续？');
  if (!confirmed) return;

  const originalHtml = btn.innerHTML;
  btn.disabled = true;
  btn.innerHTML = `
    <svg class="animate-spin" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
    </svg>
    清理中...
  `;

  try {
    const res = await fetch('/v1/admin/config/clear-logs', {
      method: 'POST',
      headers: buildAuthHeaders(apiKey)
    });
    const data = await res.json().catch(() => ({}));
    if (!res.ok) {
      throw new Error(data.detail || data.message || `HTTP ${res.status}`);
    }
    const info = data.data || {};
    const filesText = Number(info.deleted_files || 0);
    const dirsText = Number(info.deleted_dirs || 0);
    const bytesText = formatBytes(info.released_bytes || 0);
    showToast(`已清空日志：${filesText} 个文件，${dirsText} 个目录，释放 ${bytesText}`, 'success');
  } catch (e) {
    showToast(`清空失败: ${e.message || e}`, 'error');
  } finally {
    btn.disabled = false;
    btn.innerHTML = originalHtml;
  }
}

function normalizeModelRoutingAssignments(raw) {
  const next = {};
  const source = raw && typeof raw === 'object' ? raw : {};
  Object.entries(source).forEach(([modelId, value]) => {
    if (typeof value === 'string' && value.trim()) {
      next[modelId] = value.trim();
      return;
    }
    if (Array.isArray(value)) {
      const first = value.map(item => String(item).trim()).find(Boolean);
      if (first) next[modelId] = first;
    }
  });
  return next;
}

function buildModelRoutingInput(section, key, val) {
  modelRoutingAssignments = normalizeModelRoutingAssignments(val);

  const wrapper = document.createElement('div');
  wrapper.className = 'routing-board';
  wrapper.dataset.type = 'model-routing';
  wrapper.dataset.section = section;
  wrapper.dataset.key = key;

  const leftPane = document.createElement('div');
  leftPane.className = 'routing-pane routing-pane-models';
  leftPane.innerHTML = `
    <div class="routing-pane-header">
      <div class="routing-pane-title">模型列表</div>
      <div class="routing-pane-subtitle">拖到右侧池中即可指定路由，拖回这里表示按系统默认池处理。</div>
    </div>
  `;

  const unassignedZone = document.createElement('div');
  unassignedZone.className = 'routing-dropzone routing-dropzone-source';
  unassignedZone.dataset.pool = '';
  registerRoutingDropzone(unassignedZone, '');

  const rightPane = document.createElement('div');
  rightPane.className = 'routing-pane routing-pane-pools';
  rightPane.innerHTML = `
    <div class="routing-pane-header">
      <div class="routing-pane-title">Token 池</div>
      <div class="routing-pane-subtitle">模型放到哪个池，后端请求就优先走哪个池。</div>
    </div>
  `;

  const poolGrid = document.createElement('div');
  poolGrid.className = 'routing-pool-grid';
  const pools = Array.isArray(modelRoutingMeta.pools) && modelRoutingMeta.pools.length
    ? modelRoutingMeta.pools
    : ['ssoBasic', 'ssoSuper'];

  pools.forEach(poolName => {
    const card = document.createElement('div');
    card.className = 'routing-pool-card';

    const header = document.createElement('div');
    header.className = 'routing-pool-header';
    header.innerHTML = `
      <div class="routing-pool-title">${poolName}</div>
      <div class="routing-pool-hint">拖拽模型到这里</div>
    `;

    const zone = document.createElement('div');
    zone.className = 'routing-dropzone routing-dropzone-pool';
    zone.dataset.pool = poolName;
    registerRoutingDropzone(zone, poolName);

    card.appendChild(header);
    card.appendChild(zone);
    poolGrid.appendChild(card);
  });

  leftPane.appendChild(unassignedZone);
  rightPane.appendChild(poolGrid);
  wrapper.appendChild(leftPane);
  wrapper.appendChild(rightPane);

  renderModelRoutingBoard(wrapper);
  return { input: wrapper, node: wrapper };
}

function registerRoutingDropzone(zone, poolName) {
  zone.addEventListener('dragover', (event) => {
    event.preventDefault();
    zone.classList.add('is-over');
  });
  zone.addEventListener('dragleave', () => {
    zone.classList.remove('is-over');
  });
  zone.addEventListener('drop', (event) => {
    event.preventDefault();
    zone.classList.remove('is-over');
    const modelId = event.dataTransfer.getData('text/plain') || modelRoutingDragId;
    if (!modelId) return;
    if (poolName) {
      modelRoutingAssignments[modelId] = poolName;
    } else {
      delete modelRoutingAssignments[modelId];
    }
    const board = zone.closest('.routing-board');
    if (board) renderModelRoutingBoard(board);
    modelRoutingDragId = '';
  });
}

function createModelChip(model) {
  const chip = document.createElement('button');
  chip.type = 'button';
  chip.className = 'routing-chip';
  chip.draggable = true;
  chip.dataset.modelId = model.id;
  chip.innerHTML = `
    <span class="routing-chip-name">${model.display_name || model.id}</span>
    <span class="routing-chip-id">${model.id}</span>
  `;

  chip.addEventListener('dragstart', (event) => {
    modelRoutingDragId = model.id;
    event.dataTransfer.setData('text/plain', model.id);
    event.dataTransfer.effectAllowed = 'move';
    chip.classList.add('is-dragging');
  });
  chip.addEventListener('dragend', () => {
    chip.classList.remove('is-dragging');
    modelRoutingDragId = '';
    document.querySelectorAll('.routing-dropzone.is-over').forEach((node) => {
      node.classList.remove('is-over');
    });
  });

  return chip;
}

function renderModelRoutingBoard(board) {
  const models = Array.isArray(modelRoutingMeta.models) ? [...modelRoutingMeta.models] : [];
  models.sort((a, b) => String(a.id).localeCompare(String(b.id)));

  const sourceZone = board.querySelector('.routing-dropzone-source');
  const poolZones = Array.from(board.querySelectorAll('.routing-dropzone-pool'));
  if (!sourceZone) return;

  sourceZone.replaceChildren();
  poolZones.forEach(zone => zone.replaceChildren());

  const assignedModelIds = new Set();
  poolZones.forEach(zone => {
    const poolName = zone.dataset.pool || '';
    const assigned = models.filter(model => modelRoutingAssignments[model.id] === poolName);
    assigned.forEach(model => {
      assignedModelIds.add(model.id);
      zone.appendChild(createModelChip(model));
    });
    if (!assigned.length) {
      zone.appendChild(createRoutingEmptyState('拖拽模型到这里'));
    }
  });

  const unassigned = models.filter(model => !assignedModelIds.has(model.id));
  unassigned.forEach(model => {
    sourceZone.appendChild(createModelChip(model));
  });
  if (!unassigned.length) {
    sourceZone.appendChild(createRoutingEmptyState('所有模型都已分配到池'));
  }
}

function createRoutingEmptyState(text) {
  const empty = document.createElement('div');
  empty.className = 'routing-empty';
  empty.textContent = text;
  return empty;
}

function applyCfRefreshState(enabled) {
  // 设置字段禁用状态的辅助函数
  function setFieldDisabled(section, key, disabled) {
    const input = document.querySelector(
      `input[data-section="${section}"][data-key="${key}"],` +
      `textarea[data-section="${section}"][data-key="${key}"],` +
      `select[data-section="${section}"][data-key="${key}"]`
    );
    if (!input) return;
    input.disabled = disabled;
    // 找到最近的 .config-field 父元素设置样式
    const field = input.closest('.config-field');
    if (field) {
      field.style.opacity = disabled ? '0.45' : '';
      field.style.pointerEvents = disabled ? 'none' : '';
    }
  }

  // enabled=true → 灰掉 cf_clearance/browser/user_agent
  CF_MANAGED_PROXY_KEYS.forEach(k => setFieldDisabled('proxy', k, !!enabled));
  // enabled=false → 灰掉 flaresolverr_url/refresh_interval/timeout
  CF_REFRESH_SUB_KEYS.forEach(k => setFieldDisabled('proxy', k, !enabled));
}

function buildFieldCard(section, key, val) {
  const text = getText(section, key);

  const fieldCard = document.createElement('div');
  fieldCard.className = 'config-field';

  // Title
  const titleEl = document.createElement('div');
  titleEl.className = 'config-field-title';
  titleEl.textContent = text.title;
  fieldCard.appendChild(titleEl);

  // Description (Muted) - 只在有描述时显示
  if (text.desc) {
    const descEl = document.createElement('p');
    descEl.className = 'config-field-desc';
    descEl.textContent = text.desc;
    fieldCard.appendChild(descEl);
  }

  // Input Wrapper
  const inputWrapper = document.createElement('div');
  inputWrapper.className = 'config-field-input';

  // Input Logic
  let built;
  if (typeof val === 'boolean') {
    built = buildBooleanInput(section, key, val);
  }
  else if (key === 'image_format') {
    built = buildSelectInput(section, key, val, [
      { val: 'url', text: 'URL' },
      { val: 'base64', text: 'Base64' }
    ]);
  }
  else if (key === 'video_format') {
    built = buildSelectInput(section, key, val, [
      { val: 'html', text: 'HTML' },
      { val: 'url', text: 'URL' }
    ]);
  }
  else if (section === 'imagine_fast' && key === 'size') {
    built = buildSelectInput(section, key, val, [
      { val: '1024x1024', text: '1024x1024 (1:1)' },
      { val: '1280x720', text: '1280x720 (16:9)' },
      { val: '720x1280', text: '720x1280 (9:16)' },
      { val: '1792x1024', text: '1792x1024 (3:2)' },
      { val: '1024x1792', text: '1024x1792 (2:3)' }
    ]);
  }
  else if (section === 'imagine_fast' && key === 'response_format') {
    built = buildSelectInput(section, key, val, [
      { val: 'url', text: 'URL' },
      { val: 'b64_json', text: 'B64 JSON' },
      { val: 'base64', text: 'Base64' }
    ]);
  }
  else if (Array.isArray(val) || typeof val === 'object') {
    if (section === 'model_routing' && key === 'model_pools') {
      built = buildModelRoutingInput(section, key, val);
    } else {
      built = buildJsonInput(section, key, val);
    }
  }
  else {
    if (key === 'api_key' || key === 'app_key' || key === 'public_key') {
      built = buildSecretInput(section, key, val);
    } else {
      built = buildTextInput(section, key, val);
    }
  }

  if (built) {
    inputWrapper.appendChild(built.node);
  }
  fieldCard.appendChild(inputWrapper);

  // proxy.enabled (CF 自动刷新) 联动（toggle 本身始终可交互）
  if (section === 'proxy' && key === 'enabled' && built && built.input) {
    fieldCard.style.pointerEvents = 'auto';
    fieldCard.style.opacity = '';
    built.input.addEventListener('change', () => {
      applyCfRefreshState(built.input.checked);
    });
  }

  if (section === 'app' && key === 'public_enabled') {
    fieldCard.classList.add('has-action');
    const link = document.createElement('a');
    link.href = '/login';
    link.className = 'config-field-action flex-none w-[32px] h-[32px] flex items-center justify-center bg-black text-white rounded-md hover:opacity-80 transition-opacity';
    link.title = '功能玩法';
    link.setAttribute('aria-label', '功能玩法');
    link.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg>`;
    link.style.display = val ? 'inline-flex' : 'none';
    fieldCard.appendChild(link);
    if (built && built.input) {
      built.input.addEventListener('change', () => {
        link.style.display = built.input.checked ? 'inline-flex' : 'none';
      });
    }
  }

  return fieldCard;
}

async function saveConfig() {
  const btn = byId('save-btn');
  const originalText = btn.innerText;
  btn.disabled = true;
  btn.innerText = '保存中...';

  try {
    const newConfig = typeof structuredClone === 'function'
      ? structuredClone(currentConfig)
      : JSON.parse(JSON.stringify(currentConfig));
    const inputs = document.querySelectorAll('input[data-section], textarea[data-section], select[data-section], [data-type="model-routing"][data-section]');

    inputs.forEach(input => {
      const s = input.dataset.section;
      const k = input.dataset.key;
      if (input.dataset.type === 'model-routing') {
        if (!newConfig[s]) newConfig[s] = {};
        newConfig[s][k] = { ...modelRoutingAssignments };
        return;
      }
      let val = input.value;

      if (input.type === 'checkbox') {
        val = input.checked;
      } else if (input.dataset.type === 'json') {
        try { val = JSON.parse(val); } catch (e) { throw new Error(`无效的 JSON: ${getText(s, k).title}`); }
      } else if (k === 'app_key' && val.trim() === '') {
        throw new Error('app_key 不能为空（后台密码）');
      } else if (NUMERIC_FIELDS.has(k)) {
        if (val.trim() !== '' && !Number.isNaN(Number(val))) {
          val = Number(val);
        }
      }

      if (!newConfig[s]) newConfig[s] = {};
      newConfig[s][k] = val;
    });

    if (newConfig.proxy && newConfig.proxy.enabled) {
      const url = String(newConfig.proxy.flaresolverr_url || '').trim();
      if (!url) {
        showToast('启用自动刷新时必须填写 FlareSolverr 地址', 'error');
        btn.disabled = false;
        btn.innerText = originalText;
        return;
      }
    }

    const res = await fetch('/v1/admin/config', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        ...buildAuthHeaders(apiKey)
      },
      body: JSON.stringify(newConfig)
    });

    if (res.ok) {
      btn.innerText = '成功';
      showToast('配置已保存', 'success');
      setTimeout(() => {
        btn.innerText = originalText;
        btn.style.backgroundColor = '';
      }, 2000);
    } else {
      showToast('保存失败', 'error');
    }
  } catch (e) {
    showToast('错误: ' + e.message, 'error');
  } finally {
    if (btn.innerText === '保存中...') {
      btn.disabled = false;
      btn.innerText = originalText;
    } else {
      btn.disabled = false;
    }
  }
}

async function copyToClipboard(text, btn) {
  if (!text) return;
  try {
    await navigator.clipboard.writeText(text);

    btn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
    btn.style.backgroundColor = '#10b981';
    btn.style.borderColor = '#10b981';

    setTimeout(() => {
      btn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
      btn.style.backgroundColor = '';
      btn.style.borderColor = '';
    }, 2000);
  } catch (err) {
    console.error('Failed to copy', err);
  }
}

window.onload = init;