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

const Navbar = () => {
  const { user, logout } = useAuth();
  const navigate = useNavigate();

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

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

  return (
    <>
      {/* Top Header - Member Actions */}
      <header className="bg-gradient-to-r from-[#644c9f] to-[#48286e] px-4 sm:px-8 md:px-16 py-4 flex 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' && (
          <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"
            >
              Admin Panel
            </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-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] 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-[#664fa3] 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>
        <nav className="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-white min-w-[220px]">
              <DropdownMenuItem asChild>
                <Link to="/about/history" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] 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-[#48286e] hover:bg-[#f1eef9] 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-[#48286e] hover:bg-[#f1eef9] 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" }}
          >
            Dashboard
          </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>
          <Link
            to="/members/newsletters"
            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
            style={{ fontFamily: "'Poppins', sans-serif" }}
          >
            Documents
          </Link>
          <Link
            to="/profile"
            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
            style={{ fontFamily: "'Poppins', sans-serif" }}
            data-testid="profile-nav-button"
          >
            Profile
          </Link>
        </nav>
      </header>
    </>
  );
};

export default Navbar;
