<!-- 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 { useAnswerStore } from "@/stores/answer";

const answerStore = useAnswerStore();
const { dashboardErrorMessage, recordsLoading, cacheClearing } =
  storeToRefs(answerStore);
</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="recordsLoading"
          @click="answerStore.loadDashboard"
        >
          <RefreshCw
            class="size-4"
            :class="{ 'animate-spin': recordsLoading }"
          />
          <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>
  </section>
</template>