import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../../context/AuthContext';

const AdminNavbar: React.FC = () => {
    const { loggedIn, userName, logout } = useAuth();
    const navigate = useNavigate();

    const handleLogout = async (e: React.MouseEvent) => {
        e.preventDefault();
        try {
            await logout();
            navigate('/');
        } catch (error) {
            console.error("Logout failed", error);
            // Handle logout error if needed
        }
    };

    return (
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <Link className="navbar-brand" to="/admin">
                <img src="/image/admin-logo.png" alt="LOGO" style={{ height: '40px' }} />
            </Link>
            <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="navbarSupportedContent">
                <ul className="navbar-nav ms-auto">
                    <li className="nav-item">
                        <Link className="nav-link" to="/admin/reservation">Reservation</Link>
                    </li>
                    <li className="nav-item">
                        <Link className="nav-link" to="/admin/waiting">Waiting</Link>
                    </li>
                    <li className="nav-item">
                        <Link className="nav-link" to="/admin/theme">Theme</Link>
                    </li>
                    <li className="nav-item">
                        <Link className="nav-link" to="/admin/time">Time</Link>
                    </li>
                    {!loggedIn ? (
                        <li className="nav-item">
                            <Link className="nav-link" to="/login">Login</Link>
                        </li>
                    ) : (
                        <li className="nav-item dropdown">
                            <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <img className="profile-image" src="/image/default-profile.png" alt="Profile" />
                                <span id="profile-name">{userName || 'Profile'}</span>
                            </a>
                            <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
                                <li><a className="dropdown-item" href="#" onClick={handleLogout}>Logout</a></li>
                            </ul>
                        </li>
                    )}
                </ul>
            </div>
        </nav>
    );
};

export default AdminNavbar;