/* Tweaks for portfolio — palette + theme */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "showSynthInline": true
}/*EDITMODE-END*/;

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

  // apply theme on document
  useEffect(() => {
    if (tweaks.theme === 'light') document.documentElement.setAttribute('data-theme', 'light');
    else document.documentElement.removeAttribute('data-theme');
    try { localStorage.setItem('portfolio-theme', tweaks.theme); } catch (e) {}
  }, [tweaks.theme]);

  // toggle inline iframe vs compact card
  useEffect(() => {
    const el = document.querySelector('.synth-frame');
    if (!el) return;
    el.style.height = tweaks.showSynthInline ? '720px' : '0px';
    el.style.display = tweaks.showSynthInline ? 'block' : 'none';
  }, [tweaks.showSynthInline]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Apparence">
        <TweakRadio
          label="Mode"
          value={tweaks.theme}
          onChange={v => setTweak('theme', v)}
          options={[
            { value: 'dark', label: 'Sombre' },
            { value: 'light', label: 'Clair' }
          ]}
        />
      </TweakSection>
      <TweakSection title="Tableau de synthèse">
        <TweakToggle
          label="Aperçu intégré"
          value={tweaks.showSynthInline}
          onChange={v => setTweak('showSynthInline', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const _tw = document.getElementById('tweaks-root');
if (_tw) ReactDOM.createRoot(_tw).render(<PortfolioTweaks />);