// Admin Topbar — crumbs, ⌘K hint, theme toggle, language, notifications, avatar.

function AdminTopbar({ crumbs, onCmdK, theme, onToggleTheme }) {
  return (
    <header className="topbar">
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <i className="ti ti-chevron-right"></i>}
            <span className={i === crumbs.length - 1 ? "here" : ""}>{c}</span>
          </React.Fragment>
        ))}
      </div>
      <div className="topbar-spacer"></div>
      <div className="searchbar" style={{maxWidth: 280, cursor: "pointer"}} onClick={onCmdK} role="button" aria-label="Open command palette">
        <i className="ti ti-search"></i>
        <input placeholder="Jump to tenant, user, audit ID…" readOnly />
        <span className="data-mono" style={{fontSize: 11, color: "var(--on-surface-variant)"}}>⌘K</span>
      </div>
      <div className="topbar-action" title="Toggle theme" onClick={onToggleTheme} role="button" aria-label={theme === "dark" ? "Switch to light" : "Switch to dark"}>
        <i className={"ti " + (theme === "dark" ? "ti-sun" : "ti-moon")}></i>
      </div>
      <div className="topbar-action has-new" title="Notifications"><i className="ti ti-bell"></i></div>
      <div className="topbar-action" title="Help"><i className="ti ti-help-circle"></i></div>
      <div className="topbar-action" title="Switch language"><span className="flag">🇺🇸</span></div>
      <div className="avatar">S</div>
    </header>
  );
}

window.AdminTopbar = AdminTopbar;