"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "motion/react";
import { Play, X } from "lucide-react";
import backgroundImage from "../../public/assets/banners/light2.webp";

export default function LightsVideo() {
  const [openVideo, setOpenVideo] = useState(false);

  const videoUrl = "/assets/banners/banner-video/sqLights.mp4";
  // const videoUrl = "/assets/banners/sqbannerVideo.mp4";

  const getYoutubeEmbedUrl = (url: string): string => {
    if (url.includes("youtube.com/watch?v=")) {
      const videoId = url.split("v=")[1]?.split("&")[0];
      return `https://www.youtube.com/embed/${videoId}?autoplay=1`;
    }

    if (url.includes("youtu.be/")) {
      const videoId = url.split("youtu.be/")[1]?.split("?")[0];
      return `https://www.youtube.com/embed/${videoId}?autoplay=1`;
    }

    return url;
  };

  const isYoutube =
    videoUrl.includes("youtube.com") ||
    videoUrl.includes("youtu.be");

  return (
    <>
      <div className="w-full h-[500px] flex items-center justify-center bg-gray-950">
        <div className="relative w-full h-full overflow-hidden">
          <div
            className="absolute inset-0 bg-cover bg-center bg-no-repeat "
            style={{
              backgroundImage: `url(${backgroundImage.src})`,
            }}
          >
            <div className="absolute inset-0 bg-black/50" />
          </div>
             <div className="relative z-10 flex flex-col items-center justify-center h-full px-8">
           
                <motion.button
                    onClick={() => setOpenVideo(true)}
                    className="relative flex items-center justify-center w-20 h-20 rounded-full bg-white shadow-2xl cursor-pointer"
                    animate={{
                      scale: [1, 1.05, 1],
                    }}
                    transition={{
                      duration: 3,
                      repeat: Infinity,
                      ease: "easeInOut",
                    }}
                    whileHover={{
                      scale: 1.1,
                      transition: { duration: 0.2 },
                    }}
                    whileTap={{ scale: 0.95 }}
                  >
                    {/* Ripple Effect */}
                    <motion.div
                      className="absolute inset-0 rounded-full border-4 border-orange-500"
                      animate={{
                        scale: [1, 2.2],
                        opacity: [0.6, 0],
                      }}
                      transition={{
                        duration: 2.5,
                        repeat: Infinity,
                        ease: "easeOut",
                      }}
                    />

                    <motion.div
                      className="absolute inset-0 rounded-full border-4 border-orange-500"
                      animate={{
                        scale: [1, 2.2],
                        opacity: [0.4, 0],
                      }}
                      transition={{
                        duration: 2.5,
                        repeat: Infinity,
                        ease: "easeOut",
                        delay: 1.25,
                      }}
                  />

                  <Play className="relative z-10 w-8 h-8 text-orange-500 fill-orange-500 ml-1" />
                </motion.button>
                </div>
              </div>
          </div>
      <AnimatePresence>
        {openVideo && (
          <motion.div
            className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={() => setOpenVideo(false)} 
          >
            <div
              className="relative w-full max-w-5xl  top-[20px] lg:top-[70px]"
              onClick={(e) => e.stopPropagation()} 
            >
              <button
                onClick={() => setOpenVideo(false)}
                className="absolute lg:-right-10 lg:top-0 right-2 -top-10 text-white hover:text-orange-500 transition cursor-pointer"
              >
                <X size={36} />
              </button>

              {isYoutube ? (
                <iframe
                  src={getYoutubeEmbedUrl(videoUrl)}
                  title="YouTube Video"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                  className="w-full aspect-video rounded-xl"
                />
              ) : (
                <video
                  controls
                  autoPlay
                  className="w-full rounded-xl h-[300px] lg:h-[550px] bg-black object-cover"
                >
                  <source src={videoUrl} type="video/mp4" />
                </video>
              )}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}