/* global React, ReactDOM, SEED_CLASSES, SEED_TRAINERS, SEED_CLASS_PLAYERS, DEFAULT_INVENTORY, TEAM_LETTERS, COLOR_PALETTE, generateMixPlan, generateFixedPlan, generateTournamentPlan, loadState, saveState, Icon, LoginScreen, PlayerPool, Teams, Settings, MatrixView, HistoryView, AdminArea, LagerPage, useTweaks, TweaksPanel, TweakSection, TweakRadio */
const { useState, useEffect, useMemo, useRef } = React;

const DEFAULT_SETTINGS = {
  mode: "mix",
  mixDriver: "fields",
  playerCount: 16,
  fields: 2,
  rounds: 8,
  minutes: 7,
  teamSize: 3,
};
const DEFAULT_TOURNAMENT_GROUPS = [
  { name: "Gruppe 1", teamCount: 4 },
  { name: "Gruppe 2", teamCount: 4 },
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "logoPos": "header"
}/*EDITMODE-END*/;

function makeClassData(classId) {
  const names = SEED_CLASS_PLAYERS[classId] || [];
  const players = names.map((n, i) => ({
    id: "p_" + classId + "_" + i,
    name: n,
    teamId: null,
    stars: 2 + ((i * 7 + classId.length) % 4),
    active: true,
  }));
  const teamCount = 6;
  const teams = Array.from({ length: teamCount }, (_, i) => ({
    id: "t_" + classId + "_" + i,
    letter: TEAM_LETTERS[i],
    name: "Mannschaft " + TEAM_LETTERS[i],
    color: COLOR_PALETTE[i % COLOR_PALETTE.length],
    playerIds: [],
  }));
  players.forEach((p, i) => { teams[i % teamCount].playerIds.push(p.id); });
  return {
    players,
    teams,
    settings: { ...DEFAULT_SETTINGS, playerCount: players.length || 16 },
    tournamentGroups: DEFAULT_TOURNAMENT_GROUPS.map(g => ({ ...g })),
    inventory: DEFAULT_INVENTORY.map(it => ({ ...it })),
    yearPlan: { guests: [], sessions: [] },
    einheiten: EINHEIT_SUGGESTIONS.slice(),
    features: { matrix: true, history: true, jahresplan: true, lager: true },
  };
}

function buildSeedState() {
  const classData = {};
  SEED_CLASSES.forEach(c => { classData[c.id] = makeClassData(c.id); });
  return {
    admin: { classes: SEED_CLASSES.map(c => ({ ...c })), trainers: SEED_TRAINERS.map(t => ({ ...t, classIds: [...t.classIds] })) },
    classData,
    plan: {},
    tournamentPlan: {},
    session: null,
  };
}

