"use client";

import { forwardRef, useImperativeHandle, useState } from "react";

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

type Props = {
  videoId: string;
  startSeconds?: number;
};

// Rumble's iframe embed — reloading with a new `start` query param is our only
// way to seek from the outside (no JS API, no currentTime tracking).
const RumblePlayer = forwardRef<RumblePlayerHandle, Props>(function RumblePlayer(
  { videoId, startSeconds = 0 },
  ref,
) {
  const [start, setStart] = useState(() =>
    Math.max(0, Math.floor(startSeconds)),
  );

  useImperativeHandle(
    ref,
    () => ({
      seekTo(seconds: number) {
        setStart(Math.max(0, Math.floor(seconds)));
      },
    }),
    [],
  );

  const src = `https://rumble.com/embed/${encodeURIComponent(videoId)}/?pub=4&start=${start}`;

  return (
    <iframe
      key={start}
      src={src}
      allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
      allowFullScreen
      style={{ border: 0, width: "100%", height: "100%" }}
    />
  );
});

export default RumblePlayer;