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

export default function Navbar() {
  const { user, logout } = useAuth();
  const navigate = useNavigate();
  const [showMenu, setShowMenu] = useState(false);
  const menuRef = useRef();

  useEffect(() => {
    const handleClick = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target)) setShowMenu(false);
    };
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, []);

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

  return (
    <nav className="navbar">
      <div className="navbar-brand">
        <Link to="/">The Howling Whispers</Link>
      </div>
      <div className="navbar-links">
        <Link to="/characters">Characters</Link>
        <Link to="/lorebooks">Lorebooks</Link>
        <div className="user-menu" ref={menuRef}>
          <button className="user-menu-btn" onClick={() => setShowMenu(!showMenu)}>
            {user?.username}
          </button>
          {showMenu && (
            <div className="user-dropdown">
              <button onClick={handleLogout}>Sign Out</button>
            </div>
          )}
        </div>
      </div>
    </nav>
  );
}