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

import type { GradeCoursePlanProgressResult } from "@/modules/course-plans/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: GradeCoursePlanProgressResult
}

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

export function GradeProgressPanel({ data }: Props): JSX.Element {
  const t = useTranslations("school")
  const { overall, items } = data

  return (
    <div className="space-y-6">
      <div className="grid gap-4 md:grid-cols-4">
        <StatCard
          title={t("grades.gradeDashboard.progress.totalPlans")}
          value={overall.totalPlans}
          icon={BookOpen}
          valueClassName="tabular-nums"
        />
        <StatCard
          title={t("grades.gradeDashboard.progress.completedHours")}
          value={`${overall.completedHours}/${overall.totalHours}`}
          icon={Clock}
          valueClassName="tabular-nums"
        />
        <StatCard
          title={t("grades.gradeDashboard.progress.activePlans")}
          value={overall.activePlans}
          icon={TrendingUp}
          valueClassName="tabular-nums"
        />
        <StatCard
          title={t("grades.gradeDashboard.progress.completedPlans")}
          value={overall.completedPlans}
          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.progress.overallProgress")}</CardTitle>
          <Badge variant="secondary" className="tabular-nums">{formatNumber(overall.progressRate)}%</Badge>
        </CardHeader>
        <CardContent>
          <div className="h-4 rounded-full bg-muted overflow-hidden">
            <div
              className="h-full bg-primary transition-all"
              style={{ width: `${overall.progressRate}%` }}
            />
          </div>
          <p className="mt-2 text-sm text-muted-foreground">
            {overall.completedHours} / {overall.totalHours} {t("grades.gradeDashboard.progress.completedHoursCol")}
          </p>
        </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.progress.progressMatrix")}</CardTitle>
          <Badge variant="secondary" className="tabular-nums">{items.length}</Badge>
        </CardHeader>
        <CardContent>
          {items.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.gradeDashboard.progress.class")}</TableHead>
                      <TableHead>{t("grades.gradeDashboard.progress.subject")}</TableHead>
                      <TableHead>{t("grades.gradeDashboard.progress.teacher")}</TableHead>
                      <TableHead className="text-right">{t("grades.gradeDashboard.progress.completedHoursCol")}</TableHead>
                      <TableHead className="text-right">{t("grades.gradeDashboard.progress.items")}</TableHead>
                      <TableHead>{t("grades.gradeDashboard.progress.progress")}</TableHead>
                      <TableHead>{t("grades.gradeDashboard.progress.status")}</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {items.map((it) => (
                      <TableRow key={it.planId}>
                        <TableCell className="font-medium">{it.className ?? "-"}</TableCell>
                        <TableCell className="text-muted-foreground">{it.subjectName ?? "-"}</TableCell>
                        <TableCell className="text-muted-foreground">{it.teacherName ?? "-"}</TableCell>
                        <TableCell className="text-right tabular-nums">
                          {it.completedHours}/{it.totalHours}
                        </TableCell>
                        <TableCell className="text-right tabular-nums">
                          {it.completedItemCount}/{it.itemCount}
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center gap-2">
                            <div className="w-20 h-2 rounded-full bg-muted overflow-hidden">
                              <div
                                className="h-full bg-primary transition-all"
                                style={{ width: `${it.progressRate}%` }}
                              />
                            </div>
                            <span className="text-xs tabular-nums text-muted-foreground">
                              {formatNumber(it.progressRate)}%
                            </span>
                          </div>
                        </TableCell>
                        <TableCell>
                          <Badge variant={statusVariant(it.status)} className="capitalize">{it.status}</Badge>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
