/* theme-tweaks.jsx — shared page-level theme tweak for Nuvo Clinic sub-pages.
   Mirrors the homepage Tweaks panel: a Warm/Bright page theme plus brand color
   + accent controls. Self-mounting — it creates its own React root and runs
   global side-effects, so it does NOT touch a page's existing App tree.

   When Bright is active it:
     • sets  body[data-bright]   → each page's <style> flips its dark bands to cream
     • swaps the header skin      → bright cream bar (nav-solid), not dark espresso

   Requirements on the host page:
     • React + ReactDOM + Babel loaded
     • tweaks-panel.jsx loaded BEFORE this file (provides window.useTweaks etc.)
     • a [data-bright] CSS override block for that page's dark bands
   Load with: <script type="text/babel" src="theme-tweaks.jsx"></script>
*/
(function () {
  const TWEAK_DEFAULTS = {
    theme: 'Bright',
    darkSurface: '#6B3F22',
    accent: ['#D4B08A', '#B88A5C', '#9A6A3E'],
  };

  function ThemeTweaks() {
    const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor } = window;
    const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
    const bright = t.theme === 'Bright';

    // Theme → body flag + header skin
    React.useEffect(() => {
      if (bright) document.body.setAttribute('data-bright', '');
      else document.body.removeAttribute('data-bright');
      const nav = document.getElementById('nuvo-nav');
      if (nav) {
        if (bright) {
          nav.classList.remove('nav-espresso', 'nav-transparent');
          nav.classList.add('nav-solid');
        } else {
          nav.classList.remove('nav-solid');
          nav.classList.add('nav-transparent', 'nav-espresso');
        }
      }
    }, [bright]);

    // Brand color + accent → override design-system CSS variables at the root.
    React.useEffect(() => {
      const r = document.documentElement.style;
      r.setProperty('--espresso-900', t.darkSurface);
      const acc = Array.isArray(t.accent) ? t.accent : [t.accent, t.accent, t.accent];
      r.setProperty('--sand-400', acc[0]);
      r.setProperty('--sand-500', acc[1]);
      r.setProperty('--sand-600', acc[2]);
    }, [t.darkSurface, t.accent]);

    return (
      React.createElement(TweaksPanel, null,
        React.createElement(TweakSection, { label: 'Theme' }),
        React.createElement(TweakRadio, {
          label: 'Page theme', value: t.theme, options: ['Warm', 'Bright'],
          onChange: (v) => setTweak('theme', v),
        }),
        React.createElement(TweakSection, { label: 'Brand color' }),
        React.createElement(TweakColor, {
          label: 'Dark surface', value: t.darkSurface,
          options: ['#4A2611', '#2B1810', '#1A0A05', '#6B3F22'],
          onChange: (v) => setTweak('darkSurface', v),
        }),
        React.createElement(TweakColor, {
          label: 'Accent', value: t.accent,
          options: [['#D4B08A', '#B88A5C', '#9A6A3E'],
                    ['#E0B0A0', '#C98E80', '#9E5C4D'],
                    ['#E4C77A', '#C49A18', '#8A6810']],
          onChange: (v) => setTweak('accent', v),
        })
      )
    );
  }

  function mount() {
    if (!window.React || !window.ReactDOM || !window.useTweaks || !window.TweaksPanel) {
      return setTimeout(mount, 40);
    }
    let el = document.getElementById('theme-tweaks-root');
    if (!el) {
      el = document.createElement('div');
      el.id = 'theme-tweaks-root';
      document.body.appendChild(el);
    }
    ReactDOM.createRoot(el).render(React.createElement(ThemeTweaks));
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', mount);
  } else {
    mount();
  }
}());