/* Topbar — title, mode display, sidebar toggle */

const Topbar = ({ title, sidebarCollapsed, onToggleSidebar, mode, bridge, onShare, conversationId, onOpenProfile, theme, onToggleTheme }) => {
  const M = MODE_META[mode] || MODE_META['chat'];
  const Ic = I[M.icon];
  return (
    <header className="topbar">
      <div className="tb-left">
        <button className="icon-btn" onClick={onToggleSidebar} title="Mostrar/ocultar barra lateral">
          <I.panelL size={16}/>
        </button>
        <div className="tb-title-block">
          <div className="eyebrow">{bridge ? `PROCESSO · ${bridge.processNumber}` : 'NOVO DIÁLOGO'}</div>
          <h1 className="tb-title">{title}</h1>
        </div>
      </div>
      <div className="tb-right">
        <div className="mode-indicator">
          <Ic size={12}/>
          <span>{M.label}</span>
        </div>
        <button className="icon-btn" title="Alternar tema" onClick={onToggleTheme}>
          {theme === 'dark' ? <I.sun size={15}/> : <I.moon size={15}/>}
        </button>
        <button className="icon-btn" title="Compartilhar conversa" onClick={onShare}><I.share size={15}/></button>
        <button className="icon-btn" title="Configurações" onClick={onOpenProfile}><I.settings size={15}/></button>
      </div>
    </header>
  );
};

window.Topbar = Topbar;