<!-- app/components/home/AnswerForm.vue - 答题提交表单，状态全部来自 Pinia store -->
<script lang="ts" setup>
import { Search } from "lucide-vue-next";
import { storeToRefs } from "pinia";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import type { QuestionType } from "@/interfaces";
import { QUESTION_TYPE_OPTIONS, useAnswerStore } from "@/stores/answer";

const answerStore = useAnswerStore();
const { question, questionType, options, searchLoading } =
  storeToRefs(answerStore);
const AUTO_TYPE_VALUE = "__auto__";

/** shadcn Select 不使用空字符串作为 item value，这里只在组件边界做一次映射 */
const selectedQuestionType = computed({
  get: () => questionType.value || AUTO_TYPE_VALUE,
  set: (value: string) => {
    questionType.value =
      value === AUTO_TYPE_VALUE ? "" : (value as QuestionType);
  }
});

/** 表单提交只触发 store action，组件不直接接触请求服务 */
const onSubmit = () => {
  void answerStore.searchAnswer();
};
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle class="text-xl">题目查询</CardTitle>
      <CardDescription
        >服务端流式请求模型，前端返回普通 JSON 结果。</CardDescription
      >
    </CardHeader>

    <CardContent>
      <form class="grid gap-4" @submit.prevent="onSubmit">
        <div class="grid gap-2">
          <Label for="answer-question">题目</Label>
          <Textarea
            id="answer-question"
            v-model="question"
            class="min-h-32 resize-y"
            placeholder="输入题目内容"
          />
        </div>

        <div
          class="grid gap-4 md:grid-cols-[220px_minmax(0,1fr)] md:items-start"
        >
          <div class="grid gap-2">
            <Label for="answer-type">题型</Label>
            <Select v-model="selectedQuestionType">
              <SelectTrigger id="answer-type" class="w-full">
                <SelectValue placeholder="自动判断" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem
                  v-for="item in QUESTION_TYPE_OPTIONS"
                  :key="item.value || AUTO_TYPE_VALUE"
                  :value="item.value || AUTO_TYPE_VALUE"
                >
                  {{ item.label }}
                </SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div class="grid gap-2">
            <Label for="answer-options">选项</Label>
            <Textarea
              id="answer-options"
              v-model="options"
              class="min-h-24 resize-y"
              placeholder="A. 选项一&#10;B. 选项二"
            />
          </div>
        </div>

        <div class="flex items-center justify-end">
          <Button type="submit" :disabled="searchLoading">
            <Search class="size-4" />
            <span>{{ searchLoading ? "查询中" : "获取答案" }}</span>
          </Button>
        </div>
      </form>
    </CardContent>
  </Card>
</template>
