import { useEffect, useState } from "react";
import { NavLink } from "react-router-dom";
import { FaBars, FaTimes, FaChevronDown } from "react-icons/fa";

/* Responsive sticky navigation bar using theme variables */
export default function SiteNav() {
  const [open, setOpen] = useState(false);
  const [servicesOpen, setServicesOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 50);
    onScroll();
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header className={`sticky top-0 z-50 transition-all ${scrolled ? 'bg-brand-bg/95 backdrop-blur-md shadow-lg' : 'bg-transparent'}`}>
      <nav className="relative container mx-auto px-4 flex items-center justify-between h-16 text-brand-text font-medium">
        <div className="text-xl tracking-wide font-semibold">
          <NavLink to="/" className="inline-block px-2 py-1 rounded nav-item text-rainbow font-bold">vontor.cz</NavLink>
        </div>
        <button
          aria-label="Toggle navigation"
          onClick={() => setOpen(o => !o)}
          className="md:hidden p-2 rounded-xl glow focus:outline-none bg-brandGradient text-white shadow-glow"
        >
          {open ? <FaTimes /> : <FaBars />}
        </button>
  <ul className={`md:flex md:items-center md:gap-8 md:static absolute left-0 w-full md:w-auto transition-all duration-300 ${open ? 'top-16 bg-brand-bg/95 pb-6 rounded-lg backdrop-blur-md' : 'top-[-500px]'}`}>
          <li className="flex"><NavLink to="/" onClick={()=>setOpen(false)} className={linkCls}>Home</NavLink></li>
          <li className="flex"><NavLink to="/portfolio" onClick={()=>setOpen(false)} className={linkCls}>Portfolio</NavLink></li>
          <li className="flex"><NavLink to="/skills" onClick={()=>setOpen(false)} className={linkCls}>Skills</NavLink></li>
          <li className="flex"><NavLink to="/hosting-security" onClick={()=>setOpen(false)} className={linkCls}>Hosting & Security</NavLink></li>
          <li className="flex"><NavLink to="/donate" onClick={()=>setOpen(false)} className={linkCls}>Donate / Shop</NavLink></li>
          <li className="flex"><NavLink to="/contact" onClick={()=>setOpen(false)} className={linkCls}>Contact</NavLink></li>
          <li className="relative">
            <button
              type="button"
              onClick={() => setServicesOpen(s => !s)}
              className={`nav-item px-3 py-2 flex items-center gap-1`}
              aria-haspopup="true" aria-expanded={servicesOpen}
            >
              <span className="inline-flex items-center gap-1">More <span className="inline-flex items-center justify-center w-6 h-6 rounded-md bg-brandGradient text-white"><FaChevronDown className={`transition-transform ${servicesOpen ? 'rotate-180' : ''}`} /></span></span>
            </button>
            {/* Mobile inline dropdown */}
            <div className={`md:hidden w-full mt-2 ${servicesOpen ? 'block' : 'hidden'}`}>
              <ul className="space-y-2 text-sm glass p-4">
                <li><a href="#live" className={`${dropdownCls} nav-item`}>Live Performance</a></li>
                <li><a href="#shop" className={`${dropdownCls} nav-item`}>Support Journey</a></li>
                <li><a href="#portfolio" className={`${dropdownCls} nav-item`}>Featured Work</a></li>
              </ul>
            </div>
          </li>
        </ul>
        {/* Desktop offset dropdown anchored to right under nav */}
        {servicesOpen && (
          <div className="hidden md:block absolute top-full right-4 translate-y-2 min-w-56 glass p-4 shadow-xl">
            <ul className="space-y-2 text-sm">
              <li><a href="#live" className={`${dropdownCls} nav-item`}>Live Performance</a></li>
              <li><a href="#shop" className={`${dropdownCls} nav-item`}>Support Journey</a></li>
              <li><a href="#portfolio" className={`${dropdownCls} nav-item`}>Featured Work</a></li>
            </ul>
          </div>
        )}
      </nav>
    </header>
  );
}

const linkCls = ({ isActive }: { isActive: boolean }) => `nav-item px-3 py-2 rounded transition-colors ${isActive ? 'active text-brand-accent font-semibold' : 'hover:text-brand-accent'}`;
const dropdownCls = "block px-2 py-1 rounded hover:bg-[color-mix(in_hsl,var(--c-other),transparent_85%)]";