import type { JSX } from "react"
import { getTranslations } from "next-intl/server"

import { ChipNav } from "@/shared/components/ui/chip-nav"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"

interface GradeInsightsFiltersProps {
  grades: Array<{ id: string; name: string; schoolName: string }>
  currentGradeId: string
  buildHref: (gradeId: string) => string
}

/**
 * 年级洞察筛选器：使用 ChipNav 替代原生 form get，
 * 点击 chip 即时通过 URL 参数切换，无整页刷新。
 */
export async function GradeInsightsFilters({
  grades,
  currentGradeId,
  buildHref,
}: GradeInsightsFiltersProps): Promise<JSX.Element> {
  const t = await getTranslations("school")

  const options = grades.map((g) => ({
    id: g.id,
    name: `${g.schoolName} / ${g.name}`,
  }))

  return (
    <Card className="shadow-none">
      <CardHeader className="flex flex-row items-center justify-between space-y-0">
        <CardTitle className="text-base">{t("grades.gradeInsights.title")}</CardTitle>
        <Badge variant="secondary" className="tabular-nums">
          {grades.length}
        </Badge>
      </CardHeader>
      <CardContent>
        <ChipNav
          options={options}
          currentId={currentGradeId}
          buildHref={buildHref}
          allOption={{ id: "all", label: t("grades.gradeInsights.selectGrade") }}
        />
      </CardContent>
    </Card>
  )
}
