Laufzettel/src/components/vorlagen/abteilungen-waehlen.tsx

"use client";

import { useState } from "react";
import { Plus, X } from "lucide-react";
import { KAESTCHEN } from "@/lib/formular";

/**
 * Fuer welche Abteilungen ein Abschnitt gilt (#031).
 *
 * Kein `<select multiple>`: das ist am Handy kaum bedienbar und zeigt nicht, was
 * gewaehlt ist, ohne zu scrollen. Stattdessen ein Kaestchen je gepflegter
 * Abteilung und darunter ein Freitextfeld — der Abschnitt haelt **Namen**, und
 * eine Abteilung, die es noch nicht gibt, soll sich schon nennen lassen.
 *
 * Ein Name, der gewaehlt ist, aber in keiner gepflegten Abteilung vorkommt,
 * erscheint als eigene Zeile mit Entfernen-Knopf. Sonst waere er unsichtbar und
 * beim naechsten Speichern still weg.
 */
export function AbteilungenWaehlen({
  gewaehlt,
  bekannte,
  lesend,
  setzen,
}: {
  gewaehlt: readonly string[];
  bekannte: readonly string[];
  lesend: boolean;
  setzen: (namen: readonly string[]) => void;
}) {
  const [eingabe, setzeEingabe] = useState("");

  const kleinGewaehlt = new Set(gewaehlt.map((name) => name.trim().toLocaleLowerCase("de")));
  const fremde = gewaehlt.filter(
    (name) => !bekannte.some((bekannt) => bekannt.toLocaleLowerCase("de") === name.toLocaleLowerCase("de")),
  );

  function umschalten(name: string, an: boolean): void {
    if (an) {
      if (kleinGewaehlt.has(name.trim().toLocaleLowerCase("de"))) return;
      setzen([...gewaehlt, name]);
    } else {
      setzen(
        gewaehlt.filter(
          (eintrag) => eintrag.trim().toLocaleLowerCase("de") !== name.trim().toLocaleLowerCase("de"),
        ),
      );
    }
  }

  function hinzufuegen(): void {
    const name = eingabe.trim();
    if (!name) return;
    setzeEingabe("");
    umschalten(name, true);
  }

  return (
    <fieldset className="flex flex-col gap-2">
      <legend className="text-sm text-nebentext">Nur für diese Abteilungen</legend>
      <p className="max-w-prose text-sm text-nebentext">
        {gewaehlt.length === 0
          ? "Keine Einschränkung — der Abschnitt gilt für jeden Lauf."
          : "Der Abschnitt erscheint nur in Läufen mit einer dieser Abteilungen. Ein Lauf ohne Abteilung bekommt ihn nicht."}
      </p>

      {bekannte.length > 0 ? (
        <div className="flex flex-wrap gap-x-4 gap-y-1">
          {bekannte.map((name) => (
            <label key={name} className="flex min-h-11 items-center gap-2 text-sm md:min-h-9">
              <input
                type="checkbox"
                className={KAESTCHEN}
                disabled={lesend}
                checked={kleinGewaehlt.has(name.toLocaleLowerCase("de"))}
                onChange={(ereignis) => umschalten(name, ereignis.target.checked)}
              />
              {name}
            </label>
          ))}
        </div>
      ) : null}

      {fremde.length > 0 ? (
        <ul className="flex flex-wrap gap-2">
          {fremde.map((name) => (
            <li
              key={name}
              className="inline-flex items-center gap-1 rounded-pille bg-flaeche-hoch px-2.5 py-1 text-xs"
            >
              {name}
              {lesend ? null : (
                <button
                  type="button"
                  onClick={() => umschalten(name, false)}
                  aria-label={`${name} entfernen`}
                  className="text-nebentext hover:text-fehler"
                >
                  <X className="size-3.5" strokeWidth={2} aria-hidden="true" />
                </button>
              )}
            </li>
          ))}
        </ul>
      ) : null}

      {lesend ? null : (
        <div className="flex flex-wrap items-center gap-2">
          <input
            type="text"
            value={eingabe}
            onChange={(ereignis) => setzeEingabe(ereignis.target.value)}
            onKeyDown={(ereignis) => {
              // Enter fügt hinzu, statt das Formular abzuschicken – der Editor
              // speichert über einen eigenen Knopf.
              if (ereignis.key === "Enter") {
                ereignis.preventDefault();
                hinzufuegen();
              }
            }}
            placeholder="Abteilung, die es noch nicht gibt"
            aria-label="Weitere Abteilung"
            className="min-h-11 min-w-0 flex-1 rounded-karte border border-linie bg-grund px-3 text-sm outline-none focus-visible:border-akzent md:min-h-9"
          />
          <button
            type="button"
            onClick={hinzufuegen}
            disabled={eingabe.trim() === ""}
            className="flex min-h-11 items-center gap-1.5 rounded-pille border border-linie px-3 text-sm text-nebentext hover:bg-flaeche-hoch hover:text-text disabled:opacity-40 md:min-h-9"
          >
            <Plus className="size-4" strokeWidth={1.75} aria-hidden="true" />
            hinzufügen
          </button>
        </div>
      )}
    </fieldset>
  );
}