import { Suspense } from "react"
import { getTranslations } from "next-intl/server"
import { requirePermission } from "@/shared/lib/auth-guard"
import { Permissions } from "@/shared/types/permissions"

import { MySelectionsLoader } from "./_components/my-selections-loader"
import { AvailableCoursesLoader } from "./_components/available-courses-loader"
import { MySelectionsSkeleton, AvailableCoursesSkeleton } from "./loading"
import type { SearchParams } from "@/shared/lib/search-params"

export const dynamic = "force-dynamic"

export default async function StudentElectivePage({
  searchParams,
}: {
  searchParams: Promise<SearchParams>
}) {
  const t = await getTranslations("elective")
  const ctx = await requirePermission(Permissions.ELECTIVE_READ)
  const studentId = ctx.userId

  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-2xl font-bold tracking-tight">{t("title.student")}</h2>
        <p className="text-muted-foreground">{t("description.student")}</p>
      </div>
      <Suspense fallback={<MySelectionsSkeleton />}>
        <MySelectionsLoader studentId={studentId} />
      </Suspense>
      <Suspense fallback={<AvailableCoursesSkeleton />}>
        <AvailableCoursesLoader
          studentId={studentId}
          searchParams={searchParams}
        />
      </Suspense>
    </div>
  )
}