<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import IconSet from '@/components/common/IconSet.vue'
import { useConfigDrawer } from '@/composables/useConfigDrawer'

const activeSection = ref('llm')
const notice = ref('')
const noticeTone = ref<'success' | 'warning'>('success')

const sections = [
  { id: 'llm', label: 'LLM 配置 / Model', icon: 'analysis' },
  { id: 'database', label: '数据库 / Database', icon: 'database' },
  { id: 'search', label: '搜索设置 / Search', icon: 'globe' },
  { id: 'crawler', label: '爬虫配置 / Crawler', icon: 'spider' },
  { id: 'advanced', label: '高级设置 / Advanced', icon: 'terminal' },
]

const { loading, saving, values, loadConfig, saveConfig: persistConfig } = useConfigDrawer()

const llmConfig = computed({
  get: () => ({
    insightApiKey: values.value.INSIGHT_ENGINE_API_KEY ?? '',
    insightBaseUrl: values.value.INSIGHT_ENGINE_BASE_URL ?? '',
    insightModelName: values.value.INSIGHT_ENGINE_MODEL_NAME ?? '',
    mediaApiKey: values.value.MEDIA_ENGINE_API_KEY ?? '',
    mediaBaseUrl: values.value.MEDIA_ENGINE_BASE_URL ?? '',
    mediaModelName: values.value.MEDIA_ENGINE_MODEL_NAME ?? '',
    queryApiKey: values.value.QUERY_ENGINE_API_KEY ?? '',
    queryBaseUrl: values.value.QUERY_ENGINE_BASE_URL ?? '',
    queryModelName: values.value.QUERY_ENGINE_MODEL_NAME ?? '',
    reportApiKey: values.value.REPORT_ENGINE_API_KEY ?? '',
    reportBaseUrl: values.value.REPORT_ENGINE_BASE_URL ?? '',
    reportModelName: values.value.REPORT_ENGINE_MODEL_NAME ?? '',
    forumApiKey: values.value.FORUM_HOST_API_KEY ?? '',
    forumBaseUrl: values.value.FORUM_HOST_BASE_URL ?? '',
    forumModelName: values.value.FORUM_HOST_MODEL_NAME ?? '',
  }),
  set: (next) => {
    values.value = {
      ...values.value,
      INSIGHT_ENGINE_API_KEY: next.insightApiKey,
      INSIGHT_ENGINE_BASE_URL: next.insightBaseUrl,
      INSIGHT_ENGINE_MODEL_NAME: next.insightModelName,
      MEDIA_ENGINE_API_KEY: next.mediaApiKey,
      MEDIA_ENGINE_BASE_URL: next.mediaBaseUrl,
      MEDIA_ENGINE_MODEL_NAME: next.mediaModelName,
      QUERY_ENGINE_API_KEY: next.queryApiKey,
      QUERY_ENGINE_BASE_URL: next.queryBaseUrl,
      QUERY_ENGINE_MODEL_NAME: next.queryModelName,
      REPORT_ENGINE_API_KEY: next.reportApiKey,
      REPORT_ENGINE_BASE_URL: next.reportBaseUrl,
      REPORT_ENGINE_MODEL_NAME: next.reportModelName,
      FORUM_HOST_API_KEY: next.forumApiKey,
      FORUM_HOST_BASE_URL: next.forumBaseUrl,
      FORUM_HOST_MODEL_NAME: next.forumModelName,
    }
  },
})

const dbConfig = computed({
  get: () => ({
    type: values.value.DB_DIALECT ?? 'postgresql',
    host: values.value.DB_HOST ?? '',
    port: Number(values.value.DB_PORT ?? 5432),
    database: values.value.DB_NAME ?? '',
    username: values.value.DB_USER ?? '',
    password: values.value.DB_PASSWORD ?? '',
    charset: values.value.DB_CHARSET ?? 'utf8mb4',
  }),
  set: (next) => {
    values.value = {
      ...values.value,
      DB_DIALECT: next.type,
      DB_HOST: next.host,
      DB_PORT: String(next.port ?? ''),
      DB_NAME: next.database,
      DB_USER: next.username,
      DB_PASSWORD: next.password,
      DB_CHARSET: next.charset,
    }
  },
})

