import React, { useState } from "react";
import { Link, useNavigate } from "react-router";
import useRoutes from "~/hooks/useRoutes";
import MobileDropdownMenu from "~/components/features/navbar/MobileDropdownMenu";
import { useAuth } from "~/context/AuthContext";

const NavBar = () => {
    const [isOpen, setIsOpen] = useState(false);
    const routes = useRoutes();
    const navigate = useNavigate();
    const {isAuthenticated, logout} = useAuth();

    const handleLogout = (e: React.MouseEvent) => {
        e.preventDefault();
        logout();
        navigate('/login', { replace: true });
    };

    return (
        <nav className="border-b-2 border-secondary shadow-sm z-50 mb-8">
            <div className="relative flex justify-between items-center px-4 lg:px-8 py-2 lg:container lg:mx-auto">
            {/* Logo */}
            <Link to={routes.home()} className="pt-2 text-2xl font-syncopate text-primary">
                DISH PLANNER
            </Link>

            {/* Hamburger Menu - For Mobile View */}
            { isAuthenticated && (
                <>
                    <button
                        className="text-primary w-8 h-8 md:hidden flex items-center justify-center"
                        onClick={() => setIsOpen(!isOpen)} // Toggle menu visibility
                        aria-label="Toggle menu"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="h-6 w-6"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                            <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth={2}
                                d={isOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"}
                            />
                        </svg>
                    </button>

                    {/* Desktop Menu */}
                    <div className="hidden md:flex space-x-6">
                        <Link to={routes.home()} className="text-accent-blue hover:background-secondary">
                            Home
                        </Link>
                        <Link to={routes.dish.index()} className="text-accent-blue hover:background-secondary">
                            Dishes
                        </Link>
                        <Link to={routes.user.index()} className="text-accent-blue hover:background-secondary">
                            Users
                        </Link>
                        <Link to={routes.schedule.history()} className="text-accent-blue hover:background-secondary">
                            History
                        </Link>
                        <Link to={routes.auth.login()}
                              onClick={handleLogout}
                              className="text-primary text-right hover:background-secondary">
                            Logout
                        </Link>
                    </div>

                    <MobileDropdownMenu isOpen={isOpen} setIsOpen={setIsOpen} handleLogout={handleLogout} />
                </>
            )}
            </div>
        </nav>
    );
};

export default NavBar;