// TopBar — brand + workspace + per-platform credit balances + user.
const { useState } = React;

window.TopBar = function TopBar({ onOpenTweaks, credits }) {
  const c = credits || {};
  // Only surface platforms whose balance is known. Backend-less platforms
  // stay out of the bar until their credit feed lands.
  const chips = Object.entries(PLATFORMS)
    .map(([key, p]) => [key, p, c[key]])
    .filter(([, , bal]) => typeof bal === "number");
  return (
    <header className="topbar">
      <div className="topbar-left">
        <img src="../../assets/mark.svg" alt="" className="topbar-mark" />
        <span className="topbar-brand">Resilia</span>
      </div>
      <div className="topbar-center">
        <div className="topbar-search">
          <Icon name="search" size={14} />
          <input placeholder="Jump to brand, ad ID, or script…" />
          <kbd>⌘K</kbd>
        </div>
      </div>
      <div className="topbar-right">
        {chips.length > 0 && (
          <div className="topbar-credits" aria-label="Platform credit balances">
            {chips.map(([key, p, bal]) => (
              <span
                key={key}
                className="credit-chip"
                title={`${p.label} credits remaining`}
                style={{ background: p.bg, color: p.color, borderColor: p.bg }}
              >
                <span className="credit-chip-dot" style={{ background: p.color }} />
                {p.label}
                <span className="credit-chip-value">{bal.toLocaleString()}</span>
              </span>
            ))}
          </div>
        )}
        <button className="icon-btn" title="Settings">
          <Icon name="settings" size={16} />
        </button>
        <div className="avatar">KN</div>
      </div>
    </header>
  );
};