"use client"

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

import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
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"
import type { DataChangeStat } from "../types"

interface DataChangeLogFiltersProps {
  tableOptions: string[]
  stats: DataChangeStat[]
}

export function DataChangeLogFilters({
  tableOptions,
  stats,
}: DataChangeLogFiltersProps) {
  const t = useTranslations("audit")
  const [tableName, setTableName] = useQueryState(
    "tableName",
    parseAsString.withOptions({ shallow: false }),
  )
  const [action, setAction] = useQueryState(
    "action",
    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(tableName || action || userId || startDate || endDate)

  return (
    <div className="space-y-3">
      {stats.length > 0 && (
        <div className="flex flex-wrap gap-2" role="status" aria-label={t("dataChanges.title")}>
          {stats.slice(0, 8).map((s) => (
            <Badge key={s.tableName} variant="secondary" className="gap-1">
              <span className="font-mono text-xs">{s.tableName}</span>
              <span className="text-xs text-muted-foreground">·</span>
              <span className="text-xs">{s.count}</span>
            </Badge>
          ))}
        </div>
      )}
      <FilterBar
        layout="wrap"
        hasFilters={hasFilters}
        onReset={() => {
          setTableName(null)
          setAction(null)
          setUserId(null)
          setStartDate(null)
          setEndDate(null)
        }}
      >
        <Select
          value={tableName || "all"}
          onValueChange={(val) => setTableName(val === "all" ? null : val)}
        >
          <SelectTrigger className="w-[180px] bg-background" aria-label={t("filter.tablePlaceholder")}>
            <SelectValue placeholder={t("filter.tablePlaceholder")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("filter.anyTable")}</SelectItem>
            {tableOptions.map((tb) => (
              <SelectItem key={tb} value={tb}>
                {tb}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <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="create">{t("filter.create")}</SelectItem>
            <SelectItem value="update">{t("filter.update")}</SelectItem>
            <SelectItem value="delete">{t("filter.delete")}</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)}
        />

        <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)}
        />

        {hasFilters && (
          <Button
            variant="ghost"
            onClick={() => {
              setTableName(null)
              setAction(null)
              setUserId(null)
              setStartDate(null)
              setEndDate(null)
            }}
            className="h-10 px-3"
            aria-label={t("filter.reset")}
          >
            {t("filter.reset")}
            <X className="ml-2 h-4 w-4" />
          </Button>
        )}
      </FilterBar>
    </div>
  )
}
