<template>
  <div class="settings">
    <div class="page-header">
      <h2>项目设置</h2>
      <p class="header-desc">管理项目配置</p>
    </div>

    <el-tabs v-model="activeTab" class="settings-tabs">
      <el-tab-pane label="基本信息" name="basic">
        <div class="settings-card">
          <el-form :model="projectInfo" label-position="top">
            <el-form-item label="项目名称">
              <el-input v-model="projectInfo.name" size="large" />
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="projectInfo.description" type="textarea" :rows="3" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveProjectInfo">保存修改</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>

      <el-tab-pane label="模型配置" name="model">
        <div class="settings-card">
          <div class="card-header">
            <span>模型配置</span>
            <el-button type="primary" size="small" @click="showModelDialog = true">
              <el-icon><Plus /></el-icon>
              添加模型
            </el-button>
          </div>

          <el-table :data="modelConfigs" v-loading="loading">
            <el-table-column prop="provider" label="提供商" width="140" />
            <el-table-column prop="model_name" label="模型名称" />
            <el-table-column prop="api_base" label="API 地址" />
            <el-table-column label="操作" width="100">
              <template #default="{ row }">
                <el-button type="danger" size="small" text @click="deleteModel(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <el-tab-pane label="提示词配置" name="prompt">
        <div class="settings-card">
          <el-form label-position="top">
            <el-form-item label="问题生成提示词">
              <el-input v-model="prompts.question_generation" type="textarea" :rows="6" />
            </el-form-item>
            <el-form-item label="摘要生成提示词">
              <el-input v-model="prompts.summary_generation" type="textarea" :rows="4" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="savePrompts">保存提示词</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- Model Dialog -->
    <el-dialog v-model="showModelDialog" title="添加模型" width="500px">
      <el-form :model="modelForm" label-position="top">
        <el-form-item label="提供商">
          <el-select v-model="modelForm.provider" placeholder="选择提供商" style="width: 100%">
            <el-option label="OpenAI" value="openai" />
            <el-option label="Anthropic" value="anthropic" />
            <el-option label="Ollama" value="ollama" />
            <el-option label="自定义" value="custom" />
          </el-select>
        </el-form-item>
        <el-form-item label="模型名称">
          <el-input v-model="modelForm.model_name" placeholder="例如: gpt-4o-mini" />
        </el-form-item>
        <el-form-item label="API Key">
          <el-input v-model="modelForm.api_key" type="password" placeholder="输入 API Key" />
        </el-form-item>
        <el-form-item label="API Base URL">
          <el-input v-model="modelForm.api_base" placeholder="自定义 API 地址（可选）" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showModelDialog = false">取消</el-button>
        <el-button type="primary" @click="addModel">添加</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { projectApi } from '@/api'

const route = useRoute()
const projectId = computed(() => route.params.id)

const activeTab = ref('basic')
const loading = ref(false)
const showModelDialog = ref(false)

const projectInfo = reactive({
  name: '',
  description: ''
})

const modelConfigs = ref([])
const modelForm = reactive({
  provider: 'openai',
  model_name: '',
  api_key: '',
  api_base: ''
})

const prompts = reactive({
  question_generation: '你是一个问答对生成专家。请根据以下文本生成 {count} 个高质量的问答对。',
  summary_generation: '请为以下文本生成一个简洁的摘要。'
})

const fetchProject = async () => {
  try {
    const res = await projectApi.get(projectId.value)
    // New format: project directly in response
    projectInfo.name = res.name
    projectInfo.description = res.description || ''
  } catch (error) {
    console.error(error)
  }
}

const saveProjectInfo = async () => {
  try {
    await projectApi.update(projectId.value, projectInfo)
    ElMessage.success('保存成功')
  } catch (error) {
    ElMessage.error('保存失败')
  }
}

const addModel = () => {
  ElMessage.info('模型添加功能开发中')
  showModelDialog.value = false
}

const deleteModel = (model) => {
  ElMessage.info('模型删除功能开发中')
}

const savePrompts = () => {
  ElMessage.success('提示词保存成功')
}

onMounted(() => fetchProject())
</script>

<style scoped>
.settings {
  padding: 32px;
  max-width: 900px;
}

.page-header {
  margin-bottom: 28px;
}

.page-header h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
}

.header-desc {
  font-size: 14px;
  color: var(--text-tertiary);
}

.settings-tabs {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.settings-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-weight: 600;
}
</style>
