import './Navbar.css';
import { isExecuterVerifierRole } from '../../authRoles.js';
import { useTheme } from '../../context/ThemeContext.jsx';

function IconSun() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
      <circle cx="12" cy="12" r="4" />
      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
    </svg>
  );
}

function IconMoon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
    </svg>
  );
}

function roleLabel(role) {
  if (role === 'admin') return 'ORAC Admin';
  if (isExecuterVerifierRole(role)) return 'Executor / Verifier';
  return 'User';
}

function getInitials(userName, userEmail) {
  const n = (userName || '').trim();
  if (n) {
    const parts = n.split(/\s+/).filter(Boolean);
    if (parts.length >= 2) return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
    if (parts[0].length >= 2) return parts[0].slice(0, 2).toUpperCase();
    return (parts[0][0] || 'U').toUpperCase();
  }
  const local = (userEmail || '').split('@')[0] || '';
  if (local.length >= 2) return local.slice(0, 2).toUpperCase();
  return 'U';
}

function NavbarBrandLogo() {
  return (
    <svg
      className="navbar-brand-logo"
      width="26"
      height="26"
      viewBox="0 0 28 28"
      aria-hidden
    >
      <g fill="none" stroke="#ff4d4f" strokeWidth="1.25" strokeLinejoin="round">
        <path d="M14 2 22 8 14 14 6 8z" />
        <path d="M14 8 22 14 14 20 6 14z" />
        <path d="M14 14 22 20 14 26 6 20z" />
      </g>
    </svg>
  );
}

function Navbar({ userName, userEmail, role, onToggleSidebar, isSidebarOpen }) {
  const { theme, toggleTheme } = useTheme();
  const isDark = theme === 'dark';
  const displayEmail = (userEmail || '').trim() || (userName || '').trim() || 'Signed in';
  const initials = getInitials(userName, userEmail);

  return (
    <header className={`top-navbar${isSidebarOpen ? ' top-navbar--sidebar-open' : ''}`}>
      <div className="navbar-left">
        {onToggleSidebar && (
          <button
            type="button"
            className="navbar-icon-btn navbar-sidebar-toggle"
            onClick={onToggleSidebar}
            aria-label={isSidebarOpen ? 'Close navigation' : 'Open navigation'}
          >
            <span />
            <span />
            <span />
          </button>
        )}
        <button
          type="button"
          className="navbar-icon-btn navbar-theme-toggle"
          onClick={toggleTheme}
          aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
          aria-pressed={isDark}
          title={isDark ? 'Light theme' : 'Dark theme'}
        >
          {isDark ? <IconSun /> : <IconMoon />}
        </button>
        <NavbarBrandLogo />
        <div className="navbar-brand">Risk Assessment </div>
      </div>

      <div className="navbar-right"> 
        <div className="navbar-user-pill" title={roleLabel(role)}>
          <div className="navbar-avatar">{initials}</div>
          <span className="navbar-user-email">{displayEmail}</span>
        </div>
      </div>
    </header>
  );
}

export default Navbar;
