import { StatusChip } from './StatusChip'

export interface RunnerFleetRunner {
  id: number
  name: string
  status: string
  busy: boolean
  scope?: string | null
  currentJob: string | null
  currentRepo: string | null
  currentKnown: boolean
}

export interface RunnerFleetStripProps {
  runners: RunnerFleetRunner[]
  runnersComplete: boolean
  oldestQueuedAgeH: number | null
}

function RunnerAssignment({ runner }: { runner: RunnerFleetRunner }) {
  if (!runner.currentKnown || (runner.busy && (!runner.currentJob || !runner.currentRepo))) {
    return <p className="mt-3 text-xs text-fg-muted">Current job unknown</p>
  }

  if (!runner.busy) {
    return <p className="mt-3 text-xs text-fg-muted">No current job</p>
  }

  return (
    <div className="mt-3 min-w-0">
      <p className="truncate text-sm font-semibold text-fg">{runner.currentJob}</p>
      <p className="truncate text-xs text-fg-muted">{runner.currentRepo}</p>
    </div>
  )
}

export function RunnerFleetStrip({
  runners,
  runnersComplete,
  oldestQueuedAgeH,
}: RunnerFleetStripProps) {
  const onlineRunners = runners.filter((runner) => runner.status === 'online')
  const busyRunners = onlineRunners.filter((runner) => runner.busy).length
  const saturated =
    runnersComplete &&
    oldestQueuedAgeH !== null &&
    oldestQueuedAgeH > 0.25 &&
    onlineRunners.length > 0 &&
    onlineRunners.every((runner) => runner.busy)

  return (
    <section aria-label="Runner fleet" className="min-w-0">
      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
        <p className="text-xs font-semibold text-fg-muted">
          Busy / total{' '}
          <span
            aria-label="Busy runners / total runners"
            className="ml-1 text-sm font-bold tabular-nums text-fg"
          >
            {runnersComplete ? `${busyRunners} / ${onlineRunners.length}` : '—'}
          </span>
        </p>
        {!runnersComplete ? (
          <p role="status" className="text-xs font-semibold text-warning">
            Runner fleet incomplete
          </p>
        ) : null}
      </div>

      {saturated ? (
        <p
          role="status"
          aria-label="Runner saturation"
          className="mb-3 rounded-lg border border-warning/40 bg-warning/10 px-3 py-2 text-sm font-semibold text-warning"
        >
          head-of-line saturation
        </p>
      ) : null}

      {runners.length > 0 ? (
        <div className="flex gap-3 overflow-x-auto pb-2">
          {runners.map((runner, index) => (
            <article
              key={`${runner.id}:${runner.name}:${index}`}
              aria-label={`Runner ${runner.name}`}
              className="min-w-64 rounded-xl border border-border bg-surface p-4"
            >
              <p className="truncate text-sm font-bold text-fg">{runner.name}</p>
              {runner.scope ? (
                <p className="mt-0.5 truncate text-xs text-fg-muted">{runner.scope}</p>
              ) : null}
              <div className="mt-2 flex flex-wrap gap-1">
                <StatusChip status={runner.status} />
                <StatusChip status={runner.busy ? 'busy' : 'idle'} />
              </div>
              <RunnerAssignment runner={runner} />
            </article>
          ))}
        </div>
      ) : runnersComplete ? (
        <p role="status" className="rounded-xl border border-border bg-surface p-4 text-sm text-fg-muted">
          No runners reported
        </p>
      ) : null}
    </section>
  )
}