"use client"

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"

export function ExamFilters() {
  const t = useTranslations("examHomework")
  const [search, setSearch] = useQueryState("q", parseAsString.withOptions({ shallow: false }))
  const [status, setStatus] = useQueryState("status", parseAsString.withOptions({ shallow: false }))
  const [difficulty, setDifficulty] = useQueryState("difficulty", parseAsString.withOptions({ shallow: false }))

  const hasFilters = Boolean(search || (status && status !== "all") || (difficulty && difficulty !== "all"))

  return (
    <FilterBar
      hasFilters={hasFilters}
      onReset={() => {
        setSearch(null)
        setStatus(null)
        setDifficulty(null)
      }}
    >
      <FilterSearchInput
        value={search || ""}
        onChange={(v) => setSearch(v || null)}
        placeholder={t("exam.list.searchPlaceholder")}
      />

      <div className="flex flex-wrap gap-2 w-full md:w-auto">
        <Select value={status || "all"} onValueChange={(val) => setStatus(val === "all" ? null : val)}>
          <SelectTrigger className="w-[140px] bg-background border-muted-foreground/20">
            <SelectValue placeholder={t("exam.filters.status")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("exam.filters.anyStatus")}</SelectItem>
            <SelectItem value="draft">{t("exam.status.draft")}</SelectItem>
            <SelectItem value="published">{t("exam.status.published")}</SelectItem>
            <SelectItem value="archived">{t("exam.status.archived")}</SelectItem>
          </SelectContent>
        </Select>

        <Select value={difficulty || "all"} onValueChange={(val) => setDifficulty(val === "all" ? null : val)}>
          <SelectTrigger className="w-[140px] bg-background border-muted-foreground/20">
            <SelectValue placeholder={t("exam.filters.difficulty")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("exam.filters.anyDifficulty")}</SelectItem>
            <SelectItem value="1">{t("exam.difficulty.1")} (1)</SelectItem>
            <SelectItem value="2">{t("exam.difficulty.2")} (2)</SelectItem>
            <SelectItem value="3">{t("exam.difficulty.3")} (3)</SelectItem>
            <SelectItem value="4">{t("exam.difficulty.4")} (4)</SelectItem>
            <SelectItem value="5">{t("exam.difficulty.5")} (5)</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </FilterBar>
  )
}
