Vorrania/web/src/components/Zubehoer.jsx

import { useEffect, useState } from "react";
import { api } from "../api";
import Icon from "./Icon";
import { useConfirm } from "../confirm";

/**
 * Zubehör eines Einzelstücks: das Netzteil, das zum Laptop gehört.
 *
 * Ein Teil hängt an genau einem Gerät, ein Gerät trägt beliebig viele Teile.
 * Die Zuordnung läuft über eigene Endpunkte und nicht über `updateItem` – dessen
 * Schema sendet immer alle Felder mit, ein vergessenes Feld würde die Beziehung
 * still kappen.
 */
export default function Zubehoer({ item, isAdmin, onChanged, onError }) {
  const confirm = useConfirm();
  const [alle, setAlle] = useState(null);
  const [waehlen, setWaehlen] = useState(false);
  const [suche, setSuche] = useState("");
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    if (!waehlen || alle != null) return;
    api.listAllItems().then(setAlle).catch((err) => onError(err.message));
  }, [waehlen, alle, onError]);

  async function zuordnen(teil) {
    setBusy(true);
    try {
      await api.zubehoerZuordnen(item.id, teil.id);
      setWaehlen(false);
      setSuche("");
      setAlle(null);           // nach dem Umhängen stimmen die Zuordnungen nicht mehr
      if (onChanged) await onChanged();
    } catch (err) { onError(err.message); } finally { setBusy(false); }
  }

  async function loesen(teil) {
    const ok = await confirm({
      title: `„${teil.uid}“ vom Gerät lösen?`,
      message: "Das Einzelstück bleibt bestehen, es gehört danach nur zu nichts mehr.",
      confirmLabel: "Lösen",
    });
    if (!ok) return;
    setBusy(true);
    try {
      await api.zubehoerLoesen(item.id, teil.id);
      setAlle(null);
      if (onChanged) await onChanged();
    } catch (err) { onError(err.message); } finally { setBusy(false); }
  }

  const teile = item.zubehoer || [];
  // Weder sich selbst noch die eigenen Teile erneut anbieten. Ringe über mehrere
  // Stufen weist der Server ab – hier geht es nur darum, Unsinn gar nicht erst
  // zur Auswahl zu stellen.
  const kandidaten = (alle || []).filter((k) => {
    if (k.id === item.id) return false;
    if (k.gehoert_zu && k.gehoert_zu.id === item.id) return false;
    const q = suche.trim().toLowerCase();
    if (!q) return true;
    return [k.uid, k.product_name, k.product_brand, k.note]
      .filter(Boolean).join(" ").toLowerCase().includes(q);
  });

  return (
    <div>
      <span className="muted small">Zubehör</span>

      {item.gehoert_zu && (
        <p className="muted small" style={{ marginTop: "var(--sp-1)" }}>
          Gehört zu <a href={`/i/${item.gehoert_zu.uid}`}>
            {item.gehoert_zu.product_name || "Einzelstück"} ({item.gehoert_zu.uid})
          </a>
        </p>
      )}

      {teile.length === 0 && !item.gehoert_zu && (
        <p className="muted small" style={{ marginTop: "var(--sp-1)" }}>Kein Zubehör.</p>
      )}

      {teile.length > 0 && (
        <ul className="clean-list" style={{ marginTop: "var(--sp-2)" }}>
          {teile.map((t) => (
            <li key={t.id} className="cell-row" style={{ gap: "var(--sp-2)" }}>
              <span>{t.product_name || "Einzelstück"}</span>
              <span className="muted small">{t.uid}</span>
              {t.verliehen && <span className="badge warn">verliehen</span>}
              {isAdmin && (
                <button type="button" className="btn-icon danger" disabled={busy}
                  onClick={() => loesen(t)} aria-label={`„${t.uid}“ vom Gerät lösen`}
                  title="Vom Gerät lösen">
                  <Icon name="close" size={14} />
                </button>
              )}
            </li>
          ))}
        </ul>
      )}

      {isAdmin && !waehlen && (
        <button type="button" className="btn sm ghost" style={{ marginTop: "var(--sp-2)" }}
          onClick={() => setWaehlen(true)}>
          <Icon name="plus" size={14} />Zubehör hinzufügen
        </button>
      )}

      {isAdmin && waehlen && (
        <div className="card-sub" style={{ marginTop: "var(--sp-2)" }}>
          <div className="cell-row" style={{ gap: "var(--sp-2)" }}>
            <input autoFocus value={suche} placeholder="UID oder Artikelname"
              onChange={(e) => setSuche(e.target.value)} />
            <button type="button" className="btn-icon" title="Abbrechen"
              onClick={() => { setWaehlen(false); setSuche(""); }}>
              <Icon name="close" size={16} />
            </button>
          </div>
          {alle == null && <span className="muted small">Wird geladen…</span>}
          {alle != null && kandidaten.length === 0 && (
            <span className="muted small">Nichts gefunden.</span>
          )}
          <ul className="clean-list">
            {kandidaten.slice(0, 25).map((k) => (
              <li key={k.id}>
                <button type="button" className="btn sm ghost" disabled={busy}
                  onClick={() => zuordnen(k)}>
                  {k.product_name || "Einzelstück"} <span className="muted">{k.uid}</span>
                  {k.gehoert_zu && (
                    <span className="muted small"> · hängt an {k.gehoert_zu.uid}</span>
                  )}
                </button>
              </li>
            ))}
          </ul>
          {alle != null && kandidaten.length > 25 && (
            <span className="muted small">
              {kandidaten.length - 25} weitere – bitte genauer suchen.
            </span>
          )}
        </div>
      )}
    </div>
  );
}