const searchConfig = computed({
  get: () => ({
    defaultEngine: values.value.SEARCH_TOOL_TYPE ?? 'AnspireAPI',
    tavilyApiKey: values.value.TAVILY_API_KEY ?? '',
    bochaApiKey: values.value.BOCHA_WEB_SEARCH_API_KEY ?? '',
    anspireApiKey: values.value.ANSPIRE_API_KEY ?? '',
  }),
  set: (next) => {
    values.value = {
      ...values.value,
      SEARCH_TOOL_TYPE: next.defaultEngine,
      TAVILY_API_KEY: next.tavilyApiKey,
      BOCHA_WEB_SEARCH_API_KEY: next.bochaApiKey,
      ANSPIRE_API_KEY: next.anspireApiKey,
    }
  },
})

const crawlerConfig = ref({
  concurrency: 3,
  requestInterval: 2,
  userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
})

const advancedConfig = ref({
  debugMode: false,
  cacheEnabled: true,
  streamingOutput: true,
})

async function hydrateConfig() {
  try {
    await loadConfig()
    notice.value = '已加载当前系统配置 / Configuration loaded'
    noticeTone.value = 'success'
  } catch (error) {
    notice.value = `读取配置失败 / Failed to load: ${error instanceof Error ? error.message : 'unknown error'}`
    noticeTone.value = 'warning'
  }
}

async function saveConfig() {
  try {
    await persistConfig()
    notice.value = '配置已保存到后端 .env / Configuration saved'
    noticeTone.value = 'success'
  } catch (error) {
    notice.value = `配置保存失败 / Save failed: ${error instanceof Error ? error.message : 'unknown error'}`
    noticeTone.value = 'warning'
  }
}

function updateLlmField(key: string, value: string) {
  llmConfig.value = {
    ...llmConfig.value,
    [key]: value,
  }
}

function updateDbField(key: string, value: string | number) {
  dbConfig.value = {
    ...dbConfig.value,
    [key]: value,
  }
}

function updateSearchField(key: string, value: string) {
  searchConfig.value = {
    ...searchConfig.value,
    [key]: value,
  }
}

onMounted(() => {
  hydrateConfig()
})
</script>

