import { BotTable, SectionCard, StaleBadge } from '@overdeck/deck-ui'
import { adapterIdForPanel } from '../../lib/collector-client'
import type { AdapterStatus, Panel } from '../../lib/collector-types'
import type { BotsPanelData } from '../../lib/panel-data'
import { OVERVIEW_FILL_BODY_CLASS, OVERVIEW_FILL_CARD_CLASS } from './overview-layout'

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

export function BotsCard({ panels, adapters }: BotsCardProps) {
  const panel = panels.find((entry) => entry.id === 'bots')
  const bots = panel ? (panel.data as BotsPanelData).bots : []
  const status = adapters.find((adapter) => adapter.id === adapterIdForPanel('bots'))

  return (
    <SectionCard
      title="Bots (Botmaster)"
      titleBadge={status ? <StaleBadge status={status} /> : undefined}
      action={{ label: 'bots →', href: '/bots' }}
      className={OVERVIEW_FILL_CARD_CLASS}
    >
      <div className={OVERVIEW_FILL_BODY_CLASS}>
        {bots.length === 0 ? (
          <p className="text-[12px] text-fg-muted">
            {panel
              ? 'No bots in the latest snapshot.'
              : 'Bots unavailable — botmaster adapter has not returned data yet.'}
          </p>
        ) : (
          <BotTable
            bots={bots.map((bot) => ({
              id: bot.id,
              name: bot.name,
              subtitle: bot.project,
              status: bot.status,
              statusDetail: bot.statusDetail,
              messages24h: bot.messages24h,
              errors: bot.errors,
              cost: bot.cost,
            }))}
          />
        )}
      </div>
    </SectionCard>
  )
}