/* @file: app.jsx — Mounts ReactDOM root at #app-root */
(() => {
  const ns = window.__app || {};
  const { Router, useRoute, IdleView, QuestionView, TransitionLayer, AudioPlayer } = ns;

  const missing = [];
  if (!Router) missing.push('Router');
  if (!useRoute) missing.push('useRoute');
  if (!IdleView) missing.push('IdleView');
  if (!QuestionView) missing.push('QuestionView');
  if (!TransitionLayer) missing.push('TransitionLayer');
  if (!AudioPlayer) missing.push('AudioPlayer');
  if (missing.length) {
    console.error(
      '[app] Missing window.__app globals: ' + missing.join(', ') +
      '. Check <script> loading order in index.html (see contracts.md §2).'
    );
    return;
  }

  function App() {
    return (
      <Router>
        <Inner />
        <TransitionLayer active={false} />
        <AudioPlayer srcs={[
          "sounds/zanzibar.mp4",
          "sounds/no-surprises.mp4",
          "sounds/happy-birthday.mp4",
        ]} volume={0.3} />
      </Router>
    );
  }

  function Inner() {
    const { route, params } = useRoute();
    React.useEffect(() => {
      document.body.classList.toggle('in-question', route === 'question');
      return () => document.body.classList.remove('in-question');
    }, [route]);
    React.useEffect(() => {
      if (route === 'idle' && window.__app && typeof window.__app.send === 'function') {
        window.__app.send('transitionComplete');
      }
    }, [route]);
    if (route === 'question') return <QuestionView id={params.n} />;
    return <IdleView />;
  }

  const root = document.getElementById('app-root');
  if (!root) {
    console.error('[app] #app-root element not found in DOM');
    return;
  }

  if (typeof ReactDOM === 'undefined' || !ReactDOM.createRoot) {
    console.error('[app] ReactDOM.createRoot is unavailable; check React UMD <script> tags');
    return;
  }

  ReactDOM.createRoot(root).render(<App />);
})();