<!-- app/components/dashboard/QaRecordDetail.vue - 最近问答记录详情弹窗 -->
<script lang="ts" setup>
import { storeToRefs } from "pinia";

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle
} from "@/components/ui/dialog";
import { useAnswerStore } from "@/stores/answer";

const answerStore = useAnswerStore();
const { selectedRecord } = storeToRefs(answerStore);

/** 关闭详情弹窗，只清理 store 中的选中记录 */
const close = () => {
  answerStore.selectRecord(undefined);
};

/** Dialog 关闭时同步清理选中的问答记录 */
const dialogOpen = computed({
  get: () => Boolean(selectedRecord.value),
  set: (open: boolean) => {
    if (!open) close();
  }
});
</script>

<template>
  <Dialog v-model:open="dialogOpen">
    <DialogContent class="max-h-[86vh] overflow-hidden sm:max-w-3xl">
      <DialogHeader>
        <DialogTitle>问答详情</DialogTitle>
        <DialogDescription>{{ selectedRecord?.time }}</DialogDescription>
      </DialogHeader>

      <div v-if="selectedRecord" class="grid max-h-[70vh] gap-4 overflow-auto pr-1">
        <div class="grid gap-2">
          <span class="text-xs font-medium text-muted-foreground">题目</span>
          <pre
            class="whitespace-pre-wrap rounded-2xl bg-muted p-3 text-sm leading-6 text-foreground"
          >{{ selectedRecord.question }}</pre>
        </div>

        <div class="grid gap-2">
          <span class="text-xs font-medium text-muted-foreground">选项</span>
          <pre
            class="whitespace-pre-wrap rounded-2xl bg-muted p-3 text-sm leading-6 text-foreground"
          >{{ selectedRecord.options || "-" }}</pre>
        </div>

        <div class="grid gap-2">
          <span class="text-xs font-medium text-muted-foreground">答案</span>
          <pre
            class="whitespace-pre-wrap rounded-2xl bg-muted p-3 text-base font-semibold leading-7 text-foreground"
          >{{ selectedRecord.answer }}</pre>
        </div>
      </div>
    </DialogContent>
  </Dialog>
</template>
