<script lang="ts" setup>
import { toast } from 'vue-sonner'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
import type { FetchError } from 'ofetch'
import { createCourse, deleteCourse, listUserCourses } from '~/api/course'

definePageMeta({
  requiresAuth: true,
})

useHead({
  title: '课程中心',
})

const loginState = useLoginState()
const deleteMode = ref(false)

const {
  data: coursesList,
  refresh: refreshCoursesList,
  status: _,
} = useAsyncData(() => listUserCourses(loginState.user.userId))

/**
 * 生成学期列表
 * @param years - 后推年数
 * @returns 学期列表
 */
const getSemesters = (years: number) => {
  const currentYear = new Date().getFullYear() - 1
  const semesters = []
  for (let i = 0; i < years + 1; i++) {
    const year = currentYear + i
    semesters.push(`${year}-${year + 1}-1`, `${year}-${year + 1}-2`)
  }
  return semesters
}

const createCourseDialogOpen = ref(false)

const courseFormSchema = toTypedSchema(
  z.object({
    courseName: z
      .string()
      .min(4, '课程名称不能为空')
      .max(32, '最大长度32个字符'),
    profile: z.string().optional(),
    schoolName: z.string().min(4).max(32),
    teacherName: z.string().optional(),
    semester: z.enum([...getSemesters(3)] as [string, ...string[]]),
  }),
)

const folderFormSchema = toTypedSchema(
  z.object({
    folderName: z.string().min(2).max(32),
  }),
)

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const onCourseSubmit = (values: any) => {
  toast.promise(createCourse(values), {
    loading: '正在创建课程...',
    success: () => {
      createCourseDialogOpen.value = false
      return '创建课程成功'
    },
    error: (error: FetchError) => {
      return `创建课程失败：${error.data?.msg || error.message}`
    },
    finally: () => {
      refreshCoursesList()
    },
  })
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const onFolderSubmit = (values: any) => {
  toast('submit data:', {
    description: JSON.stringify(values, null, 2),
  })
}

const onDeleteCourse = (courseId: number) => {
  toast.promise(deleteCourse(courseId), {
    loading: '正在删除课程...',
    success: () => {
      return '删除课程成功'
    },
    error: () => {
      return '删除课程失败'
    },
    finally: () => {
      refreshCoursesList()
    },
  })
}
</script>

<template>
  <AppContainer>
    <div class="flex flex-col gap-8">
      <div class="flex justify-between items-center">
        <div class="flex items-center gap-2">
          <Form
            v-slot="{ handleSubmit }"
            as=""
            :validation-schema="courseFormSchema"
          >
            <Dialog v-model:open="createCourseDialogOpen">
              <DialogTrigger as-child>
                <Button
                  variant="secondary"
                  size="sm"
                >
                  <Icon
                    name="tabler:plus"
                    size="16px"
                  />
                  新建课程
                </Button>
              </DialogTrigger>
              <DialogContent class="sm:max-w-[425px]">
                <DialogHeader>
                  <DialogTitle>创建课程</DialogTitle>
                  <DialogDescription>
                    课程创建后，您可以在课程中添加章节等内容。
                  </DialogDescription>
                </DialogHeader>

                <form
                  id="createCourseForm"
                  autocomplete="off"
                  class="space-y-2"
                  @submit="handleSubmit($event, onCourseSubmit)"
                >
                  <FormField
                    v-slot="{ componentField }"
                    name="courseName"
                  >
                    <FormItem v-auto-animate>
                      <FormLabel>课程名称</FormLabel>
                      <FormControl>
                        <Input
                          type="text"
                          placeholder="请输入课程名称"
                          v-bind="componentField"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  </FormField>
                  <FormField
                    v-slot="{ componentField }"
                    name="profile"
                  >
                    <FormItem v-auto-animate>
                      <FormLabel>课程介绍</FormLabel>
                      <FormControl>
                        <Textarea
                          type="text"
                          placeholder="请输入课程介绍"
                          v-bind="componentField"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  </FormField>
                  <FormField
                    v-slot="{ componentField }"
                    name="schoolName"
                  >
                    <FormItem v-auto-animate>
                      <FormLabel>学校名称</FormLabel>
                      <FormControl>
                        <Input
                          type="text"
                          placeholder="请输入院校名称"
                          v-bind="componentField"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  </FormField>
                  <input
                    type="hidden"
                    name="teacherName"
                    :value="loginState.user.nickName"
                  />
                  <FormField
                    v-slot="{ componentField }"
                    name="semester"
                  >
                    <FormItem v-auto-animate>
                      <FormLabel>学期</FormLabel>
                      <FormControl>
                        <Select v-bind="componentField">
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="请选择学期" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            <SelectGroup>
                              <SelectItem
                                v-for="semester in getSemesters(3)"
                                :key="semester"
                                :value="semester"
                              >
                                {{ semester }}
                              </SelectItem>
                            </SelectGroup>
                          </SelectContent>
                        </Select>
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  </FormField>
                </form>

                <DialogFooter>
                  <Button
                    type="submit"
                    form="createCourseForm"
                  >
                    创建
                  </Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          </Form>

          <Form
            v-slot="{ handleSubmit }"
            as=""
            keep-values
            :validation-schema="folderFormSchema"
          >
            <Dialog>
              <DialogTrigger as-child>
                <!-- TODO: disable temporarily -->
                <Button
                  variant="secondary"
                  size="sm"
                  class="hidden"
                >
                  <Icon
                    name="tabler:folder-plus"
                    size="16px"
                  />
                  新建文件夹
                </Button>
              </DialogTrigger>
              <DialogContent class="sm:max-w-[425px]">
                <DialogHeader>
                  <DialogTitle>创建文件夹</DialogTitle>
                  <DialogDescription>
                    可以将多门课程收纳在文件夹中
                  </DialogDescription>
                </DialogHeader>

                <form
                  id="createCourseForm"
                  autocomplete="off"
                  class="space-y-2"
                  @submit="handleSubmit($event, onFolderSubmit)"
                >
                  <FormField
                    v-slot="{ componentField }"
                    name="folderName"
                  >
                    <FormItem v-auto-animate>
                      <FormLabel>文件夹名称</FormLabel>
                      <FormControl>
                        <Input
                          type="text"
                          placeholder="请输入文件夹名称"
                          v-bind="componentField"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  </FormField>
                </form>

                <DialogFooter>
                  <Button
                    type="submit"
                    form="createCourseForm"
                  >
                    创建
                  </Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          </Form>
        </div>
        <div class="flex items-center gap-2">
          <Button
            :variant="deleteMode ? 'destructive' : 'secondary'"
            size="sm"
            @click="deleteMode = !deleteMode"
          >
            {{ deleteMode ? '退出删除' : '删除课程' }}
          </Button>
        </div>
      </div>
      <div
        v-if="coursesList?.rows && coursesList.rows.length > 0"
        class="grid grid-cols-6 gap-8"
      >
        <CourseCard
          v-for="course in coursesList?.rows"
          :key="course.id"
          :data="course"
          :delete-mode="deleteMode"
          @delete-course="onDeleteCourse"
        />
      </div>
      <EmptyScreen
        v-else
        title="暂无课程"
        icon="fluent-color:people-list-24"
      >
        <p class="text-sm text-muted-foreground">还没有创建或加入课程</p>
        <Button
          variant="outline"
          size="sm"
          @click="createCourseDialogOpen = true"
        >
          <Icon
            name="tabler:plus"
            size="16px"
          />
          新建课程
        </Button>
      </EmptyScreen>
    </div>
  </AppContainer>
</template>

<style scoped></style>
