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 { getTeacherClasses } from "@/modules/classes/data-access"
import { getClassStudentsForAttendance } from "@/modules/attendance/data-access"
import { AttendanceSheet } from "@/modules/attendance/components/attendance-sheet"
import { getParam, type SearchParams } from "@/shared/lib/search-params"

export const dynamic = "force-dynamic"

export default async function AttendanceSheetPage({
  searchParams,
}: {
  searchParams: Promise<SearchParams>
}): Promise<JSX.Element> {
  await requirePermission(Permissions.ATTENDANCE_MANAGE)
  const t = await getTranslations("attendance")
  const sp = await searchParams

  const defaultClassId = getParam(sp, "classId")
  const defaultDate = getParam(sp, "date")

  const [classes, students] = await Promise.all([
    getTeacherClasses(),
    defaultClassId
      ? getClassStudentsForAttendance(defaultClassId)
      : Promise.resolve([] as Awaited<ReturnType<typeof getClassStudentsForAttendance>>),
  ])
  const classOptions = classes.map((c) => ({ id: c.id, name: c.name }))

  return (
    <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">{t("title.sheet")}</h1>
        <p className="text-muted-foreground">{t("sheet.description")}</p>
      </div>

      <AttendanceSheet
        classes={classOptions}
        students={students}
        defaultClassId={defaultClassId}
        defaultDate={defaultDate}
      />
    </div>
  )
}
