import { useState, useRef, useEffect } from "react";
import { Link } from "react-router-dom";
import { Menu, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import fixlyChatLogo from "@/assets/fixlychat-logo.png";

const MinimalistNavigation = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const menuButtonRef = useRef<HTMLButtonElement>(null);
  const firstMenuItemRef = useRef<HTMLAnchorElement>(null);

  // Handle escape key to close mobile menu
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && isMenuOpen) {
        setIsMenuOpen(false);
        menuButtonRef.current?.focus();
      }
    };

    if (isMenuOpen) {
      document.addEventListener('keydown', handleEscape);
      // Focus first menu item when opened
      setTimeout(() => firstMenuItemRef.current?.focus(), 100);
    }

    return () => document.removeEventListener('keydown', handleEscape);
  }, [isMenuOpen]);

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  const closeMenu = () => {
    setIsMenuOpen(false);
  };

  return (
    <nav 
      className="fixed top-0 w-full z-50 bg-background/95 backdrop-blur-lg border-b border-border/10 shadow-sm"
      role="navigation"
      aria-label="Main navigation"
    >
      <div className="container mx-auto px-6 lg:px-12">
        <div className="flex items-center justify-between h-[72px]">
          {/* Logo */}
          <Link 
            to="/" 
            className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 rounded-sm"
            aria-label="FixlyChat homepage"
          >
            <img src={fixlyChatLogo} alt="FixlyChat Logo" className="h-12 w-auto" />
          </Link>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-8" role="menubar" aria-label="Main menu">
            <Link
              to="/how-it-works"
              className="text-[17px] font-semibold text-foreground/90 hover:text-foreground transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 rounded-sm px-2 py-1"
              role="menuitem"
            >
              How It Works
            </Link>
            <Link
              to="/pricing"
              className="text-[17px] font-semibold text-foreground/90 hover:text-foreground transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 rounded-sm px-2 py-1"
              role="menuitem"
            >
              Pricing
            </Link>
            <Link
              to="/auth"
              className="text-[17px] font-semibold text-foreground/90 hover:text-foreground transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 rounded-sm px-2 py-1"
              role="menuitem"
            >
              Sign In
            </Link>
          </div>

          {/* CTA Button */}
          <div className="hidden md:flex">
            <Button asChild size="default" className="h-[52px] px-10 text-base font-semibold bg-accent hover:bg-accent/90 text-white shadow-[0_4px_14px_rgba(31,182,184,0.35)] hover:shadow-[0_6px_20px_rgba(31,182,184,0.45)]">
              <Link to="/quiz">Start the Quiz</Link>
            </Button>
          </div>

          {/* Mobile Menu Button */}
          <button
            ref={menuButtonRef}
            onClick={toggleMenu}
            className="md:hidden p-2 text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 rounded-sm"
            aria-expanded={isMenuOpen}
            aria-controls="mobile-menu"
            aria-label={isMenuOpen ? "Close navigation menu" : "Open navigation menu"}
          >
            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>

        {/* Mobile Navigation */}
        {isMenuOpen && (
          <div
            id="mobile-menu"
            className="md:hidden py-4 border-t border-border/20 bg-background/50 backdrop-blur-sm"
            role="menu"
            aria-label="Mobile navigation menu"
          >
            <div className="flex flex-col space-y-4">
              <Link
                ref={firstMenuItemRef}
                to="/how-it-works"
                className="text-base font-semibold text-foreground/90 hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 rounded-sm px-2 py-1"
                onClick={closeMenu}
                role="menuitem"
              >
                How It Works
              </Link>
              <Link
                to="/pricing"
                className="text-base font-semibold text-foreground/90 hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 rounded-sm px-2 py-1"
                onClick={closeMenu}
                role="menuitem"
              >
                Pricing
              </Link>
              <Link
                to="/auth"
                className="text-base font-semibold text-foreground/90 hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 rounded-sm px-2 py-1"
                onClick={closeMenu}
                role="menuitem"
              >
                Sign In
              </Link>
              <Button asChild size="default" className="mt-2 w-full bg-accent hover:bg-accent/90 text-white">
                <Link to="/quiz" onClick={closeMenu}>
                  Start the Quiz
                </Link>
              </Button>
            </div>
          </div>
        )}
      </div>
    </nav>
  );
};

export default MinimalistNavigation;