// Plays the timeline (segments of takes) using one pair of <video> elements per take.
// The element carrying the mic audio is the clock; the other track is kept in sync with it.

import { useSyncExternalStore } from 'react';
import type { Segment, Take, TrackKind } from '../../shared/types.ts';
import { locate, segmentStarts, timelineDuration } from '../../shared/timeline.ts';

export interface PlayerSnapshot {
  time: number;
  playing: boolean;
  activeTakeId: string | null;
}

// Each take has up to three elements: the screen, the camera, and the camera with its background removed.
export type ElKey = TrackKind | 'cutout';
type Els = Partial<Record<ElKey, HTMLVideoElement>>;

export class TimelinePlayer {
  private segments: Segment[] = [];
  private takes = new Map<string, Take>();
  private starts: number[] = [];
  private els = new Map<string, Els>();
  private refCallbacks = new Map<string, (el: HTMLVideoElement | null) => void>();
  private segIndex = 0;
  private raf = 0;
  private listeners = new Set<() => void>();
  private snap: PlayerSnapshot = { time: 0, playing: false, activeTakeId: null };
  duration = 0;

  subscribe = (fn: () => void) => {
    this.listeners.add(fn);
    return () => {
      this.listeners.delete(fn);
    };
  };

  getSnapshot = () => this.snap;

  private emit(patch: Partial<PlayerSnapshot>) {
    this.snap = { ...this.snap, ...patch };
    this.listeners.forEach((f) => f());
  }

  setData(segments: Segment[], takes: Take[]) {
    this.segments = segments;
    this.takes = new Map(takes.map((t) => [t.id, t]));
    this.starts = segmentStarts(segments);
    this.duration = timelineDuration(segments);
    this.seek(Math.min(this.snap.time, this.duration));
  }

  // Stable ref callback for a take's <video> element.
  refFor(takeId: string, track: ElKey) {
    const key = `${takeId}/${track}`;
    let cb = this.refCallbacks.get(key);
    if (!cb) {
      cb = (el) => this.register(takeId, track, el);
      this.refCallbacks.set(key, cb);
    }
    return cb;
  }

  private register(takeId: string, track: ElKey, el: HTMLVideoElement | null) {
    const e = this.els.get(takeId) ?? {};
    if (el === (e[track] ?? null)) return;
    if (el) e[track] = el;
    else delete e[track];
    this.els.set(takeId, e);
    if (el && this.snap.activeTakeId === takeId) {
      const loc = locate(this.segments, this.snap.time);
      if (loc) el.currentTime = loc.takeTime;
      if (this.snap.playing) el.play().catch(() => {});
    }
  }

  elementsFor(takeId: string): Els {
    return this.els.get(takeId) ?? {};
  }

  private list(takeId: string): HTMLVideoElement[] {
    const e = this.els.get(takeId);
    return e ? ([e.screen, e.camera, e.cutout].filter(Boolean) as HTMLVideoElement[]) : [];
  }

  private master(takeId: string): HTMLVideoElement | undefined {
    const e = this.els.get(takeId);
    const take = this.takes.get(takeId);
    if (!e || !take) return undefined;
    return (take.audio && e[take.audio]) || e.screen || e.camera;
  }

  private activate(takeId: string, takeTime: number, play: boolean) {
    const prev = this.snap.activeTakeId;
    if (prev && prev !== takeId) this.list(prev).forEach((el) => el.pause());
    for (const el of this.list(takeId)) {
      if (Math.abs(el.currentTime - takeTime) > 0.01) el.currentTime = takeTime;
      if (play) el.play().catch(() => {});
      else el.pause();
    }
    if (prev !== takeId) this.emit({ activeTakeId: takeId });
  }

  seek(t: number) {
    t = Math.max(0, Math.min(t, this.duration));
    const loc = locate(this.segments, t);
    if (!loc) {
      const prev = this.snap.activeTakeId;
      if (prev) this.list(prev).forEach((el) => el.pause());
      cancelAnimationFrame(this.raf);
      this.emit({ time: 0, playing: false, activeTakeId: null });
      return;
    }
    this.segIndex = loc.index;
    this.activate(this.segments[loc.index].takeId, loc.takeTime, this.snap.playing);
    this.emit({ time: t });
  }

  play() {
    if (this.segments.length === 0) return;
    if (this.snap.time >= this.duration - 0.03) this.emit({ time: 0 });
    const loc = locate(this.segments, this.snap.time)!;
    this.segIndex = loc.index;
    this.emit({ playing: true });
    this.activate(this.segments[loc.index].takeId, loc.takeTime, true);
    cancelAnimationFrame(this.raf);
    this.raf = requestAnimationFrame(this.tick);
  }

  pause() {
    cancelAnimationFrame(this.raf);
    const a = this.snap.activeTakeId;
    if (a) this.list(a).forEach((el) => el.pause());
    this.emit({ playing: false });
  }

  toggle() {
    if (this.snap.playing) this.pause();
    else this.play();
  }

  private tick = () => {
    if (!this.snap.playing) return;
    const seg = this.segments[this.segIndex];
    if (!seg) return this.pause();
    const m = this.master(seg.takeId);
    if (!m) {
      this.raf = requestAnimationFrame(this.tick);
      return;
    }
    let tt = m.currentTime;
    if (tt >= seg.end - 0.01 || m.ended) {
      const next = this.segIndex + 1;
      if (next >= this.segments.length) {
        this.pause();
        this.emit({ time: this.duration });
        return;
      }
      const ns = this.segments[next];
      this.segIndex = next;
      const continuous = ns.takeId === seg.takeId && Math.abs(ns.start - seg.end) < 0.05;
      if (!continuous) this.activate(ns.takeId, ns.start, true);
      tt = ns.start;
    } else {
      for (const el of this.list(seg.takeId)) if (el !== m && Math.abs(el.currentTime - tt) > 0.15) el.currentTime = tt;
    }
    const cur = this.segments[this.segIndex];
    this.emit({ time: this.starts[this.segIndex] + Math.max(0, Math.min(tt, cur.end) - cur.start) });
    this.raf = requestAnimationFrame(this.tick);
  };

  destroy() {
    this.pause();
  }
}

export function usePlayerTime(player: TimelinePlayer) {
  return useSyncExternalStore(player.subscribe, () => player.getSnapshot().time);
}

export function usePlayerPlaying(player: TimelinePlayer) {
  return useSyncExternalStore(player.subscribe, () => player.getSnapshot().playing);
}

export function usePlayerActiveTake(player: TimelinePlayer) {
  return useSyncExternalStore(player.subscribe, () => player.getSnapshot().activeTakeId);
}