import type { JSX } from "react"
import { Suspense } from "react"
import { getTranslations } from "next-intl/server"

import { requirePermission } from "@/shared/lib/auth-guard"
import { Permissions } from "@/shared/types/permissions"
import { ElectivePageLayout } from "@/modules/elective/components/elective-page-layout"
import { type SearchParams } from "@/shared/lib/utils"

import { StatsCardsLoader } from "./_components/stats-cards-loader"
import { CourseListLoader } from "./_components/course-list-loader"
import { StatsCardsSkeleton, CourseListSkeleton } from "./loading"

export const dynamic = "force-dynamic"

export default async function AdminElectivePage({
  searchParams,
}: {
  searchParams: Promise<SearchParams>
}): Promise<JSX.Element> {
  const t = await getTranslations("elective")
  // 纵深防御：除中间件外，Server Component 入口再次校验权限
  await requirePermission(Permissions.ELECTIVE_READ)

  const header = (
    <div className="space-y-1">
      <h2 className="text-2xl font-bold tracking-tight">{t("title.adminList")}</h2>
      <p className="text-muted-foreground">
        {t("description.adminList")}
      </p>
    </div>
  )

  return (
    <ElectivePageLayout header={header}>
      <Suspense fallback={<StatsCardsSkeleton />}>
        <StatsCardsLoader />
      </Suspense>
      <Suspense fallback={<CourseListSkeleton />}>
        <CourseListLoader searchParams={searchParams} />
      </Suspense>
    </ElectivePageLayout>
  )
}