// reel.jsx — The main reel component. Wires scene components into a Stage.

const SCENE_TIMES = [
  { fn: 'SceneIntro',       start: 0.0,  end: 4.0  },
  { fn: 'SceneThesis',      start: 4.0,  end: 8.5  },
  { fn: 'SceneCatalog',     start: 8.5,  end: 15.0 },
  { fn: 'SceneRoster',      start: 15.0, end: 30.0 },
  { fn: 'SceneAmyHero',     start: 30.0, end: 34.5 },
  { fn: 'SceneRadio',       start: 34.5, end: 39.5 },
  { fn: 'SceneGetToDrinkin',start: 39.5, end: 44.0 },
  { fn: 'SceneAwards',      start: 44.0, end: 50.5 },
  { fn: 'ScenePillars',     start: 50.5, end: 56.0 },
  { fn: 'SceneClose',       start: 56.0, end: 60.0 },
];

const TOTAL = 60;

function Reel() {
  const [tweaks, setTweaks] = React.useState(window.__TWEAKS || { palette: 'black-gold', speed: 1, motion: 'full', loop: true });
  React.useEffect(() => {
    const on = (e) => setTweaks({ ...e.detail });
    window.addEventListener('tweaks:change', on);
    return () => window.removeEventListener('tweaks:change', on);
  }, []);

  const pal = PALETTES[tweaks.palette] || PALETTES['black-gold'];
  const duration = TOTAL / (tweaks.speed || 1);

  // Map real time -> scaled time so scene timings still work
  return (
    <Stage
      key={tweaks.speed + ':' + tweaks.loop}
      width={1920}
      height={1080}
      duration={duration}
      background={pal.bg}
      loop={tweaks.loop !== false}
      persistKey="jge-sizzle"
    >
      <SpeedWrapper speed={tweaks.speed || 1}>
        {SCENE_TIMES.map((s, i) => {
          const Comp = window[s.fn];
          return (
            <Sprite key={i} start={s.start} end={s.end}>
              <Comp />
            </Sprite>
          );
        })}
        <Chrome total={TOTAL} scenes={SCENE_TIMES} />
        <AudioController />
      </SpeedWrapper>
    </Stage>
  );
}

// SpeedWrapper — the Stage duration is scaled by speed, but scenes are
// authored against the 60s canonical timeline. Rebase time.
function SpeedWrapper({ speed, children }) {
  const parent = useTimeline();
  const scaled = {
    ...parent,
    time: parent.time * speed,
    duration: TOTAL,
  };
  return (
    <TimelineContext.Provider value={scaled}>
      {children}
    </TimelineContext.Provider>
  );
}

// Chrome — scene counter & progress ticks pinned on canvas
function Chrome({ total, scenes }) {
  const { time, setTime } = useTimeline();
  const idx = scenes.findIndex(s => time >= s.start && time < s.end);
  const pal = usePalette();
  const speed = (window.__TWEAKS?.speed) || 1;
  const jump = (sceneStart) => { if (setTime) setTime(sceneStart / speed + 0.05); };
  return (
    <>
      {/* Top-right scene counter */}
      <div style={{
        position: 'absolute',
        top: 48, right: 64,
        fontFamily: 'JetBrains Mono, ui-monospace, monospace',
        fontSize: 13,
        letterSpacing: '0.2em',
        color: pal.accent,
        mixBlendMode: 'normal',
        pointerEvents: 'none',
      }}>
        {String(Math.max(0, idx) + 1).padStart(2, '0')} / {String(scenes.length).padStart(2, '0')}
      </div>
      {/* Top-left small wordmark */}
      <div style={{
        position: 'absolute',
        top: 48, left: 64,
        fontFamily: FONT_WORD,
        fontSize: 11,
        letterSpacing: '0.35em',
        color: pal.accent,
        pointerEvents: 'none',
      }}>
        JGE &nbsp;·&nbsp; 2025 SIZZLE
      </div>
      {/* Bottom progress dots — clickable scene skip */}
      <div style={{
        position: 'absolute',
        left: 64, bottom: 48,
        display: 'flex', gap: 8,
      }}>
        {scenes.map((s, i) => (
          <div
            key={i}
            onClick={() => jump(s.start)}
            title={`Scene ${i + 1}`}
            style={{
              width: 28, height: 2,
              backgroundColor: (time >= s.start) ? pal.accent : pal.line,
              transition: 'background-color 200ms',
              cursor: 'pointer',
              padding: '10px 0',
              marginTop: -10,
              boxSizing: 'content-box',
              backgroundClip: 'content-box',
            }}
          />
        ))}
      </div>
    </>
  );
}

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