// Tweaks panel for feinplaner site.
// Mounted globally so the user can toggle photo-slot visibility from any page.

function FeinTweaks() {
  const [t, setTweak] = useTweaks(window.__tweaks || { showSlotsForEmpty: true, extraSlots: 1 });

  // Apply state to body data attrs so CSS can react.
  React.useEffect(() => {
    document.body.dataset.showslots = t.showSlotsForEmpty ? '1' : '0';
    document.body.dataset.extraslots = String(t.extraSlots ?? 0);
  }, [t.showSlotsForEmpty, t.extraSlots]);

  return (
    <TweaksPanel title="Tweaks · Fotos">
      <TweakSection label="Galerie">
        <TweakToggle
          label="Drop-Zonen für leere Plätze"
          value={!!t.showSlotsForEmpty}
          onChange={(v) => setTweak('showSlotsForEmpty', v)}
        />
        <TweakSlider
          label="Zusätzliche Slots am Ende"
          value={t.extraSlots ?? 0}
          min={0} max={4} step={1}
          onChange={(v) => setTweak('extraSlots', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// Mount panel into its own root once React is ready.
(function mount() {
  const el = document.createElement('div');
  el.id = 'tweaks-root';
  document.body.appendChild(el);
  ReactDOM.createRoot(el).render(<FeinTweaks />);
})();