// Main hi-fi app
const { useState: useAppState, useEffect: useAppEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "page": "home",
  "accent": "#FFC93C",
  "density": "comfy",
  "postSlug": "cost-per-converted-user"
}/*EDITMODE-END*/;

function loadState() {
  try {
    const s = JSON.parse(localStorage.getItem('evveland_hifi') || '{}');
    return { ...TWEAK_DEFAULTS, ...s };
  } catch { return { ...TWEAK_DEFAULTS }; }
}

function App() {
  const init = loadState();
  const [page, setPage] = useAppState(init.page);
  const [accent, setAccent] = useAppState(init.accent);
  const [density, setDensity] = useAppState(init.density);
  const [postSlug, setPostSlug] = useAppState(init.postSlug || 'cost-per-converted-user');
  const [tweaksOpen, setTweaksOpen] = useAppState(false);

  useAppEffect(() => {
    document.documentElement.style.setProperty('--accent', accent);
    // compute an accent-2 by darkening
    document.documentElement.style.setProperty('--accent-2', accent);
    document.body.dataset.density = density;
    localStorage.setItem('evveland_hifi', JSON.stringify({ page, accent, density, postSlug }));
    try { window.scrollTo(0, 0); } catch (e) {}
  }, [page, accent, density, postSlug]);

  useAppEffect(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setTweaksOpen(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const setTweak = (key, value) => {
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: value } }, '*');
  };

  const openPost = (slug) => { setPostSlug(slug); setTweak('postSlug', slug); setPage('post'); setTweak('page', 'post'); };
  const goPage = (p) => { setPage(p); setTweak('page', p); };

  const Page = { home: Home, work: Work, services: Services, about: About, contact: Contact, blog: Blog, post: Post, create: Create }[page] || Home;
  const pageProps = page === 'post' ? { slug: postSlug, setPage: goPage, openPost } : page === 'blog' ? { setPage: goPage, openPost } : { setPage: goPage };

  return (
    <div>
      <Nav page={page} setPage={goPage}/>
      <Page {...pageProps}/>
      <Footer setPage={goPage}/>

      <div id="tweaks" className={tweaksOpen ? 'on' : ''}>
        <h4>Tweaks</h4>
        <label>Page</label>
        <div className="row" style={{ gap: 4 }}>
          {['home', 'create', 'work', 'services', 'about', 'contact', 'blog'].map((p) => (
            <button key={p} style={{ fontSize: 11, flex: '1 1 30%' }} className={page === p ? 'on' : ''} onClick={() => { setPage(p); setTweak('page', p); }}>{p}</button>
          ))}
        </div>
        <label>Accent</label>
        <div className="swatches">
          {[
            ['#FFC93C', 'Gold'],
            ['#7C5CFF', 'Violet'],
            ['#24E1A4', 'Green'],
            ['#FF5CA8', 'Pink'],
            ['#FF7733', 'Orange'],
          ].map(([c, name]) => (
            <button key={c} title={name} className={accent === c ? 'on' : ''} style={{ background: c }} onClick={() => { setAccent(c); setTweak('accent', c); }}/>
          ))}
        </div>
        <label>Density</label>
        <div className="row">
          {['comfy', 'compact'].map((d) => (
            <button key={d} className={density === d ? 'on' : ''} onClick={() => { setDensity(d); setTweak('density', d); }}>{d}</button>
          ))}
        </div>
        <div style={{ marginTop: 14, fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--text-4)' }}>
          evveland.com · hi-fi v1
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<LangProvider><App/></LangProvider>);