"use client";

import {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useRef,
} from "react";
import Hls from "hls.js";

export type KickPlayerHandle = {
  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;
};

// Kick VODs have no iframe embed, so we play their persisted HLS manifest in a
// native <video> driven by the bundled hls.js. (react-player's file player loads
// hls.js from a CDN, which breaks the offline export PWA, so we drive it
// directly.) Exposes the same imperative `seekTo` handle as the other players so
// PlayerProvider can drive it, and emits ready/play/pause/progress/error the way
// the YouTube player does — giving Kick full-fidelity seeking + cue highlighting.
const KickPlayer = forwardRef<KickPlayerHandle, Props>(function KickPlayer(
  { url, playing, onReady, onPlay, onPause, onProgress, onError },
  ref,
) {
  const videoRef = useRef<HTMLVideoElement | null>(null);

  // Keep the latest callbacks in a ref so the hls setup effect can depend only
  // on `url` — inline arrow props would otherwise tear down/rebuild hls.js on
  // every render.
  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 emitProgress = () =>
      cbRef.current.onProgress?.({ playedSeconds: video.currentTime });

    video.addEventListener("play", emitPlay);
    video.addEventListener("pause", emitPause);
    video.addEventListener("timeupdate", emitProgress);

    let hls: Hls | null = null;
    // Safari (and iOS) plays HLS natively; everywhere else use hls.js + MSE.
    if (video.canPlayType("application/vnd.apple.mpegurl")) {
      video.src = url;
      video.addEventListener("loadedmetadata", emitReady, { once: true });
    } else if (Hls.isSupported()) {
      hls = new Hls();
      hls.loadSource(url);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, emitReady);
      hls.on(Hls.Events.ERROR, (_event, data) => {
        // Only unrecoverable errors (e.g. an expired/deleted VOD whose manifest
        // 404s) surface to the fallback; hls.js self-heals transient ones.
        if (data.fatal) cbRef.current.onError?.();
      });
    } else {
      cbRef.current.onError?.();
    }

    return () => {
      video.removeEventListener("play", emitPlay);
      video.removeEventListener("pause", emitPause);
      video.removeEventListener("timeupdate", emitProgress);
      if (hls) hls.destroy();
    };
  }, [url]);

  // Mirror the desired play/pause state. Autoplay may be rejected without a user
  // gesture (e.g. opening via a shared ?v= link) — that's fine, the native
  // controls let the user 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
      style={{ width: "100%", height: "100%", background: "black" }}
    />
  );
});

export default KickPlayer;