<script lang="ts" setup>
import dayjs from 'dayjs'
import { toast } from 'vue-sonner'
import { userSearch } from '~/api'
import {
  addStudentToClass,
  deleteStudentClassRecord,
  getStudentListByClass,
  type ICourseClass,
} from '~/api/course'
import type { FetchError } from '~/types'

const props = defineProps<{
  classItem: ICourseClass
}>()

const { data: students, refresh: refreshStudents } = useAsyncData(
  `students-${props.classItem.classId}`,
  () => getStudentListByClass(props.classItem.classId),
  {
    immediate: false,
    watch: [() => props.classItem.classId],
  },
)

const studentsSheetOpen = ref(false)

watch(studentsSheetOpen, (isOpen) => {
  if (isOpen) {
    refreshStudents()
  }
})

const searchKeyword = ref('')

const {
  data: searchResults,
  refresh: refreshSearch,
  clear: clearSearch,
} = useAsyncData(
  () =>
    userSearch({
      searchType: 'student',
      keyword: searchKeyword.value,
    }),
  {
    immediate: false,
  },
)

const triggerSearch = useDebounceFn(() => {
  if (searchKeyword.value.length > 0) {
    refreshSearch()
  }
  else {
    clearSearch()
  }
}, 500)

watch(searchKeyword, (newValue) => {
  if (newValue.length > 0) {
    triggerSearch()
  }
})

const isInClass = (userId: number) => {
  return students.value?.data?.some(item => item.studentId === userId)
}

const onAddStudent = async (userId: number) => {
  toast.promise(
    addStudentToClass({
      classId: props.classItem.classId,
      studentId: userId,
    }),
    {
      loading: '正在添加学生...',
      success: () => {
        return '添加学生成功'
      },
      error: (error: FetchError) => {
        if (error.status === 409) {
          return '该学生已在班级中'
        }
        return '添加学生失败'
      },
      finally: () => {
        refreshStudents()
      },
    },
  )
}

const onDeleteRecord = async (recordId: number) => {
  toast.promise(deleteStudentClassRecord(recordId), {
    loading: '正在移除学生...',
    success: () => {
      return '移除学生成功'
    },
    error: () => {
      return '移除学生失败'
    },
    finally: () => {
      refreshStudents()
    },
  })
}
</script>

