import { BookOpen, Users, Gauge, Shuffle } from "lucide-react"
import { useTranslations } from "next-intl"

import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { cn } from "@/shared/lib/utils"
import type { ElectiveOverviewStats } from "../data-access-stats"

/**
 * 选课模块管理员概览统计卡片网格。
 *
 * 复用模式：与 attendance-stats-cards 一致的 4 卡片网格。
 * 设计原则：
 * - 通过 props 注入数据，不直接调用 data-access（便于测试与复用）
 * - 使用 i18n key 解析标题，value 由父组件传入已格式化的数据
 */
export function ElectiveStatsCards({ stats }: { stats: ElectiveOverviewStats }) {
  const t = useTranslations("elective")

  const cards = [
    {
      title: t("stats.totalCourses"),
      value: stats.totalCourses,
      icon: BookOpen,
      color: "text-blue-500",
      bgColor: "bg-blue-500/10",
    },
    {
      title: t("stats.totalEnrolled"),
      value: stats.totalEnrolled,
      icon: Users,
      color: "text-green-500",
      bgColor: "bg-green-500/10",
    },
    {
      title: t("stats.avgUtilization"),
      value: t("stats.utilizationRate", { rate: stats.avgUtilization }),
      icon: Gauge,
      color: "text-purple-500",
      bgColor: "bg-purple-500/10",
    },
    {
      title: t("stats.pendingLottery"),
      value: stats.pendingLottery,
      icon: Shuffle,
      color: "text-orange-500",
      bgColor: "bg-orange-500/10",
    },
  ]

  return (
    <div
      className="grid gap-4 md:grid-cols-2 lg:grid-cols-4"
      role="region"
      aria-label={t("stats.totalCourses")}
    >
      {cards.map((card) => (
        <Card key={card.title} className="shadow-none">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{card.title}</CardTitle>
            <div className={cn("flex h-8 w-8 items-center justify-center rounded-md", card.bgColor)}>
              <card.icon className={cn("h-4 w-4", card.color)} />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold tabular-nums">{card.value}</div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}
