"use client";

import Image from "next/image";
import { withCDN } from "@/src/lib/utils";
import { useEffect, useRef, useState } from "react";
import { Play, Pause, Volume2, VolumeX, Maximize, Minimize, } from "lucide-react";

export default function VideoSectionPage({ videoUrl }: { videoUrl?: string }) {
  const currentVideoUrl = videoUrl || "https://yemedia.b-cdn.net/v3.mp4";
 
  const videoRef = useRef<HTMLVideoElement>(null);
  const [isPlaying, setIsPlaying] = useState(true);
  const [isMuted, setIsMuted] = useState(true);
  const [progress, setProgress] = useState(0);
  const [isFullscreen, setIsFullscreen] = useState(false);
  const videoContainerRef = useRef<HTMLDivElement>(null);

  // Update progress bar
  useEffect(() => {
    const video = videoRef.current;

    if (!video) return;

    const updateProgress = () => {
      const percentage =
        (video.currentTime / video.duration) * 100;

      setProgress(percentage || 0);
    };

    video.addEventListener("timeupdate", updateProgress);

    return () => {
      video.removeEventListener(
        "timeupdate",
        updateProgress
      );
    };
  }, []);

  // Play / Pause
  const togglePlay = () => {
    const video = videoRef.current;

    if (!video) return;

    if (isPlaying) {
      video.pause();
    } else {
      video.play();
    }

    setIsPlaying(!isPlaying);
  };

  // Mute / Unmute
  const toggleMute = () => {
    const video = videoRef.current;

    if (!video) return;

    video.muted = !isMuted;
    setIsMuted(!isMuted);
  };

  //fullscreen

 const toggleFullscreen = () => {
  const videoContainer = videoContainerRef.current;

  if (!videoContainer) return;

  if (!document.fullscreenElement) {
    videoContainer.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
};

useEffect(() => {
  const handleFullscreenChange = () => {
    setIsFullscreen(!!document.fullscreenElement);
  };

  document.addEventListener(
    "fullscreenchange",
    handleFullscreenChange
  );

  return () => {
    document.removeEventListener(
      "fullscreenchange",
      handleFullscreenChange
    );
  };
}, []);

  // Seek video
  const handleSeek = (
    e: React.MouseEvent<HTMLDivElement>
  ) => {
    const video = videoRef.current;

    if (!video) return;

    const rect = e.currentTarget.getBoundingClientRect();

    const clickX = e.clientX - rect.left;

    const percentage = clickX / rect.width;

    video.currentTime = percentage * video.duration;
  };


  return (
    <section
     ref={videoContainerRef}
     className={`relative w-full h-[550px] md:h-[550px] lg:h-[700px] overflow-hidden ${
       isFullscreen ? "video-is-fullscreen" : ""
      }`}
    >
      {/* Base background layer */}
      <div
        className="absolute inset-0 bg-[#D9D9D9]"
        style={{
          width: "1512px",
          height: "700px",
          left: "0px",
          top: "calc(50% - 700px/2)",
        }}
      ></div>
      {/* Video Player */}
      <div className="absolute inset-0 flex items-center justify-center z-10 video-container">
        {/* Video */}
      <div className="absolute inset-0 flex items-center justify-center z-10">
        <video
          ref={videoRef}
          key={currentVideoUrl}
          className="w-full h-full object-cover"
          autoPlay
          muted
          loop
          playsInline
        >
          <source
            src={currentVideoUrl}
            type="video/mp4"
          />
        </video>
      </div>
      </div>


      {/* Overlay Controls — progress bar only (play/mute moved to bottom-right).
          On mobile the controls sit top-right, so push the progress bar below them. */}
      <div className="absolute top-20 md:top-8 left-[6%] right-4 z-20 flex items-center gap-4 px-4 w-[88%]">
        {/* Progress Bar */}
        <div
          onClick={handleSeek}
          className="flex-1 h-[3px] bg-[#58585a66] rounded-full cursor-pointer overflow-hidden"
        >
          <div
            className="h-full bg-white rounded-full transition-all duration-200"
            style={{
              width: `${progress}%`,
              opacity: 0.4
            }}
          />
        </div>
      </div>

      {/* Bottom-right controls: play/pause + mute, then fullscreen */}
      <div className="absolute top-4 right-3 md:top-auto md:bottom-22 md:right-[7%] flex items-center justify-center gap-6 vide0-fullscreen z-999">
      <button
        onClick={togglePlay}
        aria-label={isPlaying ? "Pause" : "Play"}
        className="text-white cursor-pointer"
      >
        {isPlaying ? (
          <Pause size={30} fill="white" />
        ) : (
          <Play size={30} fill="white" />
        )}
      </button>
      <button
        onClick={toggleMute}
        aria-label={isMuted ? "Turn sound on" : "Turn sound off"}
        title={isMuted ? "Turn sound on" : "Turn sound off"}
        className="text-white cursor-pointer"
      >
        {isMuted ? (
          <VolumeX size={30} />
        ) : (
          <Volume2 size={30} />
        )}
      </button>
      <button
        onClick={toggleFullscreen}
        className="text-white cursor-pointer"
      >
        {isFullscreen ? (
          <Minimize size={30} />
        ) : (
          <Maximize size={30} />
        )}
      </button>
      </div>

      {/* Dark overlay */}
    
    </section>
  );
}







      
//     </section>
//   );
// }




// {/* Mock Video Player */}
//       <div className="absolute left-[120px] top-[30px] flex items-center gap-[10px] w-[1272px] h-[45px]">
//         {/* Controllers */}
//         <div className="flex items-center gap-[10px] w-[90px] h-[45px] relative">
//           {/* Play button */}
//           <div className="w-[45px] h-[45px] bg-transparent relative cursor-pointer">
//             <div
//               className="absolute"
//               style={{
//                 left: "28.89%",
//                 right: "28.88%",
//                 top: "26.67%",
//                 bottom: "24.44%",
//                 background: "#FFFFFF",
//                 clipPath: "polygon(0 0, 100% 50%, 0 100%)",
//               }}
//             ></div>
//           </div>

//           {/* Pause button */}
//           <div className="w-[45px] h-[45px] bg-transparent relative cursor-pointer">
//             <div
//               className="absolute"
//               style={{
//                 height: "22px",
//                 left: "8.33%",
//                 right: "51.67%",
//                 top: "calc(50% - 11px)",
//                 background: "#FFFFFF",
//                 width: "8px",
//                 borderRadius: "1px",
//               }}
//             ></div>
//             <div
//               className="absolute"
//               style={{
//                 left: "62.48%",
//                 right: "8.32%",
//                 top: "35.4%",
//                 bottom: "35.42%",
//                 background: "#FFFFFF",
//                 width: "8px",
//                 borderRadius: "1px",
//               }}
//             ></div>
//           </div>
//         </div>

//         {/* Progress bar */}
//         <div className="relative w-[1172px] h-[2px] md:ml-[10px]">
//           {/* Base line */}
//           <div className="absolute w-full h-[2px] bg-[#58585A] opacity-40 rounded-[10px]" />
//           {/* Progress */}
//           <div className="absolute w-[234px] h-[2px] bg-white opacity-40 rounded-[10px]" />
//         </div>
//       </div>