import { StatusChip } from '@overdeck/deck-ui'
import {
  attemptVerdictLabel,
  isAttemptAlarmed,
  shortAttemptId,
  type AttemptRecord,
  type QuarantineRecord,
} from './attempt-record'

function autopsyVisibleForRunStatus(runStatus: string) {
  return runStatus === 'failed' || runStatus === 'blocked' || runStatus === 'quarantined'
}

export function AutopsyStrip(props: {
  attempts: AttemptRecord[]
  runStatus: string
  nowMs?: number | null
  quarantine?: QuarantineRecord | null
}) {
  const nowMs = props.nowMs ?? Date.now()
  const warning = props.attempts.length >= 3
  const quarantine = props.quarantine ?? null

  if (props.attempts.length === 0 && quarantine === null) return null
  if (!autopsyVisibleForRunStatus(props.runStatus) && quarantine === null) return null

  return (
    <div
      data-testid="autopsy-strip"
      data-warning={warning ? 'true' : 'false'}
      className={[
        'flex flex-wrap items-center gap-2 rounded-lg border px-3 py-2',
        warning ? 'border-warning bg-warning/5' : 'border-border bg-surface',
      ].join(' ')}
    >
      <span className="text-xs font-semibold text-fg-subtle">Attempts</span>
      {quarantine && (
        <span
          data-testid="autopsy-quarantine"
          className="inline-flex items-center gap-1.5 text-xs text-fg-muted"
        >
          <StatusChip status="quarantined" needsYou label="quarantined" />
          <span className="text-fg-subtle">{quarantine.phase}</span>
          <span>{quarantine.reason}</span>
        </span>
      )}
      <ol className="flex flex-wrap items-center gap-1.5">
        {props.attempts.map((attempt, index) => {
          const previous = props.attempts[index - 1]
          const alarmed = isAttemptAlarmed(attempt, nowMs)
          const verdict = attemptVerdictLabel(attempt)

          return (
            <li key={attempt.attemptId}>
              {previous && (
                <span
                  data-testid={`autopsy-transition-${attempt.attemptId}`}
                  className="mr-1.5 inline-flex items-center gap-1 font-mono text-xs text-fg-subtle"
                >
                  <span>→</span>
                  <span>{previous.failureClass ?? 'not recorded'}</span>
                  <span>→</span>
                  <span>{attempt.causalInput ?? 'not recorded'}</span>
                  <span>→</span>
                </span>
              )}
              <span
                data-testid={`autopsy-marker-${attempt.attemptId}`}
                data-marker-index={index}
                data-alarmed={alarmed ? 'true' : 'false'}
                title={`${attempt.attemptId} · ${verdict}`}
                className={[
                  'inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-mono text-xs',
                  alarmed
                    ? 'bg-warning/15 font-semibold text-warning'
                    : 'bg-surface-raised text-fg-muted',
                ].join(' ')}
              >
                <span>{shortAttemptId(attempt.attemptId)}</span>
                <span className="font-sans text-fg-subtle">·</span>
                <span className="font-sans">{verdict}</span>
              </span>
            </li>
          )
        })}
      </ol>
      {warning && (
        <span
          data-testid="autopsy-strip-warning"
          className="text-xs font-semibold text-warning"
        >
          3+ attempts
        </span>
      )}
    </div>
  )
}