import { useEffect, useState, useMemo, useCallback } from 'react'
import { useSettingsStore } from '../../stores/settingsStore'
import { useKeybindingStore } from '../../stores/keybindingStore'
import {
  Monitor,
  Palette,
  Terminal,
  Keyboard,
  Shield,
  Database,
  Info,
  Search,
  X,
  RotateCcw,
  AlertTriangle,
  Copy,
  Check,
  Sparkles,
} from 'lucide-react'
import AiProviderSettings from './AiProviderSettings'
import { themes } from '../../themes/terminal'
import { getKeybindingCategories, getKeybindingsByCategory, type KeybindingActionId } from '../../constants/keybindings'

// ─── Tab 类型 ───────────────────────────────────────────────
type SettingsTab = 'general' | 'appearance' | 'terminal' | 'ai' | 'shortcuts' | 'ssh' | 'security' | 'about'

interface TabMeta {
  id: SettingsTab
  label: string
  description: string
  icon: React.ComponentType<{ className?: string }>
}

interface RuntimeInfo {
  appVersion: string
  os: string
  arch: string
  nativeBackend: string
  sshBackend: string
  dataPath: string
  credentialPath: string
}

const TAB_LIST: TabMeta[] = [
  { id: 'general', label: '工作区', description: '布局与资源', icon: Monitor },
  { id: 'appearance', label: '外观', description: '主题与终端配色', icon: Palette },
  { id: 'terminal', label: '终端', description: '字体与配色', icon: Terminal },
  { id: 'ai', label: '大模型', description: 'Provider、模型与测试', icon: Sparkles },
  { id: 'shortcuts', label: '快捷键', description: '键盘快捷键', icon: Keyboard },
  { id: 'ssh', label: 'SSH', description: '连接（高级）', icon: Shield },
  { id: 'security', label: '安全', description: '加密与隐私', icon: Database },
  { id: 'about', label: '关于', description: '版本与支持', icon: Info },
]

// ─── 快捷键录入 Hook ─────────────────────────────────────────
// 监听键盘事件并格式化为键序列字符串 (如 "Ctrl+Shift+P")
function useKeyRecording() {
  const [recordingId, setRecordingId] = useState<KeybindingActionId | null>(null)
  const [recordedKeys, setRecordedKeys] = useState<string>('')

  const startRecording = useCallback((actionId: KeybindingActionId) => {
    setRecordingId(actionId)
    setRecordedKeys('')
  }, [])

  const stopRecording = useCallback(() => {
    setRecordingId(null)
    setRecordedKeys('')
  }, [])

  // 全局键盘监听
  useEffect(() => {
    if (!recordingId) return

    const handleKeyDown = (e: KeyboardEvent) => {
      e.preventDefault()
      e.stopPropagation()

      // Escape 取消录入
      if (e.key === 'Escape') {
        stopRecording()
        return
      }

      // 忽略单独的修饰键
      if (['Control', 'Shift', 'Alt', 'Meta'].includes(e.key)) return

      const parts: string[] = []
      if (e.ctrlKey || e.metaKey) parts.push('Ctrl')
      if (e.shiftKey) parts.push('Shift')
      if (e.altKey) parts.push('Alt')

      // 主键
      let mainKey = e.key
      if (mainKey === ' ') mainKey = 'Space'
      else if (mainKey === 'Tab') mainKey = 'Tab'
      else if (mainKey.length === 1) mainKey = mainKey.toUpperCase()
      parts.push(mainKey)

      const keySequence = parts.join('+')
      setRecordedKeys(keySequence)
    }

    window.addEventListener('keydown', handleKeyDown, true)
    return () => window.removeEventListener('keydown', handleKeyDown, true)
  }, [recordingId, stopRecording])

  return { recordingId, recordedKeys, startRecording, stopRecording }
}

