import { useState } from "react"
import { Link } from "react-router-dom"
import { motion, AnimatePresence } from "framer-motion"
import {
  ShoppingBag,
  Smartphone,
  Shirt,
  Laptop,
  Home,
  Zap,
  Plane,
  Gamepad2,
  Bike,
  Sparkles,
  TrendingUp,
  Star,
  Crown,
  Gem,
} from "lucide-react"
import "./MenuBar.css"

function MenuBar() {
  const [hoveredItem, setHoveredItem] = useState(null)
  const [activeCategory, setActiveCategory] = useState(null)

  const menuItems = [
    {
      icon: ShoppingBag,
      label: "Grocery",
      color: "#FF6B6B",
      gradient: "linear-gradient(135deg, #FF6B6B, #FF8E53)",
      description: "Fresh & Organic",
      badge: "New",
      particles: 8,
    },
    {
      icon: Smartphone,
      label: "Mobiles",
      color: "#4ECDC4",
      gradient: "linear-gradient(135deg, #4ECDC4, #44A08D)",
      description: "Latest Tech",
      badge: "Hot",
      particles: 10,
    },
    {
      icon: Shirt,
      label: "Fashion",
      color: "#45B7D1",
      gradient: "linear-gradient(135deg, #45B7D1, #96C93D)",
      description: "Trendy Styles",
      badge: "Sale",
      particles: 12,
    },
    {
      icon: Laptop,
      label: "Laptops",
      color: "#96CEB4",
      gradient: "linear-gradient(135deg, #96CEB4, #FFECD2)",
      description: "High Performance",
      badge: "Pro",
      particles: 9,
    },
    {
      icon: Home,
      label: "Home",
      color: "#FFEAA7",
      gradient: "linear-gradient(135deg, #FFEAA7, #DDA0DD)",
      description: "Smart Living",
      badge: "Smart",
      particles: 7,
    },
    {
      icon: Zap,
      label: "Electronic",
      color: "#DDA0DD",
      gradient: "linear-gradient(135deg, #DDA0DD, #98D8C8)",
      description: "Cutting Edge",
      badge: "Tech",
      particles: 11,
    },

    {
      icon: Gamepad2,
      label: "Gaming",
      color: "#F7DC6F", 
      gradient: "linear-gradient(135deg, #F7DC6F, #BB8FCE)",
      description: "Epic Gaming",
      badge: "Play",
      particles: 15,
    },
    {
      icon: Bike,
      label: "Sports",
      color: "#BB8FCE",
      gradient: "linear-gradient(135deg, #BB8FCE, #85C1E9)",
      description: "Active Lifestyle",
      badge: "Fit",
      particles: 8,
    },
  ]

  const containerVariants = {
    hidden: { opacity: 0, y: 50 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.8,
        staggerChildren: 0.1,
        delayChildren: 0.2,
      },
    },
  }

  const itemVariants = {
    hidden: { y: 30, opacity: 0, scale: 0.8 },
    visible: {
      y: 0,
      opacity: 1,
      scale: 1,
      transition: {
        type: "spring",
        stiffness: 200,
        damping: 20,
      },
    },
  }

  return (
    <div className="Premium-menu-section">
      {}
      <div className="menu-cosmic-bg">
        <div className="cosmic-grid">
          {[...Array(20)].map((_, i) => (
            <motion.div
              key={i}
              className="grid-dot"
              animate={{
                opacity: [0.2, 0.8, 0.2],
                scale: [1, 1.2, 1],
              }}
              transition={{
                duration: 3,
                repeat: Number.POSITIVE_INFINITY,
                delay: i * 0.1,
              }}
            />
          ))}
        </div>

        <div className="floating-elements">
          {[...Array(6)].map((_, i) => (
            <motion.div
              key={i}
              className="floating-element"
              animate={{
                y: [-20, 20, -20],
                x: [-10, 10, -10],
                rotate: [0, 360],
                scale: [1, 1.1, 1],
              }}
              transition={{
                duration: 8 + i,
                repeat: Number.POSITIVE_INFINITY,
                delay: i * 0.5,
              }}
            />
          ))}
        </div>
      </div>

      <motion.div
        className="Premium-menu-container"
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        viewport={{ once: true }}
      >
        {}
        <motion.div
          className="menu-header"
          initial={{ opacity: 0, y: -30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
        >
          <div className="header-content">
            <motion.div
              className="header-icon"
              animate={{ rotate: [0, 360] }}
              transition={{ duration: 20, repeat: Number.POSITIVE_INFINITY, ease: "linear" }}
            >
              <Crown size={32} />
            </motion.div>
            <div className="header-text">
              <h2 className="section-title gradient-text-Premium">Premium Categories</h2>
              <p className="section-subtitle">Discover our curated collection of Premium products</p>
            </div>
            <motion.div
              className="trending-badge"
              animate={{
                scale: [1, 1.1, 1],
                rotate: [0, 5, -5, 0],
              }}
              transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
            >
              <TrendingUp size={16} />
              <span>Trending</span>
            </motion.div>
          </div>
          <div className="header-glow" />
        </motion.div>

        {}
        <div className="menu-grid">
          {menuItems.map((item, index) => {
            const IconComponent = item.icon
            return (
              <motion.div
                key={index}
                variants={itemVariants}
                className="menu-item-wrapper"
                onHoverStart={() => setHoveredItem(index)}
                onHoverEnd={() => setHoveredItem(null)}
                onClick={() => setActiveCategory(index)}
              >
                <Link to="/productlist" className="Premium-menu-card">
                  {}
                  <div className="card-background">
                    <div className="gradient-bg" style={{ background: item.gradient }} />

                  </div>

                  {}
                  <div className="card-particles">
                    {[...Array(item.particles)].map((_, i) => (
                      <motion.div
                        key={i}
                        className="card-particle"
                        style={{
                          left: `${Math.random() * 100}%`,
                          top: `${Math.random() * 100}%`,
                          background: item.color,
                        }}
                        animate={{
                          y: [-10, 10, -10],
                          opacity: hoveredItem === index ? [0, 1, 0] : 0,
                          scale: hoveredItem === index ? [0.5, 1, 0.5] : 0,
                        }}
                        transition={{
                          duration: 2 + Math.random(),
                          repeat: Number.POSITIVE_INFINITY,
                          delay: i * 0.1,
                        }}
                      />
                    ))}
                  </div>

                  {}
                  <motion.div
                    className="category-badge"
                    style={{ background: item.gradient }}
                    animate={{
                      scale: hoveredItem === index ? 1.1 : 1,
                      rotate: hoveredItem === index ? [0, 5, -5, 0] : 0,
                    }}
                    transition={{ duration: 0.3 }}
                  >
                    <Gem size={10} />
                    <span>{item.badge}</span>
                  </motion.div>

                  {}
                  <motion.div
                    className="icon-container"
                    animate={{
                      scale: hoveredItem === index ? 1.2 : 1,
                      rotateY: hoveredItem === index ? 360 : 0,
                      z: hoveredItem === index ? 50 : 0,
                    }}
                    transition={{
                      duration: 0.6,
                      type: "spring",
                      stiffness: 200,
                    }}
                    style={{
                      "--icon-color": item.color,
                      transformStyle: "preserve-3d",
                    }}
                  >
                    <div className="icon-bg" />
                    <IconComponent size={36} className="menu-icon" />
                    <div className="icon-glow" />

                    {}
                    <div className="icon-rings">
                      <motion.div
                        className="ring ring-1"
                        animate={{ rotate: 360 }}
                        transition={{ duration: 8, repeat: Number.POSITIVE_INFINITY, ease: "linear" }}
                      />
                      <motion.div
                        className="ring ring-2"
                        animate={{ rotate: -360 }}
                        transition={{ duration: 12, repeat: Number.POSITIVE_INFINITY, ease: "linear" }}
                      />
                    </div>
                  </motion.div>

                  {}
                  <div className="card-content">
                    <motion.h3
                      className="menu-label"
                      animate={{
                        y: hoveredItem === index ? -5 : 0,
                        color: hoveredItem === index ? item.color : "#ffffff",
                      }}
                      transition={{ duration: 0.3 }}
                    >
                      {item.label}
                    </motion.h3>

                    <AnimatePresence>
                      {hoveredItem === index && (
                        <motion.p
                          className="menu-description"
                          initial={{ opacity: 0, y: 10 }}
                          animate={{ opacity: 1, y: 0 }}
                          exit={{ opacity: 0, y: 10 }}
                          transition={{ duration: 0.3 }}
                        >
                          {item.description}
                        </motion.p>
                      )}
                    </AnimatePresence>

                    {}
                    <motion.div
                      className="card-stats"
                      initial={{ opacity: 0 }}
                      animate={{
                        opacity: hoveredItem === index ? 1 : 0,
                        y: hoveredItem === index ? 0 : 10,
                      }}
                      transition={{ duration: 0.3, delay: 0.1 }}
                    >
                      <div className="stat">
                        <Star size={12} />
                        <span>4.8</span>
                      </div>
                      <div className="stat">
                        <Sparkles size={12} />
                        <span>1.2k+</span>
                      </div>
                    </motion.div>
                  </div>

                  {}
                  <motion.div
                    className="card-glow"
                    animate={{
                      opacity: hoveredItem === index ? 1 : 0,
                      scale: hoveredItem === index ? 1 : 0.8,
                    }}
                    transition={{ duration: 0.3 }}
                    style={{ background: item.gradient }}
                  />

                  {}
                  <motion.div
                    className="card-3d-effect"
                    animate={{
                      rotateX: hoveredItem === index ? 5 : 0,
                      rotateY: hoveredItem === index ? 5 : 0,
                      z: hoveredItem === index ? 20 : 0,
                    }}
                    transition={{ duration: 0.4 }}
                    style={{ transformStyle: "preserve-3d" }}
                  />

                  {}
                  <AnimatePresence>
                    {activeCategory === index && (
                      <motion.div
                        className="ripple-effect"
                        initial={{ scale: 0, opacity: 1 }}
                        animate={{ scale: 2, opacity: 0 }}
                        exit={{ scale: 2, opacity: 0 }}
                        transition={{ duration: 0.6 }}
                        style={{ background: item.color }}
                      />
                    )}
                  </AnimatePresence>
                </Link>
              </motion.div>
            )
          })}
        </div>

        {}
        <motion.div
          className="menu-stats"
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 1 }}
        >
          <div className="stats-grid">
            {[
              { label: "Categories", value: "50+", icon: Crown },
              { label: "Products", value: "10K+", icon: Gem },
              { label: "Brands", value: "500+", icon: Star },
              { label: "Reviews", value: "4.9★", icon: Sparkles },
            ].map((stat, index) => (
              <motion.div
                key={stat.label}
                className="stat-item"
                whileHover={{
                  scale: 1.05,
                  rotateY: 10,
                  z: 20,
                }}
                transition={{ duration: 0.3 }}
              >
                <div className="stat-icon">
                  <stat.icon size={20} />
                </div>
                <div className="stat-content">
                  <div className="stat-value">{stat.value}</div>
                  <div className="stat-label">{stat.label}</div>
                </div>
                <div className="stat-glow" />
              </motion.div>
            ))}
          </div>
        </motion.div>
      </motion.div>
    </div>
  )
}

export default MenuBar