// App entry — assembles sections, handles theme, tweaks.

const { useState, useEffect } = React;

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

const ACCENT_MAP = {
  rose:    { a: '#D58E90', name: 'Rose' },
  apricot: { a: '#E9C46A', name: 'Apricot' },
  peach:   { a: '#F0B895', name: 'Peach' },
  mauve:   { a: '#C799B8', name: 'Mauve' },
};

function App() {
  const [theme, setTheme] = useState(() => {
    try { return localStorage.getItem('lumyna-theme') || TWEAK_DEFAULTS.theme; } catch(e) { return TWEAK_DEFAULTS.theme; }
  });
  const [accent, setAccent] = useState(TWEAK_DEFAULTS.accent);
  const [tweaksVisible, setTweaksVisible] = useState(false);

  useEffect(() => {
    document.body.setAttribute('data-theme', theme);
    document.documentElement.style.setProperty('--accent', ACCENT_MAP[accent].a);
    try { localStorage.setItem('lumyna-theme', theme); } catch(e) {}
  }, [theme, accent]);

  // Theme toggle wiring (button in top nav, outside React tree)
  useEffect(() => {
    const btn = document.getElementById('theme-toggle');
    if (!btn) return;
    const handler = () => setTheme(t => t === 'light' ? 'dark' : 'light');
    btn.addEventListener('click', handler);
    return () => btn.removeEventListener('click', handler);
  }, []);

  // Tweaks bridge
  useEffect(() => {
    const onMsg = (e) => {
      const d = e.data;
      if (!d) return;
      if (d.type === '__activate_edit_mode') setTweaksVisible(true);
      if (d.type === '__deactivate_edit_mode') setTweaksVisible(false);
    };
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch(e) {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const updateTweak = (k, v) => {
    if (k === 'theme') setTheme(v);
    if (k === 'accent') setAccent(v);
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*'); } catch(e) {}
  };

  return (
    <>
      <HeroSection theme={theme} />
      <MarqueeStrip />
      <LibrarySection theme={theme} />
      <InterfaceSection theme={theme} />
      <DSPSection theme={theme} />
      <NowPlayingSection theme={theme} />
      <ThemingSection theme={theme} />
      <MosaicSection theme={theme} />
      <CTASection />
      <Footer />

      <div className={`tweaks ${tweaksVisible ? 'on' : ''}`}>
        <h4>Tweaks</h4>
        <div className="tweak-row">
          <label>Theme</label>
          <select value={theme} onChange={e => updateTweak('theme', e.target.value)}>
            <option value="light">Light</option>
            <option value="dark">Dark</option>
          </select>
        </div>
        <div className="tweak-row">
          <label>Accent</label>
          <select value={accent} onChange={e => updateTweak('accent', e.target.value)}>
            {Object.keys(ACCENT_MAP).map(k => (
              <option key={k} value={k}>{ACCENT_MAP[k].name}</option>
            ))}
          </select>
        </div>
        <div className="tweak-row" style={{ color: 'var(--ink-3)', fontSize: 11, paddingTop: 8, display: 'block' }}>
          Theme persists in localStorage. Accent recolors the rose throughout.
        </div>
      </div>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);