import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import { Button } from './ui/button';
import { ChevronDown, Menu, X } from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from './ui/dropdown-menu';

const Navbar = () => {
  const { user, logout } = useAuth();
  const navigate = useNavigate();
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  // LOAF logo (local)
  const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;

  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  return (
    <>
      {/* Top Header - Member Actions (Desktop Only) */}
      <header className="hidden lg:flex bg-gradient-to-r from-[var(--purple-amethyst)] to-[var(--purple-deep)] px-4 sm:px-8 md:px-16 py-4 justify-end items-center gap-4 sm:gap-6">
        {user && (
          <span className="text-white text-base font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
            Welcome, {user.first_name}
          </span>
        )}
        {(user?.role === 'admin' || user?.role === 'superadmin') && (
          <Link to="/admin">
            <button
              className="text-white text-base font-medium hover:opacity-80 transition-opacity bg-transparent border-none cursor-pointer"
              style={{ fontFamily: "'Poppins', sans-serif" }}
              data-testid="admin-nav-button"
            >
              Dashboard
            </button>
          </Link>
        )}
        <button
          onClick={handleLogout}
          className="text-white text-base font-medium hover:opacity-80 transition-opacity bg-transparent border-none cursor-pointer"
          style={{ fontFamily: "'Poppins', sans-serif" }}
          data-testid="logout-button"
        >
          Logout
        </button>
        <Link to="/donate">
          <Button
            className="bg-[var(--orange-light)] hover:bg-[var(--orange-coral)] text-[var(--purple-deep)] rounded-[25px] px-[54px] py-[10px] text-[16.5px] font-semibold h-[41px]"
            style={{ fontFamily: "'Montserrat', sans-serif" }}
          >
            Donate
          </Button>
        </Link>
      </header>

      {/* Main Header - Member Navigation */}
      <header className="bg-[var(--purple-lavender)] px-4 sm:px-8 md:px-16 py-2 flex justify-between items-center">
        <Link to="/dashboard">
          <img src={loafLogo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" />
        </Link>

        {/* Desktop Navigation */}
        <nav className="hidden lg:flex gap-6 sm:gap-8 md:gap-10 items-center">
          <Link
            to="/"
            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
            style={{ fontFamily: "'Poppins', sans-serif" }}
          >
            Home
          </Link>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity flex items-center gap-1 bg-transparent border-none cursor-pointer"
                style={{ fontFamily: "'Poppins', sans-serif" }}>
                About Us
                <ChevronDown className="h-4 w-4" />
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="bg-background min-w-[220px]">
              <DropdownMenuItem asChild>
                <Link to="/about/history" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
                  style={{ fontFamily: "'Poppins', sans-serif" }}>
                  History
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link to="/about/mission-values" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
                  style={{ fontFamily: "'Poppins', sans-serif" }}>
                  Mission and Values
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link to="/about/board" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
                  style={{ fontFamily: "'Poppins', sans-serif" }}>
                  Board of Directors
                </Link>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
          <Link
            to="/dashboard"
            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
            style={{ fontFamily: "'Poppins', sans-serif" }}
          >
            My Profile
          </Link>
          <Link
            to="/events"
            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
            style={{ fontFamily: "'Poppins', sans-serif" }}
            data-testid="events-nav-button"
          >
            Events
          </Link>
          <Link
            to="/members/calendar"
            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
            style={{ fontFamily: "'Poppins', sans-serif" }}
          >
            Calendar
          </Link>
          <Link
            to="/members/directory"
            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
            style={{ fontFamily: "'Poppins', sans-serif" }}
          >
            Directory
          </Link>
          <Link
            to="/members/gallery"
            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
            style={{ fontFamily: "'Poppins', sans-serif" }}
          >
            Gallery
          </Link>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity flex items-center gap-1 bg-transparent border-none cursor-pointer"
                style={{ fontFamily: "'Poppins', sans-serif" }}>
                Documents
                <ChevronDown className="h-4 w-4" />
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="bg-background min-w-[220px]">
              <DropdownMenuItem asChild>
                <Link to="/members/newsletters" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
                  style={{ fontFamily: "'Poppins', sans-serif" }}>
                  Newsletters
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link to="/members/financials" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
                  style={{ fontFamily: "'Poppins', sans-serif" }}>
                  Financials
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link to="/members/bylaws" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
                  style={{ fontFamily: "'Poppins', sans-serif" }}>
                  Bylaws
                </Link>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

        </nav>

        {/* Mobile Hamburger Button */}
        <button
          onClick={() => setIsMobileMenuOpen(true)}
          className="lg:hidden p-2 text-white hover:bg-background/10 rounded-lg transition-colors"
          aria-label="Open menu"
        >
          <Menu className="h-6 w-6" />
        </button>
      </header>

      {/* Mobile Menu Drawer */}
      {isMobileMenuOpen && (
        <div className="fixed inset-0 z-50 lg:hidden">
          {/* Backdrop */}
          <div
            className="fixed inset-0 bg-black/50 backdrop-blur-sm"
            onClick={() => setIsMobileMenuOpen(false)}
          />

          {/* Drawer */}
          <div className="fixed right-0 top-0 h-full w-[280px] bg-gradient-to-b from-[var(--purple-lavender)] to-[var(--purple-deep)] shadow-2xl flex flex-col">
            {/* Header */}
            <div className="flex items-center justify-between p-6 border-b border-white/20">
              <div className="flex items-center gap-3">
                <img src={loafLogo} alt="LOAF" className="h-10 w-10 object-contain" />
                <span className="text-white font-semibold text-lg" style={{ fontFamily: "'Poppins', sans-serif" }}>
                  LOAF
                </span>
              </div>
              <button
                onClick={() => setIsMobileMenuOpen(false)}
                className="p-2 text-white hover:bg-background/10 rounded-lg transition-colors"
                aria-label="Close menu"
              >
                <X className="h-6 w-6" />
              </button>
            </div>

            {/* User Info */}
            {user && (
              <div className="px-6 py-4 border-b border-white/20">
                <p className="text-white text-sm opacity-90" style={{ fontFamily: "'Poppins', sans-serif" }}>
                  Welcome,
                </p>
                <p className="text-white font-semibold text-base" style={{ fontFamily: "'Poppins', sans-serif" }}>
                  {user.first_name} {user.last_name}
                </p>
              </div>
            )}

            {/* Navigation Links */}
            <nav className="flex-1 overflow-y-auto scrollbar-dashboard py-6 px-4">
              <div className="space-y-2">
                <Link
                  to="/"
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
                  style={{ fontFamily: "'Poppins', sans-serif" }}
                >
                  Home
                </Link>

                {/* About Us Section */}
                <div className="space-y-1">
                  <p className="px-4 py-2 text-white/70 text-sm font-semibold uppercase tracking-wider" style={{ fontFamily: "'Poppins', sans-serif" }}>
                    About Us
                  </p>
                  <Link
                    to="/about/history"
                    onClick={() => setIsMobileMenuOpen(false)}
                    className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
                    style={{ fontFamily: "'Poppins', sans-serif" }}
                  >
                    History
                  </Link>
                  <Link
                    to="/about/mission-values"
                    onClick={() => setIsMobileMenuOpen(false)}
                    className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
                    style={{ fontFamily: "'Poppins', sans-serif" }}
                  >
                    Mission and Values
                  </Link>
                  <Link
                    to="/about/board"
                    onClick={() => setIsMobileMenuOpen(false)}
                    className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
                    style={{ fontFamily: "'Poppins', sans-serif" }}
                  >
                    Board of Directors
                  </Link>
                </div>

                <Link
                  to="/dashboard"
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
                  style={{ fontFamily: "'Poppins', sans-serif" }}
                >
                  Dashboard
                </Link>

                <Link
                  to="/events"
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
                  style={{ fontFamily: "'Poppins', sans-serif" }}
                  data-testid="mobile-events-nav-button"
                >
                  Events
                </Link>

                <Link
                  to="/members/calendar"
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
                  style={{ fontFamily: "'Poppins', sans-serif" }}
                >
                  Calendar
                </Link>

                <Link
                  to="/members/directory"
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
                  style={{ fontFamily: "'Poppins', sans-serif" }}
                >
                  Directory
                </Link>

                <Link
                  to="/members/gallery"
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
                  style={{ fontFamily: "'Poppins', sans-serif" }}
                >
                  Gallery
                </Link>

                {/* Documents Section */}
                <div className="space-y-1">
                  <p className="px-4 py-2 text-white/70 text-sm font-semibold uppercase tracking-wider" style={{ fontFamily: "'Poppins', sans-serif" }}>
                    Documents
                  </p>
                  <Link
                    to="/members/newsletters"
                    onClick={() => setIsMobileMenuOpen(false)}
                    className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
                    style={{ fontFamily: "'Poppins', sans-serif" }}
                  >
                    Newsletters
                  </Link>
                  <Link
                    to="/members/financials"
                    onClick={() => setIsMobileMenuOpen(false)}
                    className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
                    style={{ fontFamily: "'Poppins', sans-serif" }}
                  >
                    Financials
                  </Link>
                  <Link
                    to="/members/bylaws"
                    onClick={() => setIsMobileMenuOpen(false)}
                    className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
                    style={{ fontFamily: "'Poppins', sans-serif" }}
                  >
                    Bylaws
                  </Link>
                </div>

                <Link
                  to="/profile"
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
                  style={{ fontFamily: "'Poppins', sans-serif" }}
                  data-testid="mobile-profile-nav-button"
                >
                  Profile
                </Link>
              </div>
            </nav>

            {/* Footer Actions */}
            <div className="p-4 border-t border-white/20 space-y-3">
              {(user?.role === 'admin' || user?.role === 'superadmin') && (
                <Link
                  to="/admin"
                  onClick={() => setIsMobileMenuOpen(false)}
                >
                  <Button
                    className="w-full bg-background/20 hover:bg-background/30 text-white rounded-lg"
                    style={{ fontFamily: "'Poppins', sans-serif" }}
                  >
                    Dashboard
                  </Button>
                </Link>
              )}

              <Link
                to="/donate"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                <Button
                  className="w-full bg-[var(--orange-light)] hover:bg-[var(--orange-coral)] text-[var(--purple-deep)] rounded-lg font-semibold"
                  style={{ fontFamily: "'Montserrat', sans-serif" }}
                >
                  Donate
                </Button>
              </Link>

              <Button
                onClick={() => {
                  setIsMobileMenuOpen(false);
                  handleLogout();
                }}
                variant="outline"
                className="w-full border-2 border-white/30 text-white hover:bg-background/10 rounded-lg"
                style={{ fontFamily: "'Poppins', sans-serif" }}
                data-testid="mobile-logout-button"
              >
                Logout
              </Button>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default Navbar;