// Topbar — título dinâmico (centralizado) + usuário logado/sair (spec 2026-08-05).
// Busca vive na tela de Afiliados; filtros no FilterBar. O hambúrguer só aparece
// no mobile (classe .hamburger, ver CSS do index) e abre o drawer da sidebar.
const Topbar = ({ title = 'Painel', onMenu }) => {
  const user = window.FenixAuth?.user();
  return (
    <header style={tb.root}>
      <div style={tb.side}>
        <button className="hamburger" onClick={onMenu} title="Menu"
          style={{background:'none', border:0, padding:4, cursor:'pointer', alignItems:'center'}}>
          <Icon name="menu" size={22} color="var(--fg-1)"/>
        </button>
      </div>
      <h1 style={tb.title}>{title}</h1>
      <div style={{...tb.side, ...tb.userBox}}>
        {user && <>
          <span style={tb.userName} title={`${user.email} — ${user.nivel || ''}`}>{user.nome}</span>
          <button style={tb.sair} onClick={()=>window.FenixAuth.logout()}>Sair</button>
        </>}
      </div>
    </header>
  );
};

const tb = {
  root:{ display:'grid', gridTemplateColumns:'1fr auto 1fr', alignItems:'center', gap:20,
    padding:'16px 28px', background:'#fff', borderBottom:'1px solid var(--border-1)', flex:'none' },
  side:{},
  title:{ font:'800 23px/1.1 var(--font-display)', letterSpacing:'-.01em', color:'var(--fg-1)',
    margin:0, textAlign:'center', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' },
  userBox:{ display:'flex', alignItems:'center', justifyContent:'flex-end', gap:12, minWidth:0 },
  userName:{ font:'var(--text-body-sm)', color:'var(--fg-2)', whiteSpace:'nowrap',
    overflow:'hidden', textOverflow:'ellipsis' },
  sair:{ font:'var(--text-label)', color:'var(--fg-2)', background:'transparent',
    border:'1px solid var(--border-2)', borderRadius:'var(--r-sm)', padding:'6px 12px', cursor:'pointer' },
};

window.Topbar = Topbar;