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

export default async function SubmissionsPage() {
  const submissions = await getHomeworkSubmissions()
  const hasSubmissions = submissions.length > 0

  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">Submissions</h2>
          <p className="text-muted-foreground">
            Review student homework submissions.
          </p>
        </div>
      </div>

      {!hasSubmissions ? (
        <EmptyState
          title="No submissions"
          description="There are no homework submissions to review."
          icon={Inbox}
        />
      ) : (
        <div className="rounded-md border bg-card">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Assignment</TableHead>
                <TableHead>Student</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Submitted</TableHead>
                <TableHead>Score</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {submissions.map((s) => (
                <TableRow key={s.id}>
                  <TableCell className="font-medium">
                    <Link href={`/teacher/homework/submissions/${s.id}`} className="hover:underline">
                      {s.assignmentTitle}
                    </Link>
                  </TableCell>
                  <TableCell>{s.studentName}</TableCell>
                  <TableCell>
                    <Badge variant="outline" className="capitalize">
                      {s.status}
                    </Badge>
                    {s.isLate ? <span className="ml-2 text-xs text-destructive">Late</span> : null}
                  </TableCell>
                  <TableCell className="text-muted-foreground">{s.submittedAt ? formatDate(s.submittedAt) : "-"}</TableCell>
                  <TableCell>{typeof s.score === "number" ? s.score : "-"}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}
    </div>
  )
}