import { useTranslations } from "next-intl"

import { Badge } from "@/shared/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Progress } from "@/shared/components/ui/progress"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
import { cn } from "@/shared/lib/utils"

import type { TeacherClassPracticeOverview } from "@/modules/adaptive-practice/data-access-analytics"

interface ClassPracticeComparisonTableProps {
  data: TeacherClassPracticeOverview[] | import("@/modules/adaptive-practice/data-access-analytics").GradeClassPracticeComparison[]
  className?: string
}

/**
 * 班级练习对比表格（教师/年级视图）
 *
 * 显示每个班级的参与率、练习数、完成数、答题数、正确率。
 * 支持教师视图（TeacherClassPracticeOverview）和年级视图（GradeClassPracticeComparison）。
 */
export function ClassPracticeComparisonTable({
  data,
  className,
}: ClassPracticeComparisonTableProps) {
  const t = useTranslations("practice")

  if (data.length === 0) return null

  return (
    <Card className={cn("shadow-none", className)}>
      <CardHeader className="flex flex-row items-center justify-between space-y-0">
        <CardTitle className="text-base">{t("teacher.classComparison.title")}</CardTitle>
        <Badge variant="secondary" className="tabular-nums">
          {data.length}
        </Badge>
      </CardHeader>
      <CardContent>
        <div className="rounded-md border">
          {/* 移动端表格水平滚动 */}
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow className="bg-muted/50">
                  <TableHead>{t("teacher.classComparison.className")}</TableHead>
                  <TableHead className="text-right">{t("teacher.classComparison.totalStudents")}</TableHead>
                  <TableHead className="text-right">{t("teacher.classComparison.activeStudents")}</TableHead>
                  <TableHead>{t("teacher.classComparison.participationRate")}</TableHead>
                  <TableHead className="text-right">{t("teacher.classComparison.totalSessions")}</TableHead>
                  <TableHead className="text-right">{t("teacher.classComparison.completedSessions")}</TableHead>
                  <TableHead className="text-right">{t("teacher.classComparison.totalAnswered")}</TableHead>
                  <TableHead className="text-right">{t("teacher.classComparison.averageAccuracy")}</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {data.map((row) => {
                  const participationPct = Math.round(row.participationRate * 100)
                  const accuracyPct = Math.round(row.averageAccuracy * 100)
                  return (
                    <TableRow key={row.classId}>
                      <TableCell className="font-medium">{row.className}</TableCell>
                      <TableCell className="text-right tabular-nums">{row.totalStudents}</TableCell>
                      <TableCell className="text-right tabular-nums">{row.activeStudents}</TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <Progress value={participationPct} className="h-1.5 w-16" />
                          <span className="text-xs text-muted-foreground tabular-nums">{participationPct}%</span>
                        </div>
                      </TableCell>
                      <TableCell className="text-right tabular-nums">{row.totalSessions}</TableCell>
                      <TableCell className="text-right tabular-nums">{row.completedSessions}</TableCell>
                      <TableCell className="text-right tabular-nums">{row.totalQuestionsAnswered}</TableCell>
                      <TableCell className="text-right tabular-nums">
                        <span className={cn(accuracyPct >= 60 ? "text-emerald-600 dark:text-emerald-400" : "text-rose-600 dark:text-rose-400")}>
                          {accuracyPct}%
                        </span>
                      </TableCell>
                    </TableRow>
                  )
                })}
              </TableBody>
            </Table>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
