"use client"

import type { JSX } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { useCallback } from "react"
import { useTranslations } from "next-intl"
import { Label } from "@/shared/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/components/ui/select"

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

interface GradeQueryFiltersProps {
  classes: SelectOption[]
  subjects: SelectOption[]
}

export function GradeQueryFilters({ classes, subjects }: GradeQueryFiltersProps): JSX.Element {
  const t = useTranslations("grades")
  const router = useRouter()
  const searchParams = useSearchParams()

  const updateParam = useCallback(
    (key: string, value: string) => {
      const params = new URLSearchParams(searchParams.toString())
      if (value && value !== "all") {
        params.set(key, value)
      } else {
        params.delete(key)
      }
      router.push(`?${params.toString()}`)
    },
    [router, searchParams]
  )

  const classId = searchParams.get("classId") ?? "all"
  const subjectId = searchParams.get("subjectId") ?? "all"
  const type = searchParams.get("type") ?? "all"
  const semester = searchParams.get("semester") ?? "all"

  return (
    <div className="grid grid-cols-1 gap-4 rounded-lg border bg-card p-4 md:grid-cols-4">
      <div className="grid gap-2">
        <Label htmlFor="filter-class" className="text-xs">{t("filters.class")}</Label>
        <Select value={classId} onValueChange={(v) => updateParam("classId", v)}>
          <SelectTrigger id="filter-class" className="h-9">
            <SelectValue placeholder={t("filters.allClasses")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("filters.allClasses")}</SelectItem>
            {classes.map((c) => (
              <SelectItem key={c.id} value={c.id}>
                {c.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="grid gap-2">
        <Label htmlFor="filter-subject" className="text-xs">{t("filters.subject")}</Label>
        <Select value={subjectId} onValueChange={(v) => updateParam("subjectId", v)}>
          <SelectTrigger id="filter-subject" className="h-9">
            <SelectValue placeholder={t("filters.allSubjects")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("filters.allSubjects")}</SelectItem>
            {subjects.map((s) => (
              <SelectItem key={s.id} value={s.id}>
                {s.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="grid gap-2">
        <Label htmlFor="filter-type" className="text-xs">{t("filters.type")}</Label>
        <Select value={type} onValueChange={(v) => updateParam("type", v)}>
          <SelectTrigger id="filter-type" className="h-9">
            <SelectValue placeholder={t("filters.allTypes")} />
          </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>
      </div>

      <div className="grid gap-2">
        <Label htmlFor="filter-semester" className="text-xs">{t("filters.semester")}</Label>
        <Select value={semester} onValueChange={(v) => updateParam("semester", v)}>
          <SelectTrigger id="filter-semester" className="h-9">
            <SelectValue placeholder={t("filters.allSemesters")} />
          </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>
    </div>
  )
}
