import { StatusChip } from '@overdeck/deck-ui'
import type { JSX } from 'react'
import type { FactoryRunView } from '../../lib/factory-types'
import { FactoryRepoLabel } from './FactoryRepoLabel'
import { FactoryRunTiming } from './FactoryRunTiming'
import {
  displayStatus,
  displayText,
  formatEstimatedSpend,
  formatTokenCount,
  runDisplayName,
  runSubtitle,
} from './factory-helpers'

export function FactoryRunSummary(props: {
  run: FactoryRunView
  pendingCount?: number
}): JSX.Element {
  const { run, pendingCount = 0 } = props
  const subtitle = runSubtitle(run)

  return (
    <header className="flex min-w-0 flex-col gap-2">
      <div className="flex min-w-0 flex-wrap items-center gap-2">
        <h3 className="min-w-0 truncate text-sm font-semibold text-fg">{runDisplayName(run)}</h3>
        <StatusChip status={displayStatus(run.status)} />
        {pendingCount > 0 ? (
          <StatusChip
            status="attention"
            needsYou
            label={pendingCount === 1 ? '1 decision waiting' : `${pendingCount} decisions waiting`}
          />
        ) : null}
      </div>
      {subtitle ? <p className="text-xs text-fg-muted">{subtitle}</p> : null}
      <div className="flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1 text-xs tabular-nums text-fg-subtle">
        <FactoryRepoLabel repo={run.repo} repoName={run.repoName} />
        <span>
          <span className="text-fg-muted">tokens </span>
          {formatTokenCount(run.totalTokens)}
        </span>
        <span>
          <span className="text-fg-muted">spend </span>
          {formatEstimatedSpend(run.totalCost)}
        </span>
        <FactoryRunTiming status={run.status} startedAt={run.startedAt} endedAt={run.endedAt} />
        <span className="text-fg-muted">{displayText(run.adwId)}</span>
      </div>
    </header>
  )
}