import Link from "next/link"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/shared/components/ui/table"
import { formatDate } from "@/shared/lib/utils"
import { getHomeworkAssignments } from "@/modules/homework/data-access"
import { getTeacherClasses } from "@/modules/classes/data-access"
import { PenTool, PlusCircle } from "lucide-react"

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 AssignmentsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
  const sp = await searchParams
  const classId = getParam(sp, "classId") || undefined

  const [assignments, classes] = await Promise.all([
    getHomeworkAssignments({ classId: classId && classId !== "all" ? classId : undefined }),
    classId && classId !== "all" ? getTeacherClasses() : Promise.resolve([]),
  ])
  const hasAssignments = assignments.length > 0
  const className = classId && classId !== "all" ? classes.find((c) => c.id === classId)?.name : undefined

  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>
          <h2 className="text-2xl font-bold tracking-tight">Assignments</h2>
          <p className="text-muted-foreground">
            {classId && classId !== "all" ? `Filtered by class: ${className ?? classId}` : "Manage homework assignments."}
          </p>
        </div>
        <div className="flex items-center gap-2">
          {classId && classId !== "all" ? (
            <Button asChild variant="outline">
              <Link href="/teacher/homework/assignments">Clear filter</Link>
            </Button>
          ) : null}
          <Button asChild>
            <Link
              href={
                classId && classId !== "all"
                  ? `/teacher/homework/assignments/create?classId=${encodeURIComponent(classId)}`
                  : "/teacher/homework/assignments/create"
              }
            >
              <PlusCircle className="mr-2 h-4 w-4" />
              Create Assignment
            </Link>
          </Button>
        </div>
      </div>

      {!hasAssignments ? (
        <EmptyState
          title="No assignments"
          description={classId && classId !== "all" ? "No assignments for this class yet." : "You haven't created any assignments yet."}
          icon={PenTool}
          action={{
            label: "Create Assignment",
            href:
              classId && classId !== "all"
                ? `/teacher/homework/assignments/create?classId=${encodeURIComponent(classId)}`
                : "/teacher/homework/assignments/create",
          }}
        />
      ) : (
        <div className="rounded-md border bg-card">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Title</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Due</TableHead>
                <TableHead>Source Exam</TableHead>
                <TableHead>Created</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {assignments.map((a) => (
                <TableRow key={a.id}>
                  <TableCell className="font-medium">
                    <Link href={`/teacher/homework/assignments/${a.id}`} className="hover:underline">
                      {a.title}
                    </Link>
                  </TableCell>
                  <TableCell>
                    <Badge variant="outline" className="capitalize">
                      {a.status}
                    </Badge>
                  </TableCell>
                  <TableCell>{a.dueAt ? formatDate(a.dueAt) : "-"}</TableCell>
                  <TableCell className="text-muted-foreground">{a.sourceExamTitle}</TableCell>
                  <TableCell className="text-muted-foreground">{formatDate(a.createdAt)}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}
    </div>
  )
}