// audio.jsx — lektor (Web Speech API) + muzyka + UI sterowania

const VOICE_LINES = [
  { at: 1.5,  text: "Nasza szkoła rośnie razem z nami." },
  { at: 9.0,  text: "Codziennie dziesiątki dzieci ćwiczą, grają, rozwijają się w jednej sali." },
  { at: 19.0, text: "Wyobraźmy sobie, jaką szkołę możemy przekazać naszym dzieciom." },
  { at: 29.0, text: "Nowa hala sportowa: osiemset siedemdziesiąt osiem metrów kwadratowych przestrzeni dla naszych dzieci." },
  { at: 37.0, text: "Koszykówka, siatkówka, piłka ręczna. Dwie grupy mogą ćwiczyć równocześnie." },
  { at: 45.0, text: "To także miejsce na akademie, zawody, wydarzenia dla całej społeczności." },
  { at: 53.0, text: "Poprzyj rozbudowę szkoły. Dla naszych dzieci." },
];

function AudioController() {
  const { time, playing } = useTimeline();
  const lastSpokenRef = React.useRef(-1);
  const [enabled, setEnabled] = React.useState(() => {
    try { return localStorage.getItem('voiceover') !== 'off'; } catch { return true; }
  });
  const [subsOn, setSubsOn] = React.useState(() => {
    try { return localStorage.getItem('subs') !== 'off'; } catch { return true; }
  });
  const [musicOn, setMusicOn] = React.useState(() => {
    try { return localStorage.getItem('music') !== 'off'; } catch { return true; }
  });
  const audioRef = React.useRef(null);
  const [hasMusic, setHasMusic] = React.useState(false);

  // Subtitles visibility flag — checked by <Subtitles>
  React.useEffect(() => {
    window.__SUBS_OFF = !subsOn;
    try { localStorage.setItem('subs', subsOn ? 'on' : 'off'); } catch {}
  }, [subsOn]);

  React.useEffect(() => {
    try { localStorage.setItem('voiceover', enabled ? 'on' : 'off'); } catch {}
  }, [enabled]);

  React.useEffect(() => {
    try { localStorage.setItem('music', musicOn ? 'on' : 'off'); } catch {}
  }, [musicOn]);

  // Muzyka
  React.useEffect(() => {
    if (!audioRef.current) return;
    if (musicOn && playing) {
      audioRef.current.play().catch(() => {});
    } else {
      audioRef.current.pause();
    }
  }, [musicOn, playing]);

  React.useEffect(() => {
    if (!audioRef.current) return;
    // Sync audio time z playheadem (tylko gdy rozjazd > 0.5s)
    if (Math.abs(audioRef.current.currentTime - time) > 0.5) {
      audioRef.current.currentTime = time;
    }
  }, [time]);

  // Lektor — wyszukuje polski głos
  React.useEffect(() => {
    if (!('speechSynthesis' in window)) return;
    const load = () => {};
    speechSynthesis.getVoices();
    window.speechSynthesis.onvoiceschanged = load;
  }, []);

  const speak = React.useCallback((text) => {
    if (!('speechSynthesis' in window)) return;
    try {
      window.speechSynthesis.cancel();
      const u = new SpeechSynthesisUtterance(text);
      u.lang = 'pl-PL';
      u.rate = 1.0;
      u.pitch = 1.0;
      u.volume = 1.0;
      const voices = window.speechSynthesis.getVoices();
      const pl = voices.find(v => v.lang && v.lang.toLowerCase().startsWith('pl'));
      if (pl) u.voice = pl;
      window.speechSynthesis.speak(u);
    } catch (e) {}
  }, []);

  // Trigger lines
  React.useEffect(() => {
    if (!enabled || !playing) {
      if ('speechSynthesis' in window && !playing) window.speechSynthesis.cancel();
      return;
    }
    // Znajdź ostatnią linię której "at" <= time, ale tylko jeśli nowa
    let idx = -1;
    for (let i = 0; i < VOICE_LINES.length; i++) {
      if (VOICE_LINES[i].at <= time && (VOICE_LINES[i].at + 1.0) > time) {
        idx = i;
      }
    }
    if (idx !== -1 && idx !== lastSpokenRef.current) {
      lastSpokenRef.current = idx;
      speak(VOICE_LINES[idx].text);
    }
    // Reset gdy czas wróci do 0
    if (time < 0.5) lastSpokenRef.current = -1;
  }, [time, enabled, playing, speak]);

  // Cleanup
  React.useEffect(() => {
    return () => {
      if ('speechSynthesis' in window) window.speechSynthesis.cancel();
    };
  }, []);

  // Wykryj czy plik muzyki istnieje
  React.useEffect(() => {
    fetch('assets/music.mp3', { method: 'HEAD' })
      .then(r => setHasMusic(r.ok))
      .catch(() => setHasMusic(false));
  }, []);

  return (
    <>
      <audio ref={audioRef} src="assets/music.mp3" loop preload="auto" style={{ display: 'none' }} />
      <div style={{
        position: 'fixed',
        right: 16, top: 16,
        zIndex: 100,
        display: 'flex', flexDirection: 'column', gap: 8,
        background: 'rgba(20,20,20,0.9)',
        padding: '10px 12px',
        borderRadius: 8,
        border: '1px solid rgba(255,255,255,0.1)',
        fontFamily: 'Inter, system-ui, sans-serif',
        fontSize: 12,
        color: '#fff',
        minWidth: 180,
      }}>
        <div style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', opacity: 0.6, marginBottom: 2 }}>
          Audio / Napisy
        </div>
        <ToggleRow label="Lektor" value={enabled} onChange={setEnabled} hint="klawisz L" />
        <ToggleRow label="Muzyka" value={musicOn} onChange={setMusicOn} hint={hasMusic ? "klawisz M" : "brak pliku"} disabled={!hasMusic} />
        <ToggleRow label="Napisy" value={subsOn} onChange={setSubsOn} hint="klawisz S" />
        {!hasMusic && (
          <div style={{
            fontSize: 10, opacity: 0.55, marginTop: 4, lineHeight: 1.35,
            paddingTop: 6, borderTop: '1px solid rgba(255,255,255,0.08)',
          }}>
            Wgraj plik <code style={{ background: 'rgba(255,255,255,0.08)', padding: '0 4px', borderRadius: 2 }}>assets/music.mp3</code>
          </div>
        )}
      </div>
      <KeyboardShortcuts
        onToggleSubs={() => setSubsOn(v => !v)}
        onToggleVoice={() => setEnabled(v => !v)}
        onToggleMusic={() => hasMusic && setMusicOn(v => !v)}
      />
    </>
  );
}

