'use client';

import Link from 'next/link';
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  navigationMenuTriggerStyle,
} from '@/components/ui/navigation-menu';
import { ThemeToggle } from '@/components/theme-toggle';
import { MessageCircle, Menu as MenuIcon, X } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useState, useEffect } from 'react';
import { usePathname } from 'next/navigation';

interface NavLink {
  label: string;
  href: string;
  external?: boolean;
  icon?: React.ReactNode;
}

const navItems: NavLink[] = [
  {
    label: 'Home',
    href: '/',
  },
  {
    label: 'Server',
    href: '/#server-status',
  },
  {
    label: 'Community',
    href: 'https://discord.gg/58FnVzmzrS',
    external: true,
    icon: <MessageCircle className="h-4 w-4" />,
  },
];

export function Navigation() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const pathname = usePathname();

  // Close mobile menu on route change
  useEffect(() => {
    setIsMenuOpen(false);
  }, [pathname]);

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

  const handleNavClick = (e: React.MouseEvent, href: string) => {
    if (href.startsWith('/#')) {
      e.preventDefault();
      const id = href.replace('/#', '');
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }
  };

  return (
    <>
      {/* Desktop Navigation */}
      <nav className="hidden md:flex fixed top-4 left-1/2 -translate-x-1/2 z-50 justify-center items-center overflow-x-hidden">
        <NavigationMenu className="px-2 py-2 overflow-hidden">
          <NavigationMenuList className="gap-2 flex-wrap">
            {navItems.map((item) => (
              <NavigationMenuItem key={item.label}>
                <NavigationMenuLink asChild>
                  <Link
                    href={item.href}
                    target={item.external ? '_blank' : undefined}
                    rel={item.external ? 'noopener noreferrer' : undefined}
                    onClick={(e) => handleNavClick(e, item.href)}
                    className={cn(
                      navigationMenuTriggerStyle(),
                      'text-foreground hover:text-primary hover:bg-accent focus:bg-accent focus:text-primary whitespace-nowrap',
                      isActive(item.href) && 'bg-accent/50 text-accent-foreground'
                    )}
                  >
                    <span className="flex items-center gap-2">
                      {item.icon}
                      {item.label}
                    </span>
                  </Link>
                </NavigationMenuLink>
              </NavigationMenuItem>
            ))}

            {/* Theme Toggle */}
            <NavigationMenuItem>
              <div className="px-2 flex-shrink-0">
                <ThemeToggle />
              </div>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
      </nav>

      {/* Mobile Navigation */}
      <div className="md:hidden fixed top-4 right-4 z-50">
        <button
          onClick={() => setIsMenuOpen(!isMenuOpen)}
          className="rounded-full border border-border/50 bg-background/95 backdrop-blur-md shadow-lg p-3"
          aria-label="Toggle navigation menu"
          aria-expanded={isMenuOpen}
        >
          {isMenuOpen ? (
            <X className="h-5 w-5 text-foreground" />
          ) : (
            <MenuIcon className="h-5 w-5 text-foreground" />
          )}
        </button>

        {/* Mobile Menu Panel */}
        {isMenuOpen && (
          <div className="absolute right-0 mt-3 w-64 max-w-[calc(100vw-2rem)] rounded-2xl border border-border/50 bg-background/95 backdrop-blur-md shadow-lg p-4 overflow-hidden">
            <nav className="flex flex-col space-y-2">
              {navItems.map((item) => (
                <Link
                  key={item.label}
                  href={item.href}
                  target={item.external ? '_blank' : undefined}
                  rel={item.external ? 'noopener noreferrer' : undefined}
                  onClick={(e) => handleNavClick(e, item.href)}
                  className={cn(
                    'flex items-center gap-2 px-4 py-3 rounded-lg text-foreground hover:text-primary hover:bg-accent transition-colors break-words',
                    isActive(item.href) && 'bg-accent/50 text-accent-foreground'
                  )}
                >
                  {item.icon}
                  {item.label}
                </Link>
              ))}
              <div className="px-4 py-3">
                <ThemeToggle />
              </div>
            </nav>
          </div>
        )}
      </div>
    </>
  );
}
