alpenwerk-hr/components/employees/EmployeeFilters.tsx

"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";

type EmployeeFiltersProps = {
  /** Der ganze Baum, in Tiefensuche-Reihenfolge. */
  units: { id: string; name: string; unit_type: string }[];
  depthOf: Map<string, number>;
  locations: { id: string; name: string }[];
};

// Aktiv and Langzeitabwesenheit are separate statuses — somebody on a
// long-term absence is employed but not active. The combined entry is
// offered explicitly, named after the two it selects rather than calling
// the pair "aktiv". The stored value is still 'Karenz' (see lib/absence.ts).
const STATUS_OPTIONS = [
  { value: "Aktiv", label: "Aktiv" },
  { value: "Karenz", label: "Langzeitabwesenheit" },
  { value: "Aktiv,Karenz", label: "Aktiv + Langzeitabwesenheit (beschäftigt)" },
  { value: "Geplant", label: "Geplant" },
  { value: "Ausgetreten", label: "Ausgetreten" },
] as const;

export function EmployeeFilters({ units, depthOf, locations }: EmployeeFiltersProps) {
  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="Mitarbeiter:innen durchsuchen" placeholder="Name, Pers.-Nr., Titel…" value={q} onChange={setQ} />
      {/* aria-label rather than a visible label: the filter bar is a single
          horizontal row, and each select's first option already names it on
          screen. */}
      {/* Der ganze Baum, nicht nur die oberste Ebene: die Auswahl greift
          jeweils auf die Einheit *und alles darunter*, weshalb sich damit
          auch nach einer einzelnen Abteilung oder einem Team filtern lässt.
          Eingerückt statt gruppiert, weil optgroup keine Verschachtelung
          kennt und die Tiefe hier beliebig ist. */}
      <select
        aria-label="Nach Organisationseinheit filtern"
        defaultValue={searchParams.get("division") ?? ""}
        onChange={(e) => updateParam("division", e.target.value)}
        className={FILTER_SELECT_CLASS}
      >
        <option value="">Alle Einheiten</option>
        {units
          .filter((u) => u.unit_type !== "Gesellschaft")
          .map((u) => (
            <option key={u.id} value={u.id}>
              {" ".repeat(Math.max(0, (depthOf.get(u.id) ?? 1) - 1) * 3)}
              {u.name}
            </option>
          ))}
      </select>
      <select
        aria-label="Nach Status filtern"
        defaultValue={searchParams.get("status") ?? ""}
        onChange={(e) => updateParam("status", e.target.value)}
        className={FILTER_SELECT_CLASS}
      >
        <option value="">Alle Status</option>
        {STATUS_OPTIONS.map((s) => (
          <option key={s.value} value={s.value}>
            {s.label}
          </option>
        ))}
      </select>
      <select
        aria-label="Nach Standort filtern"
        defaultValue={searchParams.get("location") ?? ""}
        onChange={(e) => updateParam("location", e.target.value)}
        className={FILTER_SELECT_CLASS}
      >
        <option value="">Alle Standorte</option>
        {locations.map((l) => (
          <option key={l.id} value={l.id}>
            {l.name}
          </option>
        ))}
      </select>
    </div>
  );
}