import { useRef } from "react";
import { Rewind, FastForward, Pause, Play } from "lucide-react";

const VideosPage = () => {
  const videoRef = useRef<HTMLVideoElement>(null);

  const skip = (seconds: number) => {
    if (videoRef.current) {
      videoRef.current.currentTime += seconds;
    }
  };

  const togglePlayPause = () => {
    const video = videoRef.current;
    if (!video) return;
    if (video.paused) {
      video.play();
    } else {
      video.pause();
    }
  };

  return (
    <div className="max-w-4xl mx-auto px-4 py-12">
      <h1 className="text-3xl font-bold text-center text-frog-600 mb-8">
        Trainingsvideo: Satz 1
      </h1>

      <div className="relative">
        <video
          ref={videoRef}
          controls
          controlsList="nodownload"
          preload="none"
          width="100%"
          poster="https://volleycloud.marc-wieland.de/index.php/s/7F6Sz5DQyct32Xt/preview"
          onContextMenu={(e) => e.preventDefault()}
          className="rounded-md shadow-md outline-none"
        >
          <source
            src="https://volleycloud.marc-wieland.de/index.php/s/7F6Sz5DQyct32Xt/download"
            type="video/mp4"
          />
          Dein Browser unterstützt kein eingebettetes Video.
        </video>

        {/* Custom Steuerung */}
        <div className="mt-4 flex justify-center gap-4">
          <button
            onClick={() => skip(-5)}
            className="bg-gray-100 dark:bg-gray-800 p-3 rounded-full hover:scale-105 transition shadow"
          >
            <Rewind className="h-5 w-5" />
          </button>
          <button
            onClick={togglePlayPause}
            className="bg-gray-100 dark:bg-gray-800 p-3 rounded-full hover:scale-105 transition shadow"
          >
            <Play className="h-5 w-5" />
          </button>
          <button
            onClick={() => skip(5)}
            className="bg-gray-100 dark:bg-gray-800 p-3 rounded-full hover:scale-105 transition shadow"
          >
            <FastForward className="h-5 w-5" />
          </button>
        </div>
      </div>
    </div>
  );
};

export default VideosPage;
