/* Zona A — User menu popover compacto (avatar do topbar).
   Identidade + presence + empresa-switcher + 3 botões (O meu Digi, Settings, Sair).
   Não mistura preferências (essas vão para Settings).

   Listens to: 'digi-active-company' event for cross-component sync.
   Emits: navigate('settings'), openDrawer(), switchUser(). */

const UserMenu = ({ user, onSwitchUser, onOpenDrawer, onNavigate }) => {
  const u = user || { nome: 'Utilizador', iniciais: '··', email: '', cargo: '', departamento: '', role: 'user', empresas: ['FBS'], empresaId: 'FBS' };
  const [open, setOpen] = React.useState(false);
  const [presence, setPresence] = React.useState('online');
  const [activeCompanyId, setActiveCompanyId] = useActiveCompany(u.empresaId);
  const [showCompanyList, setShowCompanyList] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) { setOpen(false); setShowCompanyList(false); } };
    const onEsc = (e) => { if (e.key === 'Escape') { setOpen(false); setShowCompanyList(false); } };
    if (open) {
      document.addEventListener('mousedown', onDoc);
      document.addEventListener('keydown', onEsc);
    }
    return () => {
      document.removeEventListener('mousedown', onDoc);
      document.removeEventListener('keydown', onEsc);
    };
  }, [open]);

  const presenceColor = presence === 'online' ? 'var(--success)' : presence === 'focus' ? 'oklch(0.62 0.18 290)' : presence === 'away' ? 'var(--warning)' : 'var(--text-dim)';
  const presenceLabel = presence === 'online' ? 'Disponível' : presence === 'focus' ? 'Foco' : presence === 'away' ? 'Ausente' : 'Offline';

  const userCompanies = u.empresas || [u.empresaId || 'FBS'];
  const accessibleCompanies = (window.FARBEN_COMPANIES || []).filter(c => userCompanies.includes(c.id));
  const activeCompany = accessibleCompanies.find(c => c.id === activeCompanyId) || accessibleCompanies[0];
  const canSwitchCompany = accessibleCompanies.length > 1;

  const roleLabel = (window.FARBEN_ROLES || []).find(r => r.id === u.role)?.label?.toUpperCase() || (u.role || 'USER').toUpperCase();
  const roleBadgeColor = u.role === 'admin' ? '#22d3ee' : u.role === 'director' ? '#a78bfa' : u.role === 'manager' ? '#1e40ff' : u.role === 'demo' ? '#f59e0b' : 'var(--text-muted)';

  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button
        onClick={() => setOpen(v => !v)}
        title={`${u.nome} · ${presenceLabel}`}
        style={{
          width: 32, height: 32, borderRadius: '50%',
          background: 'var(--brand-700)', color: '#fff',
          display: 'grid', placeItems: 'center',
          fontSize: 11, fontWeight: 600, fontFamily: 'var(--font-display)',
          letterSpacing: '0.04em',
          border: open ? '2px solid var(--ai-500)' : '2px solid transparent',
          position: 'relative',
          transition: 'border-color 0.15s',
        }}
      >
        {u.iniciais}
        <span style={{
          position: 'absolute', bottom: -1, right: -1,
          width: 10, height: 10, borderRadius: '50%',
          background: presenceColor,
          boxShadow: '0 0 0 2px var(--bg-elev)',
        }} />
      </button>

      {open && (
        <div className="animate-in" style={{
          position: 'absolute', top: 'calc(100% + 10px)', right: 0,
          width: 320, zIndex: 1200,
          background: 'var(--bg-elev)',
          border: '1px solid var(--border)',
          borderRadius: 'var(--r-4)',
          boxShadow: 'var(--shadow-lg)',
          overflow: 'hidden',
          fontSize: 13,
        }}>
          {/* Identity block */}
          <div style={{ padding: '14px 16px 12px', borderBottom: '1px solid var(--border)' }}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <div style={{
                width: 44, height: 44, borderRadius: '50%',
                background: 'var(--brand-700)', color: '#fff',
                display: 'grid', placeItems: 'center',
                fontSize: 14, fontWeight: 600, fontFamily: 'var(--font-display)',
                position: 'relative', flexShrink: 0,
              }}>
                {u.iniciais}
                <span title={`Sincronizado com Microsoft 365 · ${presenceLabel}`} style={{
                  position: 'absolute', bottom: -1, right: -1,
                  width: 12, height: 12, borderRadius: '50%',
                  background: presenceColor, boxShadow: '0 0 0 2px var(--bg-elev)',
                }} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14.5, letterSpacing: '0.005em', color: 'var(--text)' }}>{u.nome}</div>
                <div style={{ fontSize: 11.5, color: 'var(--text-muted)', marginTop: 1 }}>{u.cargo}{u.departamento ? ` · ${u.departamento}` : ''}</div>
                <div style={{ fontSize: 10.5, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', marginTop: 2 }}>{u.email}</div>
              </div>
            </div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 8px', borderRadius: 4, marginTop: 10,
              fontSize: 10, fontFamily: 'var(--font-mono)', fontWeight: 700, letterSpacing: '0.08em',
              background: `color-mix(in oklch, ${roleBadgeColor} 14%, transparent)`,
              color: roleBadgeColor,
              border: `1px solid color-mix(in oklch, ${roleBadgeColor} 30%, transparent)`,
            }}>
              {roleLabel} · {u.accessLabel || 'Access'}
            </div>
          </div>

          {/* Active company switcher */}
          <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)' }}>
            <div style={{ fontSize: 9.5, color: 'var(--text-dim)', fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 6 }}>
              Empresa activa
            </div>
            <button
              onClick={() => canSwitchCompany && setShowCompanyList(v => !v)}
              disabled={!canSwitchCompany}
              style={{
                width: '100%', display: 'flex', alignItems: 'center', gap: 10,
                padding: '8px 10px', borderRadius: 'var(--r-3)',
                border: '1px solid var(--border)',
                background: 'var(--surface-muted)',
                cursor: canSwitchCompany ? 'pointer' : 'default',
                opacity: canSwitchCompany ? 1 : 0.85,
              }}
            >
              <div style={{
                width: 26, height: 26, borderRadius: 5, flexShrink: 0,
                background: 'var(--brand-900)', color: '#fff',
                display: 'grid', placeItems: 'center',
                fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 10.5, letterSpacing: '0.04em',
              }}>{activeCompany?.code || '··'}</div>
              <div style={{ flex: 1, textAlign: 'left', minWidth: 0, lineHeight: 1.2 }}>
                <div style={{ fontWeight: 600, fontSize: 12.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{activeCompany?.name || '—'}</div>
                <div style={{ fontSize: 10, color: 'var(--text-dim)' }}>{activeCompany?.country} · {activeCompany?.tipo}</div>
              </div>
              {canSwitchCompany && <Icon name="chevron" size={13} style={{ color: 'var(--text-muted)', transform: showCompanyList ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s' }} />}
            </button>
            {showCompanyList && canSwitchCompany && (
              <div className="scrollbar" style={{ maxHeight: 180, overflowY: 'auto', marginTop: 6, padding: 2, border: '1px solid var(--border)', borderRadius: 'var(--r-3)', background: 'var(--bg-elev)' }}>
                {accessibleCompanies.map(c => (
                  <button key={c.id} onClick={() => { setActiveCompanyId(c.id); setShowCompanyList(false); }}
                    style={{
                      width: '100%', padding: '6px 8px',
                      display: 'flex', alignItems: 'center', gap: 10,
                      borderRadius: 4,
                      background: c.id === activeCompanyId ? 'color-mix(in oklch, var(--ai-500) 10%, transparent)' : 'transparent',
                    }}>
                    <div style={{
                      width: 22, height: 22, borderRadius: 4, flexShrink: 0,
                      background: c.id === activeCompanyId ? 'var(--brand-900)' : 'var(--surface-muted)',
                      color: c.id === activeCompanyId ? '#fff' : 'var(--text-muted)',
                      display: 'grid', placeItems: 'center',
                      fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 9.5, letterSpacing: '0.04em',
                    }}>{c.code}</div>
                    <div style={{ flex: 1, textAlign: 'left', minWidth: 0 }}>
                      <div style={{ fontSize: 11.5, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.name}</div>
                      <div style={{ fontSize: 9.5, color: 'var(--text-dim)' }}>{c.country} · {c.tipo}</div>
                    </div>
                    {c.id === activeCompanyId && <Icon name="check" size={13} style={{ color: 'var(--ai-500)', flexShrink: 0 }} />}
                  </button>
                ))}
              </div>
            )}
            <div style={{ fontSize: 10.5, color: 'var(--text-dim)', marginTop: 6 }}>
              {accessibleCompanies.length} empresa{accessibleCompanies.length !== 1 ? 's' : ''} acessíve{accessibleCompanies.length !== 1 ? 'is' : 'l'}
            </div>
          </div>

          {/* Action buttons */}
          <div style={{ padding: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
            <button
              onClick={() => { setOpen(false); onOpenDrawer && onOpenDrawer(); }}
              className="btn btn-sm"
              style={{ justifyContent: 'flex-start', width: '100%', padding: '8px 12px' }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
              onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-elev)'}
            >
              <Icon name="sparkle" size={14} style={{ color: 'var(--ai-500)' }} />
              <span style={{ flex: 1, textAlign: 'left' }}>O meu Digi</span>
              <kbd style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, padding: '1px 5px', border: '1px solid var(--border)', borderRadius: 3, background: 'var(--bg-sunken)', color: 'var(--text-dim)' }}>⌘,</kbd>
            </button>
            <button
              onClick={() => { setOpen(false); onNavigate && onNavigate('settings'); }}
              className="btn btn-sm"
              style={{ justifyContent: 'flex-start', width: '100%', padding: '8px 12px' }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
              onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-elev)'}
            >
              <Icon name="ops" size={14} style={{ color: 'var(--text-muted)' }} />
              <span style={{ flex: 1, textAlign: 'left' }}>Settings</span>
            </button>
            <button
              onClick={onSwitchUser}
              className="btn btn-sm"
              style={{
                justifyContent: 'flex-start', width: '100%', padding: '8px 12px',
                color: 'var(--danger)',
                border: '1px solid color-mix(in oklch, var(--danger) 30%, transparent)',
                background: 'color-mix(in oklch, var(--danger) 6%, transparent)',
              }}
            >
              <Icon name="logout" size={14} />
              <span style={{ flex: 1, textAlign: 'left' }}>Sair</span>
              <span style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>SSO</span>
            </button>
          </div>

          {/* Session footer */}
          <div style={{ padding: '8px 14px', background: 'var(--bg-sunken)', borderTop: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 6, fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--success)' }} />
            Sessão activa há 4h 12m · {u.sso || 'Microsoft 365'}
          </div>
        </div>
      )}
    </div>
  );
};

// Hook: empresa activa partilhada (event-bus + localStorage)
function useActiveCompany(fallback) {
  const [val, setVal] = React.useState(() => {
    try { return localStorage.getItem('digi-active-company') || fallback || 'FBS'; } catch { return fallback || 'FBS'; }
  });
  React.useEffect(() => {
    try { localStorage.setItem('digi-active-company', val); } catch {}
    window.dispatchEvent(new CustomEvent('digi-active-company', { detail: { val } }));
  }, [val]);
  React.useEffect(() => {
    const onSync = (e) => { if (e.detail && e.detail.val !== val) setVal(e.detail.val); };
    window.addEventListener('digi-active-company', onSync);
    return () => window.removeEventListener('digi-active-company', onSync);
  }, [val]);
  return [val, setVal];
}

window.UserMenu = UserMenu;
window.useActiveCompany = useActiveCompany;