import type { JSX } from "react"
import Link from "next/link"
import { PlusCircle, BarChart3, ClipboardList } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { getAuthContext } from "@/shared/lib/auth-guard"
import { getParam, type SearchParams } from "@/shared/lib/search-params"
import { getTeacherClasses } from "@/modules/classes/data-access"
import { getAttendanceRecords } from "@/modules/attendance/data-access"
import { AttendanceFilters } from "@/modules/attendance/components/attendance-filters"
import { AttendanceRecordList } from "@/modules/attendance/components/attendance-record-list"
import type { AttendanceStatus } from "@/modules/attendance/types"

export const dynamic = "force-dynamic"

const VALID_STATUSES: ReadonlySet<string> = new Set([
  "present",
  "absent",
  "late",
  "early_leave",
  "excused",
])

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

export default async function TeacherAttendancePage({
  searchParams,
}: {
  searchParams: Promise<SearchParams>
}): Promise<JSX.Element> {
  const sp = await searchParams
  const ctx = await getAuthContext()

  const classId = getParam(sp, "classId")
  const status = getParam(sp, "status")
  const date = getParam(sp, "date")

  const [classes, result] = await Promise.all([
    getTeacherClasses(),
    getAttendanceRecords({
      scope: ctx.dataScope,
      currentUserId: ctx.userId,
      classId: classId && classId !== "all" ? classId : undefined,
      status: status && status !== "all" ? parseAttendanceStatus(status) : undefined,
      date: date && date.length > 0 ? date : undefined,
    }),
  ])
  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 className="flex items-center justify-between space-y-2">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Attendance</h1>
          <p className="text-muted-foreground">Manage student attendance records.</p>
        </div>
        <div className="flex items-center gap-2">
          <Button asChild variant="outline">
            <Link href="/teacher/attendance/stats">
              <BarChart3 className="mr-2 h-4 w-4" aria-hidden="true" />
              Statistics
            </Link>
          </Button>
          <Button asChild>
            <Link href="/teacher/attendance/sheet">
              <PlusCircle className="mr-2 h-4 w-4" aria-hidden="true" />
              Take Attendance
            </Link>
          </Button>
        </div>
      </div>

      <AttendanceFilters classes={classOptions} />

      {result.items.length === 0 && !classId && !status && !date ? (
        <EmptyState
          title="No attendance records"
          description="Start by taking attendance for your classes."
          icon={ClipboardList}
          action={{
            label: "Take Attendance",
            href: "/teacher/attendance/sheet",
          }}
        />
      ) : (
        <AttendanceRecordList records={result.items} />
      )}
    </div>
  )
}