/* OrchEcomm dashboard — top bar: page title, search, quick-add, notifications, account. */
function Topbar({ title, subtitle, onOpenNotifications, notifCount = 0, onQuickAdd }) {
  const I = window.OcIcons;
  const { Avatar, Button } = window.OrchEcommDesignSystem_091be6;
  return (
    <header style={{ height: "var(--topbar-height)", flexShrink: 0, display: "flex", alignItems: "center", gap: 16, padding: "0 24px", background: "var(--surface-card)", borderBottom: "1px solid var(--border-default)", position: "sticky", top: 0, zIndex: "var(--z-sticky)" }}>
      <div style={{ minWidth: 0 }}>
        <h1 style={{ font: "var(--type-page-title)", color: "var(--text-primary)", lineHeight: 1.1 }}>{title}</h1>
        {subtitle ? <div style={{ font: "var(--type-caption)", color: "var(--text-secondary)", marginTop: 1 }}>{subtitle}</div> : null}
      </div>

      <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 10 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, height: 36, padding: "0 12px", background: "var(--bg-app)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-sm)", width: 220, color: "var(--text-muted)" }}>
          <I.Search size={16} />
          <input placeholder="Search…" style={{ border: "none", outline: "none", background: "transparent", font: "var(--type-body)", color: "var(--text-primary)", width: "100%" }} />
          <kbd style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--text-muted)", border: "1px solid var(--border-default)", borderRadius: 4, padding: "0 4px", background: "var(--surface-card)" }}>⌘K</kbd>
        </div>
        <Button variant="primary" size="md" iconLeft={<I.Plus size={15} />} onClick={onQuickAdd}>Connect</Button>
        <IconBtn onClick={onOpenNotifications}>
          <I.Bell size={18} />
          {notifCount > 0 ? <span style={{ position: "absolute", top: 4, right: 4, minWidth: 16, height: 16, padding: "0 4px", borderRadius: "var(--radius-full)", background: "var(--color-error)", color: "#fff", fontSize: 10, fontWeight: 700, display: "inline-flex", alignItems: "center", justifyContent: "center", border: "1.5px solid var(--surface-card)" }}>{notifCount}</span> : null}
        </IconBtn>
        <Avatar name="Cristian Babalau" size={34} />
      </div>
    </header>
  );
}

function IconBtn({ children, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ position: "relative", width: 36, height: 36, display: "inline-flex", alignItems: "center", justifyContent: "center", border: "1px solid var(--border-default)", borderRadius: "var(--radius-sm)", background: hover ? "var(--green-50)" : "var(--surface-card)", color: "var(--text-secondary)", cursor: "pointer", transition: "background var(--transition-fast)" }}>
      {children}
    </button>
  );
}

window.Topbar = Topbar;
window.IconBtn = IconBtn;