"use client";

import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { SegmentedControl } from "@/components/ui/SegmentedControl";
import { actionBadgeStyle } from "@/lib/colors";
import {
  ANSTEHEND_ARTEN,
  STANDARD_ZEITRAUM,
  ZEITRAEUME,
  type AnstehendArt,
  type Zeitraum,
} from "@/lib/dashboard-filter";

// Die Auswahl wandert in die Adresse; die Seite baut sich damit neu. Das ist
// hier nötig und nicht bloss ordentlich: ein längerer Zeitraum bringt Zeilen
// ins Spiel, die vorher gar nicht geladen waren.
//
// router.replace statt push, damit der Zurück-Knopf nicht durch jede einzelne
// Filterstellung zurückläuft, und ohne Sprung nach oben — die Karte steht in
// der unteren Hälfte, und dorthin sieht gerade, wer hier klickt.

export function AnstehendFilter({ zeitraum, arten }: { zeitraum: Zeitraum; arten: AnstehendArt[] }) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  function setzen(key: string, wert: string | null) {
    const params = new URLSearchParams(searchParams.toString());
    if (wert) params.set(key, wert);
    else params.delete(key);
    const query = params.toString();
    router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
  }

  function artUmschalten(art: AnstehendArt) {
    const alle = ANSTEHEND_ARTEN.map((a) => a.value);
    const naechste = arten.includes(art) ? arten.filter((a) => a !== art) : [...arten, art];
    // Nichts ausgewählt heisst wieder alles: eine leere Karte ist keine
    // Antwort, und der Weg dorthin wäre ein Klick zu weit.
    setzen("arten", naechste.length === 0 || naechste.length === alle.length ? null : naechste.join(","));
  }

  return (
    <div className="mb-2 flex flex-wrap items-center gap-2">
      <SegmentedControl<string>
        value={String(zeitraum)}
        onChange={(v) => setzen("tage", v === String(STANDARD_ZEITRAUM) ? null : v)}
        options={ZEITRAEUME.map((t) => ({ value: String(t), label: `${t} Tage` }))}
      />
      <div className="flex flex-wrap items-center gap-1.5">
        {ANSTEHEND_ARTEN.map((a) => {
          const aktiv = arten.includes(a.value);
          return (
            <button
              key={a.value}
              type="button"
              onClick={() => artUmschalten(a.value)}
              aria-pressed={aktiv}
              className={`rounded-full px-2 py-0.5 text-xs font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500 ${
                aktiv ? actionBadgeStyle(a.label) : "bg-surface text-ink-muted hover:text-ink"
              }`}
            >
              {a.label}
            </button>
          );
        })}
      </div>
    </div>
  );
}