<!-- app/components/docs/ApiDocsContent.vue - 前端文档页内容，覆盖旧 Flask /docs 页面 -->
<script lang="ts" setup>
import { Badge } from "@/components/ui/badge";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow
} from "@/components/ui/table";

/** 文档示例保持本地接口字段名，避免把真实 token 或 key 写进前端 */
const searchExample = `GET /api/search?title=中国的首都是哪个城市？&type=single&options=A. 北京\\nB. 上海`;

const successExample = `{
  "code": 1,
  "question": "中国的首都是哪个城市？",
  "answer": "A"
}`;

const endpoints = [
  {
    method: "GET/POST",
    path: "/api/search",
    auth: "可选",
    description: "OCS AnswererWrapper 查询入口"
  },
  {
    method: "GET",
    path: "/api/health",
    auth: "否",
    description: "服务健康检查"
  },
  {
    method: "GET",
    path: "/api/stats",
    auth: "可选",
    description: "运行统计和缓存数量"
  },
  {
    method: "GET",
    path: "/api/records",
    auth: "可选",
    description: "最近问答记录"
  },
  {
    method: "POST",
    path: "/api/cache/clear",
    auth: "可选",
    description: "清空当前进程内缓存"
  }
];
</script>

<template>
  <article class="grid gap-5">
    <Card>
      <CardHeader>
        <CardTitle class="text-xl">API 文档</CardTitle>
        <CardDescription class="leading-6">
          响应保持 OCS AnswererWrapper 兼容：成功返回
          <Badge variant="secondary">code: 1</Badge>
          ，失败返回
          <Badge variant="secondary">code: 0</Badge>
          。
        </CardDescription>
      </CardHeader>
    </Card>

    <Card>
      <CardHeader>
        <CardTitle>接口列表</CardTitle>
      </CardHeader>
      <CardContent>
        <div class="overflow-auto">
          <Table class="min-w-[720px]">
            <TableHeader>
              <TableRow>
                <TableHead>方法</TableHead>
                <TableHead>路径</TableHead>
                <TableHead>Token</TableHead>
                <TableHead>说明</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow v-for="item in endpoints" :key="item.path">
                <TableCell>{{ item.method }}</TableCell>
                <TableCell class="font-mono text-xs text-foreground">
                  {{ item.path }}
                </TableCell>
                <TableCell>{{ item.auth }}</TableCell>
                <TableCell>{{ item.description }}</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>

    <section class="grid gap-4 lg:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle>请求示例</CardTitle>
        </CardHeader>
        <CardContent>
          <pre
            class="overflow-auto rounded-2xl bg-muted p-4 text-xs leading-5 text-muted-foreground"
          ><code>{{ searchExample }}</code></pre>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>成功响应</CardTitle>
        </CardHeader>
        <CardContent>
          <pre
            class="overflow-auto rounded-2xl bg-muted p-4 text-xs leading-5 text-muted-foreground"
          ><code>{{ successExample }}</code></pre>
        </CardContent>
      </Card>
    </section>
  </article>
</template>
