// Topbar.jsx — sticky app bar with brand, search, notifications, theme toggle, avatar.
function Topbar({ onOpenCmd, onToggleDark, onNotifications, onSettings, onSignOut, active, isDark, theme }) {
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    if (!menuOpen) return;
    const close = () => setMenuOpen(false);
    window.addEventListener("click", close);
    return () => window.removeEventListener("click", close);
  }, [menuOpen]);

  return (
    <header className="topbar">
      <div className="topbar__brand">
        <ChromaticMark size={22} />
        <span className="topbar__brand-name">Chromatic</span>
        <span className="pill" style={{ marginLeft: 6 }}>{theme}</span>
      </div>

      <button className="topbar__search" onClick={onOpenCmd} aria-label="Open command palette">
        <Icon name="search" size={14} />
        <input placeholder="Search palettes, components, docs…" readOnly />
        <kbd>⌘K</kbd>
      </button>

      <div className="topbar__right">
        <button className="icon-btn" onClick={onToggleDark} aria-label="Toggle dark mode">
          <Icon name={isDark ? "sun" : "moon"} size={16} />
        </button>
        <button className={"icon-btn" + (active === "inbox" ? " icon-btn--active" : "")} onClick={onNotifications} aria-label="Notifications">
          <Icon name="bell" size={16} />
        </button>
        <button className={"icon-btn" + (active === "team" ? " icon-btn--active" : "")} onClick={onSettings} aria-label="Settings">
          <Icon name="settings" size={16} />
        </button>
        <div style={{ position: "relative" }}>
          <button
            className="avatar"
            title="Edwin B."
            aria-haspopup="menu"
            aria-expanded={menuOpen}
            onClick={(e) => { e.stopPropagation(); setMenuOpen((v) => !v); }}
            style={{ border: "none", cursor: "pointer" }}
          >
            EB
          </button>
          {menuOpen && (
            <div className="menu" role="menu" onClick={(e) => e.stopPropagation()}>
              <div className="menu__head">
                <div style={{ fontWeight: 500, fontSize: 13 }}>Edwin B.</div>
                <div className="list-item__meta">edwin@chromatic.design</div>
              </div>
              <button className="menu__item" role="menuitem" onClick={() => { setMenuOpen(false); onSettings(); }}>
                <Icon name="users" size={14} />Team settings
              </button>
              <button className="menu__item" role="menuitem" onClick={() => { setMenuOpen(false); onToggleDark(); }}>
                <Icon name={isDark ? "sun" : "moon"} size={14} />{isDark ? "Light mode" : "Dark mode"}
                <kbd style={{ marginLeft: "auto" }}>⌘D</kbd>
              </button>
              <div className="divider" style={{ margin: "6px 0" }} />
              <button className="menu__item" role="menuitem" onClick={() => { setMenuOpen(false); onSignOut(); }}>
                <Icon name="arrow-right" size={14} />Sign out
              </button>
            </div>
          )}
        </div>
      </div>
    </header>
  );
}
window.Topbar = Topbar;