import { useEffect, useState } from "react";

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

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

/** Karte 01 / Sprintplan E3: reine Sichtbarkeit/Priorisierung ("wer soll dieses
 * Objekt kontrollieren"), erzwingt keine Pflichtkontrolle - entweder ein
 * konkreter Benutzer oder eine Gruppe (Freitext, z.B. "Frühschicht"). */
export function KontrollverantwortungSection({ objekte, benutzer, onFehler }: Props) {
  const [eintraege, setEintraege] = useState<Kontrollverantwortung[]>([]);
  const [laedt, setLaedt] = useState(true);
  const [objektId, setObjektId] = useState<number | "">("");
  const [zuordnungsart, setZuordnungsart] = useState<"benutzer" | "gruppe">("benutzer");
  const [benutzerId, setBenutzerId] = useState<number | "">("");
  const [gruppe, setGruppe] = useState("");
  const [wirdAngelegt, setWirdAngelegt] = useState(false);

  async function laden() {
    setLaedt(true);
    try {
      const daten = await apiRequest<Kontrollverantwortung[]>("/kontrollverantwortung");
      setEintraege(daten);
    } catch {
      onFehler("Kontrollverantwortung konnte nicht geladen werden.");
    } finally {
      setLaedt(false);
    }
  }

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

  async function anlegen() {
    if (objektId === "") {
      onFehler("Objekt auswählen.");
      return;
    }
    setWirdAngelegt(true);
    try {
      await apiRequest("/kontrollverantwortung", {
        method: "POST",
        body: {
          objekt_id: objektId,
          benutzer_id: zuordnungsart === "benutzer" ? benutzerId || null : null,
          gruppe: zuordnungsart === "gruppe" ? gruppe : null,
        },
      });
      setObjektId("");
      setBenutzerId("");
      setGruppe("");
      await laden();
    } catch {
      onFehler("Kontrollverantwortung konnte nicht angelegt werden.");
    } finally {
      setWirdAngelegt(false);
    }
  }

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

  function objektLabel(id: number): string {
    const o = objekte.find((x) => x.id === id);
    return o ? `${o.name} (${o.code})` : `Objekt ${id}`;
  }

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

  const kannAnlegen =
    objektId !== "" && ((zuordnungsart === "benutzer" && benutzerId !== "") || (zuordnungsart === "gruppe" && gruppe));

  return (
    <section className="section">
      <h2>Kontrollverantwortung</h2>
      <div className="card">
        <p className="text-muted" style={{ marginBottom: "1rem" }}>
          Wer soll dieses Objekt kontrollieren - reine Sichtbarkeit/Priorisierung, keine
          Pflichtkontrolle.
        </p>
        <div className="stack">
          <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>
          <div className="row">
            <label className="row" style={{ gap: "0.3rem" }}>
              <input
                type="radio"
                checked={zuordnungsart === "benutzer"}
                onChange={() => setZuordnungsart("benutzer")}
              />
              Benutzer
            </label>
            <label className="row" style={{ gap: "0.3rem" }}>
              <input
                type="radio"
                checked={zuordnungsart === "gruppe"}
                onChange={() => setZuordnungsart("gruppe")}
              />
              Gruppe
            </label>
          </div>
          {zuordnungsart === "benutzer" ? (
            <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="field">
              <label>Gruppe</label>
              <input
                className="input"
                value={gruppe}
                onChange={(e) => setGruppe(e.target.value)}
                placeholder="z. B. Frühschicht"
              />
            </div>
          )}
          <button className="btn btn-primary" onClick={anlegen} disabled={!kannAnlegen || wirdAngelegt}>
            Zuordnen
          </button>
        </div>

        {laedt && <p className="text-muted" style={{ marginTop: "1rem" }}>Lade…</p>}
        {!laedt && eintraege.length === 0 && (
          <p className="text-muted" style={{ marginTop: "1rem" }}>Keine Zuordnungen.</p>
        )}
        {!laedt && eintraege.length > 0 && (
          <ul className="card-list" style={{ marginTop: "1.25rem" }}>
            {eintraege.map((e) => (
              <li key={e.id} className="row-between" style={{ padding: "0.4rem 0" }}>
                <span>
                  {objektLabel(e.objekt_id)} <span className="text-muted">→</span>{" "}
                  {benutzerLabel(e.benutzer_id) ?? e.gruppe}
                </span>
                <button className="btn btn-secondary" onClick={() => loeschen(e.id)}>
                  Entfernen
                </button>
              </li>
            ))}
          </ul>
        )}
      </div>
    </section>
  );
}