import { getAuthContext } from "@/shared/lib/auth-guard"

import { getAvailableCoursesForStudent, getStudentSelections } from "@/modules/elective/data-access-selections"
import { StudentSelectionView } from "@/modules/elective/components/student-selection-view"

export const dynamic = "force-dynamic"

export default async function StudentElectivePage() {
  const ctx = await getAuthContext()
  const studentId = ctx.userId

  const [availableCourses, mySelections] = await Promise.all([
    getAvailableCoursesForStudent(studentId),
    getStudentSelections(studentId),
  ])

  return (
    <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
      <div>
        <h2 className="text-2xl font-bold tracking-tight">Elective Courses</h2>
        <p className="text-muted-foreground">
          Browse available electives and manage your selections.
        </p>
      </div>
      <StudentSelectionView
        availableCourses={availableCourses}
        mySelections={mySelections}
      />
    </div>
  )
}