/* Tweaks panel for Seletos-TI site
   Persists tweak state to disk via the host (EDITMODE-BEGIN/END marker),
   AND mirrors `theme` to localStorage so it survives reload before React mounts.
*/

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

function applyTheme(theme) {
  document.body.setAttribute('data-theme', theme);
  try { localStorage.setItem('seletos-tweaks', JSON.stringify({ theme })); } catch (e) {}
}

function SeletosTweaks() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    applyTheme(tweaks.theme);
  }, [tweaks.theme]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Tema">
        <TweakRadio
          label="Aparência"
          value={tweaks.theme}
          onChange={(v) => setTweak('theme', v)}
          options={[
            { value: 'light', label: 'Claro' },
            { value: 'dark',  label: 'Escuro' },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const tweaksRoot = document.getElementById('tweaks-root');
if (tweaksRoot) {
  ReactDOM.createRoot(tweaksRoot).render(<SeletosTweaks />);
}