import { Card } from '@astryxdesign/core'
import { formatDurationMs } from './format'

export interface TaskStateCell {
  id: string
  name: string
  state: 'landed' | 'active' | 'blocked' | 'queued' | 'failed'
  alarmed?: boolean
}

export interface AcceptanceResult {
  id: string
  text: string
  result: 'passed' | 'failed' | 'pending'
}

const STATE_COLOR: Record<TaskStateCell['state'], string> = {
  landed: 'bg-[var(--mod-color-run-state-landed)]',
  active: 'bg-[var(--mod-color-run-segment-gate)]',
  blocked: 'bg-[var(--mod-color-run-state-waiting)]',
  queued: 'bg-[var(--mod-color-run-state-queued)]',
  failed: 'bg-[var(--mod-color-run-state-failed)]',
}

export function DistanceToDone(props: {
  landed: number
  total: number
  cells: TaskStateCell[]
  etaMs: number | null
  fixLoop: { percent: number } | null
  truthNote: string
  acceptance?: AcceptanceResult[]
}) {
  const fixLoopPercent = props.fixLoop
    ? Math.max(0, Math.min(100, props.fixLoop.percent))
    : null

  return (
    <Card
      aria-labelledby="distance-to-done-title"
      className="grid min-w-0 gap-6 lg:grid-cols-[minmax(0,1.35fr)_minmax(0,0.65fr)]"
    >
      <div className="min-w-0">
        <p className="text-xs font-semibold uppercase tracking-wider text-fg-subtle">
          Distance to done
        </p>
        <div className="mt-2 flex flex-wrap items-end gap-x-4 gap-y-1">
          <strong className="text-4xl font-bold tabular-nums text-fg">
            {props.landed} / {props.total}
          </strong>
          <h2 id="distance-to-done-title" className="pb-1 text-base font-semibold text-fg">
            tasks truly landed
          </h2>
        </div>
        <div role="list" aria-label="Per-task verified state" className="mt-4 flex flex-wrap gap-1.5">
          {props.cells.map((cell) => (
            <div
              key={cell.id}
              role="listitem"
              title={`${cell.name} · ${cell.state}`}
              data-task-state={cell.state}
              data-task-alarmed={cell.alarmed ? 'true' : undefined}
              className={`relative grid h-9 min-w-9 flex-1 place-items-center rounded text-xs font-bold text-white ${STATE_COLOR[cell.state]} ${
                cell.alarmed ? 'ring-2 ring-warning ring-offset-1 ring-offset-surface' : ''
              }`}
            >
              {cell.id}
            </div>
          ))}
        </div>
        <p className="mt-4 text-sm leading-relaxed text-fg-muted">{props.truthNote}</p>
        {props.acceptance && props.acceptance.length > 0 && (
          <ul className="mt-4 grid gap-2 text-sm text-fg-muted" aria-label="Acceptance results">
            {props.acceptance.map((item) => (
              <li key={item.id} className="rounded-md border border-border px-3 py-2">
                <strong className="text-fg">{item.id} · {item.result}</strong> — {item.text}
              </li>
            ))}
          </ul>
        )}
      </div>

      <div data-testid="run-trajectory" className="min-w-0 border-l border-border pl-6">
        <p className="text-xs font-semibold uppercase tracking-wider text-fg-subtle">Trajectory</p>
        <p className="mt-3 text-sm font-semibold text-fg">
          {props.etaMs === null
            ? 'ETA — needs ≥1 measured task'
            : `ETA ${formatDurationMs(props.etaMs)}`}
        </p>
        {fixLoopPercent === null ? (
          <p className="mt-4 text-sm text-fg-muted">Fix-loop share — not recorded yet</p>
        ) : (
          <div className="mt-4">
            <div className="flex items-center justify-between text-sm text-fg-muted">
              <span>Fix-loop share</span>
              <strong className="tabular-nums text-fg">{Math.round(fixLoopPercent)}%</strong>
            </div>
            <div className="mt-2 h-2 overflow-hidden rounded-full bg-[var(--mod-color-track)]">
              <div
                role="meter"
                aria-label="Fix-loop share"
                aria-valuemin={0}
                aria-valuemax={100}
                aria-valuenow={Math.round(fixLoopPercent)}
                className="h-full bg-[var(--mod-color-run-segment-fixer)]"
                style={{ width: `${fixLoopPercent}%` }}
              />
            </div>
          </div>
        )}
      </div>
    </Card>
  )
}