import type { JSX } from "react"
import { FileText, CheckCircle2, Clock } from "lucide-react"
import { useTranslations } from "next-intl"

import type { GradeExamsResult } from "@/modules/exams/types"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import { StatCard } from "@/shared/components/ui/stat-card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
import { formatDate, formatNumber } from "@/shared/lib/utils"

interface Props {
  data: GradeExamsResult
}

const statusVariant = (status: string): "default" | "secondary" | "outline" => {
  if (status === "published") return "default"
  if (status === "draft") return "secondary"
  return "outline"
}

export function GradeExamsPanel({ data }: Props): JSX.Element {
  const t = useTranslations("school")

  const gradedRate = data.totals.totalSubmissions > 0
    ? Math.round((data.totals.totalGraded / data.totals.totalSubmissions) * 1000) / 10
    : 0

  return (
    <div className="space-y-6">
      <div className="grid gap-4 md:grid-cols-4">
        <StatCard
          title={t("grades.gradeDashboard.exams.totalExams")}
          value={data.totals.examCount}
          icon={FileText}
          valueClassName="tabular-nums"
        />
        <StatCard
          title={t("grades.gradeDashboard.exams.published")}
          value={data.totals.publishedCount}
          icon={CheckCircle2}
          valueClassName="tabular-nums"
        />
        <StatCard
          title={t("grades.gradeDashboard.exams.totalSubmissions")}
          value={data.totals.totalSubmissions}
          icon={Clock}
          valueClassName="tabular-nums"
        />
        <StatCard
          title={t("grades.gradeDashboard.exams.gradedRate")}
          value={`${formatNumber(gradedRate)}%`}
          icon={CheckCircle2}
          valueClassName="tabular-nums"
        />
      </div>

      <Card className="shadow-none">
        <CardHeader className="flex flex-row items-center justify-between space-y-0">
          <CardTitle className="text-base">{t("grades.gradeDashboard.exams.examList")}</CardTitle>
          <Badge variant="secondary" className="tabular-nums">{data.exams.length}</Badge>
        </CardHeader>
        <CardContent>
          {data.exams.length === 0 ? (
            <p className="py-8 text-center text-sm text-muted-foreground">{t("grades.gradeDashboard.noData")}</p>
          ) : (
            <div className="rounded-md border">
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow className="bg-muted/50">
                      <TableHead>{t("grades.gradeInsights.assignment")}</TableHead>
                      <TableHead>{t("grades.gradeDashboard.exams.subject")}</TableHead>
                      <TableHead>{t("grades.gradeDashboard.exams.status")}</TableHead>
                      <TableHead>{t("grades.gradeDashboard.exams.scheduledAt")}</TableHead>
                      <TableHead className="text-right">{t("grades.gradeDashboard.exams.submissions")}</TableHead>
                      <TableHead className="text-right">{t("grades.gradeDashboard.exams.graded")}</TableHead>
                      <TableHead className="text-right">{t("grades.gradeDashboard.exams.avgScore")}</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {data.exams.map((e) => (
                      <TableRow key={e.id}>
                        <TableCell className="font-medium">{e.title}</TableCell>
                        <TableCell className="text-muted-foreground">{e.subjectName ?? "-"}</TableCell>
                        <TableCell>
                          <Badge variant={statusVariant(e.status)} className="capitalize">{e.status}</Badge>
                        </TableCell>
                        <TableCell className="text-muted-foreground">
                          {e.scheduledAt ? formatDate(e.scheduledAt) : "-"}
                        </TableCell>
                        <TableCell className="text-right tabular-nums">{e.submissionCount}</TableCell>
                        <TableCell className="text-right tabular-nums">{e.gradedCount}</TableCell>
                        <TableCell className="text-right tabular-nums">{formatNumber(e.averageScore)}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
