// Main App shell
const { useState: useStateApp, useEffect: useEffectApp } = React;

function App() {
  const saved = (() => {
    try { return localStorage.getItem('vi_page') || 'library'; } catch (e) { return 'library'; }
  })();
  const [page, setPage] = useStateApp(saved);
  const [theme, setTheme] = useStateApp(window.__TWEAKS?.theme || 'light');
  const [tweaksOn, setTweaksOn] = useStateApp(false);

  useEffectApp(() => {
    document.body.setAttribute('data-theme', theme);
  }, [theme]);

  useEffectApp(() => {
    try { localStorage.setItem('vi_page', page); } catch (e) {}
  }, [page]);

  // Tweaks wiring
  useEffectApp(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setTweaksOn(true);
      else if (e.data.type === '__deactivate_edit_mode') setTweaksOn(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const persistTheme = (t) => {
    setTheme(t);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { theme: t } }, '*');
  };

  return (
    <div className="app">
      <Topbar theme={theme} onThemeToggle={() => persistTheme(theme === 'light' ? 'dark' : 'light')} />
      <Sidebar page={page} setPage={setPage} />
      <main className="main" data-screen-label={page === 'library' ? '01 Library' : page === 'detail' ? '02 Call Detail' : '03 Analytics'}>
        {page === 'library'   && <Library onOpenCall={() => setPage('detail')} />}
        {page === 'detail'    && <Detail onBack={() => setPage('library')} />}
        {page === 'analytics' && <Analytics />}
      </main>
      <Tweaks visible={tweaksOn} theme={theme} setTheme={persistTheme} />
    </div>
  );
}

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