<!-- app/components/home/AnswerResult.vue - 答题结果展示，只展示安全业务文案 -->
<script lang="ts" setup>
import { AlertCircle, CheckCircle2, Loader2 } from "lucide-vue-next";
import { storeToRefs } from "pinia";

import {
  Alert,
  AlertDescription,
  AlertTitle
} from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import {
  Card,
  CardAction,
  CardContent,
  CardHeader,
  CardTitle
} from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { useAnswerStore } from "@/stores/answer";

const answerStore = useAnswerStore();
const { answerResult, searchErrorMessage, searchLoading } = storeToRefs(answerStore);
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle>查询结果</CardTitle>
      <CardAction>
        <Badge variant="secondary">OCS JSON</Badge>
      </CardAction>
    </CardHeader>

    <CardContent>
      <div v-if="searchLoading" class="grid min-h-32 gap-3">
        <div class="flex items-center gap-2 text-sm text-muted-foreground">
          <Loader2 class="size-4 animate-spin" />
          <span>正在获取答案</span>
        </div>
        <Skeleton class="h-5 w-2/3" />
        <Skeleton class="h-20 w-full" />
      </div>

      <Alert v-else-if="searchErrorMessage" variant="destructive" class="min-h-32">
        <AlertCircle class="size-4" />
        <AlertTitle>查询失败</AlertTitle>
        <AlertDescription>{{ searchErrorMessage }}</AlertDescription>
      </Alert>

      <div v-else-if="answerResult" class="grid gap-4">
        <div class="flex items-center gap-2 text-sm font-medium text-foreground">
          <CheckCircle2 class="size-4" />
          <span>已返回答案</span>
        </div>

        <div class="grid gap-2 rounded-2xl border bg-muted/40 p-4">
          <span class="text-xs font-medium text-muted-foreground">题目</span>
          <p class="whitespace-pre-wrap text-sm leading-6 text-foreground">
            {{ answerResult.question }}
          </p>
        </div>

        <div class="grid gap-2 rounded-2xl border bg-muted/40 p-4">
          <span class="text-xs font-medium text-muted-foreground">答案</span>
          <p class="whitespace-pre-wrap text-base font-semibold leading-7 text-foreground">
            {{ answerResult.answer }}
          </p>
        </div>
      </div>

      <div
        v-else
        class="flex min-h-32 items-center justify-center rounded-2xl border border-dashed text-sm text-muted-foreground"
      >
        等待题目提交
      </div>
    </CardContent>
  </Card>
</template>
