"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 ErrorBookFilters() {
  const t = useTranslations("errorBook")
  const [search, setSearch] = useQueryState("q", parseAsString.withDefault(""))
  const [status, setStatus] = useQueryState("status", parseAsString.withDefault("all"))
  const [sourceType, setSourceType] = useQueryState("source", parseAsString.withDefault("all"))
  const [dueOnly, setDueOnly] = useQueryState("due", parseAsString.withDefault("all"))

  const hasFilters = Boolean(
    search || status !== "all" || sourceType !== "all" || dueOnly !== "all",
  )

  return (
    <FilterBar
      layout="between"
      gapClassName="gap-4"
      hasFilters={hasFilters}
      onReset={() => {
        setSearch(null)
        setStatus(null)
        setSourceType(null)
        setDueOnly(null)
      }}
    >
      <div className="flex flex-1 flex-wrap items-center gap-2">
        <FilterSearchInput
          value={search}
          onChange={(v) => setSearch(v || null)}
          placeholder={t("filters.searchPlaceholder")}
          className="flex-1 md:max-w-sm"
          inputClassName="border-muted-foreground/20 pl-8"
        />
        <Select value={status} onValueChange={(val) => setStatus(val === "all" ? null : val)}>
          <SelectTrigger className="w-[140px]">
            <SelectValue placeholder={t("filters.status")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("filters.allStatus")}</SelectItem>
            <SelectItem value="new">{t("status.new")}</SelectItem>
            <SelectItem value="learning">{t("status.learning")}</SelectItem>
            <SelectItem value="mastered">{t("status.mastered")}</SelectItem>
            <SelectItem value="archived">{t("status.archived")}</SelectItem>
          </SelectContent>
        </Select>
        <Select value={sourceType} onValueChange={(val) => setSourceType(val === "all" ? null : val)}>
          <SelectTrigger className="w-[140px]">
            <SelectValue placeholder={t("filters.source")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("filters.allSource")}</SelectItem>
            <SelectItem value="exam">{t("source.exam")}</SelectItem>
            <SelectItem value="homework">{t("source.homework")}</SelectItem>
            <SelectItem value="manual">{t("source.manual")}</SelectItem>
          </SelectContent>
        </Select>
        <Select value={dueOnly} onValueChange={(val) => setDueOnly(val === "all" ? null : val)}>
          <SelectTrigger className="w-[140px]">
            <SelectValue placeholder={t("filters.review")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("filters.allErrors")}</SelectItem>
            <SelectItem value="due">{t("filters.dueOnly")}</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </FilterBar>
  )
}
