// 顶栏：产品标识与待处理铃铛。项目身份在左栏顶部切换器集中显示一次（方案），
// 阶段徽章随切换器；本栏不再重复。
import { BrandMark, Icon, pendingCount } from '@ui'
import { store, useStore } from '../store'

export function TopBar() {
  const pending = useStore(s => pendingCount(s.cards) + pendingCount(s.projectCards))
  return (
    <header className="topbar">
      <BrandMark size={22} />
      <span className="topbar-name">Agent-System</span>
      <span className="topbar-spacer" />
      <button className="topbar-bell" title={pending > 0 ? `待处理 ${pending}，打开工作入口` : '工作入口'}
        onClick={() => store.focusPending()}>
        <Icon name="inbox" size={16} />
        {pending > 0 && <span className="rail-badge" data-testid="topbar-pending">{pending}</span>}
      </button>
    </header>
  )
}