<!-- app/components/dashboard/StatsOverview.vue - Dashboard 顶部状态卡片 -->
<script lang="ts" setup>
import { RefreshCw, Trash2 } from "lucide-vue-next";
import { storeToRefs } from "pinia";

import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { useAnswerStore } from "@/stores/answer";

const answerStore = useAnswerStore();
const {
  health,
  stats,
  uptimeText,
  dashboardErrorMessage,
  statsLoading,
  cacheClearing
} = storeToRefs(answerStore);

/** 顶部指标由 store 中的健康状态和统计信息组合而来 */
const overviewItems = computed(() => [
  {
    label: "服务状态",
    value: health.value?.status === "ok" ? "运行中" : "-",
    detail: health.value?.version ? `v${health.value.version}` : "-",
    loading: statsLoading.value && !health.value
  },
  {
    label: "模型",
    value: stats.value?.model || health.value?.model || "-",
    detail: "AI 模型",
    loading: statsLoading.value && !stats.value
  },
  {
    label: "问答记录",
    value: stats.value?.qa_records_count?.toString() ?? "0",
    detail: uptimeText.value,
    loading: statsLoading.value && !stats.value
  }
]);
</script>

<template>
  <section class="grid gap-4">
    <div
      class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between"
    >
      <div>
        <h1 class="text-xl font-semibold text-foreground">Dashboard</h1>
        <p class="mt-1 text-sm text-muted-foreground">
          当前 Nuxt 进程的健康状态、缓存和最近问答记录。
        </p>
      </div>

      <div class="flex items-center gap-2">
        <Button
          type="button"
          variant="outline"
          size="sm"
          :disabled="statsLoading"
          @click="answerStore.loadDashboard"
        >
          <RefreshCw class="size-4" :class="{ 'animate-spin': statsLoading }" />
          <span>刷新</span>
        </Button>
        <Button
          type="button"
          variant="destructive"
          size="sm"
          :disabled="cacheClearing"
          @click="answerStore.clearCache"
        >
          <Trash2 class="size-4" />
          <span>{{ cacheClearing ? "清理中" : "清空缓存" }}</span>
        </Button>
      </div>
    </div>

    <Alert v-if="dashboardErrorMessage" variant="destructive">
      <AlertDescription>{{ dashboardErrorMessage }}</AlertDescription>
    </Alert>

    <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
      <Card v-for="item in overviewItems" :key="item.label" size="sm">
        <CardHeader>
          <CardDescription>{{ item.label }}</CardDescription>
        </CardHeader>
        <CardContent>
          <template v-if="item.loading">
            <Skeleton class="mb-2 h-8 w-24" />
            <Skeleton class="h-4 w-32" />
          </template>
          <template v-else>
            <CardTitle class="truncate text-2xl font-semibold">
              {{ item.value }}
            </CardTitle>
            <div class="mt-1 truncate text-xs text-muted-foreground">
              {{ item.detail }}
            </div>
          </template>
        </CardContent>
      </Card>
    </div>
  </section>
</template>