<template>
  <div class="settings-view">
    <!-- 页面标题 -->
    <div class="view-header">
      <div class="header-text">
        <h2 class="view-title">系统配置中心 Configuration Center</h2>
        <p class="view-desc">管理 LLM 大模型、数据库、搜索和爬虫等核心配置 · Manage core system connections and runtime options</p>
      </div>
    </div>

    <div class="settings-layout">
      <nav class="settings-nav">
        <button
          v-for="section in sections"
          :key="section.id"
          class="nav-item"
          :class="{ 'nav-item--active': activeSection === section.id }"
          @click="activeSection = section.id"
        >
          <IconSet :type="section.icon" />
          <span>{{ section.label }}</span>
        </button>
      </nav>

      <div class="settings-content">
        <div v-if="notice" class="settings-notice" :class="`settings-notice--${noticeTone}`">
          {{ notice }}
        </div>

        <div v-if="loading" class="settings-loading">正在加载配置 / Loading configuration...</div>

        <template v-else>
        <!-- LLM 配置 -->
        <div v-if="activeSection === 'llm'" class="config-section">
          <div class="section-header">
            <h3 class="section-title">LLM 大模型配置 Large Language Model</h3>
            <p class="section-desc">配置用于舆情分析的多引擎模型服务 · Configure each engine with real backend keys</p>
          </div>

          <div class="engine-config-stack">
            <div class="engine-config-card">
              <div class="engine-config-card__header">
                <h4>Insight 洞察引擎</h4>
                <span>Sentiment & Insight</span>
              </div>
              <div class="config-grid">
                <div class="config-field config-field--full">
                  <label class="field-label">API Key</label>
                  <input :value="llmConfig.insightApiKey" @input="updateLlmField('insightApiKey', ($event.target as HTMLInputElement).value)" type="password" class="field-input" placeholder="Insight API Key" />
                </div>
                <div class="config-field config-field--full">
                  <label class="field-label">Base URL</label>
                  <input :value="llmConfig.insightBaseUrl" @input="updateLlmField('insightBaseUrl', ($event.target as HTMLInputElement).value)" type="text" class="field-input" placeholder="https://api.example.com/v1" />
                </div>
                <div class="config-field config-field--full">
                  <label class="field-label">模型名称 Model</label>
                  <input :value="llmConfig.insightModelName" @input="updateLlmField('insightModelName', ($event.target as HTMLInputElement).value)" type="text" class="field-input" placeholder="kimi-k2-0711-preview" />
                </div>
              </div>
            </div>

            <div class="engine-config-card">
              <div class="engine-config-card__header">
                <h4>Media 多模态引擎</h4>
                <span>Media Analysis</span>
              </div>
              <div class="config-grid">
                <div class="config-field config-field--full">
                  <label class="field-label">API Key</label>
                  <input :value="llmConfig.mediaApiKey" @input="updateLlmField('mediaApiKey', ($event.target as HTMLInputElement).value)" type="password" class="field-input" placeholder="Media API Key" />
                </div>
                <div class="config-field config-field--full">
                  <label class="field-label">Base URL</label>
                  <input :value="llmConfig.mediaBaseUrl" @input="updateLlmField('mediaBaseUrl', ($event.target as HTMLInputElement).value)" type="text" class="field-input" placeholder="https://aihubmix.com/v1" />
                </div>
                <div class="config-field config-field--full">
                  <label class="field-label">模型名称 Model</label>
                  <input :value="llmConfig.mediaModelName" @input="updateLlmField('mediaModelName', ($event.target as HTMLInputElement).value)" type="text" class="field-input" placeholder="gemini-2.5-pro" />
                </div>
              </div>
            </div>

            <div class="engine-config-card">
              <div class="engine-config-card__header">
                <h4>Query 检索引擎</h4>
                <span>Search & Research</span>
              </div>
              <div class="config-grid">
                <div class="config-field config-field--full">
                  <label class="field-label">API Key</label>
                  <input :value="llmConfig.queryApiKey" @input="updateLlmField('queryApiKey', ($event.target as HTMLInputElement).value)" type="password" class="field-input" placeholder="Query API Key" />
                </div>
                <div class="config-field config-field--full">
                  <label class="field-label">Base URL</label>
                  <input :value="llmConfig.queryBaseUrl" @input="updateLlmField('queryBaseUrl', ($event.target as HTMLInputElement).value)" type="text" class="field-input" placeholder="https://api.deepseek.com" />
                </div>
                <div class="config-field config-field--full">
                  <label class="field-label">模型名称 Model</label>
                  <input :value="llmConfig.queryModelName" @input="updateLlmField('queryModelName', ($event.target as HTMLInputElement).value)" type="text" class="field-input" placeholder="deepseek-chat" />
                </div>
              </div>
            </div>

            <div class="engine-config-card engine-config-card--split">
              <div>
                <div class="engine-config-card__header">
                  <h4>Report 报告引擎</h4>
                  <span>Rendering & Writing</span>
                </div>
                <div class="config-grid">
                  <div class="config-field config-field--full">
                    <label class="field-label">API Key</label>
                    <input :value="llmConfig.reportApiKey" @input="updateLlmField('reportApiKey', ($event.target as HTMLInputElement).value)" type="password" class="field-input" placeholder="Report API Key" />
                  </div>
                  <div class="config-field config-field--full">
                    <label class="field-label">Base URL</label>
                    <input :value="llmConfig.reportBaseUrl" @input="updateLlmField('reportBaseUrl', ($event.target as HTMLInputElement).value)" type="text" class="field-input" placeholder="https://aihubmix.com/v1" />
                  </div>
                  <div class="config-field config-field--full">
                    <label class="field-label">模型名称 Model</label>
                    <input :value="llmConfig.reportModelName" @input="updateLlmField('reportModelName', ($event.target as HTMLInputElement).value)" type="text" class="field-input" placeholder="gemini-2.5-pro" />
                  </div>
                </div>
              </div>

              <div>
                <div class="engine-config-card__header">
                  <h4>Forum 协作主持</h4>
                  <span>Forum Host</span>
                </div>
                <div class="config-grid">
                  <div class="config-field config-field--full">
                    <label class="field-label">API Key</label>
                    <input :value="llmConfig.forumApiKey" @input="updateLlmField('forumApiKey', ($event.target as HTMLInputElement).value)" type="password" class="field-input" placeholder="Forum Host API Key" />
                  </div>
                  <div class="config-field config-field--full">
                    <label class="field-label">Base URL</label>
                    <input :value="llmConfig.forumBaseUrl" @input="updateLlmField('forumBaseUrl', ($event.target as HTMLInputElement).value)" type="text" class="field-input" placeholder="https://dashscope.aliyuncs.com/compatible-mode/v1" />
                  </div>
                  <div class="config-field config-field--full">
                    <label class="field-label">模型名称 Model</label>
                    <input :value="llmConfig.forumModelName" @input="updateLlmField('forumModelName', ($event.target as HTMLInputElement).value)" type="text" class="field-input" placeholder="qwen-plus" />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="config-actions">
            <button class="btn btn--outline" type="button" @click="hydrateConfig">
              <IconSet type="refresh" />
              重新加载 Reload
            </button>
            <button class="btn btn--primary" type="button" :disabled="saving" @click="saveConfig">
              <IconSet type="check" />
              {{ saving ? '保存中 Saving...' : '保存配置 Save' }}
            </button>
          </div>
        </div>

        <div v-if="activeSection === 'database'" class="config-section">
          <div class="section-header">
            <h3 class="section-title">数据库配置 Database</h3>
            <p class="section-desc">配置 PostgreSQL 或 MySQL 连接，并写回后端共享配置</p>
          </div>

          <div class="config-grid">
            <div class="config-field">
              <label class="field-label">数据库类型 Dialect</label>
              <select :value="dbConfig.type" @change="updateDbField('type', ($event.target as HTMLSelectElement).value)" class="field-select">
                <option value="postgresql">PostgreSQL</option>
                <option value="mysql">MySQL</option>
              </select>
            </div>

            <div class="config-field">
              <label class="field-label">主机 Host</label>
              <input :value="dbConfig.host" @input="updateDbField('host', ($event.target as HTMLInputElement).value)" type="text" class="field-input" placeholder="localhost" />
            </div>

            <div class="config-field">
              <label class="field-label">端口 Port</label>
              <input :value="dbConfig.port" @input="updateDbField('port', Number(($event.target as HTMLInputElement).value))" type="number" class="field-input" placeholder="5432" />
            </div>

            <div class="config-field config-field--full">
              <label class="field-label">数据库名称 Database Name</label>
              <input :value="dbConfig.database" @input="updateDbField('database', ($event.target as HTMLInputElement).value)" type="text" class="field-input" placeholder="bettafish" />
            </div>

            <div class="config-field">
              <label class="field-label">用户名 Username</label>
              <input :value="dbConfig.username" @input="updateDbField('username', ($event.target as HTMLInputElement).value)" type="text" class="field-input" placeholder="postgres" />
            </div>

            <div class="config-field">
              <label class="field-label">密码 Password</label>
              <input :value="dbConfig.password" @input="updateDbField('password', ($event.target as HTMLInputElement).value)" type="password" class="field-input" placeholder="********" />
            </div>

            <div class="config-field config-field--full">
              <label class="field-label">字符集 Charset</label>
              <input :value="dbConfig.charset" @input="updateDbField('charset', ($event.target as HTMLInputElement).value)" type="text" class="field-input" placeholder="utf8mb4" />
            </div>
          </div>

          <div class="config-actions">
            <button class="btn btn--outline" type="button" @click="hydrateConfig">
              <IconSet type="refresh" />
              重新加载 Reload
            </button>
            <button class="btn btn--primary" type="button" :disabled="saving" @click="saveConfig">
              <IconSet type="check" />
              {{ saving ? '保存中 Saving...' : '保存配置 Save' }}
            </button>
          </div>
        </div>

        <div v-if="activeSection === 'search'" class="config-section">
          <div class="section-header">
            <h3 class="section-title">搜索服务配置 Search Services</h3>
            <p class="section-desc">配置当前后端支持的搜索引擎与密钥，不再展示无效 mock 选项</p>
          </div>

          <div class="config-grid">
            <div class="config-field">
              <label class="field-label">默认搜索引擎 Search Tool</label>
              <select :value="searchConfig.defaultEngine" @change="updateSearchField('defaultEngine', ($event.target as HTMLSelectElement).value)" class="field-select">
                <option value="AnspireAPI">AnspireAPI</option>
                <option value="BochaAPI">BochaAPI</option>
              </select>
            </div>

            <div class="config-field config-field--full">
              <label class="field-label">Tavily API Key</label>
              <input :value="searchConfig.tavilyApiKey" @input="updateSearchField('tavilyApiKey', ($event.target as HTMLInputElement).value)" type="password" class="field-input" placeholder="tvly-xxxx" />
            </div>

            <div class="config-field config-field--full">
              <label class="field-label">Bocha API Key</label>
              <input :value="searchConfig.bochaApiKey" @input="updateSearchField('bochaApiKey', ($event.target as HTMLInputElement).value)" type="password" class="field-input" placeholder="Bocha key" />
            </div>

            <div class="config-field config-field--full">
              <label class="field-label">Anspire API Key</label>
              <input :value="searchConfig.anspireApiKey" @input="updateSearchField('anspireApiKey', ($event.target as HTMLInputElement).value)" type="password" class="field-input" placeholder="Anspire key" />
            </div>
          </div>

          <div class="config-actions">
            <button class="btn btn--outline" type="button" @click="hydrateConfig">
              <IconSet type="refresh" />
              重新加载 Reload
            </button>
            <button class="btn btn--primary" type="button" :disabled="saving" @click="saveConfig">
              <IconSet type="check" />
              {{ saving ? '保存中 Saving...' : '保存配置 Save' }}
            </button>
          </div>
        </div>

        <div v-if="activeSection === 'crawler'" class="config-section">
          <div class="section-header">
            <h3 class="section-title">爬虫配置 Crawler</h3>
            <p class="section-desc">当前为运行期建议值展示，后续可接入真实控制接口</p>
          </div>

          <div class="config-grid">
            <div class="config-field">
              <label class="field-label">并发数 Concurrency</label>
              <input
                v-model.number="crawlerConfig.concurrency"
                type="number"
                class="field-input"
                min="1"
                max="10"
              />
            </div>

            <div class="config-field">
              <label class="field-label">请求间隔 (秒) Interval</label>
              <input
                v-model.number="crawlerConfig.requestInterval"
                type="number"
                class="field-input"
                min="1"
                max="10"
              />
            </div>

            <div class="config-field config-field--full">
              <label class="field-label">User-Agent</label>
              <input
                v-model="crawlerConfig.userAgent"
                type="text"
                class="field-input"
              />
            </div>
          </div>

          <div class="config-actions">
            <button class="btn btn--outline" type="button" disabled>
              <IconSet type="warning" />
              暂未接入保存 Not Persisted Yet
            </button>
          </div>
        </div>

        <div v-if="activeSection === 'advanced'" class="config-section">
          <div class="section-header">
            <h3 class="section-title">高级设置 Advanced</h3>
            <p class="section-desc">当前用于 UI 方案占位，尚未映射到后端配置键</p>
          </div>

          <div class="config-list">
            <div class="config-item">
              <div class="config-item__info">
                <span class="config-item__title">调试模式 Debug Mode</span>
                <span class="config-item__desc">启用详细日志与性能监控（UI 占位）</span>
              </div>
              <label class="toggle">
                <input type="checkbox" v-model="advancedConfig.debugMode" />
                <span class="toggle__slider" />
              </label>
            </div>

            <div class="config-item">
              <div class="config-item__info">
                <span class="config-item__title">缓存启用 Cache</span>
                <span class="config-item__desc">缓存搜索结果和接口响应（UI 占位）</span>
              </div>
              <label class="toggle">
                <input type="checkbox" v-model="advancedConfig.cacheEnabled" />
                <span class="toggle__slider" />
              </label>
            </div>

            <div class="config-item">
              <div class="config-item__info">
                <span class="config-item__title">流式输出 Streaming</span>
                <span class="config-item__desc">实时显示 AI 生成内容（UI 占位）</span>
              </div>
              <label class="toggle">
                <input type="checkbox" v-model="advancedConfig.streamingOutput" />
                <span class="toggle__slider" />
              </label>
            </div>
          </div>

          <div class="config-actions">
            <button class="btn btn--outline" type="button" disabled>
              <IconSet type="warning" />
              暂未接入保存 Not Persisted Yet
            </button>
          </div>
        </div>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.settings-view {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
}

