// App shell — routing + tweaks protocol

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "a",
  "accent": "green",
  "density": "comfortable"
}/*EDITMODE-END*/;

const App = () => {
  // Persisted route
  const [route, setRouteRaw] = React.useState(() => {
    try { return localStorage.getItem('at-ai-route') || 'home'; }
    catch { return 'home'; }
  });
  const setRoute = (r) => {
    setRouteRaw(r);
    try { localStorage.setItem('at-ai-route', r); } catch {}
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  // Tweaks
  const [tweaks, setTweaks] = React.useState(TWEAK_DEFAULTS);
  const [tweaksOn, setTweaksOn] = React.useState(false);

  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || !e.data.type) return;
      if (e.data.type === '__activate_edit_mode') setTweaksOn(true);
      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);
  }, []);

  // Apply accent CSS var dynamically (density also tweaks container)
  React.useEffect(() => {
    const root = document.documentElement;
    const accent = tweaks.accent === 'blue' ? '#00AFEF'
      : tweaks.accent === 'mono' ? '#E9ECEE' : '#A2BB55';
    const accentDim = tweaks.accent === 'blue' ? 'rgba(0,175,239,0.14)'
      : tweaks.accent === 'mono' ? 'rgba(255,255,255,0.08)' : 'rgba(162,187,85,0.14)';
    root.style.setProperty('--green', accent);
    root.style.setProperty('--green-dim', accentDim);
  }, [tweaks.accent]);

  let Page;
  switch (route) {
    case 'systems':   Page = <SystemsPage   setRoute={setRoute} />; break;
    case 'community': Page = <CommunityPage setRoute={setRoute} />; break;
    case 'about':     Page = <AboutPage     setRoute={setRoute} />; break;
    case 'build':     Page = <BuildPage     setRoute={setRoute} />; break;
    default:          Page = <HomePage      setRoute={setRoute} tweaks={tweaks} />;
  }

  return (
    <>
      <Header route={route} setRoute={setRoute} />
      <main style={{ paddingTop: 0 }}>{Page}</main>
      <Footer setRoute={setRoute} />
      {tweaksOn && <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} />}
    </>
  );
};

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