import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { ChevronLeft, ChevronRight, Play, Sparkles, Star, Zap } from "lucide-react"
import "./Carousel.css"

function Carousel() {
  const [currentSlide, setCurrentSlide] = useState(0)
  const [isAutoPlaying, setIsAutoPlaying] = useState(true)

  const slides = [
    {
      id: 1,
      image: "/slider_image/banner1.jpg",
      title: "Premium Collections",
      subtitle: "Experience Premium Quality",
      description: "Discover our exclusive range of Premium products crafted for the discerning customer",
      cta: "Explore Collection",
      gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
      accent: "#667eea",
    },
    {
      id: 2,
      image: "/slider_image/banner2.webp",
      title: "Tech Innovation Hub",
      subtitle: "Future is Here",
      description: "Cutting-edge technology meets elegant design in our latest electronics collection",
      cta: "Shop Tech",
      gradient: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
      accent: "#f093fb",
    },
    {
      id: 3,
      image: "/slider_image/banner3.webp",
      title: "Fashion Forward",
      subtitle: "Style Redefined",
      description: "Elevate your wardrobe with our curated selection of contemporary fashion",
      cta: "Browse Fashion",
      gradient: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
      accent: "#4facfe",
    },
    {
      id: 4,
      image: "/slider_image/banner4.webp",
      title: "Home & Living",
      subtitle: "Premium Lifestyle",
      description: "Transform your space with our Premium home and lifestyle products",
      cta: "Discover Home",
      gradient: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)",
      accent: "#43e97b",
    },
    {
      id: 5,
      image: "/slider_image/banner5.webp",
      title: "Gaming Universe",
      subtitle: "Level Up Your Game",
      description: "Professional gaming gear and accessories for the ultimate gaming experience",
      cta: "Game On",
      gradient: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)",
      accent: "#fa709a",
    },
  ]

  useEffect(() => {
    if (!isAutoPlaying) return

    const interval = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length)
    }, 10000)

    return () => clearInterval(interval)
  }, [isAutoPlaying, slides.length])

  const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % slides.length)
    setIsAutoPlaying(false)
    setTimeout(() => setIsAutoPlaying(true), 10000)
  }

  const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length)
    setIsAutoPlaying(false)
    setTimeout(() => setIsAutoPlaying(true), 10000)
  }

  const goToSlide = (index) => {
    setCurrentSlide(index)
    setIsAutoPlaying(false)
    setTimeout(() => setIsAutoPlaying(true), 10000)
  }

  return (
    <div className="Premium-carousel-container">
      <div className="carousel-wrapper">
        {}
        <div className="carousel-particles">
          {[...Array(50)].map((_, i) => (
            <motion.div
              key={i}
              className="carousel-particle"
              style={{
                left: `${Math.random() * 100}%`,
                top: `${Math.random() * 100}%`,
                animationDelay: `${Math.random() * 5}s`,
                animationDuration: `${3 + Math.random() * 4}s`,
              }}
              animate={{
                y: [-20, 20, -20],
                opacity: [0, 1, 0],
                scale: [0.5, 1, 0.5],
              }}
              transition={{
                duration: 4,
                repeat: Number.POSITIVE_INFINITY,
                delay: Math.random() * 2,
              }}
            />
          ))}
        </div>

        {}
        <div className="carousel-main">
          <AnimatePresence mode="wait">
            <motion.div
              key={currentSlide}
              className="carousel-slide"
              initial={{ opacity: 0, scale: 1.1 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.9 }}
              transition={{ duration: 0.8, ease: "easeInOut" }}
            >
              {}
              <div className="slide-background">
                {}
                <div className="slide-overlay" style={{ background: slides[currentSlide].gradient }} />
                <div className="slide-cosmic-overlay" />
              </div>

              {}
              <div className="slide-content">
                <motion.div
                  className="content-wrapper"
                  initial={{ y: 100, opacity: 0 }}
                  animate={{ y: 0, opacity: 1 }}
                  transition={{ duration: 0.8, delay: 0.2 }}
                >
                  {}
                  <div className="floating-icons">
                    <motion.div
                      className="floating-icon"
                      animate={{
                        y: [-10, 10, -10],
                        rotate: [0, 360],
                        scale: [1, 1.2, 1],
                      }}
                      transition={{ duration: 4, repeat: Number.POSITIVE_INFINITY }}
                    >
                      <Sparkles size={24} />
                    </motion.div>
                    <motion.div
                      className="floating-icon"
                      animate={{
                        y: [10, -10, 10],
                        rotate: [360, 0],
                        scale: [1.2, 1, 1.2],
                      }}
                      transition={{ duration: 3, repeat: Number.POSITIVE_INFINITY, delay: 1 }}
                    >
                      <Star size={20} />
                    </motion.div>
                    <motion.div
                      className="floating-icon"
                      animate={{
                        y: [-5, 15, -5],
                        rotate: [0, 180, 360],
                        scale: [1, 1.1, 1],
                      }}
                      transition={{ duration: 10, repeat: Number.POSITIVE_INFINITY, delay: 2 }}
                    >
                      <Zap size={22} />
                    </motion.div>
                  </div>

                  {}
                  <motion.div
                    className="text-content"
                    initial={{ x: -50, opacity: 0 }}
                    animate={{ x: 0, opacity: 1 }}
                    transition={{ duration: 0.8, delay: 0.4 }}
                  >
                    <motion.span
                      className="slide-subtitle"
                      initial={{ y: 20, opacity: 0 }}
                      animate={{ y: 0, opacity: 1 }}
                      transition={{ duration: 0.6, delay: 0.6 }}
                    >
                      {slides[currentSlide].subtitle}
                    </motion.span>

                    <motion.h1
                      className="slide-title"
                      initial={{ y: 30, opacity: 0 }}
                      animate={{ y: 0, opacity: 1 }}
                      transition={{ duration: 0.8, delay: 0.8 }}
                    >
                      {slides[currentSlide].title}
                    </motion.h1>

                    <motion.p
                      className="slide-description"
                      initial={{ y: 20, opacity: 0 }}
                      animate={{ y: 0, opacity: 1 }}
                      transition={{ duration: 0.6, delay: 1 }}
                    >
                      {slides[currentSlide].description}
                    </motion.p>

                    <motion.div
                      className="slide-actions"
                      initial={{ y: 30, opacity: 0 }}
                      animate={{ y: 0, opacity: 1 }}
                      transition={{ duration: 0.8, delay: 1.2 }}
                    >
                      <motion.button
                        className="Premium-cta-btn primary"
                        whileHover={{ scale: 1.05, y: -3 }}
                        whileTap={{ scale: 0.95 }}
                        style={{ "--accent-color": slides[currentSlide].accent }}
                      >
                        <span>{slides[currentSlide].cta}</span>
                        <div className="btn-glow" />
                        <div className="btn-particles">
                          {[...Array(6)].map((_, i) => (
                            <div key={i} className={`btn-particle btn-particle-${i + 1}`} />
                          ))}
                        </div>
                      </motion.button>

                      <motion.button
                        className="Premium-cta-btn secondary"
                        whileHover={{ scale: 1.05, y: -3 }}
                        whileTap={{ scale: 0.95 }}
                      >
                        <Play size={18} />
                        <span>Watch Demo</span>
                        <div className="btn-shimmer" />
                      </motion.button>
                    </motion.div>
                  </motion.div>

                  {}
                  <motion.div
                    className="stats-cards"
                    initial={{ y: 50, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    transition={{ duration: 0.8, delay: 1.4 }}
                  >
                    {[
                      { label: "Products", value: "10K+" },
                      { label: "Customers", value: "50K+" },
                      { label: "Reviews", value: "4.9★" },
                    ].map((stat, index) => (
                      <motion.div
                        key={stat.label}
                        className="stat-card"
                        whileHover={{
                          rotateY: 15,
                          rotateX: 5,
                          scale: 1.05,
                          z: 50,
                        }}
                        transition={{ duration: 0.3 }}
                        style={{
                          transformStyle: "preserve-3d",
                          perspective: "1000px",
                        }}
                      >
                        <div className="stat-value">{stat.value}</div>
                        <div className="stat-label">{stat.label}</div>
                        <div className="stat-glow" />
                      </motion.div>
                    ))}
                  </motion.div>
                </motion.div>
              </div>
            </motion.div>
          </AnimatePresence>

          {}
          <motion.button
            className="carousel-nav prev"
            onClick={prevSlide}
            whileHover={{ scale: 1.1, x: -5 }}
            whileTap={{ scale: 0.9 }}
            initial={{ x: -100, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ duration: 0.8, delay: 1.6 }}
          >
            <ChevronLeft size={24} />
            <div className="nav-glow" />
          </motion.button>

          <motion.button
            className="carousel-nav next"
            onClick={nextSlide}
            whileHover={{ scale: 1.1, x: 5 }}
            whileTap={{ scale: 0.9 }}
            initial={{ x: 100, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ duration: 0.8, delay: 1.6 }}
          >
            <ChevronRight size={24} />
            <div className="nav-glow" />
          </motion.button>

          {}
          <motion.div
            className="slide-indicators"
            initial={{ y: 50, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.8, delay: 1.8 }}
          >
            {slides.map((_, index) => (
              <motion.button
                key={index}
                className={`indicator ${index === currentSlide ? "active" : ""}`}
                onClick={() => goToSlide(index)}
                whileHover={{ scale: 1.2 }}
                whileTap={{ scale: 0.8 }}
                style={{ "--accent-color": slides[index].accent }}
              >
                <div className="indicator-progress">
                  {index === currentSlide && (
                    <motion.div
                      className="progress-fill"
                      initial={{ width: 0 }}
                      animate={{ width: "100%" }}
                      transition={{ duration: 10, ease: "linear" }}
                      key={currentSlide}
                    />
                  )}
                </div>
              </motion.button>
            ))}
          </motion.div>

          {}
          <div className="progress-ring">
            <svg width="60" height="60">
              <circle cx="30" cy="30" r="25" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="2" />
              <motion.circle
                cx="30"
                cy="30"
                r="25"
                fill="none"
                stroke="url(#progressGradient)"
                strokeWidth="2"
                strokeLinecap="round"
                strokeDasharray={157}
                strokeDashoffset={157}
                animate={{ strokeDashoffset: 157 - (157 * (currentSlide + 1)) / slides.length }}
                transition={{ duration: 0.5 }}
              />
              <defs>
                <linearGradient id="progressGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stopColor="#667eea" />
                  <stop offset="100%" stopColor="#f6d365" />
                </linearGradient>
              </defs>
            </svg>
            <div className="progress-text">
              {currentSlide + 1}/{slides.length}
            </div>
          </div>
        </div>

        {}
        <div className="cosmic-effects">
          <div className="cosmic-orb orb-1" />
          <div className="cosmic-orb orb-2" />
          <div className="cosmic-orb orb-3" />
          <div className="cosmic-nebula nebula-1" />
          <div className="cosmic-nebula nebula-2" />
        </div>
      </div>
    </div>
  )
}

export default Carousel