import { useEffect, useRef, useState } from 'react';
import type { PublicConfig, TrackKind, Video } from '../../shared/types.ts';
import { navigate } from '../App.tsx';
import { api } from '../api.ts';
import { Icon } from '../components/Icon.tsx';
import { MicMeter } from '../components/MicMeter.tsx';
import { channelName, type RecMessage, type RecPhase, type RecState } from '../lib/channel.ts';
import { fmtDuration, loadPref, savePref } from '../lib/format.ts';
import { RecordingSession } from '../lib/recorder.ts';

interface Prefs {
  useCamera: boolean;
  cameraId: string;
  cameraHeight: 720 | 1080;
  useMic: boolean;
  micId: string;
  audioProcessing: boolean;
  useScreen: boolean;
  countdown: number;
}

const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));

function stopStream(s: MediaStream | null) {
  s?.getTracks().forEach((t) => t.stop());
}

function VideoPreview({ stream, label }: { stream: MediaStream | null; label: string }) {
  const ref = useRef<HTMLVideoElement>(null);
  useEffect(() => {
    if (ref.current) ref.current.srcObject = stream;
  }, [stream]);
  return (
    <div className="preview">
      {stream ? <video ref={ref} autoPlay muted playsInline /> : <div className="preview-empty">{label}</div>}
    </div>
  );
}

