// Root app — routes, tweaks panel, admin mount.

const { useState: useStateX, useEffect: useEffectX } = React;

function Tweaks({ tweaks, setTweaks, onClose }) {
  const set = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*'); } catch(e) {}
  };
  const Group = ({ label, k, opts }) => (
    <div className="tweaks-group">
      <label>{label}</label>
      <div className="tweaks-opts">
        {opts.map(o => (
          <button key={o} className={tweaks[k] === o ? 'active' : ''} onClick={() => set(k, o)}>{o}</button>
        ))}
      </div>
    </div>
  );
  return (
    <div className="tweaks">
      <div className="tweaks-head">
        <span>Tweaks</span>
        <button onClick={onClose} style={{ fontSize: 14 }}>✕</button>
      </div>
      <div className="tweaks-body">
        <Group label="Aesthetic" k="aesthetic" opts={['editorial','journal','sport']} />
        <Group label="Palette" k="palette" opts={['dusk','road','ink']} />
        <Group label="Hero layout" k="heroLayout" opts={['overlay','split','stack']} />
      </div>
    </div>
  );
}

function App() {
  const [path, go] = useRoute();
  const [tweaks, setTweaks] = useStateX(() => window.VELO_TWEAKS);
  const [tweaksOpen, setTweaksOpen] = useStateX(false);
  const [adminOpen, setAdminOpen] = useStateX(false);
  const [, setTick] = useStateX(0);

  useEffectX(() => {
    // listen for host edit-mode messages
    const handler = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setTweaksOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', handler);
    // announce availability
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch(e) {}
    return () => window.removeEventListener('message', handler);
  }, []);

  useEffectX(() => {
    document.documentElement.dataset.aesthetic = tweaks.aesthetic;
    document.documentElement.dataset.palette = tweaks.palette;
  }, [tweaks]);

  useEffectX(() => {
    const h = () => setTick(t => t + 1);
    window.addEventListener('velo-content-updated', h);
    return () => window.removeEventListener('velo-content-updated', h);
  }, []);

  // Route resolution
  const parts = path.split('/').filter(Boolean);
  let page;
  if (path === '/' || parts.length === 0) page = <HomePage tweaks={tweaks} />;
  else if (parts[0] === 'podcast' && parts[1]) page = <EpisodePage id={parts[1]} />;
  else if (parts[0] === 'podcast') page = <PodcastPage />;
  else if (parts[0] === 'journal' && parts[1]) page = <PostPage id={parts[1]} />;
  else if (parts[0] === 'journal') page = <JournalPage />;
  else if (parts[0] === 'gear') page = <GearPage />;
  else if (parts[0] === 'newsletter') page = <NewsletterPage />;
  else if (parts[0] === 'about') page = <AboutPage />;
  else if (parts[0] === 'events') page = <EventsPage />;
  else if (parts[0] === 'membership') page = <MembershipPage />;
  else if (parts[0] === 'contact') page = <ContactPage />;
  else page = <NotFound />;

  return (
    <>
      <Topbar path={path} />
      <main>{page}</main>
      <Footer />
      {!adminOpen && (
        <button className="admin-fab" onClick={() => setAdminOpen(true)}>✎ Edit content</button>
      )}
      {adminOpen && <AdminPanel onClose={() => setAdminOpen(false)} />}
      {tweaksOpen && <Tweaks tweaks={tweaks} setTweaks={setTweaks} onClose={() => setTweaksOpen(false)} />}
    </>
  );
}

function Boot() {
  const [ready, setReady] = useStateX(false);
  useEffectX(() => {
    window.loadVeloContent().then(() => setReady(true));
  }, []);
  if (!ready) {
    return (
      <div style={{
        position: 'fixed', inset: 0, display: 'grid', placeItems: 'center',
        background: 'var(--bg)', color: 'var(--muted)',
        fontFamily: "'JetBrains Mono', monospace", fontSize: 12,
        letterSpacing: '0.18em', textTransform: 'uppercase'
      }}>
        Loading content…
      </div>
    );
  }
  return <App />;
}

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