<script lang="ts" setup>
import type { IResponse } from '~/api'
import { getCourseDetail } from '~/api/course'
import type { SidebarNavGroup } from '~/components/app/Sidebar.vue'
import { topbarNavDefaults } from '~/components/app/Topbar.vue'
import type { ICourse } from '~/types'

const {
  fullPath,
  params: { id },
} = useRoute()
const router = useRouter()

// const course = await getCourseDetail(id as string);

const {
  data: course,
  status: courseStatus,
  error: courseError,
} = await useAsyncData<
  IResponse<{
    data: ICourse
  }>,
  IResponse
>(() => getCourseDetail(id as string))

useHead({
  title: `${course.value?.data.courseName || '课程不存在'} - 课程管理`,
})

definePageMeta({
  requiresAuth: true,
})

const sideNav: SidebarNavGroup[] = [
  {
    items: [
      {
        title: '课程章节',
        url: `/course/${id}/chapters`,
        icon: 'tabler:books',
      },
      {
        title: '教师团队',
        url: `/course/${id}/team`,
        icon: 'tabler:users-group',
      },
      {
        title: '学生班级',
        url: `/course/${id}/classes`,
        icon: 'tabler:school',
      },
      {
        title: '学生评价',
        url: `/course/${id}/evaluation`,
        icon: 'tabler:mood-smile',
      },
    ],
  },
]

const topNav = [
  {
    title: '课程管理',
    to: `/course/${id}`,
    icon: 'tabler:layout-dashboard',
  },
  ...topbarNavDefaults.slice(1),
]

onMounted(() => {
  if (fullPath === `/course/${id}`) {
    router.replace(`/course/${id}/chapters`)
  }
})
</script>

<template>
  <AppPageWithSidebar :sidebar-nav="sideNav">
    <template #topbar>
      <AppTopbar :nav="topNav" />
    </template>

    <template #sidebar="{ sidebarNav }">
      <AppSidebar :nav="sidebarNav">
        <template #extra-header>
          <div class="px-4">
            <div class="flex flex-col items-center gap-1 overflow-hidden">
              <NuxtImg
                :src="course?.data.previewUrl || '/images/bg_home.jpg'"
                alt="课程封面"
                class="w-full aspect-video rounded-md shadow-md"
              />
              <h1
                class="text-base font-medium drop-shadow-md text-ellipsis line-clamp-1"
              >
                {{ course?.data.courseName || "未知课程" }}
              </h1>
            </div>
          </div>
        </template>
      </AppSidebar>
    </template>

    <ClientOnly>
      <Suspense>
        <div v-if="courseStatus === 'error'">
          <EmptyScreen
            title="课程加载失败"
            :description="courseError?.data?.msg || '请求失败'"
            icon="tabler:exclamation-circle"
          />
        </div>
        <EmptyScreen
          v-else-if="courseStatus === 'pending'"
          title="加载中..."
          icon="svg-spinners:90-ring-with-bg"
        />
        <NuxtPage
          v-else
          :page-key="fullPath"
        />
      </Suspense>
    </ClientOnly>
  </AppPageWithSidebar>
</template>

<style scoped></style>
