import Link from "next/link"
import { notFound } from "next/navigation"
import { getHomeworkAssignmentAnalytics } from "@/modules/homework/data-access"
import { HomeworkAssignmentExamContentCard } from "@/modules/homework/components/homework-assignment-exam-content-card"
import { HomeworkAssignmentQuestionErrorDetailsCard } from "@/modules/homework/components/homework-assignment-question-error-details-card"
import { HomeworkAssignmentQuestionErrorOverviewCard } from "@/modules/homework/components/homework-assignment-question-error-overview-card"
import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { formatDate } from "@/shared/lib/utils"

export const dynamic = "force-dynamic"

export default async function HomeworkAssignmentDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const analytics = await getHomeworkAssignmentAnalytics(id)

  if (!analytics) return notFound()

  const { assignment, questions, gradedSampleCount } = analytics

  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>
          <div className="flex items-center gap-3">
            <h2 className="text-2xl font-bold tracking-tight">{assignment.title}</h2>
            <Badge variant="outline" className="capitalize">
              {assignment.status}
            </Badge>
          </div>
          <p className="text-muted-foreground mt-1">{assignment.description || "—"}</p>
          <div className="mt-2 text-sm text-muted-foreground">
            <span>Source Exam: {assignment.sourceExamTitle}</span>
            <span className="mx-2">•</span>
            <span>Created: {formatDate(assignment.createdAt)}</span>
          </div>
        </div>

        <div className="flex items-center gap-2">
          <Button asChild variant="outline">
            <Link href="/teacher/homework/assignments">Back</Link>
          </Button>
          <Button asChild>
            <Link href={`/teacher/homework/assignments/${assignment.id}/submissions`}>View Submissions</Link>
          </Button>
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-3">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Targets</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{assignment.targetCount}</div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Submissions</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{assignment.submissionCount}</div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Due</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-sm">
              <div className="font-medium">{assignment.dueAt ? formatDate(assignment.dueAt) : "—"}</div>
              <div className="text-muted-foreground">
                Late:{" "}
                {assignment.allowLate
                  ? assignment.lateDueAt
                    ? formatDate(assignment.lateDueAt)
                    : "Allowed"
                  : "Not allowed"}
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        <HomeworkAssignmentQuestionErrorOverviewCard questions={questions} gradedSampleCount={gradedSampleCount} />
        <HomeworkAssignmentQuestionErrorDetailsCard questions={questions} gradedSampleCount={gradedSampleCount} />
      </div>

      <HomeworkAssignmentExamContentCard
        structure={assignment.structure}
        questions={questions}
        gradedSampleCount={gradedSampleCount}
      />
    </div>
  )
}