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

import type { GradeHomeworkInsights } from "@/modules/classes/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 { formatNumber } from "@/shared/lib/utils"

interface Props {
  data: GradeHomeworkInsights
}

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

  const totalTargeted = data.assignments.reduce((sum, a) => sum + a.targetCount, 0)
  const totalSubmitted = data.assignments.reduce((sum, a) => sum + a.submittedCount, 0)
  const totalGraded = data.assignments.reduce((sum, a) => sum + a.gradedCount, 0)
  const avgSubmissionRate = totalTargeted > 0
    ? Math.round((totalSubmitted / totalTargeted) * 1000) / 10
    : 0
  const gradedRate = totalSubmitted > 0
    ? Math.round((totalGraded / totalSubmitted) * 1000) / 10
    : 0

  return (
    <div className="space-y-6">
      <div className="grid gap-4 md:grid-cols-4">
        <StatCard
          title={t("grades.gradeDashboard.homework.totalAssignments")}
          value={data.assignments.length}
          icon={ClipboardCheck}
          valueClassName="tabular-nums"
        />
        <StatCard
          title={t("grades.gradeDashboard.homework.totalSubmissions")}
          value={totalSubmitted}
          icon={Clock}
          valueClassName="tabular-nums"
        />
        <StatCard
          title={t("grades.gradeDashboard.homework.avgSubmissionRate")}
          value={`${formatNumber(avgSubmissionRate)}%`}
          icon={ClipboardCheck}
          valueClassName="tabular-nums"
        />
        <StatCard
          title={t("grades.gradeDashboard.homework.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.homework.assignmentList")}</CardTitle>
          <Badge variant="secondary" className="tabular-nums">{data.assignments.length}</Badge>
        </CardHeader>
        <CardContent>
          <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.gradeInsights.status")}</TableHead>
                    <TableHead className="text-right">{t("grades.gradeDashboard.homework.targeted")}</TableHead>
                    <TableHead className="text-right">{t("grades.gradeDashboard.homework.submitted")}</TableHead>
                    <TableHead className="text-right">{t("grades.gradeDashboard.homework.graded")}</TableHead>
                    <TableHead className="text-right">{t("grades.gradeDashboard.homework.completionRate")}</TableHead>
                    <TableHead className="text-right">{t("grades.gradeInsights.avg")}</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {data.assignments.map((a) => {
                    const rate = a.targetCount > 0
                      ? Math.round((a.submittedCount / a.targetCount) * 1000) / 10
                      : 0
                    return (
                      <TableRow key={a.assignmentId}>
                        <TableCell className="font-medium">{a.title}</TableCell>
                        <TableCell>
                          <Badge variant="secondary" className="capitalize">{a.status}</Badge>
                        </TableCell>
                        <TableCell className="text-right tabular-nums">{a.targetCount}</TableCell>
                        <TableCell className="text-right tabular-nums">{a.submittedCount}</TableCell>
                        <TableCell className="text-right tabular-nums">{a.gradedCount}</TableCell>
                        <TableCell className="text-right tabular-nums">{formatNumber(rate)}%</TableCell>
                        <TableCell className="text-right tabular-nums">{formatNumber(a.scoreStats.avg)}</TableCell>
                      </TableRow>
                    )
                  })}
                </TableBody>
              </Table>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card className="shadow-none">
        <CardHeader className="flex flex-row items-center justify-between space-y-0">
          <CardTitle className="text-base">{t("grades.gradeDashboard.homework.classComparison")}</CardTitle>
          <Badge variant="secondary" className="tabular-nums">{data.classes.length}</Badge>
        </CardHeader>
        <CardContent>
          <div className="rounded-md border">
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow className="bg-muted/50">
                    <TableHead>{t("grades.gradeInsights.class")}</TableHead>
                    <TableHead className="text-right">{t("grades.gradeInsights.students")}</TableHead>
                    <TableHead className="text-right">{t("grades.gradeInsights.latestAvgCol")}</TableHead>
                    <TableHead className="text-right">{t("grades.gradeInsights.delta")}</TableHead>
                    <TableHead className="text-right">{t("grades.gradeInsights.overallAvgCol")}</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {data.classes.map((c) => (
                    <TableRow key={c.class.id}>
                      <TableCell className="font-medium">{c.class.name}</TableCell>
                      <TableCell className="text-right tabular-nums">{c.studentCounts.total}</TableCell>
                      <TableCell className="text-right tabular-nums">{formatNumber(c.latestAvg)}</TableCell>
                      <TableCell className="text-right tabular-nums">{formatNumber(c.deltaAvg)}</TableCell>
                      <TableCell className="text-right tabular-nums">{formatNumber(c.overallScores.avg)}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
