/* ==========================================================================
   ÜBUNGEN: öffentlicher, lokaler ExerciseDB-Katalog.
   Die eigentliche Katalogansicht wird mit der Auswahl im Split geteilt, damit
   Suche, Filter und Karten dieselbe Sprache und dieselben Designregeln haben.
   ========================================================================== */

function UebungenPage() {
  const [daten, setDaten] = useState(null);
  const [fehler, setFehler] = useState("");

  useEffect(() => {
    let aktiv = true;
    BB.get("/uebungen")
      .then((d) => { if (aktiv) { setDaten(d); setFehler(""); } })
      .catch((err) => { if (aktiv) setFehler(err.message || BB.t("Das hat nicht geklappt.")); });
    return () => { aktiv = false; };
  }, []);

  const labelFuer = useCallback((id) => {
    const muskel = (daten && daten.muskeln || []).find((item) => item.id === id);
    return muskel ? BB.t(muskel.label) : id;
  }, [daten]);

  return (
    <div className="wrap section stack exercises-view" style={{ gap: "2rem" }}>
      <header className="section-head">
        <div className="eyebrow">{BB.t("Trainingsbibliothek")}</div>
        <h1>{BB.t("Übungen")}</h1>
        <p className="lede">
          {BB.t("Durchsuche Übungen nach Körperpartie und Gerät. Die Angaben stammen aus dem ExerciseDB-Katalog.")}
        </p>
      </header>

      {fehler && <div className="panel"><p className="an-error">{fehler}</p></div>}
      {!daten && !fehler && <div className="panel"><Spinner /></div>}
      {daten && (
        <section className="panel exercises-catalog-panel">
          <ExerciseCatalog
            embedded
            auswahl={false}
            uebungen={daten.uebungen || []}
            labelFuer={labelFuer}
          />
        </section>
      )}
    </div>
  );
}

Object.assign(window, { UebungenPage });