/* Topbar — greeting, search, period filter, alerts, account chip. */

function Topbar({ period, setPeriod, onOpenAlerts, alertCount }) {
  const periods = [
    { id: 'mtd', label: 'MTD' },
    { id: 'qtd', label: 'QTD' },
    { id: 'ytd', label: 'YTD' },
    { id: '12m', label: '12M' },
  ];
  return (
    <header className="cb-topbar">
      <div className="cb-topbar-left">
        <div className="cb-search">
          <IconSearch size={16} />
          <input type="text" placeholder="Search invoices, jobs, clients…" />
          <kbd>⌘K</kbd>
        </div>
      </div>

      <div className="cb-topbar-right">
        <div className="cb-period">
          {periods.map((p) => (
            <button key={p.id} type="button" data-on={period === p.id ? '1' : '0'}
                    onClick={() => setPeriod(p.id)}>{p.label}</button>
          ))}
        </div>

        <button type="button" className="cb-icon-btn" aria-label="Alerts" onClick={onOpenAlerts}>
          <IconBell size={17} />
          {alertCount > 0 && <em className="cb-icon-dot">{alertCount}</em>}
        </button>

        {(() => {
          const user = window.__CB_USER || {};
          const orgName = (CB.company && CB.company.name) || 'Your company';
          const displayName = user.name || user.email || (CB.company && CB.company.owner) || 'Account';
          const initials = displayName.split(/[\s@.]+/).filter(Boolean).slice(0, 2)
            .map((s) => s[0].toUpperCase()).join('') || 'CB';
          return (
            <div className="cb-account" role="button" title="Sign out"
                 onClick={() => { if (window.__CB_LOGOUT && confirm('Sign out?')) window.__CB_LOGOUT(); }}>
              <div className="cb-account-avatar">{initials}</div>
              <div className="cb-account-body">
                <div className="cb-account-name">{displayName}</div>
                <div className="cb-account-org">{orgName}</div>
              </div>
              <IconChevDown size={14} />
            </div>
          );
        })()}
      </div>
    </header>
  );
}

Object.assign(window, { Topbar });