"use client"

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 { Input } from "@/shared/components/ui/input"

import { ATTENDANCE_STATUS_OPTIONS, ATTENDANCE_STATUS_LABEL_KEYS } from "../constants"

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

interface AttendanceFiltersProps {
  classes: Option[]
}

export function AttendanceFilters({ classes }: AttendanceFiltersProps) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const t = useTranslations("attendance")

  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 status = searchParams.get("status") ?? "all"
  const date = searchParams.get("date") ?? ""

  return (
    <div className="grid grid-cols-1 gap-4 rounded-lg border bg-card p-4 md:grid-cols-3">
      <div className="grid gap-2">
        <Label className="text-xs">{t("filters.class")}</Label>
        <Select value={classId} onValueChange={(v) => updateParam("classId", v)}>
          <SelectTrigger className="h-9" aria-label={t("filters.class")}>
            <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 className="text-xs">{t("filters.status")}</Label>
        <Select value={status} onValueChange={(v) => updateParam("status", v)}>
          <SelectTrigger className="h-9" aria-label={t("filters.status")}>
            <SelectValue placeholder={t("filters.allStatuses")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("filters.allStatuses")}</SelectItem>
            {ATTENDANCE_STATUS_OPTIONS.map((s) => (
              <SelectItem key={s} value={s}>
                {t(ATTENDANCE_STATUS_LABEL_KEYS[s])}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="grid gap-2">
        <Label className="text-xs">{t("filters.date")}</Label>
        <Input
          type="date"
          value={date}
          onChange={(e) => updateParam("date", e.target.value)}
          className="h-9"
          aria-label={t("filters.date")}
        />
      </div>
    </div>
  )
}
