<template>
  <div class="settings-view">
    <a-form layout="vertical" class="settings-form">
      <!-- LLM 配置 -->
      <a-divider orientation="left">LLM 配置</a-divider>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="Provider">
            <a-select v-model:value="settingsStore.llm.provider" placeholder="选择 LLM 提供商">
              <a-select-option value="anthropic">Anthropic</a-select-option>
              <a-select-option value="openai">OpenAI</a-select-option>
              <a-select-option value="gemini">Gemini</a-select-option>
              <a-select-option value="custom">自定义</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="模型">
            <a-input v-model:value="settingsStore.llm.model" placeholder="例如: claude-sonnet-4-20250514" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="API Key">
            <a-input-password v-model:value="settingsStore.llm.api_key" placeholder="输入 API Key" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Base URL">
            <a-input v-model:value="settingsStore.llm.base_url" placeholder="自定义 API 地址（可选）" />
          </a-form-item>
        </a-col>
      </a-row>

      <!-- 技能配置 -->
      <a-divider orientation="left">技能配置</a-divider>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="默认技能">
            <a-input v-model:value="settingsStore.skillSettings.default_skill" placeholder="留空则使用自动路由" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="自动路由">
            <a-switch v-model:checked="settingsStore.skillSettings.auto_routing" />
            <span style="margin-left: 8px; color: #999">启用后自动将消息路由到最匹配的技能</span>
          </a-form-item>
        </a-col>
      </a-row>

      <!-- 知识库配置 -->
      <a-divider orientation="left">知识库配置</a-divider>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="默认信息源">
            <a-select
              v-model:value="settingsStore.kbSettings.default_sources"
              mode="multiple"
              placeholder="选择默认信息源"
            >
              <a-select-option value="local">本地文档</a-select-option>
              <a-select-option value="feishu">飞书</a-select-option>
              <a-select-option value="confluence">Confluence</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="检索数量 (Top K)">
            <a-input-number v-model:value="settingsStore.kbSettings.top_k" :min="1" :max="50" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="检索模式">
            <a-select v-model:value="settingsStore.kbSettings.retrieval_mode">
              <a-select-option value="standard">标准</a-select-option>
              <a-select-option value="rerank">重排序</a-select-option>
              <a-select-option value="compression">压缩</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <!-- 系统配置 -->
      <a-divider orientation="left">系统配置</a-divider>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="速率限制 (次/分钟)">
            <a-input-number v-model:value="settingsStore.system.rate_limit" :min="1" :max="1000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="日志级别">
            <a-select v-model:value="settingsStore.system.logging_level">
              <a-select-option value="DEBUG">DEBUG</a-select-option>
              <a-select-option value="INFO">INFO</a-select-option>
              <a-select-option value="WARNING">WARNING</a-select-option>
              <a-select-option value="ERROR">ERROR</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="CORS 来源">
            <a-select
              v-model:value="settingsStore.system.cors_origins"
              mode="tags"
              placeholder="输入 CORS 来源"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <div class="settings-form__actions">
        <a-button type="primary" :loading="settingsStore.isSaving" @click="handleSave">
          保存设置
        </a-button>
        <a-alert
          v-if="settingsStore.saveSuccess"
          message="设置已保存"
          type="success"
          show-icon
          style="margin-left: 12px"
        />
        <a-alert
          v-if="settingsStore.error"
          :message="settingsStore.error"
          type="error"
          show-icon
          style="margin-left: 12px"
        />
      </div>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { useSettingsStore } from '@/stores/settings'

const settingsStore = useSettingsStore()

onMounted(() => {
  settingsStore.fetchSettings()
})

async function handleSave(): Promise<void> {
  try {
    await settingsStore.saveSettings()
    message.success('设置已保存')
  } catch {
    message.error('保存设置失败')
  }
}
</script>

<style scoped>
.settings-view {
  height: 100%;
  padding: 16px 24px;
  overflow-y: auto;
  background: #fff;
}

.settings-form {
  max-width: 900px;
}

.settings-form__actions {
  margin-top: 24px;
  display: flex;
  align-items: center;
}
</style>
