"use client"

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

type Option = { id: string; name: string }

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

export function GradeQueryFilters({ classes, subjects }: GradeQueryFiltersProps) {
  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 className="text-xs">Class</Label>
        <Select value={classId} onValueChange={(v) => updateParam("classId", v)}>
          <SelectTrigger className="h-9">
            <SelectValue placeholder="All classes" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All classes</SelectItem>
            {classes.map((c) => (
              <SelectItem key={c.id} value={c.id}>
                {c.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

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

      <div className="grid gap-2">
        <Label className="text-xs">Type</Label>
        <Select value={type} onValueChange={(v) => updateParam("type", v)}>
          <SelectTrigger className="h-9">
            <SelectValue placeholder="All types" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All types</SelectItem>
            <SelectItem value="exam">Exam</SelectItem>
            <SelectItem value="quiz">Quiz</SelectItem>
            <SelectItem value="homework">Homework</SelectItem>
            <SelectItem value="other">Other</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="grid gap-2">
        <Label className="text-xs">Semester</Label>
        <Select value={semester} onValueChange={(v) => updateParam("semester", v)}>
          <SelectTrigger className="h-9">
            <SelectValue placeholder="All semesters" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All semesters</SelectItem>
            <SelectItem value="1">Semester 1</SelectItem>
            <SelectItem value="2">Semester 2</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  )
}
