"use client"

import type { JSX } from "react"
import { Search, AlertCircle } from "lucide-react"

import { Badge } from "@/shared/components/ui/badge"
import { Input } from "@/shared/components/ui/input"
import { useTranslations } from "next-intl"

export interface BatchGradeEntryStatsData {
  entered: number
  total: number
  avg: number
  max: number
  min: number
}

interface Props {
  stats: BatchGradeEntryStatsData
  hasInvalidScores: boolean
  searchQuery: string
  onSearchChange: (value: string) => void
}

/**
 * 成绩录入统计栏。
 *
 * P1-6 重构：从 batch-grade-entry.tsx 拆分而来。
 * 展示已录入数、均分、最高/最低分、无效分数提示及学生搜索框。
 */
export function BatchGradeEntryStats({
  stats,
  hasInvalidScores,
  searchQuery,
  onSearchChange,
}: Props): JSX.Element {
  const t = useTranslations("grades")

  return (
    <div className="flex flex-wrap items-center gap-4">
      <Badge variant="outline" className="tabular-nums">
        {t("batchByExam.entered")}: {stats.entered}/{stats.total}
      </Badge>
      {stats.entered > 0 && (
        <>
          <Badge variant="outline" className="tabular-nums">
            {t("batchByExam.average")}: {Math.round(stats.avg * 10) / 10}
          </Badge>
          <Badge variant="outline" className="tabular-nums">
            {t("batchByExam.max")}: {stats.max}
          </Badge>
          <Badge variant="outline" className="tabular-nums">
            {t("batchByExam.min")}: {stats.min}
          </Badge>
        </>
      )}
      {hasInvalidScores && (
        <Badge variant="destructive">
          <AlertCircle className="mr-1 h-3 w-3" />
          {t("batchByExam.invalidScoresBadge")}
        </Badge>
      )}
      <div className="relative ml-auto">
        <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
        <Input
          placeholder={t("batchByExam.searchStudent")}
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
          className="h-8 w-48 pl-8"
        />
      </div>
    </div>
  )
}
