import { Activity, BookOpen, CheckCircle2, Target, Users } from "lucide-react"
import { useTranslations } from "next-intl"

import { Card, CardContent } from "@/shared/components/ui/card"
import { cn } from "@/shared/lib/utils"

interface PracticeOverviewStatsCardsProps {
  totalClasses: number
  totalSessions: number
  totalAnswered: number
  averageAccuracy: number
  participationRate: number
  className?: string
}

/**
 * 专项练习概览统计卡片（教师视图）
 *
 * 5 个卡片：覆盖班级 / 练习总数 / 答题总数 / 平均正确率 / 参与率
 */
export function PracticeOverviewStatsCards({
  totalClasses,
  totalSessions,
  totalAnswered,
  averageAccuracy,
  participationRate,
  className,
}: PracticeOverviewStatsCardsProps) {
  const t = useTranslations("practice")

  const cards = [
    {
      label: t("teacher.overview.totalClasses"),
      value: totalClasses,
      sub: "",
      icon: BookOpen,
      color: "text-blue-600 dark:text-blue-400",
      bg: "bg-blue-50 dark:bg-blue-950/30",
    },
    {
      label: t("teacher.overview.totalSessions"),
      value: totalSessions,
      sub: "",
      icon: Activity,
      color: "text-purple-600 dark:text-purple-400",
      bg: "bg-purple-50 dark:bg-purple-950/30",
    },
    {
      label: t("teacher.overview.totalAnswered"),
      value: totalAnswered,
      sub: "",
      icon: Target,
      color: "text-amber-600 dark:text-amber-400",
      bg: "bg-amber-50 dark:bg-amber-950/30",
    },
    {
      label: t("teacher.overview.averageAccuracy"),
      value: `${Math.round(averageAccuracy * 100)}%`,
      sub: averageAccuracy >= 0.6 ? "" : "",
      icon: CheckCircle2,
      color: "text-emerald-600 dark:text-emerald-400",
      bg: "bg-emerald-50 dark:bg-emerald-950/30",
    },
    {
      label: t("teacher.overview.participationRate"),
      value: `${Math.round(participationRate * 100)}%`,
      sub: participationRate >= 0.5 ? "" : "",
      icon: Users,
      color: "text-rose-600 dark:text-rose-400",
      bg: "bg-rose-50 dark:bg-rose-950/30",
    },
  ]

  return (
    <div className={cn("grid gap-3 sm:grid-cols-2 lg:grid-cols-5", className)}>
      {cards.map((card) => {
        const Icon = card.icon
        return (
          <Card key={card.label} className="overflow-hidden">
            <CardContent className="p-4">
              <div className="flex items-start justify-between">
                <div className="min-w-0 flex-1">
                  <div className="text-xs text-muted-foreground">{card.label}</div>
                  <div className={cn("mt-1 text-2xl font-bold tabular-nums", card.color)}>
                    {card.value}
                  </div>
                  {card.sub ? <div className="mt-0.5 text-xs text-muted-foreground">{card.sub}</div> : null}
                </div>
                <div className={cn("rounded-lg p-2", card.bg)}>
                  <Icon className={cn("h-4 w-4", card.color)} />
                </div>
              </div>
            </CardContent>
          </Card>
        )
      })}
    </div>
  )
}
