// Main app: orchestrates screens, director, talk track, keyboard

function App() {
  const [screen, setScreen] = React.useState(1);
  const [autoAdvance, setAutoAdvance] = React.useState(false);
  const [showTalkTrack, setShowTalkTrack] = React.useState(false);
  const [directorOpen, setDirectorOpen] = React.useState(true);
  const [transitioning, setTransitioning] = React.useState(false);
  const [calling, setCalling] = React.useState(false);

  const goTo = React.useCallback((n) => {
    if (n < 1 || n > SCREENS.length) return;
    setScreen(n);
  }, []);

  const advance = React.useCallback(() => {
    setScreen(s => Math.min(s + 1, SCREENS.length));
  }, []);

  // Email → WhatsApp: instant
  const onEmailAdvance = () => goTo(2);
  // Manage → WhatsApp via shimmer
  const onManageAdvance = () => {
    setTransitioning(true);
    setTimeout(() => { setTransitioning(false); goTo(3); }, 800);
  };
  // WA → Tap to call
  const onWAAdvance = () => goTo(4);
  // Tap to call → Voice via calling overlay
  const onTapAdvance = () => {
    setCalling(true);
    setTimeout(() => { setCalling(false); goTo(5); }, 1500);
  };
  // Voice → Copilot
  const onVoiceAdvance = () => goTo(6);
  // Copilot → Closing
  const onCopilotAdvance = () => goTo(7);

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'd' || e.key === 'D') { setDirectorOpen(o => !o); return; }
      if (e.key === 't' || e.key === 'T') { setShowTalkTrack(s => !s); return; }
      if (e.key === 'r' || e.key === 'R') { setScreen(1); return; }
      if (e.key === 'ArrowRight' || e.key === ' ') {
        e.preventDefault();
        const handlers = [null, onEmailAdvance, onManageAdvance, onWAAdvance, onTapAdvance, onVoiceAdvance, onCopilotAdvance];
        if (screen <= 6) handlers[screen]();
        return;
      }
      if (e.key === 'ArrowLeft') { setScreen(s => Math.max(1, s - 1)); return; }
      const num = parseInt(e.key);
      if (num >= 1 && num <= 7) goTo(num);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [screen]);

  // Auto-advance for non-animated screens
  React.useEffect(() => {
    if (!autoAdvance) return;
    let t;
    if (screen === 1) t = setTimeout(onEmailAdvance, 5000);
    if (screen === 2) t = setTimeout(onManageAdvance, 4000);
    if (screen === 4) t = setTimeout(onTapAdvance, 4000);
    return () => clearTimeout(t);
  }, [screen, autoAdvance]);

  const handleNextClick = () => {
    const handlers = [null, onEmailAdvance, onManageAdvance, onWAAdvance, onTapAdvance, onVoiceAdvance, onCopilotAdvance];
    if (screen <= 6) handlers[screen]();
  };

  return (
    <>
      <div className="screen-counter">{String(screen).padStart(2, '0')} / 07 · {SCREENS[screen-1].name}</div>

      <div className="screen-stage">
        <div className={`screen ${screen === 1 ? 'active' : ''}`}>
          {screen === 1 && <EmailScreen onAdvance={onEmailAdvance} />}
        </div>
        <div className={`screen ${screen === 2 ? 'active' : ''}`}>
          {screen === 2 && <ManageBookingScreen onAdvance={onManageAdvance} transitioning={transitioning} />}
        </div>
        <div className={`screen ${screen === 3 ? 'active' : ''}`}>
          {screen === 3 && <WhatsAppScreen onAdvance={onWAAdvance} autoAdvance={autoAdvance} />}
        </div>
        <div className={`screen ${screen === 4 ? 'active' : ''}`}>
          {screen === 4 && <TapToCallScreen onAdvance={onTapAdvance} calling={calling} />}
        </div>
        <div className={`screen ${screen === 5 ? 'active' : ''}`}>
          {screen === 5 && <VoiceCallScreen onAdvance={onVoiceAdvance} autoAdvance={autoAdvance} />}
        </div>
        <div className={`screen ${screen === 6 ? 'active' : ''}`}>
          {screen === 6 && <CopilotScreen onAdvance={onCopilotAdvance} autoAdvance={autoAdvance} />}
        </div>
        <div className={`screen ${screen === 7 ? 'active' : ''}`}>
          {screen === 7 && <ClosingScreen />}
        </div>
      </div>

      {screen < 7 && (
        <div className="powered-by">
          <span className="pb-label">Powered by</span>
          <img src="assets/wonderful-logo.png" alt="Wonderful" />
        </div>
      )}

      {screen < 7 && (
        <button className="nav-next" onClick={handleNextClick}>
          Next <span style={{fontSize:14}}>→</span>
        </button>
      )}

      {showTalkTrack && TALK_TRACKS[screen] && (
        <div className="talk-track">
          <div className="speaker-label">Presenter notes · screen {screen}</div>
          {TALK_TRACKS[screen]}
        </div>
      )}

      <Director
        screen={screen}
        goTo={goTo}
        autoAdvance={autoAdvance}
        setAutoAdvance={setAutoAdvance}
        showTalkTrack={showTalkTrack}
        setShowTalkTrack={setShowTalkTrack}
        open={directorOpen}
        setOpen={setDirectorOpen}
      />

      <div className="demo-watermark">DEMO · NOT PRODUCTION</div>
    </>
  );
}

function Director({ screen, goTo, autoAdvance, setAutoAdvance, showTalkTrack, setShowTalkTrack, open, setOpen }) {
  return (
    <div className={`director ${open ? '' : 'collapsed'}`}>
      <div className="director-head" onClick={() => setOpen(o => !o)}>
        <div style={{display:'flex', gap:8, alignItems:'center'}}>
          <div className="dot"></div>
          <div className="title">Demo Director</div>
        </div>
        <div style={{fontSize:14}}>{open ? '▾' : '▸'}</div>
      </div>
      <div className="director-body">
        <div className="director-section">
          <div className="director-label">Jump to screen</div>
          <div className="director-screens">
            {SCREENS.map(s => (
              <button
                key={s.id}
                className={`director-screen-btn ${screen === s.id ? 'active' : ''}`}
                onClick={() => goTo(s.id)}
              >
                {s.code} · {s.name}
              </button>
            ))}
          </div>
        </div>
        <div className="director-section">
          <div className="director-label">Controls</div>
          <div className="director-toggles">
            <div className={`director-toggle ${autoAdvance ? 'on' : ''}`} onClick={() => setAutoAdvance(a => !a)}>
              <span>Auto-advance</span>
              <div className="switch"></div>
            </div>
            <div className={`director-toggle ${showTalkTrack ? 'on' : ''}`} onClick={() => setShowTalkTrack(s => !s)}>
              <span>Talk track</span>
              <div className="switch"></div>
            </div>
            <div className="director-toggle" onClick={() => goTo(1)}>
              <span>Reset demo</span>
              <span style={{fontSize:11, color:'#888'}}>↺</span>
            </div>
          </div>
        </div>
        <div className="director-section">
          <div className="director-label">Shortcuts</div>
          <div className="director-shortcuts">
            <kbd>Space</kbd> / <kbd>→</kbd> next · <kbd>←</kbd> back<br/>
            <kbd>1</kbd>–<kbd>7</kbd> jump · <kbd>R</kbd> reset<br/>
            <kbd>D</kbd> director · <kbd>T</kbd> talk track
          </div>
        </div>
      </div>
    </div>
  );
}

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