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 { getParam, type SearchParams } from "@/shared/lib/search-params"
import { getElectiveCourses } from "@/modules/elective/data-access"
import { ElectiveCourseList } from "@/modules/elective/components/elective-course-list"
import { ElectivePageLayout } from "@/modules/elective/components/elective-page-layout"
import type { ElectiveCourseStatus } from "@/modules/elective/types"

export const dynamic = "force-dynamic"

const VALID_STATUSES: ReadonlySet<string> = new Set([
  "draft",
  "open",
  "closed",
  "cancelled",
])

function parseStatus(v?: string): ElectiveCourseStatus | undefined {
  return v && VALID_STATUSES.has(v) ? (v as ElectiveCourseStatus) : undefined
}

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

  const sp = await searchParams
  const statusParam = getParam(sp, "status")
  const status = parseStatus(statusParam)

  const courses = teacherId
    ? await getElectiveCourses({ teacherId, status })
    : []

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

  return (
    <ElectivePageLayout header={header}>
      <ElectiveCourseList
        courses={courses}
        canManage
        createHref="/admin/elective/create"
        editBaseHref="/admin/elective"
      />
    </ElectivePageLayout>
  )
}