import type { HarnessStatus } from '../types/recipe';

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

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

  return (
    <div className="bg-gray-50 border-b p-4 flex flex-col gap-2">
      <div className="flex justify-between items-center">
        <div>
          <div className="font-semibold text-lg text-gray-700">Mission Control</div>
          <div className="text-xs text-gray-500">Version: {status.version}</div>
        </div>
        <div className="flex gap-4">
          <span className="text-xs text-gray-700">Git: {getRecentCommit(status)}</span>
        </div>
      </div>
      <div className="flex flex-wrap gap-4 mt-2">
        <div className="text-xs">Keepalive: {keepalive.status || 'n/a'} ({keepalive.activeSessionLabel || 'none'})</div>
        <div className="text-xs">Heartbeat: {keepalive.heartbeatAgeSeconds != null ? `${keepalive.heartbeatAgeSeconds}s ago` : 'n/a'}</div>
        <div className="text-xs">Todo: checked {todo.checked ?? 0}/unchecked {todo.unchecked ?? 0}</div>
        <div className="text-xs">Next: {todo.nextTask || 'n/a'}</div>
      </div>
      {!!heartbeat.length && (
        <div className="text-xs mt-2">
          Worker events: {heartbeat.length} ({heartbeat[0]?.timestamp})
        </div>
      )}
    </div>
  );
}
