import { BUNDLES_ENABLED } from '@/lib/features';
import React, { useEffect, useState, useMemo } from 'react';
import Link from 'next/link';

interface MenuItem {
  label: string;
  href?: string;
  hasDropdown?: boolean;
  dropdownItems?: { label: string; href: string }[];
}

interface Brand {
  id: number;
  name: string;
  slug: string;
}

interface Category {
  id: number;
  name: string;
  slug: string;
  sort_order: number;
}

interface SecondaryNavbarProps {
  onHoverChange?: (isHovering: boolean) => void;
}

const SecondaryNavbar: React.FC<SecondaryNavbarProps> = ({ onHoverChange }) => {
  const [hoveredItem, setHoveredItem] = useState<string | null>(null);
  const [isScrolled, setIsScrolled] = useState(false);
  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
  const [brands, setBrands] = useState<Brand[]>([]);
  const [categories, setCategories] = useState<Category[]>([]);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [brandsResponse, categoriesResponse] = await Promise.all([
          fetch('/api/brands'),
          fetch('/api/categories'),
        ]);
        const brandsData = await brandsResponse.json();
        const categoriesData = await categoriesResponse.json();
        setBrands(Array.isArray(brandsData) ? brandsData : []);
        setCategories(Array.isArray(categoriesData) ? categoriesData : []);
      } catch (error) {
      }
    };

    fetchData();
  }, []);

  const menuItems: MenuItem[] = useMemo(() => [
    {
      label: 'Celé parfémy',
      hasDropdown: true,
      dropdownItems: Array.isArray(categories) ? categories.map((category) => ({
        label: category.name,
        href: `/parfemy/${category.slug}`,
      })) : [],
    },
    {
      label: 'Značky',
      hasDropdown: true,
      dropdownItems: Array.isArray(brands) ? brands.map((brand) => ({
        label: brand.name,
        href: `/brands/${brand.slug}`,
      })) : [],
    },
    { label: 'Výprodej', href: '/vyprodej' },
    ...(BUNDLES_ENABLED ? [{ label: 'Výhodné sady', href: '/vyhodne-sady' }] : []),
    { label: 'Dárkové poukazy', href: '/darkove-poukazy' },
  ], [brands, categories]);

  const handleItemEnter = (itemLabel: string) => {
    setHoveredItem(itemLabel);
    const item = menuItems.find(m => m.label === itemLabel);
    if (item?.hasDropdown) {
      setActiveDropdown(itemLabel);
      // Nezobrazujeme CategoriesSection když je dropdown otevřen
      onHoverChange?.(false);
    }
  };


  return (
    <nav
      className="hidden md:block fixed left-0 right-0 z-40 transition-all duration-300"
      style={{
          top: 'calc(3.5rem + 7rem)',
          backgroundColor: isScrolled ? 'rgba(10, 10, 10, 0.95)' : 'rgba(10, 10, 10, 0.77)',
        }}
    >
      <div className="w-full">
        <div className="flex items-center justify-center h-12 md:h-14 lg:h-16 gap-1 md:gap-2 px-2 overflow-visible">
          {menuItems.map((item, index) => (
            <div
              key={index}
              className="relative flex items-center flex-shrink-0 group"
              onMouseEnter={() => handleItemEnter(item.label)}
              onMouseLeave={() => {
                setHoveredItem(null);
                setActiveDropdown(null);
                onHoverChange?.(false);
              }}
            >
              {/* Menu Button or Link */}
              {item.href && !item.hasDropdown ? (
                <Link
                  href={item.href}
                  className={`transition-all px-2 sm:px-3 md:px-4 lg:px-5 py-2 md:py-3 text-xs sm:text-sm md:text-base lg:text-lg font-semibold font-aptos whitespace-nowrap uppercase flex items-center gap-1.5 relative ${
                    item.label === 'Výprodej'
                      ? 'border-b-2'
                      : item.label === 'Výhodné sady' || item.label === 'Dárkové poukazy'
                      ? 'border-b-2'
                      : 'text-luxury-light hover:text-luxury-gold'
                  }`}
                  style={
                    item.label === 'Výprodej'
                      ? {
                          color: hoveredItem === item.label ? '#ef4444' : '#dc2626',
                          borderBottomColor: hoveredItem === item.label ? '#ef4444' : '#dc2626',
                          transform: hoveredItem === item.label ? 'scale(1.08)' : 'scale(1)',
                          paddingBottom: '0.25rem',
                        }
                      : item.label === 'Výhodné sady' || item.label === 'Dárkové poukazy'
                      ? {
                          color: hoveredItem === item.label ? '#fcd34d' : '#f3bd35',
                          borderBottomColor: hoveredItem === item.label ? '#fcd34d' : '#f3bd35',
                          transform: hoveredItem === item.label ? 'scale(1.08)' : 'scale(1)',
                          paddingBottom: '0.25rem',
                        }
                      : {
                          color: hoveredItem === item.label ? '#f3bd35' : '#f5f5f5',
                          transform: hoveredItem === item.label ? 'scale(1.08)' : 'scale(1)',
                        }
                  }
                >
                  {item.label}
                </Link>
              ) : (
                <button
                  className={`transition-all px-2 sm:px-3 md:px-4 lg:px-5 py-2 md:py-3 text-xs sm:text-sm md:text-base lg:text-lg font-semibold font-aptos whitespace-nowrap uppercase flex items-center gap-1.5 relative ${
                    item.label === 'Výprodej'
                      ? 'border-b-2'
                      : item.label === 'Výhodné sady' || item.label === 'Dárkové poukazy'
                      ? 'border-b-2'
                      : 'text-luxury-light hover:text-luxury-gold'
                  }`}
                  style={
                    item.label === 'Výprodej'
                      ? {
                          color: hoveredItem === item.label ? '#ef4444' : '#dc2626',
                          borderBottomColor: hoveredItem === item.label ? '#ef4444' : '#dc2626',
                          transform: hoveredItem === item.label ? 'scale(1.08)' : 'scale(1)',
                          paddingBottom: '0.25rem',
                        }
                      : item.label === 'Výhodné sady' || item.label === 'Dárkové poukazy'
                      ? {
                          color: hoveredItem === item.label ? '#fcd34d' : '#f3bd35',
                          borderBottomColor: hoveredItem === item.label ? '#fcd34d' : '#f3bd35',
                          transform: hoveredItem === item.label ? 'scale(1.08)' : 'scale(1)',
                          paddingBottom: '0.25rem',
                        }
                      : {
                          color: hoveredItem === item.label ? '#f3bd35' : '#f5f5f5',
                          transform: hoveredItem === item.label ? 'scale(1.08)' : 'scale(1)',
                        }
                  }
                >
                  {item.label}
                  {item.hasDropdown && (
                    <svg
                      className={`w-3 h-3 sm:w-4 sm:h-4 transition-transform duration-300 ${
                        activeDropdown === item.label ? 'rotate-180' : ''
                      }`}
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M19 14l-7 7m0 0l-7-7m7 7V3"
                      />
                    </svg>
                  )}
                </button>
              )}

              {/* Dropdown Menu */}
              {item.hasDropdown && item.dropdownItems && activeDropdown === item.label && (
                <div
                  className="absolute top-full left-1/2 -translate-x-1/2 mt-0 pt-2 z-50 animate-in fade-in duration-200 pointer-events-auto"
                >
                  <div className={`bg-gradient-to-b from-luxury-dark to-luxury-dark/95 border border-luxury-gold/40 rounded-md shadow-2xl w-max min-w-[200px] backdrop-blur-md ${
                    item.label === 'Značky' ? 'overflow-y-auto max-h-96' : 'overflow-hidden'
                  }`}
                  style={{
                    boxShadow: '0 8px 32px rgba(221, 162, 13, 0.15), 0 0 20px rgba(221, 162, 13, 0.1)'
                  }}>
                    {/* Dropdown Header - Hidden for Celé parfémy and Značky */}
                    {item.label !== 'Značky' && item.label !== 'Celé parfémy' && (
                      <div className="px-4 sm:px-5 md:px-6 py-3 md:py-4 border-b border-luxury-gold/20 bg-gradient-to-r from-luxury-gold/5 to-transparent sticky top-0">
                        <p className="text-luxury-gold text-xs font-black uppercase tracking-widest">
                          {item.label}
                        </p>
                      </div>
                    )}

                    {/* Dropdown Items */}
                    {item.dropdownItems.map((dropdownItem, dropdownIndex) => (
                      <Link
                        key={dropdownIndex}
                        href={dropdownItem.href}
                        className="block px-4 sm:px-5 md:px-6 py-3 md:py-4 text-xs sm:text-sm md:text-sm text-luxury-light/90 hover:text-luxury-gold transition-all duration-200 border-b border-luxury-gold/10 last:border-b-0 font-aptos uppercase relative group hover:bg-gradient-to-r hover:from-luxury-gold/8 hover:to-transparent"
                      >
                        <span className="absolute left-3 opacity-0 group-hover:opacity-100 transition-all duration-200 text-luxury-gold font-bold">›</span>
                        <span className="group-hover:pl-2 transition-all duration-200 inline-block">{dropdownItem.label}</span>
                      </Link>
                    ))}
                  </div>
                </div>
              )}

              {index < menuItems.length - 1 && (
                <span className="text-luxury-gold/50 ml-1 md:ml-2 hidden sm:inline">|</span>
              )}
            </div>
          ))}
        </div>
      </div>
    </nav>
  );
};

export default SecondaryNavbar;