import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import LightModeToggle from "@/components/LightModeToggle";
import { Separator } from "@/components/ui/separator";
import { logout } from "@/services/auth"; // Import the logout function

import ProfileDropdown from "@/components/ProfileDropdown";
import UserDropdown from "@/components/UserDropdown";

const Navbar = () => {
    const [isOpen, setIsOpen] = useState(false);
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    // Check login status on component mount
    useEffect(() => {
        const token = localStorage.getItem("access_token");
        setIsLoggedIn(!!token); // Convert token presence to boolean
    }, []);

    return (
        <nav className="bg-violet-600 p-4 shadow-md">
            <div className="container mx-auto flex items-center justify-between">
                {/* Logo (Always Centered on Mobile) */}
                <Link to="/" className="text-white text-2xl font-bold mx-auto md:mx-0">
                    {__SITE_NAME__}
                </Link>

                {/* Desktop Navigation */}
                <div className="hidden md:flex items-center space-x-6">
                    <Link to="/" className="text-white hover:text-gray-300">Home</Link>
                    <Link to="/browse/" className="text-white hover:text-gray-300">Browse</Link>
                    <Link to="/gallery" className="text-white hover:text-gray-300">Gallery</Link>
                    <LightModeToggle />
                    {isLoggedIn ? (
                        <UserDropdown />
                    ) : (
                        <Link to="/user/login" className="text-white hover:text-gray-300">Login</Link>
                    )}
                </div>

                {/* Mobile Menu Button */}
                <button
                    onClick={() => setIsOpen(!isOpen)}
                    className="text-white text-2xl font-bold md:hidden"
                >
                    {isOpen ? '✖' : '☰'}
                </button>
            </div>

            {/* Mobile Side Panel */}
            {isOpen && (
                <div className="fixed top-0 right-0 w-2/3 h-full bg-violet-700 z-40 shadow-lg p-4">
                    <div className="flex justify-end">
                        <button
                            onClick={() => setIsOpen(false)}
                            className="text-white text-2xl font-bold"
                        >
                            ✖
                        </button>
                    </div>
                    <ul className="space-y-4 mt-4">
                        <li>
                            <Link to="/" className="text-white hover:text-gray-300 block" onClick={() => setIsOpen(false)}>Home</Link>
                        </li>
                        <li>
                            <Link to="/browse/" className="text-white hover:text-gray-300 block" onClick={() => setIsOpen(false)}>Browse</Link>
                        </li>
                        <li>
                            <Link to="/gallery" className="text-white hover:text-gray-300 block" onClick={() => setIsOpen(false)}>Gallery</Link>
                        </li>
                        <li>
                            <LightModeToggle />
                        </li>
                        <li>
                            {isLoggedIn ? (
                                <UserDropdown />
                            ) : (
                                <Link to="/user/login" className="text-white hover:text-gray-300 block" onClick={() => setIsOpen(false)}>
                                    Login
                                </Link>
                            )}
                        </li>
                        <li>
                            <Link to="/protected" className="text-white hover:text-gray-300 block" onClick={() => setIsOpen(false)}>Protected</Link>
                        </li>
                    </ul>
                </div>
            )}
        </nav>
    );
};

export default Navbar;

