NextEdu/src/app/(dashboard)/student/elective/page.tsx

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"
import { ElectiveFilters } from "@/modules/elective/components/elective-filters"

export const dynamic = "force-dynamic"

type SearchParams = { [key: string]: string | string[] | undefined }

const getParam = (params: SearchParams, key: string) => {
  const v = params[key]
  return Array.isArray(v) ? v[0] : v
}

export default async function StudentElectivePage({
  searchParams,
}: {
  searchParams: Promise<SearchParams>
}) {
  const ctx = await getAuthContext()
  const studentId = ctx.userId

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

  const q = (getParam(sp, "q") || "").toLowerCase().trim()
  const modeFilter = getParam(sp, "mode") || "all"

  const filteredCourses = availableCourses.filter((c) => {
    if (q && !c.name.toLowerCase().includes(q) && !(c.teacherName?.toLowerCase().includes(q) ?? false)) return false
    if (modeFilter !== "all" && c.selectionMode !== modeFilter) return false
    return true
  })

  return (
    <div className="space-y-8">
      <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>
      {availableCourses.length > 0 && <ElectiveFilters />}
      <StudentSelectionView
        availableCourses={filteredCourses}
        mySelections={mySelections}
      />
    </div>
  )
}