function App() {
  // ─── API-gestütztes State-Loading ────────────────────────────────────────
  const [_appReady, _setAppReady] = useState(false);
  const _saveTimer = useRef(null);

  // Initialer Zustand ist leer – wird per API befüllt
  const [admin, setAdmin] = useState({ classes: [], trainers: [] });
  const [classData, setClassData] = useState({});
  const [plan, setPlan] = useState({});
  const [tournamentPlan, setTournamentPlan] = useState({});
  const [session, setSession] = useState(null);
  const [page, setPage] = useState("pool");
  const [toast, setToast] = useState(null);
  const [classMenuOpen, setClassMenuOpen] = useState(false);
  const [mobileMenu, setMobileMenu] = useState(false);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme === "dark" ? "dark" : tweaks.theme === "light-blue" ? "light-blue" : "");
    document.documentElement.setAttribute("data-logo-pos", tweaks.logoPos || "header");
  }, [tweaks.theme, tweaks.logoPos]);

  // Zustand beim Start von der API (MySQL) laden
  useEffect(() => {
    fetch('/api/state')
      .then(r => r.json())
      .then(state => {
        if (state.admin && state.admin.trainers && state.admin.trainers.length > 0) {
          setAdmin(state.admin);
          setClassData(state.classData || {});
          setPlan(state.plan || {});
          setTournamentPlan(state.tournamentPlan || {});
          if (state.session) setSession(state.session);
        }
        _setAppReady(true);
      })
      .catch(err => {
        console.error('Fehler beim Laden des App-Zustands:', err);
        _setAppReady(true);
      });
  }, []); // einmalig beim Mount

  // Zustand bei Änderungen in MySQL speichern (debounced, 800 ms)
  useEffect(() => {
    if (!_appReady) return;
    clearTimeout(_saveTimer.current);
    _saveTimer.current = setTimeout(() => {
      fetch('/api/state', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ admin, classData, plan, tournamentPlan }),
      }).catch(err => console.error('Fehler beim Speichern:', err));
    }, 800);
  }, [_appReady, admin, classData, plan, tournamentPlan]);

  const showToast = (msg) => { setToast(msg); setTimeout(() => setToast(null), 2200); };

  // Derived current context
  const trainer = session ? admin.trainers.find(t => t.id === session.trainerId) : null;
  const classId = session ? session.classId : null;
  const cls = classId ? admin.classes.find(c => c.id === classId) : null;
  const mode = (classId && classData[classId]?.settings?.mode) || "mix";

  // ---- redirect guards (declared before early return for stable hook order) ----
  useEffect(() => {
    if (page === "teams" && mode !== "fixed") setPage("settings");
  }, [page, mode]);
  useEffect(() => {
    if (page === "admin" && trainer && !trainer.admin) setPage("pool");
  }, [page, trainer]);
  useEffect(() => {
    const f = (classId && classData[classId] && classData[classId].features) || {};
    if (["matrix", "history", "jahresplan", "lager"].includes(page) && f[page] === false) setPage("pool");
  }, [page, classId, classData]);

  // ===== Ladebildschirm =====
  if (!_appReady) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', flexDirection: 'column', gap: 16, background: 'var(--surface)' }}>
        <img src="assets/admira-logo.webp" style={{ width: 64, height: 64, opacity: 0.6 }} alt="" />
        <div style={{ fontSize: 14, color: 'var(--text-muted)', fontWeight: 500 }}>Ballo Ballone lädt…</div>
      </div>
    );
  }

  // ===== Login / session invalid =====
  if (!session || !trainer || ((!cls || !classData[classId]) && !(trainer.admin && !classId))) {
    const totalPlayers = Object.values(classData).reduce((s, cd) => s + ((cd && cd.players ? cd.players.length : 0)), 0);
    return (
      <LoginScreen
        trainers={admin.trainers}
        classes={admin.classes}
        totalPlayers={totalPlayers}
        onLogin={(trainerId, cid) => {
          if (cid) {
            fetch('/api/auth/class', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ classId: cid }),
            }).catch(console.error);
          }
          setSession({ trainerId, classId: cid });
          setPage(cid ? "pool" : "admin");
          showToast("Willkommen!");
        }}
      />
    );
  }

  // ===== Admin handlers =====
  const onAddClass = (name) => {
    const id = "c_" + Date.now();
    setAdmin({ ...admin, classes: [...admin.classes, { id, name }] });
    setClassData({ ...classData, [id]: makeClassData(id) });
  };
  const onRenameClass = (id, name) => setAdmin({ ...admin, classes: admin.classes.map(c => c.id === id ? { ...c, name } : c) });
  const onDeleteClass = (id) => {
    const newClasses = admin.classes.filter(c => c.id !== id);
    const newTrainers = admin.trainers.map(t => ({ ...t, classIds: (t.classIds || []).filter(x => x !== id) }));
    const newCD = { ...classData }; delete newCD[id];
    setAdmin({ classes: newClasses, trainers: newTrainers });
    setClassData(newCD);
    if (classId === id) {
      const fallback = (trainer.classIds || []).filter(x => x !== id)[0];
      if (fallback) setSession({ trainerId: trainer.id, classId: fallback });
      else setSession(null);
    }
  };
  const onAddTrainer = (t) => setAdmin({ ...admin, trainers: [...admin.trainers, { ...t, id: "tr_" + Date.now() }] });
  const onUpdateTrainer = (id, patch) => setAdmin({ ...admin, trainers: admin.trainers.map(t => t.id === id ? { ...t, ...patch } : t) });
  const onDeleteTrainer = (id) => {
    setAdmin({ ...admin, trainers: admin.trainers.filter(t => t.id !== id) });
    if (trainer.id === id) setSession(null);
  };
  const onInventoryChange = (cid, items) => setClassData({ ...classData, [cid]: { ...classData[cid], inventory: items } });
  const onToggleFeature = (cid, key) => {
    const cur = classData[cid] || {};
    const features = { ...(cur.features || { matrix: true, history: true, jahresplan: true, lager: true }) };
    features[key] = !features[key];
    setClassData({ ...classData, [cid]: { ...cur, features } });
  };
  const onSetPoolMode = (cid, modeVal) => {
    const cur = classData[cid] || {};
    setClassData({ ...classData, [cid]: { ...cur, poolMode: modeVal } });
  };

  // ===== Admin ohne zugewiesene Spielklasse =====
  if (trainer.admin && !classId) {
    return (
      <div className="app-shell">
        <aside className="sidebar">
          <div className="sidebar-brand">
            <img src="assets/admira-logo.webp" alt="" />
            <div className="sidebar-brand-text">
              <span className="t1">SC Admira Dornbirn</span>
              <span className="t2">Ballo Ballone</span>
            </div>
          </div>
          <div className="sidebar-footer">
            <button className="nav-item" onClick={() => { fetch('/api/auth/logout', { method: 'POST' }).catch(console.error); setSession(null); setPage("pool"); }}>
              <span className="nav-icon"><Icon.Logout /></span>
              Abmelden
            </button>
          </div>
        </aside>
        <main className="main">
          <AdminArea
            classes={admin.classes}
            trainers={admin.trainers}
            classData={classData}
            onAddClass={onAddClass}
            onRenameClass={onRenameClass}
            onDeleteClass={onDeleteClass}
            onAddTrainer={onAddTrainer}
            onUpdateTrainer={onUpdateTrainer}
            onDeleteTrainer={onDeleteTrainer}
            onInventoryChange={onInventoryChange}
            onToggleFeature={onToggleFeature}
            onSetPoolMode={onSetPoolMode}
          />
        </main>
      </div>
    );
  }

  const data = classData[classId];
  if (!data.tournamentGroups) data.tournamentGroups = DEFAULT_TOURNAMENT_GROUPS.map(g => ({ ...g }));
  if (!data.inventory) data.inventory = DEFAULT_INVENTORY.map(it => ({ ...it }));
  if (!data.yearPlan) data.yearPlan = { guests: [], sessions: [] };
  if (!data.einheiten) data.einheiten = (window.EINHEIT_SUGGESTIONS || []).slice();
  if (!data.features) data.features = { matrix: true, history: true, jahresplan: true, lager: true };
  if (!data.inventoryLog) data.inventoryLog = [];
  if (!data.poolMode) data.poolMode = "erweitert";
  if (!data.settings.mode) data.settings.mode = "mix";

  const patchClass = (patch) => setClassData({ ...classData, [classId]: { ...data, ...patch } });
  const players = data.players;
  const teams = data.teams;
  const settings = data.settings;
  const tournamentGroups = data.tournamentGroups;

  const setPlayers = (next) => {
    const activeCount = next.filter(p => p.active !== false).length;
    patchClass({ players: next, settings: { ...settings, playerCount: Math.max(activeCount, 1) } });
  };
  const setTeams = (next) => patchClass({ teams: next });
  const setSettings = (next) => patchClass({ settings: next });
  const setTournamentGroups = (next) => patchClass({ tournamentGroups: next });
  const setInventory = (next) => patchClass({ inventory: next });
  const setInventur = (snapshot) => {
    const snapItems = (snapshot || data.inventory || []).map(it => ({ name: it.name, count: it.count || 0 }));
    const total = snapItems.reduce((s, it) => s + (it.count || 0), 0);
    const now = new Date();
    const entry = { id: "iv_" + now.getTime(), date: now.toISOString(), by: trainer.name, items: snapItems, total };
    patchClass({ inventoryDate: now.toISOString().slice(0, 10), inventoryLog: [...(data.inventoryLog || []), entry] });
  };
  const setYearPlan = (next) => patchClass({ yearPlan: next });
  const setEinheiten = (next) => patchClass({ einheiten: next });
  // Trainers assigned to this class (for the Jahresplan columns)
  const classTrainers = admin.trainers.filter(t => (t.classIds || []).includes(classId));

  const onAssign = (playerId, teamId) => {
    const next = teams.map(t => ({ ...t, playerIds: t.playerIds.filter(id => id !== playerId) }));
    if (teamId) {
      const idx = next.findIndex(t => t.id === teamId);
      if (idx >= 0) next[idx].playerIds.push(playerId);
    }
    setTeams(next);
  };

  const onGenerate = () => {
    const m = settings.mode || "mix";
    if (m === "tournament") {
      let cursor = 0;
      const groups = tournamentGroups.map((g, gi) => {
        const slice = teams.slice(cursor, cursor + g.teamCount);
        cursor += g.teamCount;
        while (slice.length < g.teamCount) {
          const idx = slice.length + (gi * 10);
          slice.push({ id: "phantom_" + gi + "_" + slice.length, letter: TEAM_LETTERS[idx % TEAM_LETTERS.length], name: "Mannschaft " + TEAM_LETTERS[idx % TEAM_LETTERS.length], color: COLOR_PALETTE[idx % COLOR_PALETTE.length] });
        }
        return { name: g.name, teams: slice };
      });
      const tp = generateTournamentPlan({ groups, rounds: settings.rounds, fields: settings.fields });
      setTournamentPlan({ ...tournamentPlan, [classId]: tp });
      setPlan({ ...plan, [classId]: [] });
      setPage("matrix");
      showToast("Turnierplan erstellt!");
      return;
    }
    const activePlayers = players.filter(p => p.active !== false);
    const ordered = [];
    teams.forEach(t => t.playerIds.forEach(pid => { const p = activePlayers.find(x => x.id === pid); if (p) ordered.push(p); }));
    activePlayers.forEach(p => { if (!ordered.find(x => x.id === p.id)) ordered.push(p); });
    const finalPlayers = ordered.slice(0, settings.playerCount);
    while (finalPlayers.length < settings.playerCount) finalPlayers.push({ id: "ph_" + finalPlayers.length, name: "" });
    // Fixed mode: Anzahl Mannschaften = playerCount ÷ Teamgröße (matches the Plan-erstellen display)
    const fixedTeamCount = settings.teamSize > 0 ? Math.max(1, Math.floor(settings.playerCount / settings.teamSize)) : teams.length;
    const params = { playerCount: settings.playerCount, fields: settings.fields, rounds: settings.rounds, players: finalPlayers, teamSize: settings.teamSize, mixDriver: settings.mixDriver || "fields", teams, teamCount: fixedTeamCount };
    const generated = m === "mix" ? generateMixPlan(params) : generateFixedPlan(params);
    setPlan({ ...plan, [classId]: generated });
    setTournamentPlan({ ...tournamentPlan, [classId]: [] });
    setPage("matrix");
    showToast("Plan erstellt!");
  };

  const myPlan = plan[classId] || [];
  const myTournamentPlan = tournamentPlan[classId] || [];

  const feat = data.features || { matrix: true, history: true, jahresplan: true, lager: true };

  const logout = () => {
    fetch('/api/auth/logout', { method: 'POST' }).catch(console.error);
    setSession(null);
    setPage("pool");
  };

  const navItems = [
    { id: "pool", label: "Spielerpool", icon: <Icon.Users /> },
    { id: "settings", label: "Plan erstellen", icon: <Icon.Sparkles /> },
    ...(mode === "fixed" ? [{ id: "teams", label: "Mannschaften", icon: <Icon.Shield /> }] : []),
    ...(feat.matrix ? [{ id: "matrix", label: "Matrixplan", icon: <Icon.Grid /> }] : []),
    ...(feat.history ? [{ id: "history", label: "Historie", icon: <Icon.History /> }] : []),
    ...(feat.jahresplan ? [{ id: "jahresplan", label: "Jahresplan", icon: <Icon.Calendar /> }] : []),
    ...(feat.lager ? [{ id: "lager", label: "Trainingsutensilien", icon: <Icon.Box /> }] : []),
    ...(trainer.admin ? [{ id: "admin", label: "Administration", icon: <Icon.Cog /> }] : []),
  ];
  const mobileItems = navItems.slice(0, 5);
  const initials = trainer.name.split(" ").map(s => s[0]).slice(0, 2).join("");

  return (
    <div className="app-shell">
      <aside className="sidebar">
        <div className="sidebar-brand">
          <img src="assets/admira-logo.webp" alt="" />
          <div className="sidebar-brand-text">
            <span className="t1">SC Admira Dornbirn</span>
            <span className="t2">Ballo Ballone</span>
          </div>
        </div>
        {(() => {
          const myClasses = (trainer.classIds || []).map(id => admin.classes.find(c => c.id === id)).filter(Boolean);
          const canSwitch = myClasses.length > 1;
          return (
            <div style={{ position: "relative", marginBottom: 12 }}>
              <button
                className={"class-switch" + (canSwitch ? " switchable" : "")}
                style={{ width: "100%", marginBottom: 0, cursor: canSwitch ? "pointer" : "default" }}
                onClick={() => canSwitch && setClassMenuOpen(o => !o)}
                title={canSwitch ? "Spielklasse wechseln" : "Du betreust nur diese Spielklasse"}
              >
                <span className="class-badge">{cls.name}</span>
                <div style={{ flex: 1, minWidth: 0, textAlign: "left" }}>
                  <div className="text-xs muted">Aktive Spielklasse{canSwitch ? " · wechseln" : ""}</div>
                  <div className="fw-700 text-sm">{cls.name}</div>
                </div>
                {canSwitch && (
                  <span style={{ color: "var(--text-muted)", transition: "transform 0.15s", transform: classMenuOpen ? "rotate(180deg)" : "none" }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
                  </span>
                )}
              </button>
              {canSwitch && classMenuOpen && (
                <div className="class-menu">
                  {myClasses.map(c => (
                    <button
                      key={c.id}
                      className={"class-menu-item" + (c.id === classId ? " active" : "")}
                      onClick={() => {
                        setClassMenuOpen(false);
                        if (c.id !== classId) {
                          fetch('/api/auth/class', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({ classId: c.id }),
                          }).catch(console.error);
                          setSession({ trainerId: trainer.id, classId: c.id });
                          showToast("Spielklasse " + c.name);
                        }
                      }}
                    >
                      <span className="class-badge" style={{ minWidth: 34, height: 24, fontSize: 12 }}>{c.name}</span>
                      <span className="flex-1" style={{ textAlign: "left" }}>Spielklasse {c.name}</span>
                      {c.id === classId && <span style={{ color: "var(--primary)" }}><Icon.Check /></span>}
                    </button>
                  ))}
                </div>
              )}
            </div>
          );
        })()}
        {(() => {
          let divPlaced = false;
          return navItems.map(item => {
            const showDiv = !divPlaced && (item.id === "jahresplan" || item.id === "lager");
            if (showDiv) divPlaced = true;
            return (
              <React.Fragment key={item.id}>
                {showDiv && <div className="nav-divider" />}
                <button className={"nav-item" + (page === item.id ? " active" : "")} onClick={() => setPage(item.id)}>
                  <span className="nav-icon">{item.icon}</span>
                  {item.label}
                </button>
              </React.Fragment>
            );
          });
        })()}
        <div className="sidebar-footer">
          <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px" }}>
            <div className="profile-avatar" style={{ width: 32, height: 32, fontSize: 12 }}>{initials}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="fw-600 text-sm" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{trainer.name}</div>
              <div className="text-xs muted">{trainer.admin ? "Trainer · Admin" : "Trainer"}</div>
            </div>
          </div>
          <button className="nav-item" onClick={logout}>
            <span className="nav-icon"><Icon.Logout /></span>
            Abmelden
          </button>
        </div>
      </aside>

      <header className="mobile-topbar">
        <img src="assets/admira-logo.webp" alt="" />
        <h1>Ballo Ballone</h1>
        <span className="class-badge" style={{ marginRight: 6 }}>{cls.name}</span>
        <button
          className="profile-avatar"
          style={{ width: 36, height: 36, fontSize: 12, border: "none" }}
          onClick={() => setMobileMenu(v => !v)}
          aria-label="Menü"
        >{initials}</button>
      </header>

      {mobileMenu && (
        <>
          <div className="mobile-menu-backdrop" onClick={() => setMobileMenu(false)} />
          <div className="mobile-menu">
            <div className="mobile-menu-head">
              <div className="profile-avatar" style={{ width: 38, height: 38, fontSize: 13 }}>{initials}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="fw-700 text-sm">{trainer.name}</div>
                <div className="text-xs muted">{trainer.admin ? "Trainer · Admin" : "Trainer"} · Klasse {cls.name}</div>
              </div>
            </div>
            {(() => {
              let divPlaced = false;
              return navItems.map(item => {
                const showDiv = !divPlaced && (item.id === "jahresplan" || item.id === "lager");
                if (showDiv) divPlaced = true;
                return (
                  <React.Fragment key={item.id}>
                    {showDiv && <div className="nav-divider" />}
                    <button className={"nav-item" + (page === item.id ? " active" : "")} onClick={() => { setPage(item.id); setMobileMenu(false); }}>
                      <span className="nav-icon">{item.icon}</span>
                      {item.label}
                    </button>
                  </React.Fragment>
                );
              });
            })()}
            <div style={{ borderTop: "1px solid var(--border)", marginTop: 6, paddingTop: 6 }}>
              <button className="nav-item" onClick={() => { setMobileMenu(false); logout(); }}>
                <span className="nav-icon"><Icon.Logout /></span>
                Abmelden
              </button>
            </div>
          </div>
        </>
      )}

      <main className="main">
        {page === "pool" && <PlayerPool players={players} setPlayers={setPlayers} teams={teams} onAssign={onAssign} poolMode={data.poolMode} />}
        {page === "settings" && <Settings settings={settings} setSettings={setSettings} players={players} teams={teams} tournamentGroups={tournamentGroups} setTournamentGroups={setTournamentGroups} onGenerate={onGenerate} />}
        {page === "teams" && <Teams players={players} teams={teams} setTeams={setTeams} onAssign={onAssign} poolMode={data.poolMode} />}
        {page === "matrix" && <MatrixView plan={myPlan} tournamentPlan={myTournamentPlan} tournamentGroups={tournamentGroups} settings={settings} teams={teams} players={players} />}
        {page === "history" && <HistoryView plan={myPlan} players={players} mode={mode} />}
        {page === "jahresplan" && <JahresplanPage className={cls.name} yearPlan={data.yearPlan} onChange={setYearPlan} trainers={classTrainers} einheiten={data.einheiten} onEinheitenChange={setEinheiten} players={players} />}
        {page === "lager" && <LagerPage className={cls.name} items={data.inventory} onChange={setInventory} isAdmin={trainer.admin || trainer.inventoryAdmin} lastInventory={data.inventoryDate} onInventur={setInventur} history={data.inventoryLog || []} />}
        {page === "admin" && trainer.admin && (
          <AdminArea
            classes={admin.classes}
            trainers={admin.trainers}
            classData={classData}
            onAddClass={onAddClass}
            onRenameClass={onRenameClass}
            onDeleteClass={onDeleteClass}
            onAddTrainer={onAddTrainer}
            onUpdateTrainer={onUpdateTrainer}
            onDeleteTrainer={onDeleteTrainer}
            onInventoryChange={onInventoryChange}
            onToggleFeature={onToggleFeature}
            onSetPoolMode={onSetPoolMode}
          />
        )}
      </main>

      <nav className="mobile-tabs">
        {mobileItems.map(item => (
          <button key={item.id} className={"mobile-tab" + (page === item.id ? " active" : "")} onClick={() => setPage(item.id)}>
            {item.icon}
            <span>{item.label.split(" ")[0]}</span>
          </button>
        ))}
      </nav>

      {toast && <div className="toast">{toast}</div>}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Erscheinungsbild">
          <TweakRadio label="Farbschema" value={tweaks.theme} onChange={(v) => setTweak("theme", v)} options={[{ value: "light", label: "Hell" }, { value: "light-blue", label: "Blau" }, { value: "dark", label: "Dark" }]} />
          <TweakRadio label="Logo-Position" value={tweaks.logoPos} onChange={(v) => setTweak("logoPos", v)} options={[{ value: "header", label: "Header" }, { value: "floating", label: "Groß" }, { value: "hidden", label: "Aus" }]} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);