"use client"

import { useTranslations } from "next-intl"
import { useQueryState, parseAsString } from "nuqs"

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/components/ui/select"
import { Input } from "@/shared/components/ui/input"
import { FilterBar } from "@/shared/components/ui/filter-bar"

export function LoginLogFilters() {
  const t = useTranslations("audit")
  const [action, setAction] = useQueryState("action", parseAsString.withOptions({ shallow: false }))
  const [status, setStatus] = useQueryState("status", parseAsString.withOptions({ shallow: false }))
  const [userId, setUserId] = useQueryState("userId", parseAsString.withOptions({ shallow: false }))
  const [startDate, setStartDate] = useQueryState(
    "startDate",
    parseAsString.withOptions({ shallow: false }),
  )
  const [endDate, setEndDate] = useQueryState(
    "endDate",
    parseAsString.withOptions({ shallow: false }),
  )

  const hasFilters = Boolean(action || status || userId || startDate || endDate)

  return (
    <FilterBar
      layout="wrap"
      hasFilters={hasFilters}
      onReset={() => {
        setAction(null)
        setStatus(null)
        setUserId(null)
        setStartDate(null)
        setEndDate(null)
      }}
    >
      <Select value={action || "all"} onValueChange={(val) => setAction(val === "all" ? null : val)}>
        <SelectTrigger className="w-[140px] bg-background" aria-label={t("filter.actionSelectPlaceholder")}>
          <SelectValue placeholder={t("filter.actionSelectPlaceholder")} />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">{t("filter.anyAction")}</SelectItem>
          <SelectItem value="signin">{t("filter.signIn")}</SelectItem>
          <SelectItem value="signout">{t("filter.signOut")}</SelectItem>
          <SelectItem value="signup">{t("filter.signUp")}</SelectItem>
        </SelectContent>
      </Select>

      <Input
        placeholder={t("filter.userIdPlaceholder")}
        className="w-full md:w-[180px] bg-background"
        aria-label={t("filter.userIdPlaceholder")}
        value={userId || ""}
        onChange={(e) => setUserId(e.target.value || null)}
      />

      <Select value={status || "all"} onValueChange={(val) => setStatus(val === "all" ? null : val)}>
        <SelectTrigger className="w-[140px] bg-background" aria-label={t("filter.statusPlaceholder")}>
          <SelectValue placeholder={t("filter.statusPlaceholder")} />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">{t("filter.anyStatus")}</SelectItem>
          <SelectItem value="success">{t("filter.success")}</SelectItem>
          <SelectItem value="failure">{t("filter.failure")}</SelectItem>
        </SelectContent>
      </Select>

      <Input
        type="date"
        className="w-full md:w-[160px] bg-background"
        aria-label={t("filter.startDate")}
        value={startDate || ""}
        onChange={(e) => setStartDate(e.target.value || null)}
      />
      <Input
        type="date"
        className="w-full md:w-[160px] bg-background"
        aria-label={t("filter.endDate")}
        value={endDate || ""}
        onChange={(e) => setEndDate(e.target.value || null)}
      />
    </FilterBar>
  )
}
