import { useState, useEffect } from 'react';
import { motion } from 'motion/react';

interface CitySubmenuProps {
  onClose: () => void;
  currentPage?: string;
  onHomeClick?: () => void;
  onMelbourneClick?: () => void;
  onAttractionsClick?: () => void;
  onPassesClick?: () => void;
  onBlogsClick?: () => void;
  onHowItWorksClick?: () => void;
}

interface SubmenuItem {
  id: string;
  label: string;
  isCity?: boolean;
  action?: () => void;
}

export function CitySubmenu({ 
  onClose,
  currentPage, 
  onHomeClick,
  onMelbourneClick, 
  onAttractionsClick, 
  onPassesClick, 
  onBlogsClick,
  onHowItWorksClick
}: CitySubmenuProps) {
  const [selectedItem, setSelectedItem] = useState<string | null>(null);
  const [isScrolled, setIsScrolled] = useState(false);

  // Handle scroll effects to match main navbar behavior
  useEffect(() => {
    const handleScroll = () => {
      const scrolled = window.scrollY > 20;
      setIsScrolled(scrolled);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const submenuItems: SubmenuItem[] = [
    { 
      id: 'melbourne', 
      label: 'Melbourne', 
      isCity: true,
      action: () => {
        onMelbourneClick?.();
        onClose();
      }
    },
    { 
      id: 'attractions', 
      label: 'Attractions',
      action: () => {
        onAttractionsClick?.();
        onClose();
      }
    },

    { 
      id: 'buy-now', 
      label: 'Buy Now',
      action: () => {
        onPassesClick?.();
        onClose();
      }
    },
    { 
      id: 'blogs', 
      label: 'Blogs',
      action: () => {
        onBlogsClick?.();
        onClose();
      }
    },
    { 
      id: 'how-it-works', 
      label: 'How It Works',
      action: () => {
        onHowItWorksClick?.();
        onClose();
      }
    }
  ];

  // Update selection based on current page
  useEffect(() => {
    if (currentPage === 'melbourne') {
      setSelectedItem('melbourne');
    } else if (currentPage === 'attractions') {
      setSelectedItem('attractions');
    } else if (currentPage === 'blogs') {
      setSelectedItem('blogs');
    } else if (currentPage === 'how-it-works') {
      setSelectedItem('how-it-works');
    } else if (currentPage === 'passes') {
      setSelectedItem('buy-now');
    } else {
      setSelectedItem(null);
    }
  }, [currentPage]);

  const handleItemClick = (item: SubmenuItem) => {
    if (item.isCity) {
      setSelectedItem(item.id);
    }
    item.action?.();
  };

  const isItemActive = (item: SubmenuItem) => {
    return (item.isCity && currentPage === 'melbourne' && item.id === 'melbourne') ||
           (item.id === 'attractions' && currentPage === 'attractions') ||
           (item.id === 'buy-now' && currentPage === 'passes') ||
           (item.id === 'blogs' && currentPage === 'blogs') ||
           (item.id === 'how-it-works' && currentPage === 'how-it-works');
  };

  return (
    <>
      {/* Desktop Submenu */}
      <motion.div
        className="fixed top-[120px] left-1/2 transform -translate-x-1/2 z-30 hidden lg:block"
        initial={{ y: -20, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ 
          duration: 0.6, 
          ease: [0.25, 0.1, 0.25, 1], 
          delay: 0.4 
        }}
      >
        <motion.div
          className="bg-white rounded-full px-2 py-2 shadow-lg border border-gray-200"
          initial={{ scale: 0.9 }}
          animate={{ 
            scale: isScrolled ? 0.95 : 1,
            y: isScrolled ? 2 : 0,
            boxShadow: isScrolled 
              ? "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" 
              : "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)"
          }}
          transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
        >
          <div className="flex items-center gap-1">
            {submenuItems.map((item) => (
              <motion.button
                key={item.id}
                onClick={() => handleItemClick(item)}
                className={`font-poppins font-medium text-base relative px-4 py-2.5 transition-all duration-300 whitespace-nowrap rounded-full ${
                  isItemActive(item)
                    ? 'bg-primary text-white shadow-md'
                    : 'text-gray-700 hover:text-white hover:bg-gray-800'
                }`}
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
              >
                {item.label}
                
                {/* Hover effect for non-active items */}
                {!isItemActive(item) && (
                  <motion.div
                    className="absolute inset-0 bg-gray-800 rounded-full -z-10"
                    initial={{ opacity: 0, scale: 0.9 }}
                    whileHover={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.2 }}
                  />
                )}
              </motion.button>
            ))}
          </div>
        </motion.div>
      </motion.div>

      {/* Mobile Submenu */}
      <motion.div
        className="fixed top-[100px] left-4 right-4 z-30 md:hidden"
        initial={{ y: -20, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ 
          duration: 0.6, 
          ease: [0.25, 0.1, 0.25, 1], 
          delay: 0.4 
        }}
      >
        <motion.div
          className="bg-white rounded-2xl px-3 py-3 shadow-lg border border-gray-200"
          initial={{ scale: 0.9 }}
          animate={{ 
            scale: isScrolled ? 0.95 : 1,
            y: isScrolled ? 2 : 0,
            boxShadow: isScrolled 
              ? "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" 
              : "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)"
          }}
          transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
        >
          <div className="flex items-center gap-2 overflow-x-auto scrollbar-hide">
            {submenuItems.map((item) => (
              <motion.button
                key={item.id}
                onClick={() => handleItemClick(item)}
                className={`relative px-3 py-2 text-sm font-medium transition-all duration-300 whitespace-nowrap rounded-xl flex-shrink-0 ${
                  isItemActive(item)
                    ? 'bg-primary text-white shadow-md'
                    : 'text-gray-700 hover:text-white hover:bg-gray-800'
                }`}
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
              >
                {item.label}
                
                {/* Hover effect for non-active items */}
                {!isItemActive(item) && (
                  <motion.div
                    className="absolute inset-0 bg-gray-800 rounded-xl -z-10"
                    initial={{ opacity: 0, scale: 0.9 }}
                    whileHover={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.2 }}
                  />
                )}
              </motion.button>
            ))}
          </div>
        </motion.div>
      </motion.div>

      {/* Medium Screen Submenu */}
      <motion.div
        className="fixed top-[110px] left-1/2 transform -translate-x-1/2 z-30 hidden md:block lg:hidden"
        initial={{ y: -20, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ 
          duration: 0.6, 
          ease: [0.25, 0.1, 0.25, 1], 
          delay: 0.4 
        }}
      >
        <motion.div
          className="bg-white rounded-full px-2 py-2 shadow-lg border border-gray-200"
          initial={{ scale: 0.9 }}
          animate={{ 
            scale: isScrolled ? 0.95 : 1,
            y: isScrolled ? 2 : 0,
            boxShadow: isScrolled 
              ? "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" 
              : "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)"
          }}
          transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
        >
          <div className="flex items-center gap-1">
            {submenuItems.map((item) => (
              <motion.button
                key={item.id}
                onClick={() => handleItemClick(item)}
                className={`relative px-4 py-2.5 text-sm font-medium transition-all duration-300 whitespace-nowrap rounded-full ${
                  isItemActive(item)
                    ? 'bg-primary text-white shadow-md'
                    : 'text-gray-700 hover:text-white hover:bg-gray-800'
                }`}
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
              >
                {item.label}
                
                {/* Hover effect for non-active items */}
                {!isItemActive(item) && (
                  <motion.div
                    className="absolute inset-0 bg-gray-800 rounded-full -z-10"
                    initial={{ opacity: 0, scale: 0.9 }}
                    whileHover={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.2 }}
                  />
                )}
              </motion.button>
            ))}
          </div>
        </motion.div>
      </motion.div>
    </>
  );
}