import { useTranslations } from "next-intl"
import { AlertTriangle, CheckCircle2 } from "lucide-react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import { cn } from "@/shared/lib/utils"

interface InactiveStudentsAlertProps {
  inactiveStudentIds: string[]
  studentNames: Map<string, string>
  className?: string
}

/**
 * 未参与练习学生提醒卡片（教师视图）
 *
 * 当班级中有学生未参与任何专项练习时，显示提醒列表，
 * 帮助教师识别需要主动引导的学生。
 */
export function InactiveStudentsAlert({
  inactiveStudentIds,
  studentNames,
  className,
}: InactiveStudentsAlertProps) {
  const t = useTranslations("practice")

  const isEmpty = inactiveStudentIds.length === 0

  return (
    <Card className={cn("shadow-none", className)}>
      <CardHeader className="flex flex-row items-center justify-between space-y-0">
        <div className="space-y-1">
          <CardTitle className="flex items-center gap-2 text-base">
            {isEmpty ? (
              <CheckCircle2 className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
            ) : (
              <AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
            )}
            {t("teacher.inactiveStudents.title")}
          </CardTitle>
          <CardDescription>{t("teacher.inactiveStudents.description")}</CardDescription>
        </div>
        <Badge variant={isEmpty ? "secondary" : "destructive"} className="tabular-nums">
          {inactiveStudentIds.length}
        </Badge>
      </CardHeader>
      <CardContent>
        {isEmpty ? (
          <div className="flex h-[120px] items-center justify-center text-sm text-muted-foreground">
            {t("teacher.inactiveStudents.empty")}
          </div>
        ) : (
          <div className="flex flex-wrap gap-2">
            {inactiveStudentIds.map((studentId) => (
              <Badge key={studentId} variant="outline" className="text-xs">
                {studentNames.get(studentId) ?? "Unknown"}
              </Badge>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  )
}
