"use client";

import {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useRef,
} from "react";

export type FilePlayerHandle = {
  seekTo: (seconds: number, unit?: "seconds") => void;
};

type Props = {
  url: string;
  playing?: boolean;
  onReady?: () => void;
  onPlay?: () => void;
  onPause?: () => void;
  onProgress?: (state: { playedSeconds: number }) => void;
  onError?: () => void;
};

// A plain media file in a native <video> — archive.org records, whose own
// embed takes no start time we can rely on but whose files are served over
// ranged HTTP, so the browser seeks them itself. The same imperative `seekTo`
// handle and ready/play/pause/progress/error events as KickPlayer, so
// PlayerProvider drives it the same way (full seeking + cue highlighting). An
// audio file plays in the same element.
const FilePlayer = forwardRef<FilePlayerHandle, Props>(function FilePlayer(
  { url, playing, onReady, onPlay, onPause, onProgress, onError },
  ref,
) {
  const videoRef = useRef<HTMLVideoElement | null>(null);
  const cbRef = useRef({ onReady, onPlay, onPause, onProgress, onError });
  cbRef.current = { onReady, onPlay, onPause, onProgress, onError };

  useImperativeHandle(
    ref,
    () => ({
      seekTo(seconds: number) {
        const video = videoRef.current;
        if (!video) return;
        video.currentTime = Math.max(0, seconds);
        void video.play().catch(() => {});
      },
    }),
    [],
  );

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;
    const emitReady = () => cbRef.current.onReady?.();
    const emitPlay = () => cbRef.current.onPlay?.();
    const emitPause = () => cbRef.current.onPause?.();
    const emitError = () => cbRef.current.onError?.();
    const emitProgress = () =>
      cbRef.current.onProgress?.({ playedSeconds: video.currentTime });
    video.addEventListener("loadedmetadata", emitReady, { once: true });
    video.addEventListener("play", emitPlay);
    video.addEventListener("pause", emitPause);
    video.addEventListener("error", emitError);
    video.addEventListener("timeupdate", emitProgress);
    video.src = url;
    return () => {
      video.removeEventListener("loadedmetadata", emitReady);
      video.removeEventListener("play", emitPlay);
      video.removeEventListener("pause", emitPause);
      video.removeEventListener("error", emitError);
      video.removeEventListener("timeupdate", emitProgress);
    };
  }, [url]);

  // Autoplay may be refused without a gesture; the native controls start it.
  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;
    if (playing) void video.play().catch(() => {});
    else video.pause();
  }, [playing]);

  return (
    <video
      ref={videoRef}
      controls
      playsInline
      preload="metadata"
      style={{ width: "100%", height: "100%", background: "black" }}
    />
  );
});

export default FilePlayer;