import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { getUserIdFromToken, getDisplayNameFromToken } from '../../utils/authUtils';
import { useTheme } from '../../contexts/ThemeContext';

// const SAT_PORTAL_ICON_IMAGE = `${process.env.PUBLIC_URL || ""}/vsat-like.png`;

const Navbar = ({ onToggleSidebar }) => {
  const navigate = useNavigate();
  const { theme, toggleTheme } = useTheme();
  // const [portalIconError, setPortalIconError] = useState(false);

  const handleLogoClick = () => {
    const userId = getUserIdFromToken();
    if (userId) {
      navigate(`/user-profile/${userId}`);
    } else {
      navigate('/dashboard');
    }
  };

  return (
    <nav className="navbar">
      <div className="navbar-left">
        <button className="menu-toggle" onClick={onToggleSidebar}>
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 12H21M3 6H21M3 18H21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
        <button className="nav-icon-btn" title={theme === 'light' ? 'Switch to Night Mode' : 'Switch to Light Mode'} onClick={toggleTheme}>
          {theme === 'light' ? (
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          ) : (
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="12" cy="12" r="5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          )}
        </button>
        <div className="navbar-brand" onClick={handleLogoClick} style={{ cursor: 'pointer' }} title="My profile">
          {/* Logo commented off
          {!portalIconError ? (
            <img
              src={SAT_PORTAL_ICON_IMAGE}
              alt=""
              className="brand-icon brand-icon--img"
              onError={() => setPortalIconError(true)}
            />
          ) : (
          */}
            <svg className="brand-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M2 17L12 22L22 17" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M2 12L12 17L22 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          {/* )} */}
          <span className="brand-text">SAT Portal</span>
        </div>
      </div>
      <div className="navbar-right">
        {/* Notification icon commented out
        <button className="nav-icon-btn" title="Notifications" onClick={() => navigate('/notification-settings')}>
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            <path d="M13.73 21C13.5542 21.3031 13.3019 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 21.9044 11.0018 21.7295C10.6982 21.5547 10.4458 21.3031 10.27 21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          <span className="notification-badge">3</span>
        </button>
        */}
        <div className="user-profile" onClick={handleLogoClick} style={{ cursor: 'pointer' }} title="My profile" role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleLogoClick(); } }}>
          <img src={`https://ui-avatars.com/api/?name=${encodeURIComponent(getDisplayNameFromToken() || 'User')}&background=f21b23&color=fff`} alt="User" className="user-avatar" />
          <span className="user-name">{getDisplayNameFromToken() || 'User'}</span>
          <svg className="dropdown-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 9L12 15L18 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;

