import type { JSX } from "react"
import { School, TrendingUp, CheckCircle2, Award } from "lucide-react"
import { getTranslations } from "next-intl/server"

import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/shared/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
import { Badge } from "@/shared/components/ui/badge"
import { formatNumber } from "@/shared/lib/utils"
import type { SchoolWideGradeSummary } from "../types"

interface SchoolWideSummaryCardProps {
  summary: SchoolWideGradeSummary
}

export async function SchoolWideSummaryCard({
  summary,
}: SchoolWideSummaryCardProps): Promise<JSX.Element> {
  const t = await getTranslations("grades")
  const { totals, grades } = summary

  return (
    <div className="space-y-4">
      {/* 全校汇总统计卡片 */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card className="shadow-none">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t("schoolWide.gradeCount")}</CardTitle>
            <School className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold tabular-nums">{totals.gradeCount}</div>
            <p className="text-xs text-muted-foreground">
              {t("schoolWide.classStudentInfo", {
                classCount: totals.classCount,
                studentCount: totals.studentCount,
              })}
            </p>
          </CardContent>
        </Card>
        <Card className="shadow-none">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t("schoolWide.averageScore")}</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold tabular-nums">{formatNumber(totals.averageScore)}</div>
            <p className="text-xs text-muted-foreground">
              {t("schoolWide.recordCount", { count: totals.recordCount })}
            </p>
          </CardContent>
        </Card>
        <Card className="shadow-none">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t("schoolWide.passRate")}</CardTitle>
            <CheckCircle2 className="h-4 w-4 text-green-600" aria-hidden="true" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold tabular-nums text-green-600">
              {formatNumber(totals.passRate)}%
            </div>
            <p className="text-xs text-muted-foreground">{t("schoolWide.passLine")}</p>
          </CardContent>
        </Card>
        <Card className="shadow-none">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t("schoolWide.excellentRate")}</CardTitle>
            <Award className="h-4 w-4 text-amber-600" aria-hidden="true" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold tabular-nums text-amber-600">
              {formatNumber(totals.excellentRate)}%
            </div>
            <p className="text-xs text-muted-foreground">{t("schoolWide.excellentLine")}</p>
          </CardContent>
        </Card>
      </div>

      {/* 各年级对比表格 */}
      <Card className="shadow-none">
        <CardHeader>
          <CardTitle className="text-base">{t("schoolWide.comparisonTitle")}</CardTitle>
          <CardDescription>{t("schoolWide.comparisonDescription")}</CardDescription>
        </CardHeader>
        <CardContent>
          {grades.length === 0 ? (
            <p className="py-6 text-center text-sm text-muted-foreground">
              {t("schoolWide.empty")}
            </p>
          ) : (
            <div className="rounded-md border">
              <Table>
                <caption className="sr-only">{t("schoolWide.comparisonTitle")}</caption>
                <TableHeader>
                  <TableRow className="bg-muted/50">
                    <TableHead>{t("schoolWide.columns.schoolGrade")}</TableHead>
                    <TableHead className="text-right">{t("schoolWide.columns.classCount")}</TableHead>
                    <TableHead className="text-right">{t("schoolWide.columns.studentCount")}</TableHead>
                    <TableHead className="text-right">{t("schoolWide.columns.recordCount")}</TableHead>
                    <TableHead className="text-right">{t("schoolWide.columns.average")}</TableHead>
                    <TableHead className="text-right">{t("schoolWide.columns.passRate")}</TableHead>
                    <TableHead className="text-right">{t("schoolWide.columns.excellentRate")}</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {grades.map((g) => (
                    <TableRow key={g.gradeId}>
                      <TableCell className="font-medium">
                        {g.schoolName}
                        <span className="text-muted-foreground"> / {g.gradeName}</span>
                      </TableCell>
                      <TableCell className="text-right tabular-nums">{g.classCount}</TableCell>
                      <TableCell className="text-right tabular-nums">{g.studentCount}</TableCell>
                      <TableCell className="text-right tabular-nums">{g.recordCount}</TableCell>
                      <TableCell className="text-right tabular-nums font-medium">
                        {formatNumber(g.averageScore)}
                      </TableCell>
                      <TableCell className="text-right tabular-nums">
                        <Badge
                          variant={g.passRate >= 80 ? "default" : g.passRate >= 60 ? "secondary" : "destructive"}
                          className="tabular-nums"
                        >
                          {formatNumber(g.passRate)}%
                        </Badge>
                      </TableCell>
                      <TableCell className="text-right tabular-nums">
                        <Badge
                          variant={g.excellentRate >= 30 ? "default" : "outline"}
                          className="tabular-nums"
                        >
                          {formatNumber(g.excellentRate)}%
                        </Badge>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