function ToggleRow({ label, value, onChange, hint, disabled }) {
  return (
    <label style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 8, cursor: disabled ? 'not-allowed' : 'pointer',
      opacity: disabled ? 0.5 : 1,
    }}>
      <span style={{ display: 'flex', flexDirection: 'column' }}>
        <span style={{ fontWeight: 600 }}>{label}</span>
        {hint && <span style={{ fontSize: 10, opacity: 0.5 }}>{hint}</span>}
      </span>
      <span
        onClick={() => !disabled && onChange(!value)}
        style={{
          width: 32, height: 18, borderRadius: 9,
          background: value && !disabled ? '#F36B1F' : 'rgba(255,255,255,0.15)',
          position: 'relative',
          transition: 'background 0.2s',
          flexShrink: 0,
        }}
      >
        <span style={{
          position: 'absolute',
          top: 2, left: value ? 16 : 2,
          width: 14, height: 14, borderRadius: 7,
          background: '#fff',
          transition: 'left 0.2s',
        }} />
      </span>
    </label>
  );
}

function KeyboardShortcuts({ onToggleSubs, onToggleVoice, onToggleMusic }) {
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.target && (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA')) return;
      if (e.key === 's' || e.key === 'S') onToggleSubs();
      if (e.key === 'l' || e.key === 'L') onToggleVoice();
      if (e.key === 'm' || e.key === 'M') onToggleMusic();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onToggleSubs, onToggleVoice, onToggleMusic]);
  return null;
}

Object.assign(window, { AudioController, VOICE_LINES });