// Topbar with breadcrumb, command palette trigger, theme toggle, user menu
const ROUTE_LABELS = {
  "dashboard": ["Visão geral", "Dashboard"],
  "chatbot:persona": ["Chatbot", "Persona & Voz"],
  "chatbot:chat":    ["Chatbot", "Aparência do widget"],
  "chatbot:prompt":  ["Chatbot", "System prompt"],
  "chatbot:handoff": ["Chatbot", "Atendimento humano"],
  "knowledge:context": ["Conhecimento", "Contexto direto"],
  "knowledge:files":   ["Conhecimento", "Arquivos"],
  "knowledge:pages":   ["Conhecimento", "Páginas do site"],
  "history":           ["Operação", "Histórico de conversas"],
  "system:config":     ["Sistema", "Configurações"],
  "system:diag":       ["Sistema", "Diagnóstico"],
  "system:api":        ["Sistema", "API & Integração"],
};

function Topbar({ route, onCmdk, theme, onTheme, onCollapseSidebar, saveState, onLogout, user }) {
  const [section, screen] = ROUTE_LABELS[route] || ["", ""];
  const [menuOpen, setMenuOpen] = useState(false);
  const menuRef = useRef(null);

  useEffect(() => {
    if (!menuOpen) return;
    const onDoc = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false);
    };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [menuOpen]);

  // Nome real + iniciais derivadas
  const userName = (user && (user.user || user.username || user.name)) || 'admin';
  const initials = (() => {
    const parts = String(userName).trim().split(/[\s._-]+/).filter(Boolean);
    if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
    return userName.slice(0, 2).toUpperCase();
  })();
  const role = (user && (user.role || user.via)) || 'admin';

  return (
    <header className="topbar">
      <button className="topbar-collapse" onClick={onCollapseSidebar} title="Recolher sidebar">
        <i className="fas fa-bars"></i>
      </button>

      <div className="breadcrumb">
        <span className="crumb">{section}</span>
        <i className="fas fa-chevron-right sep" style={{ fontSize: 9 }}></i>
        <span className="crumb current">{screen}</span>
      </div>

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

      <button className="cmdk-trigger" onClick={onCmdk}>
        <i className="fas fa-search"></i>
        <span>Buscar telas, ações…</span>
        <span className="kbd">⌘K</span>
      </button>

      <SaveState state={saveState} />

      <div className="topbar-actions">
        <button className="icon-btn" onClick={onTheme} title="Trocar tema">
          <i className={"fas " + (theme === "dark" ? "fa-sun" : "fa-moon")}></i>
        </button>

        <div ref={menuRef} style={{ position: 'relative' }}>
          <button className="user-chip" onClick={() => setMenuOpen((v) => !v)} title="Conta">
            <span className="avatar">{initials}</span>
            <span>{userName}</span>
            <i className={"fas " + (menuOpen ? "fa-chevron-up" : "fa-chevron-down")} style={{ fontSize: 10, color: "var(--t3)" }}></i>
          </button>

          {menuOpen && (
            <div className="user-menu" onClick={(e) => e.stopPropagation()}>
              <div className="user-menu-head">
                <div className="nm">{userName}</div>
                <div className="sub">SINTRACON-SP · {role === 'jwt' ? 'sessão JWT' : role}</div>
              </div>
              <div className="user-menu-item danger" onClick={() => { setMenuOpen(false); onLogout && onLogout(); }}>
                <i className="fas fa-sign-out-alt"></i>
                <span>Sair</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </header>
  );
}

window.Topbar = Topbar;