<template>
  <div>
    <Card v-bind="props">
      <CardHeader>
        <CardTitle class="text-xl">
          {{
            classItem.className || "未命名班级"
          }}
        </CardTitle>
        <CardDescription>
          {{ classItem.notes || "没有描述" }}
        </CardDescription>
      </CardHeader>
      <CardContent class="flex flex-col gap-2">
        <!-- <p class="text-xs text-muted-foreground">
          班级人数：{{ students?.data.length || 0 }}
        </p> -->
        <p class="text-xs text-muted-foreground">
          班级ID：{{ classItem.classId }}
        </p>
        <p class="text-xs text-muted-foreground">
          创建时间：{{
            dayjs(classItem.createTime).format("YYYY-MM-DD HH:mm:ss")
          }}
        </p>
      </CardContent>
      <CardFooter>
        <Button
          variant="secondary"
          size="sm"
          class="flex items-center gap-1"
          @click="studentsSheetOpen = true"
        >
          <Icon
            name="tabler:chevron-right"
            size="16px"
          />
          <span>班级详情</span>
        </Button>
      </CardFooter>
    </Card>
    <Sheet v-model:open="studentsSheetOpen">
      <SheetContent class="w-[480px] !max-w-none space-y-4">
        <SheetHeader>
          <SheetTitle>{{ classItem.className || "未命名班级" }}</SheetTitle>
          <SheetDescription>班级成员管理</SheetDescription>
        </SheetHeader>
        <div class="flex flex-col gap-4">
          <Popover>
            <PopoverTrigger as-child>
              <Button
                variant="secondary"
                size="sm"
                class="flex items-center gap-1"
              >
                <Icon
                  name="tabler:plus"
                  size="16px"
                />
                <span>添加学生</span>
              </Button>
            </PopoverTrigger>
            <PopoverContent
              class="w-96"
              :align="'center'"
            >
              <div class="flex flex-col gap-4">
                <FormField
                  v-slot="{ componentField }"
                  name="keyword"
                >
                  <FormItem>
                    <FormLabel>搜索学生</FormLabel>
                    <FormControl>
                      <Input
                        v-bind="componentField"
                        v-model="searchKeyword"
                        type="text"
                        placeholder="搜索学号/姓名/手机号"
                      />
                    </FormControl>
                    <FormDescription>
                      <p class="text-xs">
                        搜索教师学号/姓名/手机号，然后添加到班级中
                      </p>
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                </FormField>
                <hr />
                <div class="flex flex-col gap-2">
                  <p class="text-sm text-muted-foreground">
                    搜索结果
                  </p>
                  <div
                    v-if="searchResults?.data && searchResults.data.length > 0"
                    class="flex flex-col gap-2"
                  >
                    <div
                      v-for="user in searchResults.data"
                      :key="user.userId"
                      class="flex justify-between items-center gap-2"
                    >
                      <div class="flex items-center gap-4">
                        <Avatar class="w-12 h-12 text-base">
                          <AvatarImage
                            :src="user.avatar || ''"
                            :alt="user.userName"
                          />
                          <AvatarFallback class="rounded-lg">
                            {{ user.userName.slice(0, 2).toUpperCase() }}
                          </AvatarFallback>
                        </Avatar>

                        <div class="flex flex-col gap-1">
                          <h1
                            class="text-sm font-medium text-ellipsis line-clamp-1"
                          >
                            {{ user.userName || "未知学生" }}
                          </h1>
                          <p class="text-xs text-muted-foreground/80">
                            工号：{{ user.employeeId || "未知" }}
                          </p>
                          <p class="text-xs text-muted-foreground/80">
                            {{ user.collegeName || "未知学院" }}
                          </p>
                        </div>
                      </div>
                      <Button
                        variant="secondary"
                        size="sm"
                        class="flex items-center gap-1"
                        :disabled="isInClass(user.id!)"
                        @click="onAddStudent(user.id!)"
                      >
                        <Icon
                          v-if="!isInClass(user.id!)"
                          name="tabler:plus"
                          size="16px"
                        />
                        <span>
                          {{ isInClass(user.id!) ? "已在班级" : "添加" }}
                        </span>
                      </Button>
                    </div>
                  </div>
                  <EmptyScreen
                    v-else
                    title="没有搜索结果"
                    description="没有找到符合条件的学生"
                    icon="fluent-color:people-list-24"
                  />
                </div>
              </div>
            </PopoverContent>
          </Popover>

          <Table v-if="students?.data && students.data.length > 0">
            <TableHeader>
              <TableRow>
                <TableHead class="w-[100px]">
                  学号
                </TableHead>
                <TableHead>姓名</TableHead>
                <TableHead class="text-right">
                  操作
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow
                v-for="student in students.data"
                :key="student.student.studentId"
              >
                <TableCell class="font-medium">
                  {{ student.student.studentId }}
                </TableCell>
                <TableCell>
                  {{ student.student.userName }}
                </TableCell>
                <TableCell class="text-right">
                  <Button
                    variant="link"
                    size="xs"
                    class="p-0 text-red-500"
                    @click="onDeleteRecord(student.id)"
                  >
                    <Icon
                      name="tabler:trash"
                      size="16px"
                    />
                    移出
                  </Button>
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
          <TableEmpty
            v-else
            class="flex justify-center items-center"
          >
            <p class="text-sm text-muted-foreground">
              该班级暂无成员
            </p>
          </TableEmpty>
        </div>
      </SheetContent>
    </Sheet>
  </div>
</template>

<style scoped></style>
