// App bar — brand + nav + search + user menu (with role switch + profile).

const UserMenu = ({ role, onChangeRole, onOpenProfile, onLogout, onClose, currentUser }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
    const onEsc = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onEsc);
    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onEsc); };
  }, [onClose]);

  return (
    <div ref={ref} className="user-menu">
      <div className="user-menu-head">
        <div className={`avatar ${role === 'admin' ? 'admin' : ''}`} style={{ width: 36, height: 36, fontSize: 13 }}>
          {currentUser ? currentUser.name.charAt(0).toUpperCase() : (role === 'admin' ? 'A' : 'E')}
        </div>
        <div>
          <div className="user-menu-name">{currentUser?.name || (role === 'admin' ? 'Admin' : 'Employee')}</div>
          <div className="user-menu-email mono">{currentUser?.email || ''}</div>
        </div>
      </div>

      {role === 'admin' && (
        <>
          <div className="user-menu-section">Account</div>
          <button className="user-menu-item" onClick={() => { onOpenProfile(); onClose(); }}>
            <Icon name="employee" size={14} /> <span>Profile</span>
          </button>
          <div className="user-menu-divider"></div>
        </>
      )}
      <button className="user-menu-item" onClick={() => { onLogout(); onClose(); }}>
        <Icon name="x" size={14} /> <span>Sign out</span>
      </button>
    </div>
  );
};

const AppBar = ({ route, setRoute, role, setRole, pendingCount, search, setSearch, onLogout, currentUser, onCurrentUserChange }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);

  const NavItem = ({ id, icon, label, badge }) => (
    <button
      className={`nav-item ${route === id ? 'active' : ''}`}
      onClick={() => setRoute(id)}
    >
      <Icon name={icon} size={14} />
      <span>{label}</span>
      {badge ? <span className="nav-badge">{badge}</span> : null}
    </button>
  );

  return (
    <header className="appbar">
      <div className="brand">
        <div className="brand-mark" style={{ padding: 0, overflow: 'hidden', background: 'transparent', boxShadow: 'none' }}>
          <img src="favicon.ico" alt="Merida HostOps" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
        </div>
        <div className="brand-name">Merida HostOps</div>
      </div>

      <nav className="nav">
        <NavItem id="dashboard"     icon="dashboard" label="Dashboard" />
        <NavItem id="domains"       icon="globe"     label="Domains" />
        <NavItem id="servers"       icon="server"    label="Servers" />
        <NavItem id="approvals"     icon="approval"  label="Approvals" badge={pendingCount || null} />
        <NavItem id="clients"       icon="clients"   label="Clients" />
        {role === 'admin' && <NavItem id="settings" icon="bell" label="Alerts" />}
      </nav>

      <div className="spacer"></div>

      <div className="search-wrap">
        <Icon name="search" size={14} className="search-icon" />
        <input
          className="search"
          placeholder="Search…"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        <span className="kbd">⌘K</span>
      </div>

      <div style={{ position: 'relative' }}>
        <button
          className={`user-chip ${menuOpen ? 'open' : ''}`}
          onClick={() => setMenuOpen(o => !o)}
          aria-label="Account menu"
        >
          <div className={`avatar ${role === 'admin' ? 'admin' : ''}`}>
            {currentUser ? currentUser.name.charAt(0).toUpperCase() : (role === 'admin' ? 'A' : 'E')}
          </div>
          <div className="user-chip-text">
            <div className="name">{currentUser ? currentUser.name : (role === 'admin' ? 'Admin' : 'Employee')}</div>
            <div className="sub">
              {role === 'admin' ? 'Administrator' : 'Team Member'}
            </div>
          </div>
          <Icon name="chevron" size={11} stroke={2.2} style={{ transform: 'rotate(90deg)', color: 'var(--text-muted)', marginLeft: 2 }} />
        </button>
        {menuOpen && (
          <UserMenu
            role={role}
            onChangeRole={setRole}
            onOpenProfile={() => setRoute('profile')}
            onLogout={onLogout}
            onClose={() => setMenuOpen(false)}
            currentUser={currentUser}
          />
        )}
      </div>

      {role === 'employee' && (
        <div className="preview-banner" title="Previewing as employee — click your name to switch back">
          <Icon name="eye" size={11} stroke={2.2} /> Preview
        </div>
      )}
    </header>
  );
};

window.AppBar = AppBar;