<template>
  <div class="prompt-list">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>提示词管理</span>
        </div>
      </template>
      
      <div class="filter-bar">
        <el-select v-model="moduleFilter" placeholder="模块" clearable style="width: 150px;">
          <el-option label="课程模块" value="course" />
          <el-option label="考试模块" value="exam" />
          <el-option label="陪练模块" value="practice" />
          <el-option label="能力评估" value="ability" />
        </el-select>
        
        <el-button type="primary" @click="fetchPrompts">查询</el-button>
      </div>
      
      <el-table :data="prompts" v-loading="loading" style="width: 100%;">
        <el-table-column prop="code" label="编码" width="180" />
        <el-table-column prop="name" label="名称" width="150" />
        <el-table-column prop="module" label="模块" width="100">
          <template #default="{ row }">
            {{ getModuleLabel(row.module) }}
          </template>
        </el-table-column>
        <el-table-column prop="description" label="说明" show-overflow-tooltip />
        <el-table-column prop="version" label="版本" width="80" />
        <el-table-column prop="is_active" label="状态" width="80">
          <template #default="{ row }">
            <el-tag :type="row.is_active ? 'success' : 'info'" size="small">
              {{ row.is_active ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="$router.push(`/prompts/${row.id}`)">
              查看
            </el-button>
            <el-button type="primary" link @click="showVersions(row)">
              历史
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <!-- 版本历史对话框 -->
    <el-dialog v-model="versionDialogVisible" title="版本历史" width="800px">
      <el-table :data="versions" v-loading="versionLoading">
        <el-table-column prop="version" label="版本" width="80" />
        <el-table-column prop="change_summary" label="变更说明" />
        <el-table-column prop="created_at" label="时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.created_at) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleRollback(row)">回滚</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import api from '@/api'

const loading = ref(false)
const prompts = ref([])
const moduleFilter = ref('')

const versionDialogVisible = ref(false)
const versionLoading = ref(false)
const versions = ref([])
const currentPromptId = ref(null)

function getModuleLabel(module) {
  const map = {
    course: '课程',
    exam: '考试',
    practice: '陪练',
    ability: '能力'
  }
  return map[module] || module
}

function formatDate(date) {
  return date ? dayjs(date).format('YYYY-MM-DD HH:mm:ss') : '-'
}

async function fetchPrompts() {
  loading.value = true
  try {
    const res = await api.prompts.list({
      module: moduleFilter.value || undefined
    })
    prompts.value = res
  } finally {
    loading.value = false
  }
}

async function showVersions(prompt) {
  currentPromptId.value = prompt.id
  versionDialogVisible.value = true
  
  versionLoading.value = true
  try {
    versions.value = await api.prompts.getVersions(prompt.id)
  } finally {
    versionLoading.value = false
  }
}

async function handleRollback(version) {
  await ElMessageBox.confirm(`确定要回滚到版本 ${version.version} 吗？`, '提示', {
    type: 'warning'
  })
  
  try {
    await api.prompts.rollback(currentPromptId.value, version.version)
    ElMessage.success('回滚成功')
    versionDialogVisible.value = false
    fetchPrompts()
  } catch (e) {
    // 错误已在拦截器处理
  }
}

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

<style lang="scss" scoped>
.prompt-list {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .filter-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
  }
}
</style>