.view-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.header-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.view-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
}

.view-desc {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

/* 设置布局 */
.settings-loading {
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-medium);
  background: rgba(196, 149, 106, 0.06);
  color: var(--text-secondary);
}

.settings-notice {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  line-height: 1.5;
}

.settings-notice--success {
  background: rgba(61, 139, 110, 0.1);
  border: 1px solid rgba(61, 139, 110, 0.18);
  color: var(--success);
}

.settings-notice--warning {
  background: rgba(179, 134, 59, 0.12);
  border: 1px solid rgba(179, 134, 59, 0.22);
  color: var(--warning);
}

.engine-config-stack {
  display: grid;
  gap: 18px;
}

.engine-config-card {
  padding: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.engine-config-card--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.engine-config-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}

.engine-config-card__header h4 {
  margin: 0;
  font-size: 16px;
  color: var(--text-primary);
}

.engine-config-card__header span {
  font-size: 12px;
  color: var(--text-muted);
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 16px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.nav-item :deep(.icon) {
  width: 18px;
  height: 18px;
  opacity: 0.6;
}

.nav-item:hover {
  background: var(--bg-base);
  color: var(--text-primary);
}

.nav-item--active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-inverse);
}

.nav-item--active :deep(.icon) {
  opacity: 1;
}

/* 配置内容 */
.settings-content {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 28px;
  overflow-y: auto;
}

