<script lang="ts" setup>
import { z } from 'zod'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import { nav } from './config'

definePageMeta({
  requiresAuth: true,
  hideSidebar: true,
})

useHead({
  title: 'AI 出题 | 备课',
})

const { setBreadcrumbs } = useBreadcrumbs()

const tab = ref('text')

const quizFormSchema = z.object({
  topicScope: z.string().describe('知识点范围'),
  questionCount: z
    .number()
    .min(1, { message: '题目数量必须大于 0' })
    .max(10, { message: '题目数量必须小于 10' })
    .describe('题目数量'),
  questionType: z.enum(['单选题', '判断题', '简答题']).describe('题型'),
  difficulty: z.enum(['易', '中', '难']).describe('难度'),
  studentLevel: z.enum(['小学', '中学', '大学']).describe('学生水平'),
  questionDirection: z.enum(['应用实践']).describe('题目方向').optional(),
})

type QuizForm = z.infer<typeof quizFormSchema>

const quizForm = useForm({
  validationSchema: toTypedSchema(quizFormSchema),
  initialValues: {
    topicScope: '',
    questionCount: 1,
    questionType: '单选题',
    difficulty: '中',
    studentLevel: '中学',
    questionDirection: '应用实践',
  },
})

const onQuizSubmit = (values: QuizForm) => {
  console.log(values)
}

onMounted(() => {
  setBreadcrumbs([
    {
      label: 'AI 备课',
      path: '/course/prep',
    },
    {
      label: 'AI 出题',
    },
  ])
})
</script>

<template>
  <AppContainer
    :nav-secondary="nav"
    content-class="flex items-start p-0 w-full h-full"
  >
    <div class="h-full border-r shadow-xl flex flex-col gap-4">
      <div class="flex justify-start items-center pl-4 h-16 border-b gap-2">
        <Icon
          name="fluent-color:notebook-24"
          class="text-2xl"
        />
        <h1 class="text-base font-medium text-foreground">AI 出题</h1>
      </div>
      <div class="px-4 flex flex-col gap-4">
        <Tabs v-model="tab">
          <TabsList>
            <TabsTrigger value="text">
              <div class="flex items-center gap-1 px-12">
                <Icon name="tabler:article" />
                <span>文本生成</span>
              </div>
            </TabsTrigger>
            <TabsTrigger value="chapter">
              <div class="flex items-center gap-1 px-12">
                <Icon name="tabler:text-plus" />
                <span>章节生成</span>
              </div>
            </TabsTrigger>
          </TabsList>
        </Tabs>
        <AutoForm
          class="space-y-2"
          :schema="quizFormSchema"
          :form="quizForm"
          :field-config="{
            topicScope: {
              component: 'textarea',
              inputProps: {
                placeholder: '请输入出题的知识点范围',
              },
            },
          }"
          @submit="onQuizSubmit"
        />
      </div>
    </div>
    <div
      class="h-full flex-1 p-4 overflow-hidden overflow-y-auto max-h-[calc(100vh-162px)]"
    ></div>
  </AppContainer>
</template>

<style scoped></style>
