interface TopBarTab {
  name: string;
  icon?: string | null;
  badge?: number | null;
}

interface TopBarProps {
  appName: string;
  appIcon?: string | null;
  tabs?: TopBarTab[];
  current?: string;
  onSelect?: (name: string) => void;
  /** Hide tab nav (used when sidebar handles navigation). */
  hideTabs?: boolean;
  children?: preact.ComponentChildren;
}

export function TopBar({ appName, appIcon, tabs, current, onSelect, hideTabs, children }: TopBarProps) {
  const logoEl = appIcon ? (
    <span class="text-lg leading-none">{appIcon}</span>
  ) : (
    <div
      class="w-6 h-6 rounded-md flex items-center justify-center text-[var(--z-font-sm)] font-bold"
      style={{ background: "var(--z-accent-dim)", color: "var(--z-accent-light)" }}
    >
      {appName.charAt(0).toUpperCase()}
    </div>
  );

  return (
    <header class="sticky top-0 z-50" style={{ borderBottom: "1px solid var(--z-border)", background: "var(--z-surface)" }}>
      <div class="max-w-[var(--z-content-width)] mx-auto px-6 h-12 flex items-center justify-between">
        <div class="flex items-center gap-2">
          {logoEl}
          <span class="font-semibold text-sm">{appName}</span>
        </div>
        <div class="flex items-center gap-3">
          {!hideTabs && tabs && onSelect && (
            <nav class="flex gap-0.5">
              {tabs.map((t) => (
                <button
                  key={t.name}
                  onClick={() => onSelect(t.name)}
                  class="px-3 py-1.5 text-xs rounded-md transition-all"
                  style={{
                    background: t.name === current ? "var(--z-accent-dim)" : "transparent",
                    color: t.name === current ? "var(--z-accent-light)" : "var(--z-muted)",
                    fontWeight: t.name === current ? 500 : 400,
                  }}
                >
                  {t.icon && <span class="mr-1">{t.icon}</span>}
                  {t.name}
                  {t.badge ? <span class="ml-1 opacity-40 font-mono text-[var(--z-font-xs)]">{t.badge}</span> : null}
                </button>
              ))}
            </nav>
          )}
          {children}
        </div>
      </div>
    </header>
  );
}
