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

import { requirePermission } from "@/shared/lib/auth-guard"
import { Permissions } from "@/shared/types/permissions"
import { getElectiveCourseById } from "@/modules/elective/data-access"
import { ElectiveCourseDetail } from "@/modules/elective/components/elective-course-detail"
import { ElectivePageLayout } from "@/modules/elective/components/elective-page-layout"

export const dynamic = "force-dynamic"

export default async function StudentElectiveDetailPage({
  params,
}: {
  params: Promise<{ id: string }>
}): Promise<JSX.Element> {
  const t = await getTranslations("elective")
  await requirePermission(Permissions.ELECTIVE_READ)
  const { id } = await params

  const course = await getElectiveCourseById(id)

  if (!course) notFound()

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

  return (
    <ElectivePageLayout header={header}>
      {/*
        学生视角：只展示课程信息，不展示选课名单（保护其他学生隐私）。
        selections 传空数组，showEditButton=false（学生无编辑权限）。
      */}
      <ElectiveCourseDetail
        course={course}
        selections={[]}
        backHref="/student/elective"
        showEditButton={false}
      />
    </ElectivePageLayout>
  )
}
