"use client"

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

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

/**
 * 题库筛选栏。
 *
 * 组合了：
 * - 搜索框（nuqs URL 状态）
 * - 题型/难度下拉（nuqs URL 状态）
 * - 教材→章节→知识点级联筛选（QuestionCascadeFilter）
 *
 * 替代了原有的扁平知识点下拉，符合 K12 教学场景的级联选题工作流。
 */
export function QuestionFilters(): React.ReactNode {
  const t = useTranslations("questions")

  const [search, setSearch] = useQueryState("q", parseAsString.withDefault(""))
  const [type, setType] = useQueryState("type", parseAsString.withDefault("all"))
  const [difficulty, setDifficulty] = useQueryState("difficulty", parseAsString.withDefault("all"))

  const hasFilters = Boolean(
    search || type !== "all" || difficulty !== "all",
  )

  return (
    <FilterBar
      layout="between"
      gapClassName="gap-4"
      hasFilters={hasFilters}
      onReset={() => {
        setSearch(null)
        setType(null)
        setDifficulty(null)
      }}
    >
      <div className="flex flex-1 flex-wrap items-center gap-2">
        <FilterSearchInput
          value={search}
          onChange={(v) => setSearch(v || null)}
          placeholder={t("search.placeholder")}
          className="flex-1 md:max-w-sm"
          inputClassName="border-muted-foreground/20 pl-8"
        />
        <Select value={type} onValueChange={(val) => setType(val === "all" ? null : val)}>
          <SelectTrigger className="w-[150px]" aria-label={t("filters.type")}>
            <SelectValue placeholder={t("filters.type")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("filters.typeAll")}</SelectItem>
            <SelectItem value="single_choice">{t("type.single_choice")}</SelectItem>
            <SelectItem value="multiple_choice">{t("type.multiple_choice")}</SelectItem>
            <SelectItem value="judgment">{t("type.judgment")}</SelectItem>
            <SelectItem value="text">{t("type.text")}</SelectItem>
            <SelectItem value="composite">{t("type.composite")}</SelectItem>
          </SelectContent>
        </Select>
        <Select value={difficulty} onValueChange={(val) => setDifficulty(val === "all" ? null : val)}>
          <SelectTrigger className="w-[150px]" aria-label={t("filters.difficulty")}>
            <SelectValue placeholder={t("filters.difficulty")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("filters.difficultyAll")}</SelectItem>
            <SelectItem value="1">{t("filters.difficulty1")}</SelectItem>
            <SelectItem value="2">{t("filters.difficulty2")}</SelectItem>
            <SelectItem value="3">{t("filters.difficulty3")}</SelectItem>
            <SelectItem value="4">{t("filters.difficulty4")}</SelectItem>
            <SelectItem value="5">{t("filters.difficulty5")}</SelectItem>
          </SelectContent>
        </Select>
        <QuestionCascadeFilter />
      </div>
    </FilterBar>
  )
}
