import type { HarnessStatus } from '../types/recipe';
import { UiSection, UiChip } from './ui/primitives';

function getRecentCommit(status: HarnessStatus) {
  return status.commit?.relative || status.commit?.hash || '';
}

export function MissionControlPanel({ status }: { status: HarnessStatus }) {
  const keepalive = status.keepalive || {};
  const todo = status.todo || { checked: 0, unchecked: 0, nextTask: undefined };
  const heartbeat = status.workerHeartbeatHistory || [];

  return (
    <UiSection className="mt-4 flex flex-col gap-3 border-[var(--border)]/70 bg-[var(--surface-muted)]/35 p-4" padding="none">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <div className="text-lg font-semibold text-[var(--text-h)]">Mission Control</div>
          <div className="text-xs text-[var(--text-dim)]">Version: {status.version}</div>
        </div>
        <UiChip className="bg-[var(--surface)] text-xs text-[var(--text)]">Git: {getRecentCommit(status) || 'n/a'}</UiChip>
      </div>

      <div className="flex flex-wrap gap-2">
        <UiChip className="text-xs">Keepalive: {keepalive.status || 'n/a'} ({keepalive.activeSessionLabel || 'none'})</UiChip>
        <UiChip className="text-xs">Heartbeat: {keepalive.heartbeatAgeSeconds != null ? `${keepalive.heartbeatAgeSeconds}s ago` : 'n/a'}</UiChip>
        <UiChip className="text-xs">Todo: checked {todo.checked ?? 0}/unchecked {todo.unchecked ?? 0}</UiChip>
        <UiChip className="text-xs">Next: {todo.nextTask || 'n/a'}</UiChip>
      </div>

      {!!heartbeat.length && (
        <div className="text-xs text-[var(--text-dim)]">Worker events: {heartbeat.length} ({heartbeat[0]?.timestamp})</div>
      )}
    </UiSection>
  );
}
