import { ScoreCard, SectionCard, StaleBadge } from '@overdeck/deck-ui'
import { adapterIdForPanel } from '../../lib/collector-client'
import type { AdapterStatus, Panel } from '../../lib/collector-types'
import { scoreCardPropsFor } from '../../lib/overview-mappers'
import type { GolivePanelData } from '../../lib/panel-data'
import { SCOREBOARD_GRID_CLASS } from './overview-layout'

export interface ScoreboardRowProps {
  panels: Panel[]
  adapters: AdapterStatus[]
}

/** Scoreboard strip — one SectionCard+ScoreCard per configured GOLIVE.md repo, dynamic column count. */
export function ScoreboardRow({ panels, adapters }: ScoreboardRowProps) {
  const panel = panels.find((p) => p.id === 'scoreboard')
  if (!panel) return null

  const repos = (panel.data as GolivePanelData).repos
  if (repos.length === 0) return null

  const status = adapters.find((a) => a.id === adapterIdForPanel(panel.id))

  return (
    <div className={SCOREBOARD_GRID_CLASS}>
      {repos.map((score, i) => (
        <div key={score.repo} className="min-w-0">
          <SectionCard
            title={score.repo}
            titleBadge={i === 0 && status ? <StaleBadge status={status} /> : undefined}
            action={i === 0 ? { label: 'projects →', href: '/projects' } : undefined}
          >
            <ScoreCard {...scoreCardPropsFor(score)} />
          </SectionCard>
        </div>
      ))}
    </div>
  )
}