import type { JSX } from "react"
import Link from "next/link"
import { notFound } from "next/navigation"
import { getTranslations } from "next-intl/server"
import { Button } from "@/shared/components/ui/button"
import { getHomeworkAssignmentById, getHomeworkSubmissions } from "@/modules/homework/data-access"
import { HomeworkBatchGradingView } from "@/modules/homework/components/homework-batch-grading-view"
import { requirePermission } from "@/shared/lib/auth-guard"
import { Permissions } from "@/shared/types/permissions"

export const dynamic = "force-dynamic"

export default async function HomeworkAssignmentSubmissionsPage({ params }: { params: Promise<{ id: string }> }): Promise<JSX.Element> {
  const { id } = await params
  const ctx = await requirePermission(Permissions.HOMEWORK_GRADE)
  const t = await getTranslations("examHomework")
  const [assignment, submissions] = await Promise.all([
    getHomeworkAssignmentById(id, ctx.dataScope),
    getHomeworkSubmissions({ assignmentId: id, scope: ctx.dataScope }),
  ])
  if (!assignment) return notFound()

  return (
    <div className="flex h-full flex-col space-y-8 p-8">
      <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
        <div className="min-w-0">
          <h1 className="text-2xl font-bold tracking-tight">{t("homework.grade.submissions")}</h1>
          <p className="text-muted-foreground truncate">{assignment.title}</p>
          <div className="mt-2 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
            <span>{t("homework.grade.exam")}: {assignment.sourceExamTitle}</span>
            <span aria-hidden="true">•</span>
            <span className="tabular-nums">{t("homework.grade.targets")}: {assignment.targetCount}</span>
            <span aria-hidden="true">•</span>
            <span className="tabular-nums">{t("homework.grade.submittedCount")}: {assignment.submittedCount}</span>
            <span aria-hidden="true">•</span>
            <span className="tabular-nums">{t("homework.grade.gradedCount")}: {assignment.gradedCount}</span>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <Button asChild variant="outline">
            <Link href="/teacher/homework/submissions">{t("homework.grade.back")}</Link>
          </Button>
          <Button asChild variant="outline">
            <Link href={`/teacher/homework/assignments/${id}`}>{t("homework.grade.openAssignment")}</Link>
          </Button>
        </div>
      </div>

      <HomeworkBatchGradingView submissions={submissions} />
    </div>
  )
}
