// scenes/VoiceoverOverlay.jsx
// Optional overlay that shows the current VO line + music beat hint
// while the video plays. Controlled by window.__tweaks.showVoScript.

function VoiceoverOverlay() {
  const t = useTime();
  if (!window.__tweaks || !window.__tweaks.showVoScript) return null;

  // Find current VO line: the latest cue whose t <= current time.
  const current = VO_SCRIPT.reduce((acc, line) =>
    line.t <= t ? line : acc, null);
  const nextIdx = current ? VO_SCRIPT.indexOf(current) + 1 : 0;
  const next = VO_SCRIPT[nextIdx];

  const currentMusic = MUSIC_CUES.reduce((acc, c) => c.t <= t ? c : acc, MUSIC_CUES[0]);

  return (
    <div style={{
      position: 'absolute',
      left: 40, top: 40,
      width: 480,
      padding: 20,
      background: 'rgba(10,14,12,0.85)',
      border: '1px solid rgba(255,255,255,0.12)',
      borderRadius: 10,
      fontFamily: SANS,
      color: FP.text,
      pointerEvents: 'none',
      backdropFilter: 'blur(6px)',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        fontSize: 11, color: FP.muted,
        textTransform: 'uppercase', letterSpacing: '0.1em',
        marginBottom: 12,
      }}>
        <div style={{
          width: 6, height: 6, borderRadius: 999,
          background: FP.primary,
          boxShadow: `0 0 10px ${FP.primary}`,
        }}/>
        Script VO · t = <span style={{ fontFamily: MONO, color: FP.text }}>{t.toFixed(1)}s</span>
      </div>
      <div style={{
        fontSize: 17, lineHeight: 1.35,
        color: FP.text, fontWeight: 500,
        minHeight: 46,
      }}>
        {current ? current.text : <span style={{ color: FP.muted }}>…</span>}
      </div>
      {next && (
        <div style={{
          marginTop: 10,
          fontSize: 13, color: FP.muted,
          fontStyle: 'italic',
        }}>
          Suivant ({next.t.toFixed(1)}s) : {next.text}
        </div>
      )}
      <div style={{
        marginTop: 14, paddingTop: 12,
        borderTop: `1px solid ${FP.borderSoft}`,
        display: 'flex', gap: 8,
        fontSize: 11, color: FP.muted,
        fontFamily: MONO,
      }}>
        <span style={{ color: FP.primary }}>♪</span>
        <span>{currentMusic.beat}</span>
      </div>
    </div>
  );
}

Object.assign(window, { VoiceoverOverlay });