import type { Kind } from '../../lib/collector-types'
import { ALL_KINDS } from './inbox-mappers'

export type InboxKindFilter = 'all' | Kind

export interface InboxFilterRailProps {
  selected: InboxKindFilter
  counts: Record<Kind, number>
  total: number
  onSelect: (filter: InboxKindFilter) => void
}

const KIND_LABELS: Record<Kind, string> = {
  alert: 'Alerts',
  ci: 'CI',
  halt: 'HALTs',
  decision: 'Decisions',
  limit: 'Limits',
  gate: 'Gates',
  progress: 'Progress',
  build: 'Build',
}

/** Kind filter rail with per-kind counts — mockup v2 triage chrome. */
export function InboxFilterRail({ selected, counts, total, onSelect }: InboxFilterRailProps) {
  return (
    <div className="mb-1 flex flex-wrap gap-2" role="toolbar" aria-label="Filter by kind">
      <FilterChip label="All" count={total} active={selected === 'all'} onClick={() => onSelect('all')} />
      {ALL_KINDS.map((kind) => (
        <FilterChip
          key={kind}
          label={KIND_LABELS[kind]}
          count={counts[kind]}
          active={selected === kind}
          onClick={() => onSelect(kind)}
          dataKind={kind}
        />
      ))}
    </div>
  )
}

function FilterChip({
  label,
  count,
  active,
  onClick,
  dataKind,
}: {
  label: string
  count: number
  active: boolean
  onClick: () => void
  dataKind?: Kind
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      data-kind-filter={dataKind ?? 'all'}
      className={
        active
          ? 'inline-flex cursor-pointer items-center gap-1.5 rounded-2xl border border-[#33405c] bg-[#1d2433] px-3 py-1 text-[12px] text-[#dbe4ff]'
          : 'inline-flex cursor-pointer items-center gap-1.5 rounded-2xl border border-border bg-surface px-3 py-1 text-[12px] text-fg-muted'
      }
    >
      {label}
      <span className="rounded-lg bg-surface-raised px-1.5 text-[11px] leading-[18px] text-fg-muted">{count}</span>
    </button>
  )
}