/* global chrome */

const LANGS = ['简体中文', '繁體中文', 'English', '日本語', '한국어', 'Français', 'Deutsch', 'Español', 'Português', 'Italiano', 'Русский', 'العربية', 'हिन्दी', 'ไทย', 'Việt Nam', 'Indonesia'];

const PRESETS = {
  deepseek: 'DeepSeek', openai: 'OpenAI', kimi: '月之暗面 Kimi', zhipu: '智谱 GLM（普通 API）', 'zhipu-coding': '智谱 GLM Coding Plan',
  qwen: '通义千问', siliconflow: '硅基流动', gemini: 'Google Gemini',
  anthropic: 'Anthropic Claude', ollama: 'Ollama（本地）', custom: '自定义（OpenAI 兼容）'
};

const $ = id => document.getElementById(id);

async function init() {
  const cfg = await chrome.storage.sync.get({
    enabled: true, preset: 'deepseek', model: '', apiKey: '',
    targetLang: '简体中文', triggerMode: 'icon'
  });

  const langSel = $('targetLang');
  LANGS.forEach(l => {
    const o = document.createElement('option');
    o.value = l; o.textContent = l;
    langSel.appendChild(o);
  });
  langSel.value = cfg.targetLang;
  $('triggerMode').value = cfg.triggerMode;

  $('enabledToggle').checked = cfg.enabled;
  updateStatus(cfg.enabled);
  $('providerName').textContent = PRESETS[cfg.preset] || cfg.preset;
  $('modelName').textContent = cfg.model || '（未设置）';
  $('keyStatus').textContent = cfg.apiKey ? '已配置' : '未配置';
  $('keyStatus').className = 'value ' + (cfg.apiKey ? 'ok' : 'warn');

  $('enabledToggle').addEventListener('change', e => {
    chrome.storage.sync.set({ enabled: e.target.checked });
    updateStatus(e.target.checked);
  });
  langSel.addEventListener('change', () => chrome.storage.sync.set({ targetLang: langSel.value }));
  $('triggerMode').addEventListener('change', () => chrome.storage.sync.set({ triggerMode: $('triggerMode').value }));
  $('openOptions').addEventListener('click', () => chrome.runtime.openOptionsPage());
}

function updateStatus(on) {
  $('statusText').textContent = on ? 'AI 划词翻译 · 已开启' : 'AI 划词翻译 · 已停用';
}

init();