'use client';

import { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

const navLinks = [
  { href: '/', label: 'Home' },
  { href: '/art', label: 'Art' },
  { href: '/about', label: 'About' },
  { href: '/services', label: 'Services' },
  {
    href: '/re-evolution-art',
    label: 'Re Evolution Art',
    children: [
      { href: '/our-artists', label: 'Our Artists' },
      { href: '/our-ambassadors', label: 'Our Ambassadors' },
      { href: '/our-artisans', label: 'Our Artisans' },
    ],
  },
  { href: '/contact', label: 'Contact' },
];

export default function Navigation() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [mobileSubMenuOpen, setMobileSubMenuOpen] = useState(false);
  const pathname = usePathname();

  const isActive = (href: string) => {
    if (href === '/') return pathname === '/';
    return pathname.startsWith(href);
  };

  return (
    <>
      <nav className="fixed top-0 left-0 right-0 z-50 glass">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <Link href="/" className="text-2xl font-light tracking-widest">
            XHIVA ART
          </Link>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center gap-2">
            {navLinks.map((link) =>
              link.children ? (
                <div key={link.href} className="nav-dropdown-wrapper">
                  <Link
                    href={link.href}
                    className={`nav-link ${isActive(link.href) || link.children.some(c => isActive(c.href)) ? 'nav-link-active' : ''}`}
                  >
                    {link.label}
                    <svg className="nav-chevron" width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5">
                      <path d="M2 4l3 3 3-3" />
                    </svg>
                  </Link>
                  <div className="nav-dropdown">
                    {link.children.map((child) => (
                      <Link
                        key={child.href}
                        href={child.href}
                        className={`nav-dropdown-item ${isActive(child.href) ? 'nav-link-active' : ''}`}
                      >
                        {child.label}
                      </Link>
                    ))}
                  </div>
                </div>
              ) : (
                <Link
                  key={link.href}
                  href={link.href}
                  className={`nav-link ${isActive(link.href) ? 'nav-link-active' : ''}`}
                >
                  {link.label}
                </Link>
              )
            )}
          </div>

          {/* Mobile Menu Button */}
          <button
            className="md:hidden p-2"
            onClick={() => setMobileMenuOpen(true)}
            aria-label="Open menu"
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <line x1="3" y1="6" x2="21" y2="6" />
              <line x1="3" y1="12" x2="21" y2="12" />
              <line x1="3" y1="18" x2="21" y2="18" />
            </svg>
          </button>
        </div>
      </nav>

      {/* Mobile Menu */}
      {mobileMenuOpen && (
        <div className="mobile-menu">
          <button
            className="absolute top-6 right-6 p-2"
            onClick={() => { setMobileMenuOpen(false); setMobileSubMenuOpen(false); }}
            aria-label="Close menu"
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <line x1="18" y1="6" x2="6" y2="18" />
              <line x1="6" y1="6" x2="18" y2="18" />
            </svg>
          </button>

          {navLinks.map((link) =>
            link.children ? (
              <div key={link.href} className="flex flex-col items-center">
                <div className="flex items-center gap-2">
                  <Link
                    href={link.href}
                    className={`nav-link text-xl ${isActive(link.href) ? 'nav-link-active' : ''}`}
                    onClick={() => { setMobileMenuOpen(false); setMobileSubMenuOpen(false); }}
                  >
                    {link.label}
                  </Link>
                  <button
                    onClick={() => setMobileSubMenuOpen(!mobileSubMenuOpen)}
                    className="p-1"
                    aria-label="Toggle submenu"
                  >
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 10 10"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      className={`transition-transform duration-200 ${mobileSubMenuOpen ? 'rotate-180' : ''}`}
                    >
                      <path d="M2 4l3 3 3-3" />
                    </svg>
                  </button>
                </div>
                {mobileSubMenuOpen && (
                  <div className="flex flex-col items-center gap-3 mt-3">
                    {link.children.map((child) => (
                      <Link
                        key={child.href}
                        href={child.href}
                        className={`nav-link text-base opacity-70 ${isActive(child.href) ? 'nav-link-active' : ''}`}
                        onClick={() => { setMobileMenuOpen(false); setMobileSubMenuOpen(false); }}
                      >
                        {child.label}
                      </Link>
                    ))}
                  </div>
                )}
              </div>
            ) : (
              <Link
                key={link.href}
                href={link.href}
                className={`nav-link text-xl ${isActive(link.href) ? 'nav-link-active' : ''}`}
                onClick={() => { setMobileMenuOpen(false); setMobileSubMenuOpen(false); }}
              >
                {link.label}
              </Link>
            )
          )}
        </div>
      )}
    </>
  );
}
