"use client";

import { Search } from "lucide-react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";

type EmployeeFiltersProps = {
  divisions: { id: string; name: string }[];
  locations: { id: string; name: string }[];
};

const STATUS_OPTIONS = ["Aktiv", "Karenz", "Geplant", "Ausgetreten"] as const;

export function EmployeeFilters({ divisions, 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">
      <div className="flex min-w-[240px] flex-1 items-center gap-2 rounded border border-border bg-white px-3 py-2">
        <Search className="h-4 w-4 shrink-0 text-ink-muted" />
        <input
          value={q}
          onChange={(e) => setQ(e.target.value)}
          placeholder="Name, Pers.-Nr., Titel…"
          className="w-full text-sm text-ink outline-none placeholder:text-ink-muted"
        />
      </div>
      <select
        defaultValue={searchParams.get("division") ?? ""}
        onChange={(e) => updateParam("division", e.target.value)}
        className="rounded border border-border bg-white px-3 py-2 text-sm text-ink"
      >
        <option value="">Alle Bereiche</option>
        {divisions.map((d) => (
          <option key={d.id} value={d.id}>
            {d.name}
          </option>
        ))}
      </select>
      <select
        defaultValue={searchParams.get("status") ?? ""}
        onChange={(e) => updateParam("status", e.target.value)}
        className="rounded border border-border bg-white px-3 py-2 text-sm text-ink"
      >
        <option value="">Alle Status</option>
        {STATUS_OPTIONS.map((s) => (
          <option key={s} value={s}>
            {s}
          </option>
        ))}
      </select>
      <select
        defaultValue={searchParams.get("location") ?? ""}
        onChange={(e) => updateParam("location", e.target.value)}
        className="rounded border border-border bg-white px-3 py-2 text-sm text-ink"
      >
        <option value="">Alle Standorte</option>
        {locations.map((l) => (
          <option key={l.id} value={l.id}>
            {l.name}
          </option>
        ))}
      </select>
    </div>
  );
}
