import { useEffect, useState } from "react";

import { apiRequest } from "../../api/client";
import type { Benutzer, Objekt, Standort, Zustaendigkeit } from "../../api/types";

interface Props {
  standorte: Standort[];
  objekte: Objekt[];
  benutzer: Benutzer[];
  onFehler: (text: string) => void;
}

/** Karte 04: Standort-Zuordnung vererbt sich auf alle Objekte am Standort,
 * Objekt-Zuordnung ist feinere Ergänzung obendrauf (Vereinigung, kein Ersatz -
 * siehe backend/app/services/zustaendigkeit.py). Kein starres zentral/dezentral,
 * Administrator teilt frei zu. */
export function ZustaendigkeitSection({ standorte, objekte, benutzer, onFehler }: Props) {
  const [eintraege, setEintraege] = useState<Zustaendigkeit[]>([]);
  const [laedt, setLaedt] = useState(true);
  const [benutzerId, setBenutzerId] = useState<number | "">("");
  const [zuordnungsart, setZuordnungsart] = useState<"standort" | "objekt">("standort");
  const [standortId, setStandortId] = useState<number | "">("");
  const [objektId, setObjektId] = useState<number | "">("");
  const [wirdAngelegt, setWirdAngelegt] = useState(false);
  const [suche, setSuche] = useState("");

  async function laden() {
    setLaedt(true);
    try {
      const daten = await apiRequest<Zustaendigkeit[]>("/zustaendigkeiten");
      setEintraege(daten);
    } catch {
      onFehler("Zuständigkeiten konnten nicht geladen werden.");
    } finally {
      setLaedt(false);
    }
  }

  useEffect(() => {
    laden();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  async function anlegen() {
    if (benutzerId === "") {
      onFehler("Benutzer auswählen.");
      return;
    }
    setWirdAngelegt(true);
    try {
      await apiRequest("/zustaendigkeiten", {
        method: "POST",
        body: {
          benutzer_id: benutzerId,
          standort_id: zuordnungsart === "standort" ? standortId || null : null,
          objekt_id: zuordnungsart === "objekt" ? objektId || null : null,
        },
      });
      setStandortId("");
      setObjektId("");
      await laden();
    } catch {
      onFehler("Zuständigkeit konnte nicht angelegt werden.");
    } finally {
      setWirdAngelegt(false);
    }
  }

  async function loeschen(id: string) {
    try {
      await apiRequest(`/zustaendigkeiten/${id}`, { method: "DELETE" });
      await laden();
    } catch {
      onFehler("Zuständigkeit konnte nicht gelöscht werden.");
    }
  }

  function benutzerName(id: number): string {
    return benutzer.find((b) => b.id === id)?.name ?? `Benutzer ${id}`;
  }

  function zielLabel(e: Zustaendigkeit): string {
    if (e.standort_id !== null) {
      const s = standorte.find((x) => x.id === e.standort_id);
      return `Standort: ${s?.name ?? e.standort_id}`;
    }
    const o = objekte.find((x) => x.id === e.objekt_id);
    return `Objekt: ${o ? `${o.name} (${o.code})` : e.objekt_id}`;
  }

  const kannAnlegen =
    benutzerId !== "" && ((zuordnungsart === "standort" && standortId !== "") || (zuordnungsart === "objekt" && objektId !== ""));

  const sucheNormalisiert = suche.trim().toLowerCase();
  const gefiltert = sucheNormalisiert
    ? eintraege.filter(
        (e) =>
          benutzerName(e.benutzer_id).toLowerCase().includes(sucheNormalisiert) ||
          zielLabel(e).toLowerCase().includes(sucheNormalisiert)
      )
    : eintraege;

  return (
    <section className="section">
      <h2>Zuständigkeit</h2>
      <div className="split-layout">
        <div className="card split-layout-sidebar">
          <p className="text-muted" style={{ marginBottom: "1rem" }}>
            Wer ist materialverantwortlich für welchen Standort/welches Objekt. Standort-Zuordnung
            gilt für alle Objekte dort, Objekt-Zuordnung ist eine zusätzliche, feinere Ergänzung.
          </p>
          <div className="stack">
            <div className="field">
              <label>Benutzer</label>
              <select
                className="input"
                value={benutzerId}
                onChange={(e) => setBenutzerId(Number(e.target.value) || "")}
              >
                <option value="">Benutzer wählen…</option>
                {benutzer.map((b) => (
                  <option key={b.id} value={b.id}>
                    {b.name}
                  </option>
                ))}
              </select>
            </div>
            <div className="row">
              <label className="row" style={{ gap: "0.3rem" }}>
                <input
                  type="radio"
                  checked={zuordnungsart === "standort"}
                  onChange={() => setZuordnungsart("standort")}
                />
                Standort
              </label>
              <label className="row" style={{ gap: "0.3rem" }}>
                <input
                  type="radio"
                  checked={zuordnungsart === "objekt"}
                  onChange={() => setZuordnungsart("objekt")}
                />
                Objekt
              </label>
            </div>
            {zuordnungsart === "standort" ? (
              <div className="field">
                <label>Standort</label>
                <select
                  className="input"
                  value={standortId}
                  onChange={(e) => setStandortId(Number(e.target.value) || "")}
                >
                  <option value="">Standort wählen…</option>
                  {standorte.map((s) => (
                    <option key={s.id} value={s.id}>
                      {s.name}
                    </option>
                  ))}
                </select>
              </div>
            ) : (
              <div className="field">
                <label>Objekt</label>
                <select
                  className="input"
                  value={objektId}
                  onChange={(e) => setObjektId(Number(e.target.value) || "")}
                >
                  <option value="">Objekt wählen…</option>
                  {objekte.map((o) => (
                    <option key={o.id} value={o.id}>
                      {o.name} ({o.code})
                    </option>
                  ))}
                </select>
              </div>
            )}
            <button className="btn btn-primary" onClick={anlegen} disabled={!kannAnlegen || wirdAngelegt}>
              Zuordnen
            </button>
          </div>
        </div>

        <div className="split-layout-content">
          <input
            className="input input-search"
            style={{ marginBottom: "1rem" }}
            placeholder={`Suche in ${eintraege.length} Zuständigkeiten…`}
            value={suche}
            onChange={(e) => setSuche(e.target.value)}
          />
          {laedt && <p className="text-muted">Lade…</p>}
          {!laedt && gefiltert.length === 0 && <p className="text-muted">Keine Treffer.</p>}
          {!laedt && gefiltert.length > 0 && (
            <ul className="card-list">
              {gefiltert.map((e) => (
                <li key={e.id} className="card row-between" style={{ padding: "0.6rem 1rem" }}>
                  <span>
                    {benutzerName(e.benutzer_id)} <span className="text-muted">→</span> {zielLabel(e)}
                  </span>
                  <button className="btn btn-secondary" onClick={() => loeschen(e.id)}>
                    Entfernen
                  </button>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </section>
  );
}