// Pop-out teleprompter: shows the notes large, with recording controls that drive the recorder
// window over a BroadcastChannel.

import { useEffect, useRef, useState } from 'react';
import type { Video } from '../../shared/types.ts';
import { api } from '../api.ts';
import { Icon } from '../components/Icon.tsx';
import { channelName, type RecCommand, type RecMessage, type RecState } from '../lib/channel.ts';
import { fmtDuration, loadPref, savePref } from '../lib/format.ts';

export function Prompter({ videoId }: { videoId: string }) {
  const [video, setVideo] = useState<Video | null>(null);
  const [state, setState] = useState<RecState | null>(null);
  const [view, setViewState] = useState(() => loadPref('takes.prompter', { fontSize: 28, autoScroll: false, speed: 30 }));
  const channel = useRef<BroadcastChannel | null>(null);
  const bodyRef = useRef<HTMLDivElement>(null);

  const setView = (p: Partial<typeof view>) =>
    setViewState((v) => {
      const next = { ...v, ...p };
      savePref('takes.prompter', next);
      return next;
    });

  const reload = () => api.video(videoId).then(setVideo).catch(() => {});

  useEffect(() => {
    document.title = 'Teleprompter · Takes';
    reload();
    const ch = new BroadcastChannel(channelName(videoId));
    channel.current = ch;
    ch.onmessage = (ev: MessageEvent<RecMessage>) => {
      if (ev.data.type === 'state') setState(ev.data.state);
      else if (ev.data.type === 'closed') setState(null);
    };
    ch.postMessage({ type: 'command', cmd: 'hello' } satisfies RecMessage);
    return () => ch.close();
  }, [videoId]); // eslint-disable-line react-hooks/exhaustive-deps

  const send = (cmd: RecCommand) => channel.current?.postMessage({ type: 'command', cmd } satisfies RecMessage);

  // Auto-scroll while recording.
  const recording = state?.phase === 'recording';
  useEffect(() => {
    if (!recording || !view.autoScroll) return;
    let raf = 0;
    let last = performance.now();
    let acc = 0;
    const loop = (t: number) => {
      acc += ((t - last) / 1000) * view.speed;
      last = t;
      const whole = Math.floor(acc);
      if (whole > 0 && bodyRef.current) {
        bodyRef.current.scrollTop += whole;
        acc -= whole;
      }
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, [recording, view.autoScroll, view.speed]);

  const phase = state?.phase;
  return (
    <div className="prompter">
      <div className="prompter-bar">
        {!state && <span className="muted">Recorder window not open</span>}
        {phase === 'setup' && <span className="muted">Ready</span>}
        {phase === 'countdown' && <span className="rec-indicator">Starting in {state!.countdown}…</span>}
        {(phase === 'recording' || phase === 'paused') && (
          <span className={`rec-indicator ${phase}`}>
            <span className="rec-dot" /> {phase === 'paused' ? 'Paused' : 'REC'} <span className="timecode">{fmtDuration(state!.elapsed)}</span>
          </span>
        )}
        {phase === 'processing' && <span className="muted">Saving…</span>}
        <div className="spacer" />
        {phase === 'setup' && (
          <button className="btn record" disabled={!state?.canStart} onClick={() => send('start')}>
            <Icon name="record" /> Start
          </button>
        )}
        {phase === 'countdown' && (
          <button className="btn" onClick={() => send('stop')}>
            Cancel
          </button>
        )}
        {phase === 'recording' && (
          <button className="btn" onClick={() => send('pause')}>
            <Icon name="pause" /> Pause
          </button>
        )}
        {phase === 'paused' && (
          <button className="btn" onClick={() => send('resume')}>
            <Icon name="record" /> Resume
          </button>
        )}
        {(phase === 'recording' || phase === 'paused') && (
          <button className="btn primary" onClick={() => send('stop')}>
            <Icon name="stop" /> Stop
          </button>
        )}
      </div>
      {state?.message && <div className="banner">{state.message}</div>}
      <div className="prompter-tools">
        <button className="btn small" onClick={() => setView({ fontSize: Math.max(14, view.fontSize - 2) })}>
          A−
        </button>
        <button className="btn small" onClick={() => setView({ fontSize: Math.min(72, view.fontSize + 2) })}>
          A+
        </button>
        <label className="check small">
          <input type="checkbox" checked={view.autoScroll} onChange={(e) => setView({ autoScroll: e.target.checked })} /> Auto-scroll while recording
        </label>
        {view.autoScroll && <input type="range" min={5} max={120} value={view.speed} onChange={(e) => setView({ speed: parseInt(e.target.value) })} title="Scroll speed" />}
        <div className="spacer" />
        <button className="btn small ghost" onClick={reload} title="Reload notes">
          Reload notes
        </button>
      </div>
      <div className="prompter-body" ref={bodyRef} style={{ fontSize: view.fontSize }}>
        {video ? video.notes || <span className="muted">No notes for this video.</span> : 'Loading…'}
        <div style={{ height: '60vh' }} />
      </div>
    </div>
  );
}