function Navbar({ currentPage, navigate }) {
  const { user, logout } = window.AuthContext.useAuth();
  const { totalCount } = window.CartContext.useCart();
  const [categories, setCategories] = React.useState([]);
  React.useEffect(() => {
    (async () => {
      try {
        const res = await window.ProductsAPI.categories();
        const items = Array.isArray(res.items) ? res.items : [];
        const base = [{ key: '', label: 'Tous les produits' }];
        setCategories(base.concat(items.map(k => ({ key: k, label: k.charAt(0).toUpperCase() + k.slice(1) }))));
      } catch (e) {
        setCategories([{ key: '', label: 'Tous les produits' }]);
      }
    })();
  }, []);

  function goCatalog(category) {
    // Ajoute un paramètre de filtre de catégorie dans le hash (SPA)
    const base = '/catalog' + (category ? `?cat=${encodeURIComponent(category)}` : '');
    navigate(base);
  }

  return (
    <div className="banner-header">
      <div className="banner-inner">
        {user && (
          <div className="banner-greeting-row">
            <span className="nav-greeting" title={`Bonjour, ${user.name}`}>Bonjour, {user.name}</span>
          </div>
        )}
        <div className="banner-nav">
          <div className="nav-row">
            <nav className="nav-links" style={{ display:'flex', gap: 12 }}>
              <a className="navlink-btn" href="#" onClick={(e)=>{e.preventDefault();navigate('/');}}>Accueil</a>
              <div className="dropdown">
                <a href="#" className="navlink-btn dropdown-toggle" onClick={(e)=>e.preventDefault()}>
                  Catalogue ▾
                </a>
                <div className="dropdown-menu">
                  {categories.map(c => (
                    <a href="#" key={c.key} onClick={(e)=>{e.preventDefault(); goCatalog(c.key);}}>{c.label}</a>
                  ))}
                </div>
              </div>
              <a className="navlink-btn" href="#" onClick={(e)=>{e.preventDefault();navigate('/cart');}}>Panier <span className="badge">{totalCount}</span></a>
              <a className="navlink-btn" href="#" onClick={(e)=>{e.preventDefault();navigate('/custom');}}>Commande personnalisée</a>
              {user?.role === 'admin' && (
                <div className="dropdown">
                  <a href="#" className="navlink-btn dropdown-toggle" onClick={(e)=>e.preventDefault()}>
                    Administration ▾
                  </a>
                  <div className="dropdown-menu">
                    <a href="#" onClick={(e)=>{e.preventDefault();navigate('/admin/products');}}>Produits</a>
                    <a href="#" onClick={(e)=>{e.preventDefault();navigate('/admin/orders');}}>Commandes</a>
                    <a href="#" onClick={(e)=>{e.preventDefault();navigate('/admin/users');}}>Utilisateurs</a>
                    <a href="#" onClick={(e)=>{e.preventDefault();navigate('/admin/custom-prices');}}>Tarifs personnalisés</a>
                    <a href="#" onClick={(e)=>{e.preventDefault();navigate('/admin/bundles');}}>Lots</a>
                  </div>
                </div>
              )}
            </nav>
            <div className="nav-actions" style={{ marginLeft: 'auto', display:'flex', alignItems:'center', gap: 8 }}>
              {user ? (
                <div className="nav-actions-inner">
                  <div className="nav-actions-row">
                    <a
                      className="navlink-btn"
                      href="#"
                      onClick={(e)=>{e.preventDefault(); navigate('/profile');}}
                      title="Mon profil"
                    >Profil</a>
                    <button
                      onClick={logout}
                      className="nav-logout-btn"
                      aria-label="Se déconnecter"
                      title="Se déconnecter"
                    >
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
                        <polyline points="16 17 21 12 16 7" />
                        <line x1="21" y1="12" x2="9" y2="12" />
                      </svg>
                    </button>
                  </div>
                </div>
              ) : (
                <button className="navlink-btn" onClick={() => navigate('/login')}>Se connecter</button>
              )}
            </div>
          </div>
          {/* La seconde ligne admin a été supprimée : on utilise désormais un menu déroulant dans la nav principale */}
        </div>
      </div>
    </div>
  );
}

window.Components = window.Components || {};
window.Components.Navbar = Navbar;