"use client";

import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import { FILTER_SELECT_CLASS } from "@/components/ui/Field";
import { SearchInput } from "@/components/ui/SearchInput";

// The value is the string stored in audit_log.action and must not change;
// only what the user reads does — 'Karenz' is displayed as
// "Langzeitabwesenheit" (see lib/absence.ts).
const ACTIONS: { value: string; label: string }[] = [
  { value: "Neueinstellung", label: "Neueinstellung" },
  { value: "Wiedereinstellung", label: "Wiedereinstellung" },
  { value: "Rückkehr", label: "Rückkehr aus Langzeitabwesenheit" },
  { value: "Austritt", label: "Austritt" },
  { value: "Versetzung", label: "Versetzung" },
  { value: "Ausschreibung", label: "Ausschreibung" },
  { value: "Interne Besetzung", label: "Interne Besetzung" },
  { value: "Beförderung", label: "Beförderung" },
  { value: "Reorganisation", label: "Reorganisation" },
  { value: "Reorganisation rückgängig", label: "Reorganisation rückgängig" },
  { value: "Karenz", label: "Langzeitabwesenheit" },
  { value: "Vertragsänderung", label: "Vertragsänderung" },
  { value: "Stammdatenänderung", label: "Stammdatenänderung" },
  { value: "Gehaltsanpassung", label: "Gehaltsanpassung" },
];

export function AuditFilters() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const [q, setQ] = useState(searchParams.get("q") ?? "");

  useEffect(() => {
    const handle = setTimeout(() => {
      const current = new URLSearchParams(searchParams.toString());
      if (q) current.set("q", q);
      else current.delete("q");
      current.delete("page");
      const next = current.toString();
      if (next !== searchParams.toString()) router.push(`${pathname}?${next}`);
    }, 300);
    return () => clearTimeout(handle);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [q]);

  function updateParam(key: string, value: string) {
    const params = new URLSearchParams(searchParams.toString());
    if (value) params.set(key, value);
    else params.delete(key);
    params.delete("page");
    router.push(`${pathname}?${params.toString()}`);
  }

  return (
    <div className="flex flex-wrap items-center gap-3">
      <SearchInput label="Audit-Log durchsuchen" placeholder="Objekt, Details, Benutzer:in…" value={q} onChange={setQ} />
      <select
        aria-label="Nach Aktion filtern"
        defaultValue={searchParams.get("action") ?? ""}
        onChange={(e) => updateParam("action", e.target.value)}
        className={FILTER_SELECT_CLASS}
      >
        <option value="">Alle Aktionen</option>
        {ACTIONS.map((a) => (
          <option key={a.value} value={a.value}>
            {a.label}
          </option>
        ))}
      </select>
    </div>
  );
}