<template>
  <div class="api-container">
    <el-card>
      <template #header>
        <span>API 管理</span>
      </template>

      <el-alert
        title="API 密钥"
        type="info"
        :closable="false"
        style="margin-bottom: 20px"
      >
        <p>您的 API 密钥: <el-tag>{{ apiKey }}</el-tag></p>
        <el-button size="small" type="primary" @click="regenerateKey" style="margin-top: 10px">
          重新生成密钥
        </el-button>
      </el-alert>

      <el-divider />

      <h3>API 文档</h3>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="聊天补全">
          <code>POST /v1/chat/completions</code>
        </el-descriptions-item>
        <el-descriptions-item label="预设列表">
          <code>GET /app/preset/list</code>
        </el-descriptions-item>
        <el-descriptions-item label="提供商列表">
          <code>GET /app/provider/list</code>
        </el-descriptions-item>
      </el-descriptions>

      <el-divider />

      <h3>使用示例</h3>
      <el-code-block>
        <pre>
curl -X POST http://localhost:8080/v1/chat/completions \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "messages": [{"role": "user", "content": "你好"}],
    "presetId": 1
  }'
        </pre>
      </el-code-block>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const apiKey = ref('ak-xxxxxxxxxxxxxxxx')

const regenerateKey = async () => {
  try {
    await ElMessageBox.confirm('确定要重新生成 API 密钥吗？旧密钥将失效', '提示', {
      type: 'warning'
    })
    // TODO: 调用 API 重新生成密钥
    ElMessage.success('密钥已重新生成')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('操作失败')
    }
  }
}
</script>

<style scoped>
.api-container pre {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
}
</style>