export function Recorder({ videoId }: { videoId: string }) {
  const [video, setVideo] = useState<Video | null>(null);
  const [prefs, setPrefsState] = useState<Prefs | null>(null);
  const [cams, setCams] = useState<MediaDeviceInfo[]>([]);
  const [mics, setMics] = useState<MediaDeviceInfo[]>([]);
  const [camStream, setCamStream] = useState<MediaStream | null>(null);
  const [micStream, setMicStream] = useState<MediaStream | null>(null);
  const [screenStream, setScreenStream] = useState<MediaStream | null>(null);
  const [phase, setPhase] = useState<RecPhase>('setup');
  const [countdown, setCountdown] = useState(0);
  const [elapsed, setElapsed] = useState(0);
  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | undefined>();

  const session = useRef<RecordingSession | null>(null);
  const takeId = useRef<string | null>(null);
  const aborted = useRef(false);
  const clock = useRef({ start: 0, pausedAt: 0, pausedTotal: 0 });
  const phaseRef = useRef(phase);
  phaseRef.current = phase;

  // Load video, and prefs (localStorage, falling back to app defaults).
  useEffect(() => {
    api.video(videoId).then((v) => {
      setVideo(v);
      document.title = `Recording: ${v.title} · Takes`;
    }).catch((e) => setError(e.message));
    api
      .config()
      .catch(() => null)
      .then((cfg: PublicConfig | null) => {
        setPrefsState(
          loadPref<Prefs>('takes.recorder', {
            useCamera: true,
            cameraId: '',
            cameraHeight: cfg?.defaultCameraHeight ?? 720,
            useMic: true,
            micId: '',
            audioProcessing: true,
            useScreen: true,
            countdown: cfg?.defaultCountdown ?? 3,
          }),
        );
      });
  }, [videoId]);

  const setPrefs = (p: Partial<Prefs>) =>
    setPrefsState((cur) => {
      const next = { ...cur!, ...p };
      savePref('takes.recorder', next);
      return next;
    });

  const refreshDevices = async () => {
    const devs = await navigator.mediaDevices.enumerateDevices();
    setCams(devs.filter((d) => d.kind === 'videoinput' && d.deviceId));
    setMics(devs.filter((d) => d.kind === 'audioinput' && d.deviceId));
  };
  useEffect(() => {
    navigator.mediaDevices.addEventListener('devicechange', refreshDevices);
    return () => navigator.mediaDevices.removeEventListener('devicechange', refreshDevices);
  }, []);

  // Camera stream follows the camera settings.
  useEffect(() => {
    if (!prefs?.useCamera) return;
    let stream: MediaStream | null = null;
    let cancelled = false;
    const h = prefs.cameraHeight;
    navigator.mediaDevices
      .getUserMedia({
        video: { deviceId: prefs.cameraId ? { exact: prefs.cameraId } : undefined, width: { ideal: (h * 16) / 9 }, height: { ideal: h }, frameRate: { ideal: 30 } },
      })
      .then((s) => {
        if (cancelled) return stopStream(s);
        stream = s;
        setCamStream(s);
        refreshDevices();
      })
      .catch((e) => setError(`Camera: ${e.message}`));
    return () => {
      cancelled = true;
      stopStream(stream);
      setCamStream(null);
    };
  }, [prefs?.useCamera, prefs?.cameraId, prefs?.cameraHeight]);

  // Microphone stream follows the mic settings.
  useEffect(() => {
    if (!prefs?.useMic) return;
    let stream: MediaStream | null = null;
    let cancelled = false;
    const proc = prefs.audioProcessing;
    navigator.mediaDevices
      .getUserMedia({
        audio: { deviceId: prefs.micId ? { exact: prefs.micId } : undefined, echoCancellation: proc, noiseSuppression: proc, autoGainControl: proc },
      })
      .then((s) => {
        if (cancelled) return stopStream(s);
        stream = s;
        setMicStream(s);
        refreshDevices();
      })
      .catch((e) => setError(`Microphone: ${e.message}`));
    return () => {
      cancelled = true;
      stopStream(stream);
      setMicStream(null);
    };
  }, [prefs?.useMic, prefs?.micId, prefs?.audioProcessing]);

  // Screen stream is stopped when leaving the page.
  const screenRef = useRef<MediaStream | null>(null);
  screenRef.current = screenStream;
  useEffect(() => () => stopStream(screenRef.current), []);

  const chooseScreen = async (): Promise<MediaStream | null> => {
    try {
      const s = await navigator.mediaDevices.getDisplayMedia({ video: { frameRate: { ideal: 30 } }, audio: false });
      stopStream(screenRef.current);
      s.getVideoTracks()[0].addEventListener('ended', () => {
        setScreenStream((cur) => (cur === s ? null : cur));
        if (phaseRef.current === 'recording' || phaseRef.current === 'paused') stopRef.current();
      });
      setScreenStream(s);
      return s;
    } catch (e) {
      if ((e as Error).name !== 'NotAllowedError') setError(`Screen: ${(e as Error).message}`);
      return null;
    }
  };

  const useCamera = !!prefs?.useCamera;
  const useScreen = !!prefs?.useScreen;
  const useMic = !!prefs?.useMic;
  const devicesReady = (useCamera || useScreen) && (!useCamera || !!camStream) && (!useMic || !!micStream);
  const canStart = phase === 'setup' && devicesReady;

  // ---- recording control ----
  const begin = async (screen: MediaStream | null) => {
    if (!prefs || !devicesReady || phaseRef.current !== 'setup') return;
    if (useScreen && !screen) {
      setMessage('Choose the screen or window to record in the main window first.');
      return;
    }
    setError(null);
    setMessage(undefined);
    aborted.current = false;
    setPhase('countdown');
    try {
      const take = await api.createTake(videoId, {
        tracks: { screen: useScreen, camera: useCamera },
        audio: useMic ? (useCamera ? 'camera' : 'screen') : null,
      });
      takeId.current = take.id;
      for (let n = prefs.countdown; n > 0; n--) {
        setCountdown(n);
        await sleep(1000);
        if (aborted.current) {
          await api.deleteTake(videoId, take.id).catch(() => {});
          setPhase('setup');
          return;
        }
      }
      setCountdown(0);
      const micTracks = useMic && micStream ? micStream.getAudioTracks() : [];
      const streams: Partial<Record<TrackKind, MediaStream>> = {};
      if (useCamera && camStream) streams.camera = new MediaStream([...camStream.getVideoTracks(), ...micTracks]);
      if (useScreen && screen) streams.screen = new MediaStream([...screen.getVideoTracks(), ...(useCamera ? [] : micTracks)]);
      session.current = new RecordingSession(videoId, take.id, streams, prefs.cameraHeight);
      session.current.start();
      clock.current = { start: performance.now(), pausedAt: 0, pausedTotal: 0 };
      setElapsed(0);
      setPhase('recording');
    } catch (e) {
      setError((e as Error).message);
      setPhase('setup');
    }
  };

  const pause = () => {
    if (phaseRef.current !== 'recording') return;
    session.current?.pause();
    clock.current.pausedAt = performance.now();
    setPhase('paused');
  };

  const resume = () => {
    if (phaseRef.current !== 'paused') return;
    session.current?.resume();
    clock.current.pausedTotal += performance.now() - clock.current.pausedAt;
    setPhase('recording');
  };

  const stop = async () => {
    const p = phaseRef.current;
    if (p === 'countdown') {
      aborted.current = true;
      return;
    }
    if (p !== 'recording' && p !== 'paused') return;
    setPhase('processing');
    const s = session.current;
    session.current = null;
    try {
      await s?.stop();
      await api.finalizeTake(videoId, takeId.current!);
      navigate(`video/${videoId}`);
    } catch (e) {
      setError(`${(e as Error).message}. The take was kept; you can try "Recover" on the video page.`);
      setPhase('setup');
    }
  };
  const stopRef = useRef(stop);
  stopRef.current = stop;

  const discard = async () => {
    const p = phaseRef.current;
    if (p !== 'recording' && p !== 'paused') return;
    setPhase('processing');
    const s = session.current;
    session.current = null;
    await s?.stop().catch(() => {});
    await api.deleteTake(videoId, takeId.current!).catch(() => {});
    setPhase('setup');
  };

  // Elapsed time while recording.
  useEffect(() => {
    if (phase !== 'recording') return;
    const iv = setInterval(() => {
      const c = clock.current;
      setElapsed((performance.now() - c.start - c.pausedTotal) / 1000);
    }, 200);
    return () => clearInterval(iv);
  }, [phase]);

  // Warn before closing the window mid-recording.
  useEffect(() => {
    if (phase === 'setup') return;
    const on = (e: BeforeUnloadEvent) => e.preventDefault();
    window.addEventListener('beforeunload', on);
    return () => window.removeEventListener('beforeunload', on);
  }, [phase]);

  // ---- teleprompter channel ----
  const channel = useRef<BroadcastChannel | null>(null);
  const handlers = useRef({ begin: () => {}, pause, resume, stop });
  handlers.current = { begin: () => begin(screenStream), pause, resume, stop };
  const state: RecState = { phase, elapsed, countdown, canStart, message };
  const stateRef = useRef(state);
  stateRef.current = state;

  useEffect(() => {
    const ch = new BroadcastChannel(channelName(videoId));
    channel.current = ch;
    ch.onmessage = (ev: MessageEvent<RecMessage>) => {
      const m = ev.data;
      if (m.type !== 'command') return;
      if (m.cmd === 'hello') ch.postMessage({ type: 'state', state: stateRef.current } satisfies RecMessage);
      else if (m.cmd === 'start') handlers.current.begin();
      else handlers.current[m.cmd]();
    };
    return () => {
      ch.postMessage({ type: 'closed' } satisfies RecMessage);
      ch.close();
    };
  }, [videoId]);

  useEffect(() => {
    channel.current?.postMessage({ type: 'state', state } satisfies RecMessage);
  }, [phase, Math.floor(elapsed * 4), countdown, canStart, message]); // eslint-disable-line react-hooks/exhaustive-deps

  const openPrompter = () => {
    window.open(`#/prompter/${videoId}`, `takes-prompter-${videoId}`, 'popup,width=620,height=800');
  };

  // Keyboard: Space pauses/resumes while recording.
  useEffect(() => {
    const on = (e: KeyboardEvent) => {
      if ((e.target as HTMLElement).closest('input, textarea, select')) return;
      if (e.key === ' ' && (phaseRef.current === 'recording' || phaseRef.current === 'paused')) {
        e.preventDefault();
        (phaseRef.current === 'recording' ? handlers.current.pause : handlers.current.resume)();
      }
    };
    window.addEventListener('keydown', on);
    return () => window.removeEventListener('keydown', on);
  }, []);

  if (!prefs || !video) return <div className="page loading">{error ?? 'Loading…'}</div>;

  const recording = phase === 'recording' || phase === 'paused';
  const locked = phase !== 'setup';

  return (
    <div className="page recorder">
      <header className="topbar">
        <button className="btn ghost" disabled={locked} onClick={() => navigate(`video/${videoId}`)}>
          <Icon name="back" /> Back
        </button>
        <div className="topbar-title">
          <span className="muted">Recording</span> {video.title}
        </div>
        <div className="spacer" />
        <button className="btn" onClick={openPrompter} title="Open notes and recording controls in a separate window">
          <Icon name="popout" /> Teleprompter window
        </button>
      </header>

      {error && (
        <div className="banner error" onClick={() => setError(null)}>
          {error}
        </div>
      )}
      {message && <div className="banner">{message}</div>}

      <div className="recorder-grid">
        <section className="panel sources">
          <div className="source">
            <label className="check">
              <input type="checkbox" checked={useCamera} disabled={locked} onChange={(e) => setPrefs({ useCamera: e.target.checked })} />
              <Icon name="camera" /> Camera
            </label>
            {useCamera && (
              <div className="source-opts">
                <select value={prefs.cameraId} disabled={locked} onChange={(e) => setPrefs({ cameraId: e.target.value })}>
                  <option value="">Default camera</option>
                  {cams.map((d) => (
                    <option key={d.deviceId} value={d.deviceId}>
                      {d.label || 'Camera'}
                    </option>
                  ))}
                </select>
                <select value={prefs.cameraHeight} disabled={locked} onChange={(e) => setPrefs({ cameraHeight: parseInt(e.target.value) as 720 | 1080 })}>
                  <option value={720}>720p</option>
                  <option value={1080}>1080p</option>
                </select>
              </div>
            )}
          </div>

          <div className="source">
            <label className="check">
              <input type="checkbox" checked={useMic} disabled={locked} onChange={(e) => setPrefs({ useMic: e.target.checked })} />
              <Icon name="mic" /> Microphone
            </label>
            {useMic && (
              <div className="source-opts">
                <select value={prefs.micId} disabled={locked} onChange={(e) => setPrefs({ micId: e.target.value })}>
                  <option value="">Default microphone</option>
                  {mics.map((d) => (
                    <option key={d.deviceId} value={d.deviceId}>
                      {d.label || 'Microphone'}
                    </option>
                  ))}
                </select>
                <label className="check small" title="Echo cancellation, noise suppression, and automatic gain">
                  <input type="checkbox" checked={prefs.audioProcessing} disabled={locked} onChange={(e) => setPrefs({ audioProcessing: e.target.checked })} />
                  Noise suppression
                </label>
              </div>
            )}
            {useMic && <MicMeter stream={micStream} />}
          </div>

          <div className="source">
            <label className="check">
              <input type="checkbox" checked={useScreen} disabled={locked} onChange={(e) => setPrefs({ useScreen: e.target.checked })} />
              <Icon name="screen" /> Screen
            </label>
            {useScreen && (
              <div className="source-opts">
                <button className="btn small" disabled={recording} onClick={chooseScreen}>
                  {screenStream ? 'Change screen or window…' : 'Choose screen or window…'}
                </button>
                {screenStream && !locked && (
                  <button
                    className="btn small ghost"
                    onClick={() => {
                      stopStream(screenStream);
                      setScreenStream(null);
                    }}
                  >
                    Stop sharing
                  </button>
                )}
              </div>
            )}
          </div>

          <div className="source">
            <label className="row">
              <span>Countdown</span>
              <select value={prefs.countdown} disabled={locked} onChange={(e) => setPrefs({ countdown: parseInt(e.target.value) })}>
                {[0, 3, 5, 10].map((n) => (
                  <option key={n} value={n}>
                    {n === 0 ? 'None' : `${n} s`}
                  </option>
                ))}
              </select>
            </label>
          </div>

          <div className="previews">
            {useCamera && <VideoPreview stream={camStream} label="Starting camera…" />}
            {useScreen && <VideoPreview stream={screenStream} label="No screen chosen yet" />}
          </div>

          <div className="rec-controls">
            {phase === 'setup' && (
              <button
                className="btn record big"
                disabled={!canStart}
                onClick={async () => {
                  let s = screenStream;
                  if (useScreen && !s) s = await chooseScreen();
                  if (!useScreen || s) begin(s);
                }}
              >
                <Icon name="record" /> Start recording
              </button>
            )}
            {phase === 'countdown' && (
              <button className="btn big" onClick={stop}>
                Cancel
              </button>
            )}
            {recording && (
              <>
                <div className={`rec-indicator ${phase}`}>
                  <span className="rec-dot" /> {phase === 'paused' ? 'Paused' : 'Recording'} <span className="timecode">{fmtDuration(elapsed)}</span>
                </div>
                {phase === 'recording' ? (
                  <button className="btn big" onClick={pause}>
                    <Icon name="pause" /> Pause
                  </button>
                ) : (
                  <button className="btn big" onClick={resume}>
                    <Icon name="record" /> Resume
                  </button>
                )}
                <button className="btn primary big" onClick={stop}>
                  <Icon name="stop" /> Stop and save
                </button>
                <button className="btn ghost danger" onClick={discard}>
                  Discard
                </button>
              </>
            )}
            {phase === 'processing' && <div className="muted">Saving take…</div>}
          </div>
          {phase === 'setup' && !devicesReady && (useCamera || useScreen) && <p className="muted small">Waiting for devices…</p>}
          {!useCamera && !useScreen && <p className="warn-text small">Enable the camera, the screen, or both.</p>}
          <p className="muted small">Space pauses and resumes while this window is focused. When recording your whole screen, move the teleprompter window to another monitor or record a single window.</p>
        </section>

        <section className="panel notes-panel">
          <h4>Notes</h4>
          <div className="notes-view">{video.notes || <span className="muted">No notes. Add them on the video page.</span>}</div>
        </section>
      </div>

      {phase === 'countdown' && countdown > 0 && (
        <div className="countdown-overlay">
          <div className="countdown-num">{countdown}</div>
        </div>
      )}
    </div>
  );
}