// ─── 主组件 ─────────────────────────────────────────────────
export default function SettingsView() {
  const { settings, isLoaded, loadSettings, setSetting } = useSettingsStore()
  const keybindingState = useKeybindingStore()
  const [activeTab, setActiveTab] = useState<SettingsTab>('general')
  const [searchQuery, setSearchQuery] = useState('')
  const [runtimeInfo, setRuntimeInfo] = useState<RuntimeInfo | null>(null)
  const [copiedField, setCopiedField] = useState<string | null>(null)
  const { recordingId, recordedKeys, startRecording, stopRecording } = useKeyRecording()

  useEffect(() => {
    loadSettings()
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

  // Runtime facts come from Rust so diagnostics match the installed build.
  useEffect(() => {
    if (window.opsxApi) {
      window.opsxApi
        .appRuntimeInfo()
        .then(setRuntimeInfo)
        .catch(() => undefined)
    }
  }, [])

  const copyText = useCallback(async (label: string, text: string) => {
    try {
      await navigator.clipboard.writeText(text)
      setCopiedField(label)
      setTimeout(() => setCopiedField(null), 1500)
    } catch {
      // ignore
    }
  }, [])

  // 当前 tab 元信息
  const currentMeta = useMemo(() => TAB_LIST.find((t) => t.id === activeTab)!, [activeTab])

  // ── 搜索过滤 ──────────────────────────────────────────────
  const filtered = useMemo((): SettingsTab[] | null => {
    if (!searchQuery.trim()) return null // null 表示不过滤，正常显示
    const q = searchQuery.toLowerCase()
    const keywords: Record<SettingsTab, string[]> = {
      general: ['工作区', '侧栏', '宽度', '资源', 'workspace', 'sidebar'],
      appearance: ['主题', '深色', '浅色', 'theme'],
      terminal: ['字体', 'font', '配色', 'terminal', 'monokai', 'dracula'],
      ai: ['ai', '大模型', 'provider', '模型', 'deepseek', 'glm', 'minimax', 'new-api'],
      shortcuts: ['快捷键', '键盘', 'keyboard', 'shortcut', 'hotkey'],
      ssh: ['ssh', '连接', '端口', '超时', '心跳', '连接池', '重连', '快照'],
      security: ['加密', '安全', '密码', '主密钥', 'known hosts', 'encrypt'],
      about: ['版本', '关于', '许可', 'version', 'about', 'license'],
    }
    const matchIds = (Object.entries(keywords) as [SettingsTab, string[]][])
      .filter(([, kws]) => kws.some((k: string) => k.includes(q) || q.includes(k)))
      .map(([id]) => id)
    return matchIds.length > 0 ? matchIds : []
  }, [searchQuery])

  // 如果搜索过滤后有结果，自动跳转到第一个匹配 tab
  useEffect(() => {
    if (filtered && filtered.length > 0 && !filtered.includes(activeTab)) {
      setActiveTab(filtered[0])
    }
  }, [filtered]) // eslint-disable-line react-hooks/exhaustive-deps

  const visibleTabs = filtered ? TAB_LIST.filter((t) => filtered.includes(t.id)) : TAB_LIST
  const appVersion = runtimeInfo?.appVersion ?? '—'
  const diagnosticText = runtimeInfo
    ? [
        `OpsXShell v${runtimeInfo.appVersion}`,
        `${runtimeInfo.os} ${runtimeInfo.arch}`,
        runtimeInfo.nativeBackend,
        runtimeInfo.sshBackend,
        `Data: ${runtimeInfo.dataPath}`,
      ].join('\n')
    : `OpsXShell v${appVersion}`

  // ── 加载态 ────────────────────────────────────────────────
  if (!isLoaded) {
    return (
      <div className="flex h-full items-center justify-center bg-dark-900">
        <div className="text-txt-muted">加载中...</div>
      </div>
    )
  }

  // ── 渲染内容区 ────────────────────────────────────────────
  const renderContent = () => {
    switch (activeTab) {
      // ──────── 常规 ─────────
      case 'general':
        return (
          <div className="space-y-6">
            <SettingGroup title="工作区布局">
              <SettingRow label="侧栏宽度" description="会话侧栏的默认宽度">
                <div className="flex items-center gap-2">
                  <input
                    type="range"
                    min={180}
                    max={400}
                    step={8}
                    value={settings.sidebarWidth}
                    onChange={(e) => setSetting('sidebarWidth', Number(e.target.value))}
                    className="w-28 accent-blue-500"
                    aria-label="侧栏宽度"
                  />
                  <span className="w-12 text-right text-xs tabular-nums text-txt-muted">{settings.sidebarWidth}px</span>
                </div>
              </SettingRow>
            </SettingGroup>
          </div>
        )

      // ──────── 外观 ─────────
      case 'appearance':
        return (
          <div className="space-y-6">
            <SettingGroup title="外观">
              <SettingRow label="主题" description="应用界面配色">
                <select
                  value={settings.theme}
                  onChange={(e) => setSetting('theme', e.target.value as 'dark' | 'light' | 'system')}
                  className="ui-select-pill"
                >
                  <option value="dark">深色</option>
                  <option value="light">浅色</option>
                  <option value="system">跟随系统</option>
                </select>
              </SettingRow>
            </SettingGroup>
          </div>
        )

      // ──────── 终端 ─────────
      case 'terminal':
        return (
          <div className="space-y-6">
            <SettingGroup title="字体">
              <SettingRow label="字体" description="需 Nerd Font 才能正确显示 Zsh 提示符图标">
                <select
                  value={settings.fontFamily}
                  onChange={(e) => setSetting('fontFamily', e.target.value)}
                  className="ui-select-pill"
                >
                  <option>MesloLGS NF</option>
                  <option>JetBrainsMono Nerd Font</option>
                  <option>Hack Nerd Font</option>
                  <option>FiraCode Nerd Font</option>
                  <option>JetBrains Mono</option>
                  <option>Menlo</option>
                  <option>Fira Code</option>
                  <option>Monaco</option>
                  <option>Consolas</option>
                </select>
              </SettingRow>
              <SettingRow label="字号" description="终端文字大小">
                <div className="flex items-center gap-1">
                  <button
                    type="button"
                    className="h-8 w-8 rounded-lg border border-dark-600 bg-dark-700 text-content-secondary hover:bg-dark-600"
                    onClick={() => setSetting('fontSize', Math.max(10, (settings.fontSize || 14) - 1))}
                  >
                    −
                  </button>
                  <span className="w-12 text-center text-sm tabular-nums text-content-primary">
                    {settings.fontSize || 14}px
                  </span>
                  <button
                    type="button"
                    className="h-8 w-8 rounded-lg border border-dark-600 bg-dark-700 text-content-secondary hover:bg-dark-600"
                    onClick={() => setSetting('fontSize', Math.min(28, (settings.fontSize || 14) + 1))}
                  >
                    +
                  </button>
                </div>
              </SettingRow>
              <SettingRow label="回滚缓冲" description="每个终端保留的历史行数">
                <input
                  type="number"
                  min={1000}
                  max={100000}
                  step={1000}
                  value={settings.scrollback}
                  onChange={(e) => setSetting('scrollback', Math.max(1000, Number(e.target.value) || 10000))}
                  className="ui-input-sm w-24 text-center"
                />
              </SettingRow>
              <SettingToggle
                label="关键词高亮"
                description="突出显示错误、警告、IP 地址和成功状态"
                checked={settings.keywordHighlightEnabled}
                onChange={(value) => setSetting('keywordHighlightEnabled', value)}
              />
            </SettingGroup>

            <SettingGroup title="配色">
              <div className="px-1 py-1">
                <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
                  {Object.entries(themes).map(([key, theme]) => (
                    <button
                      key={key}
                      type="button"
                      onClick={() =>
                        setSetting('terminalTheme', key as 'dracula' | 'monokai' | 'solarized' | 'one-dark')
                      }
                      className={`rounded-xl border p-2.5 text-left text-xs transition-colors ${
                        settings.terminalTheme === key
                          ? 'bg-accent-blue/10 ring-accent-blue/30 border-accent-blue ring-1'
                          : 'border-dark-600/60 hover:border-dark-500'
                      }`}
                    >
                      <div
                        className="mb-1.5 h-7 w-full rounded-md border border-black/20"
                        style={{ backgroundColor: theme.background }}
                      />
                      <span className="text-content-secondary">{theme.name}</span>
                    </button>
                  ))}
                </div>
              </div>
            </SettingGroup>
          </div>
        )

      case 'ai':
        return <AiProviderSettings />

      // ──────── 快捷键 ───────
      case 'shortcuts': {
        const allKeys = keybindingState.getAllEffective()
        const categories = getKeybindingCategories()
        const hasCustom = Object.keys(keybindingState.customKeybindings).length > 0

        // 检查录入的键是否与当前录制匹配
        const recordedConflict =
          recordedKeys && recordingId ? keybindingState.getConflicts(recordingId, recordedKeys) : []

        return (
          <div className="space-y-5">
            {/* 重置全部按钮 */}
            {hasCustom && (
              <div className="flex justify-end">
                <button
                  onClick={() => keybindingState.resetAll()}
                  className="hover:bg-dark-700/50 flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs text-txt-muted transition-colors hover:text-accent-blue"
                >
                  <RotateCcw className="h-3.5 w-3.5" />
                  重置全部为默认
                </button>
              </div>
            )}

            {categories.map((category) => {
              const defs = getKeybindingsByCategory(category)
              return (
                <SettingCard key={category}>
                  <h3 className="mb-3 text-sm font-semibold text-content-secondary">{category}</h3>
                  <div className="space-y-1">
                    {defs.map((def) => {
                      const currentKeys = allKeys[def.id]
                      const isCustom = keybindingState.customKeybindings[def.id] !== undefined
                      const isRecordingThis = recordingId === def.id

                      return (
                        <div
                          key={def.id}
                          className={`flex items-center justify-between rounded-lg px-3 py-2 transition-colors ${
                            isRecordingThis ? 'bg-accent-blue/10 border-accent-blue/30 border' : 'hover:bg-dark-800/60'
                          }`}
                        >
                          <div className="min-w-0 flex-1">
                            <span className="text-sm text-content-primary">{def.label}</span>
                            {isCustom && (
                              <span className="bg-accent-blue/10 ml-2 rounded px-1.5 py-0.5 text-[10px] text-accent-blue">
                                自定义
                              </span>
                            )}
                          </div>

                          <div className="flex items-center gap-2">
                            {isRecordingThis ? (
                              <div className="flex items-center gap-2">
                                <kbd className="bg-accent-blue/20 border-accent-blue/40 inline-flex animate-pulse items-center rounded border px-3 py-1 font-mono text-xs text-accent-blue">
                                  {recordedKeys || '按下快捷键...'}
                                </kbd>
                                <button
                                  onClick={() => stopRecording()}
                                  className="text-xs text-txt-muted hover:text-content-secondary"
                                >
                                  取消
                                </button>
                                {recordedKeys && recordedConflict.length > 0 && (
                                  <div className="flex items-center gap-1 text-xs text-yellow-500">
                                    <AlertTriangle className="h-3 w-3" />
                                    <span>与「{recordedConflict[0].label}」冲突</span>
                                  </div>
                                )}
                              </div>
                            ) : (
                              <>
                                <button
                                  onClick={() => {
                                    startRecording(def.id)
                                  }}
                                  className="group relative"
                                >
                                  <kbd
                                    className={`inline-flex items-center rounded px-2.5 py-1 font-mono text-xs transition-colors ${
                                      isCustom
                                        ? 'bg-accent-blue/10 border-accent-blue/30 border text-accent-blue'
                                        : 'border border-dark-600 bg-dark-700 text-content-secondary'
                                    } group-hover:border-accent-blue/50`}
                                  >
                                    {currentKeys}
                                  </kbd>
                                </button>
                                {isCustom && (
                                  <button
                                    onClick={() => keybindingState.resetKeybinding(def.id)}
                                    className="text-txt-faint transition-colors hover:text-txt-muted"
                                    title="重置为默认"
                                  >
                                    <RotateCcw className="h-3 w-3" />
                                  </button>
                                )}
                              </>
                            )}
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </SettingCard>
              )
            })}

            {/* 录入确认弹层 */}
            {recordingId && recordedKeys && (
              <div className="fixed bottom-6 left-1/2 z-50 flex -translate-x-1/2 items-center gap-3 rounded-xl border border-dark-600 bg-dark-800 px-5 py-3 shadow-2xl">
                <span className="text-sm text-content-secondary">
                  设置为{' '}
                  <kbd className="rounded bg-dark-700 px-1.5 py-0.5 font-mono text-xs text-accent-blue">
                    {recordedKeys}
                  </kbd>
                </span>
                <button
                  onClick={async () => {
                    await keybindingState.setCustomKeybinding(recordingId, recordedKeys)
                    stopRecording()
                  }}
                  className="hover:bg-accent-blue/80 rounded-lg bg-accent-blue px-3 py-1 text-xs text-content-primary transition-colors"
                >
                  确认
                </button>
                <button
                  onClick={stopRecording}
                  className="rounded-lg px-3 py-1 text-xs text-txt-muted transition-colors hover:bg-dark-700 hover:text-content-primary"
                >
                  取消
                </button>
              </div>
            )}

            <p className="text-xs text-txt-faint">点击快捷键可重新绑定 · 按 Esc 取消录入</p>
          </div>
        )
      }

      // ──────── SSH ──────────
      case 'ssh':
        return (
          <div className="space-y-6">
            <SettingGroup title="连接">
              <SettingToggle
                label="保持心跳"
                description="空闲时发送心跳，减少断线"
                checked={settings.keepAlive}
                onChange={(v) => setSetting('keepAlive', v)}
              />
              <SettingToggle
                label="自动重连"
                description="意外断开后自动尝试重连"
                checked={settings.autoReconnect !== false}
                onChange={(v) => setSetting('autoReconnect', v)}
              />
              <SettingRow label="连接超时" description="建立 SSH 连接的最长等待时间（秒）">
                <input
                  type="number"
                  min={5}
                  max={120}
                  value={settings.timeout}
                  onChange={(e) => setSetting('timeout', parseInt(e.target.value) || 30)}
                  className="ui-input-sm w-20 text-center"
                />
              </SettingRow>
              <SettingRow label="自动重连次数" description="意外断线后的最大尝试次数">
                <input
                  type="number"
                  min={1}
                  max={20}
                  value={settings.maxReconnectAttempts}
                  onChange={(e) => setSetting('maxReconnectAttempts', parseInt(e.target.value) || 5)}
                  className="ui-input-sm w-20 text-center"
                />
              </SettingRow>
            </SettingGroup>

            <SettingGroup title="连接池">
              <SettingRow label="最大连接数" description="SSH、SFTP 与批量连接共享此上限">
                <input
                  type="number"
                  min={2}
                  max={50}
                  value={settings.maxConnections}
                  onChange={(e) => setSetting('maxConnections', parseInt(e.target.value) || 10)}
                  className="ui-input-sm w-20 text-center"
                />
              </SettingRow>
              <SettingRow label="后台连接上限" description="超过上限时优先回收最久未使用的连接">
                <input
                  type="number"
                  min={1}
                  max={30}
                  value={settings.maxBackgroundConnections}
                  onChange={(e) => setSetting('maxBackgroundConnections', parseInt(e.target.value) || 5)}
                  className="ui-input-sm w-20 text-center"
                />
              </SettingRow>
              <SettingRow label="后台挂起" description="标签进入后台后多少分钟释放活跃通道">
                <input
                  type="number"
                  min={1}
                  max={120}
                  value={Math.round(settings.idleTimeoutMs / 60000)}
                  onChange={(e) => setSetting('idleTimeoutMs', (parseInt(e.target.value) || 5) * 60000)}
                  className="ui-input-sm w-20 text-center"
                />
              </SettingRow>
            </SettingGroup>
          </div>
        )

      // ──────── 安全 ─────────
      case 'security':
        return (
          <div className="space-y-6">
            <SettingGroup title="凭据保护">
              <SettingRow label="会话密码与密钥口令" description="保存前由 Rust 使用 AES-256-GCM 加密，无法关闭">
                <span className="border-accent-green/25 bg-accent-green/10 rounded-md border px-2 py-1 text-xs font-medium text-accent-green">
                  已启用
                </span>
              </SettingRow>
              <SettingRow label="本地主密钥" description="仅当前系统用户可读取">
                <code className="text-xs text-txt-muted">~/.opsxshsell/master.key</code>
              </SettingRow>
            </SettingGroup>
            <KnownHostsSettingsCard />
          </div>
        )

      // ──────── 关于 ─────────
      case 'about':
        return (
          <div className="max-w-2xl space-y-5">
            <SettingCard>
              <div className="flex items-start gap-4 py-2">
                <div className="border-dark-600/50 flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-2xl border bg-dark-700">
                  <Terminal className="h-8 w-8 text-content-primary" />
                </div>
                <div className="min-w-0 flex-1">
                  <h3 className="text-lg font-semibold text-content-primary">OpsXShell</h3>
                  <p className="mt-0.5 text-sm text-txt-muted">轻量原生的 SSH / SFTP 运维终端</p>
                  <div className="mt-3 flex flex-wrap items-center gap-2">
                    <span className="bg-accent-blue/15 border-accent-blue/20 inline-flex items-center rounded-md border px-2.5 py-1 font-mono text-xs font-medium text-accent-blue">
                      应用 v{appVersion}
                    </span>
                    <span className="border-dark-600/50 inline-flex items-center rounded-md border bg-dark-700 px-2.5 py-1 font-mono text-xs text-txt-muted">
                      Tauri 2 · Rust
                    </span>
                    <button
                      type="button"
                      onClick={() => copyText('version', diagnosticText)}
                      className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-txt-muted transition-colors hover:bg-dark-700 hover:text-content-primary"
                      title="复制版本信息"
                    >
                      {copiedField === 'version' ? (
                        <Check className="h-3.5 w-3.5 text-accent-green" />
                      ) : (
                        <Copy className="h-3.5 w-3.5" />
                      )}
                      {copiedField === 'version' ? '已复制' : '复制'}
                    </button>
                  </div>
                </div>
              </div>
            </SettingCard>

            <SettingCard>
              <SettingSectionTitle>运行环境</SettingSectionTitle>
              <div className="divide-dark-700/30 mt-3 divide-y text-sm">
                {[
                  ['系统', runtimeInfo ? `${runtimeInfo.os} ${runtimeInfo.arch}` : '读取中...'],
                  ['原生运行时', runtimeInfo?.nativeBackend ?? '读取中...'],
                  ['SSH 后端', runtimeInfo?.sshBackend ?? '读取中...'],
                ].map(([label, value]) => (
                  <div key={label} className="flex items-center justify-between gap-4 py-2">
                    <span className="text-txt-muted">{label}</span>
                    <code className="text-right text-xs text-content-secondary">{value}</code>
                  </div>
                ))}
              </div>
            </SettingCard>

            <SettingCard>
              <SettingSectionTitle>本地数据</SettingSectionTitle>
              <div className="mt-3 space-y-3 text-xs">
                <div>
                  <div className="mb-1 text-txt-muted">会话与设置</div>
                  <code className="block break-all text-content-secondary">{runtimeInfo?.dataPath ?? '读取中...'}</code>
                </div>
                <div>
                  <div className="mb-1 text-txt-muted">加密主密钥</div>
                  <code className="block break-all text-content-secondary">
                    {runtimeInfo?.credentialPath ?? '~/.opsxshsell/master.key'}
                  </code>
                </div>
                <p className="leading-relaxed text-txt-faint">
                  密码与密钥口令由 Rust 使用 AES-256-GCM 加密。OpsXShell 不保存终端命令历史。
                </p>
              </div>
            </SettingCard>

            <p className="px-1 text-[11px] text-txt-faint">MIT License · Tauri 2 · Rust · React · XTerm.js</p>
          </div>
        )

      default:
        return null
    }
  }

  // ── 主布局 ────────────────────────────────────────────────
  return (
    <div className="flex h-full bg-dark-900">
      {/* ── 左侧导航 ── */}
      <aside className="bg-dark-800/80 border-dark-700/40 flex w-60 flex-shrink-0 flex-col border-r">
        <div className="px-4 pb-3 pt-5">
          <div className="mb-3 text-[11px] font-semibold uppercase tracking-wider text-txt-faint">设置</div>
          <div className="relative">
            <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-txt-muted" />
            <input
              type="text"
              placeholder="搜索设置..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="ui-input-sm !pl-8 !pr-8"
            />
            {searchQuery && (
              <button
                onClick={() => setSearchQuery('')}
                className="absolute right-2 top-1/2 -translate-y-1/2 text-txt-muted hover:text-content-secondary"
              >
                <X className="h-3.5 w-3.5" />
              </button>
            )}
          </div>
        </div>

        <nav className="flex-1 space-y-0.5 overflow-y-auto px-2 pb-3">
          {visibleTabs.map((tab) => {
            const Icon = tab.icon
            const active = activeTab === tab.id
            return (
              <button
                key={tab.id}
                data-testid={`settings-tab-${tab.id}`}
                onClick={() => setActiveTab(tab.id)}
                className={`ui-nav-item ${active ? 'ui-nav-item-active' : ''} ${tab.id === 'ai' && !active ? 'text-accent-blue' : ''}`}
              >
                <Icon className={`h-4 w-4 flex-shrink-0 ${active || tab.id === 'ai' ? 'text-accent-blue' : ''}`} />
                <div className="min-w-0">
                  <div className="truncate text-sm font-medium">{tab.label}</div>
                  <div className={`truncate text-[11px] ${active ? 'text-txt-muted' : 'text-txt-faint'}`}>
                    {tab.description}
                  </div>
                </div>
              </button>
            )
          })}
        </nav>
      </aside>

      {/* ── 右侧内容区 ── */}
      <div className="to-dark-900/95 flex min-w-0 flex-1 flex-col bg-gradient-to-b from-dark-900">
        <div className="border-dark-700/30 flex-shrink-0 border-b px-8 pb-4 pt-6">
          <h1 className="text-xl font-semibold tracking-tight text-content-primary">{currentMeta.label}</h1>
          <p className="mt-1 text-sm text-txt-muted">{currentMeta.description}</p>
        </div>

        <div className="max-w-3xl flex-1 overflow-y-auto px-8 py-6">{renderContent()}</div>
      </div>
    </div>
  )
}

// ─── 子组件 ─────────────────────────────────────────────────

function KnownHostsSettingsCard() {
  const [entries, setEntries] = useState<Array<{ host: string; port: number; keyType: string; fingerprint: string }>>(
    []
  )
  const [loading, setLoading] = useState(false)

  const load = useCallback(async () => {
    setLoading(true)
    try {
      const result = await window.opsxApi?.knownHostsList?.()
      if (result?.success && result.entries) {
        setEntries(result.entries)
      }
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    void load()
  }, [load])

  const handleRemove = async (host: string, port: number) => {
    await window.opsxApi?.knownHostsRemove?.(host, port)
    await load()
  }

  const handleClear = async () => {
    if (!confirm('确定清空全部已知主机密钥？下次连接将重新确认。')) return
    await window.opsxApi?.knownHostsClear?.()
    await load()
  }

  return (
    <SettingGroup title="已知主机">
      <div className="flex items-center justify-between gap-2 px-4 py-3">
        <p className="flex-1 text-xs text-txt-muted">首次连接会确认主机指纹。此处可管理已信任记录。</p>
        <div className="flex flex-shrink-0 gap-1.5">
          <button
            type="button"
            onClick={() => void load()}
            className="rounded-lg bg-dark-700 px-2 py-1 text-[11px] text-txt-muted hover:bg-dark-600"
          >
            刷新
          </button>
          <button
            type="button"
            onClick={() => void handleClear()}
            className="rounded-lg bg-dark-700 px-2 py-1 text-[11px] text-red-300 hover:bg-red-900/40"
            disabled={entries.length === 0}
          >
            清空
          </button>
        </div>
      </div>
      {loading ? (
        <div className="px-4 pb-3 text-xs text-txt-muted">加载中...</div>
      ) : entries.length === 0 ? (
        <div className="px-4 pb-3 text-xs text-txt-faint">暂无记录</div>
      ) : (
        <div className="divide-dark-700/30 max-h-48 divide-y overflow-y-auto">
          {entries.map((e) => (
            <div key={`${e.host}:${e.port}`} className="flex items-start justify-between gap-2 px-4 py-2.5">
              <div className="min-w-0 font-mono text-[11px]">
                <div className="truncate text-content-primary">
                  {e.host}:{e.port} <span className="text-txt-faint">({e.keyType})</span>
                </div>
                <div className="mt-0.5 break-all text-txt-muted opacity-80">SHA256:{e.fingerprint}</div>
              </div>
              <button
                type="button"
                onClick={() => void handleRemove(e.host, e.port)}
                className="flex-shrink-0 px-1 text-[11px] text-red-300 hover:text-red-200"
              >
                删除
              </button>
            </div>
          ))}
        </div>
      )}
    </SettingGroup>
  )
}

/** 分组卡片：多行设置 */
function SettingGroup({ title, children }: { title?: string; children: React.ReactNode }) {
  return (
    <div>
      {title && <h3 className="mb-2 px-0.5 text-sm font-medium text-content-secondary">{title}</h3>}
      <div className="border-dark-700/45 bg-dark-800/50 divide-dark-700/35 divide-y overflow-hidden rounded-2xl border">
        {children}
      </div>
    </div>
  )
}

/** 卡片容器（快捷键等复用） */
function SettingCard({ children, highlight = false }: { children: React.ReactNode; highlight?: boolean }) {
  return (
    <div
      className={`rounded-2xl p-4 transition-colors ${
        highlight ? 'bg-accent-blue/5 border-accent-blue/25 border' : 'bg-dark-800/50 border-dark-700/45 border'
      }`}
    >
      {children}
    </div>
  )
}

/** 区域小标题 */
function SettingSectionTitle({ children, className = '' }: { children: React.ReactNode; className?: string }) {
  return <div className={`mb-1 text-sm font-semibold text-content-secondary ${className}`}>{children}</div>
}

/** 左文右控行 */
function SettingRow({
  label,
  description,
  children,
}: {
  label: string
  description?: string
  children: React.ReactNode
}) {
  return (
    <div className="flex items-center justify-between gap-4 px-4 py-3.5">
      <div className="mr-2 min-w-0 flex-1">
        <div className="text-sm font-medium text-content-primary">{label}</div>
        {description && <div className="mt-0.5 text-xs leading-relaxed text-txt-muted">{description}</div>}
      </div>
      <div className="flex-shrink-0">{children}</div>
    </div>
  )
}

/** 开关设置项（行内） */
function SettingToggle({
  label,
  description,
  checked,
  onChange,
}: {
  label: string
  description: string
  checked: boolean
  onChange: (value: boolean) => void
}) {
  return (
    <div className="flex items-center justify-between gap-4 px-4 py-3.5">
      <div className="mr-2 min-w-0 flex-1">
        <div className="text-sm font-medium text-content-primary">{label}</div>
        <div className="mt-0.5 text-xs leading-relaxed text-txt-muted">{description}</div>
      </div>
      <button
        type="button"
        role="switch"
        aria-checked={checked}
        onClick={() => onChange(!checked)}
        className={`relative h-6 w-11 flex-shrink-0 rounded-full transition-colors ${
          checked ? 'bg-accent-blue' : 'bg-dark-600'
        }`}
      >
        <span
          className={`absolute top-1 h-4 w-4 rounded-full bg-white shadow transition-transform ${
            checked ? 'left-6' : 'left-1'
          }`}
        />
      </button>
    </div>
  )
}