import { bucketMetaFor, segmentsForRun, type ForensicsRun, type ForensicsSegment } from './forensics-types'
import { formatDurationMs } from './format'

export interface RunLanesProps {
  runs: ForensicsRun[]
  segments: ForensicsSegment[]
}

function outcomeLabel(run: ForensicsRun): { text: string; className: string } {
  if (run.outcome === 'done') {
    const total = run.landed + run.quarantined + run.skipped
    return { text: `landed ${run.landed}/${total}`, className: 'text-fg' }
  }
  return { text: run.outcome, className: 'text-danger' }
}

/** `.lanes .lane` — each run's attributed time as a segmented bar. */
export function RunLanes({ runs, segments }: RunLanesProps) {
  return (
    <div>
      {runs.map((run) => {
        const runSegments = segmentsForRun(run, segments)
        const segTotal = runSegments.reduce((sum, seg) => sum + seg.durMs, 0)
        const outcome = outcomeLabel(run)
        return (
          <div key={`${run.index}-${run.startTs}`} className="grid grid-cols-[150px_1fr] items-center gap-3 py-[5px]">
            <div className="text-[11px] leading-[1.4] text-fg-muted">
              <b className="text-[11.5px] text-fg">run #{run.index}</b> · {formatDurationMs(run.durationMs)} ·{' '}
              <span className={outcome.className}>{outcome.text}</span>
            </div>
            <div className="flex h-[14px] items-center gap-0.5">
              {runSegments.map((seg, i) => (
                <i
                  key={`${seg.t0}-${i}`}
                  className="block h-full rounded"
                  style={{
                    width: `${(seg.durMs / (segTotal || 1)) * 100}%`,
                    background: bucketMetaFor(seg.cat).colorVar,
                  }}
                />
              ))}
              {run.outcome !== 'done' && <span className="h-[18px] w-[3px] rounded bg-danger" />}
            </div>
          </div>
        )
      })}
    </div>
  )
}