"use client"

import type { JSX } from "react"
import { useQueryState, parseAsString } from "nuqs"
import { useTranslations } from "next-intl"

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/components/ui/select"
import { FilterBar, FilterSearchInput } from "@/shared/components/ui/filter-bar"

import type { SelectOption } from "../types"

/**
 * 学生端成绩过滤器。
 *
 * v3-P2-1：subjects 改为通过 prop 传入，使用 subjectId 作为 value，
 * 而非硬编码科目名称。若未传入 subjects，则不显示科目筛选。
 */
export function GradeFilters({ subjects }: { subjects?: SelectOption[] }): JSX.Element {
  const t = useTranslations("grades")
  const [search, setSearch] = useQueryState("q", parseAsString.withDefault(""))
  const [subject, setSubject] = useQueryState("subject", parseAsString.withDefault("all"))
  const [type, setType] = useQueryState("type", parseAsString.withDefault("all"))
  const [semester, setSemester] = useQueryState("semester", parseAsString.withDefault("all"))

  const hasFilters = Boolean(search || subject !== "all" || type !== "all" || semester !== "all")

  return (
    <FilterBar
      layout="between"
      hasFilters={hasFilters}
      onReset={() => {
        setSearch(null)
        setSubject(null)
        setType(null)
        setSemester(null)
      }}
    >
      <FilterSearchInput
        value={search}
        onChange={(v) => setSearch(v || null)}
        placeholder={t("filters.searchPlaceholder")}
      />

      <div className="flex flex-wrap gap-2 w-full md:w-auto">
        {subjects && subjects.length > 0 && (
          <Select value={subject} onValueChange={(val) => setSubject(val === "all" ? null : val)}>
            <SelectTrigger className="w-36 bg-background border-muted-foreground/20">
              <SelectValue placeholder={t("filters.subject")} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">{t("filters.allSubjects")}</SelectItem>
              {subjects.map((s) => (
                <SelectItem key={s.id} value={s.id}>
                  {s.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        )}

        <Select value={type} onValueChange={(val) => setType(val === "all" ? null : val)}>
          <SelectTrigger className="w-32 bg-background border-muted-foreground/20">
            <SelectValue placeholder={t("filters.type")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("filters.allTypes")}</SelectItem>
            <SelectItem value="exam">{t("type.exam")}</SelectItem>
            <SelectItem value="quiz">{t("type.quiz")}</SelectItem>
            <SelectItem value="homework">{t("type.homework")}</SelectItem>
            <SelectItem value="other">{t("type.other")}</SelectItem>
          </SelectContent>
        </Select>

        <Select value={semester} onValueChange={(val) => setSemester(val === "all" ? null : val)}>
          <SelectTrigger className="w-32 bg-background border-muted-foreground/20">
            <SelectValue placeholder={t("filters.semester")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("filters.allSemesters")}</SelectItem>
            <SelectItem value="1">{t("semester.s1")}</SelectItem>
            <SelectItem value="2">{t("semester.s2")}</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </FilterBar>
  )
}