.config-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section-header {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.section-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.section-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* 配置网格 */
.config-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.config-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.config-field--full {
  grid-column: 1 / -1;
}

.field-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.field-input,
.field-select {
  height: 44px;
  padding: 0 14px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.field-input:focus,
.field-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196, 149, 106, 0.15);
}

.field-input::placeholder {
  color: var(--text-muted);
}

.field-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A6B5D' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* 配置列表 */
.config-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.config-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.config-item__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.config-item__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.config-item__desc {
  font-size: 12px;
  color: var(--text-muted);
}

/* Toggle 开关 */
.toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-medium);
  border-radius: 26px;
  transition: 0.3s;
}

.toggle__slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}

.toggle input:checked + .toggle__slider {
  background-color: var(--success);
}

.toggle input:checked + .toggle__slider::before {
  transform: translateX(22px);
}

/* 操作按钮 */
.config-actions {
  display: flex;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}

.btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn :deep(.icon) {
  width: 16px;
  height: 16px;
}

.btn--primary {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--text-inverse);
}

.btn--primary:hover {
  background: var(--primary-light);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
}

.btn--outline:hover {
  background: var(--bg-base);
}

/* 响应式 */
@media (max-width: 1180px) {
  .engine-config-card--split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }

  .settings-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .nav-item {
    flex: 1;
    min-width: 120px;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .config-grid {
    grid-template-columns: 1fr;
  }

  .config-field--full {
    grid-column: 1;
  }

  .config-actions {
    flex-direction: column;
  }
}
</style>