import { formatDurationMs } from './format'
import { useDeckTooltip } from './DeckTooltip'

export interface TrainJob {
  id: number
  name: string
  status: string
  conclusion: string | null
  runnerId: number | null
  runner: string | null
  startedAt: string | null
  completedAt: string | null
  infraFlag: boolean | null
}

export interface LaneSegmentProps {
  job: TrainJob
  jobsComplete: boolean
}

const LANE_COLOR = {
  pass: 'bg-[var(--mod-color-lane-pass)]',
  fail: 'bg-[var(--mod-color-lane-fail)]',
  running: 'bg-[var(--mod-color-lane-running)]',
  queued: 'bg-[var(--mod-color-lane-queued)]',
} as const

function laneState(job: TrainJob): keyof typeof LANE_COLOR {
  if (job.conclusion === 'success') return 'pass'
  if (job.conclusion === 'failure') return 'fail'
  if (job.status === 'in_progress') return 'running'
  return 'queued'
}

function jobDuration(job: TrainJob): string {
  if (!job.startedAt || !job.completedAt) return 'duration unavailable'
  const startedAt = Date.parse(job.startedAt)
  const completedAt = Date.parse(job.completedAt)
  if (!Number.isFinite(startedAt) || !Number.isFinite(completedAt) || completedAt < startedAt) {
    return 'duration unavailable'
  }
  return formatDurationMs(completedAt - startedAt)
}

export function LaneSegment({ job, jobsComplete }: LaneSegmentProps) {
  const tooltipTarget = useDeckTooltip(job.name, jobDuration(job))
  const infraStriped = jobsComplete && job.infraFlag === true

  return (
    <span
      {...tooltipTarget}
      role="img"
      aria-label={job.name}
      data-testid="lane-segment"
      data-lane-state={laneState(job)}
      data-infra-striped={infraStriped ? 'true' : undefined}
      className={`relative min-h-6 min-w-6 flex-1 overflow-hidden first:rounded-l-md last:rounded-r-md ${LANE_COLOR[laneState(job)]} ${
        infraStriped
          ? 'after:absolute after:inset-0 after:bg-[repeating-linear-gradient(135deg,transparent_0,transparent_25%,var(--mod-color-lane-infra-stripe)_25%,var(--mod-color-lane-infra-stripe)_50%)] after:opacity-60'
          : ''
      }`}
    />
  )
}