/* Tweaks panel + Tweak listener wiring */

function TweaksApp() {
  const defaults = window.__TWEAK_DEFAULTS;
  const [tweaks, setTweak] = useTweaks(defaults);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', tweaks.accent);
    root.style.setProperty('--accent-soft', tweaks.accent + '1F');
    root.style.setProperty('--accent-line', tweaks.accent + '47');
    if (tweaks.light === false) document.body.classList.add('dark');
    else document.body.classList.remove('dark');
  }, [tweaks.accent, tweaks.light]);

  React.useEffect(() => {
    // Update headline + motto
    const h = document.querySelector('[data-bind="headline"]');
    if (h) {
      // Re-render handled via state event
    }
    window.dispatchEvent(new CustomEvent('tweaks:update', { detail: tweaks }));
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks" initialPosition={{ right: 24, bottom: 24 }}>
      <TweakSection title="Theme">
        <TweakToggle label="Light mode" value={tweaks.light} onChange={v => setTweak('light', v)} />
        <TweakColor label="Accent" value={tweaks.accent} onChange={v => setTweak('accent', v)} />
      </TweakSection>
      <TweakSection title="Copy">
        <TweakText label="Motto" value={tweaks.motto} onChange={v => setTweak('motto', v)} />
        <TweakText label="Headline (use | for line break)" value={tweaks.headline} onChange={v => setTweak('headline', v)} multiline />
        <TweakText label="Subhead" value={tweaks.subhead} onChange={v => setTweak('subhead', v)} multiline />
      </TweakSection>
      <TweakSection title="Type">
        <TweakSelect label="Display font" value={tweaks.serif} onChange={v => setTweak('serif', v)}
          options={[
            { value: "'Manrope', sans-serif", label: 'Manrope (logo match)' },
            { value: "'Inter', sans-serif", label: 'Inter' },
            { value: "'Geist', sans-serif", label: 'Geist' },
            { value: "'Space Grotesk', sans-serif", label: 'Space Grotesk' },
          ]} />
      </TweakSection>
    </TweaksPanel>
  );
}

// Mount tweaks app
window.addEventListener('DOMContentLoaded', () => {
  const el = document.getElementById('tweaks-root');
  if (el) ReactDOM.createRoot(el).render(<TweaksApp />);
});

// Apply serif font globally
window.addEventListener('tweaks:update', (e) => {
  document.documentElement.style.setProperty('--serif', e.detail.serif);
});