import React, { useState, useRef } from 'react';
import { motion } from 'framer-motion';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import { Play, X, Heart, Share2, Eye, ChevronLeft, ChevronRight } from 'lucide-react';
import weddingImg1 from "../../assets/images/wedding6.jpeg";
import weddingImg2 from "../../assets/images/wedding8.jpg";
import weddingImg3 from "../../assets/images/wedding6.jpeg";

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

const VideoSwiperGallery = () => {
  const [selectedVideo, setSelectedVideo] = useState(null);
  const swiperRef = useRef(null);

  // Video data with online sources
  const videos = [
    {
      id: 1,
      title: 'Priya & Rahul - Wedding Story',
      thumbnail: weddingImg1,
      videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
      views: '2.4K',
      likes: '142',
      duration: '3:45'
    },
    {
      id: 2,
      title: 'Aisha - Profile Introduction',
      thumbnail: weddingImg2,
      videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
      views: '1.8K',
      likes: '98',
      duration: '2:30'
    },
    {
      id: 3,
      title: 'Rohan - Life Journey',
      thumbnail: weddingImg3,
      videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
      views: '3.2K',
      likes: '256',
      duration: '4:15'
    },
    {
      id: 4,
      title: 'Divya - Family Values',
      thumbnail: weddingImg1,
      videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
      views: '1.5K',
      likes: '87',
      duration: '3:00'
    },
    {
      id: 5,
      title: 'Karthik & Meera - First Meet',
      thumbnail: weddingImg2,
      videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4',
      views: '4.1K',
      likes: '312',
      duration: '5:20'
    },
    {
      id: 6,
      title: 'Sneha - Hobbies & Interests',
      thumbnail: weddingImg3,
      videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4',
      views: '2.7K',
      likes: '178',
      duration: '2:45'
    },
    {
      id: 7,
      title: 'Arjun - Career & Dreams',
      thumbnail: weddingImg1,
      videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4',
      views: '1.9K',
      likes: '134',
      duration: '3:30'
    },
    {
      id: 8,
      title: 'Lakshmi - Traditional Values',
      thumbnail: weddingImg2,
      videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4',
      views: '3.5K',
      likes: '267',
      duration: '4:00'
    },
    {
      id: 9,
      title: 'Vikram - Adventure Life',
      thumbnail: weddingImg3,
      videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
      views: '5.2K',
      likes: '423',
      duration: '4:30'
    },
    {
      id: 10,
      title: 'Anjali - Creative Journey',
      thumbnail: weddingImg1,
      videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
      views: '3.8K',
      likes: '289',
      duration: '3:15'
    }
  ];

  const VideoCard = ({ video }) => {
    const [isHovered, setIsHovered] = useState(false);

    return (
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5 }}
        className="group cursor-pointer h-full"
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        onClick={() => setSelectedVideo(video)}
      >
        <div className="relative rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 h-full">
          {/* Thumbnail */}
          <div className="relative aspect-video">
            <img
              src={video.thumbnail}
              alt={video.title}
              className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
            />
            
            {/* Overlay */}
            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent opacity-60 group-hover:opacity-80 transition-opacity" />
            
            {/* Play Button */}
            <motion.div
              initial={{ scale: 1 }}
              whileHover={{ scale: 1.2 }}
              className="absolute inset-0 flex items-center justify-center"
            >
              <div className="w-14 h-14 bg-white/90 rounded-full flex items-center justify-center shadow-xl group-hover:bg-[#A70710] transition-all">
                <Play className="w-7 h-7 text-[#034E08] group-hover:text-white ml-1" fill="currentColor" />
              </div>
            </motion.div>

            {/* Duration Badge */}
            <div className="absolute top-2 right-2 bg-black/70 text-white text-xs font-semibold px-2 py-1 rounded">
              {video.duration}
            </div>

            {/* Stats at bottom */}
            <div className="absolute bottom-0 left-0 right-0 p-3">
              <h3 className="text-white font-semibold text-sm mb-2 line-clamp-2">
                {video.title}
              </h3>
              <div className="flex items-center gap-3 text-white/90 text-xs">
                <div className="flex items-center gap-1">
                  <Eye className="w-3 h-3" />
                  <span>{video.views}</span>
                </div>
                <div className="flex items-center gap-1">
                  <Heart className="w-3 h-3" />
                  <span>{video.likes}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </motion.div>
    );
  };

  // Video Modal
  const VideoModal = () => {
    if (!selectedVideo) return null;

    return (
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4 z-[9999]"
        onClick={() => setSelectedVideo(null)}
      >
        <motion.div
          initial={{ scale: 0.9, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          exit={{ scale: 0.9, opacity: 0 }}
          className="relative w-full max-w-5xl"
          onClick={(e) => e.stopPropagation()}
        >
          {/* Close Button */}
          <button
            onClick={() => setSelectedVideo(null)}
            className="absolute -top-12 right-0 text-white hover:text-gray-300 transition-colors"
          >
            <X className="w-8 h-8" />
          </button>

          {/* Video Player */}
          <div className="bg-[#034E08] rounded-2xl overflow-y-scroll h-[100%] max-h-[480px] shadow-2xl">
            <video
              src={selectedVideo.videoUrl}
              controls
              autoPlay
              className="w-full aspect-video"
            >
              Your browser does not support the video tag.
            </video>

            {/* Video Info */}
            <div className="bg-gray-900 p-6">
              <h2 className="text-white text-2xl font-bold mb-3">
                {selectedVideo.title}
              </h2>
              <div className="flex items-center gap-6 text-gray-300">
                <div className="flex items-center gap-2">
                  <Eye className="w-5 h-5" />
                  <span>{selectedVideo.views} views</span>
                </div>
                <div className="flex items-center gap-2">
                  <Heart className="w-5 h-5" />
                  <span>{selectedVideo.likes} likes</span>
                </div>
                <button className="flex items-center gap-2 ml-auto bg-[#034E08] hover:bg-green-700 text-white px-6 py-2 rounded-full transition-colors">
                  <Share2 className="w-4 h-4" />
                  <span>Share</span>
                </button>
              </div>
            </div>
          </div>
        </motion.div>
      </motion.div>
    );
  };

  return (
    <div className=" my-12">
      <div className="max-w-[1400px] mx-auto ">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-center mb-12"
        >
          <h1 className="text-[20px] text-[#00000] sm:text-[22px] lg:text-[24px] font-semibold mb-3">
            Video Gallery
          </h1>
          <p className="text-gray-900 text-[12px]">
            Discover profiles through their stories
          </p>
        </motion.div>

        {/* Swiper Container */}
        <div className="relative ">
          <Swiper
            ref={swiperRef}
            modules={[Navigation, Pagination, Autoplay]}
            spaceBetween={20}
            slidesPerView={1}
            autoplay={{
              delay: 4000,
              disableOnInteraction: false,
              pauseOnMouseEnter: true
            }}
            // pagination={{
            //   clickable: true,
            //   dynamicBullets: true,
            //    className: 'custom-pagination'
            // }}
            loop={true}
            speed={800}
            breakpoints={{
              640: {
                slidesPerView: 2,
                spaceBetween: 20
              },
              768: {
                slidesPerView: 3,
                spaceBetween: 20
              },
              1024: {
                slidesPerView: 4,
                spaceBetween: 25
              }
            }}
            className="pb-16"
          >
            {videos.map((video) => (
              <SwiperSlide key={video.id}>
                <VideoCard video={video} />
              </SwiperSlide>
            ))}
          </Swiper>

          {/* Custom Navigation Buttons */}
          {/* Custom Navigation Buttons */}
          <motion.button
            whileHover={{ scale: 1.1, x: -5 }}
            whileTap={{ scale: 0.9 }}
            onClick={() => swiperRef.current?.swiper.slidePrev()}
            className="hidden sm:flex absolute left-0 top-1/2 -translate-y-1/2 z-10 
           bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
            w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center "
          >
            <ChevronLeft className="w-6 h-6 text-gray-700" />
          </motion.button>

          <motion.button
            whileHover={{ scale: 1.1, x: 5 }}
            whileTap={{ scale: 0.9 }}
            onClick={() => swiperRef.current?.swiper.slideNext()}
            className="hidden sm:flex absolute right-0 top-1/2 -translate-y-1/2 z-10 
           bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
            w-12 h-12  rounded-full shadow-xl hover:shadow-2xl items-center justify-center transition-all"
          >
            <ChevronRight className="w-6 h-6 text-gray-700" />
          </motion.button>
        </div>

        {/* View All Button */}
        {/* <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.5 }}
          className="text-center mt-12"
        >
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="px-8 py-3 bg-[#034E08] hover:bg-green-700 text-white rounded-full font-semibold text-lg shadow-lg hover:shadow-xl transition-all"
          >
            View All Videos
          </motion.button>
        </motion.div> */}
      </div>

      {/* Video Modal */}
      {selectedVideo && <VideoModal />}

      {/* Custom Swiper Styles */}
      <style jsx global>{`
        .swiper-pagination-bullet {
          width: 10px;
          height: 10px;
          background: #A70710;
          opacity: 0.5;
        }
        
        .swiper-pagination-bullet-active {
          opacity: 1;
          width: 30px;
          border-radius: 5px;
        }

        .swiper-slide {
          height: auto;
          display: flex;
        }

         /* Custom Pagination Position */
        .custom-pagination {
          position: absolute;
          top: 200px;  /* Adjusted top position */
          left: 0;
          width: 100%;
          display: flex;
          justify-content: center;
          z-index: 10;
        }
      `}</style>
    </div>
  );
};

export default VideoSwiperGallery;