import React, { useState, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Dropdown } from 'react-bootstrap';

const Navbar = () => {
  const [username, setUsername] = useState('');
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const navigate = useNavigate();

  // Fetch username and login status from localStorage
  useEffect(() => {
    const storedUsername = localStorage.getItem('username');
    const storedLoginStatus = localStorage.getItem('login');

    if (storedUsername && storedLoginStatus === 'true') {
      setUsername(storedUsername);
      setIsLoggedIn(true);
    }
  }, []);

  // Logout function
  const handleLogout = () => {
    localStorage.removeItem('login');
    localStorage.removeItem('username');
    setIsLoggedIn(false);
    setUsername('');
    navigate('/login');
  };

  return (
    <nav className="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
      <div className="container-fluid">
        <Link className="navbar-brand" to="/">JourneyPoint</Link>
        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
            <li className="nav-item">
              <Link className="nav-link active" to="/">Home</Link>
            </li>
    
            {/* Always show the Visit and FAQ link */}
            <li className="nav-item">
              <Link className="nav-link active" to="/visit">Visit</Link>
            </li>

           <li className="nav-item">
              <Link className="nav-link active" to="/FAQ">FAQ</Link>
            </li>

            {/* Login and SignUp only visible if the user is not logged in */}
            {!isLoggedIn && (
              <>
                <li className="nav-item">
                  <Link className="nav-link active" to="/login">Login</Link>
                </li>
                <li className="nav-item">
                  <Link className="nav-link active" to="/accountcreation">Sign Up</Link>
                </li>
              </>
            )}
            {/* Blog link only visible when logged in */}
            {isLoggedIn && (
              <li className="nav-item">
                <Link className="nav-link active" to="/blog">Blog</Link>
              </li>
            )}
            {/* Profile link only visible when logged in */}
            {isLoggedIn && (
              <li className="nav-item">
                <Link className="nav-link active" to="/profile">Profile</Link>
              </li>
            )}

            {/* Profile link only visible when logged in */}
            {isLoggedIn && (
              <li className="nav-item">
                <Link className="nav-link active" to="/review">Review</Link>
              </li>
            )}
            {/* Profile link only visible when logged in */}
            {isLoggedIn && (
              <li className="nav-item">
                <Link className="nav-link active" to="/explore">Explore</Link>
              </li>
            )}

            
          </ul>

          {/* Dropdown only shows when logged in */}
          {isLoggedIn && (
            <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <Dropdown>
                  <Dropdown.Toggle variant="success" id="dropdown-custom-components">
                    {username ? username : 'More'}
                  </Dropdown.Toggle>

                  <Dropdown.Menu>
                    <Dropdown.Item onClick={handleLogout}>Logout</Dropdown.Item>
                  </Dropdown.Menu>
                </Dropdown>
              </li>
            </ul>
          )}
        </div>
      </div>
    </nav>
  );
};

export default Navbar;