import type { JSX } from 'react'
import type { UndoToastHandle } from './UndoToast'

export interface AgentIdentity {
  agentId: string
  seat: string
  taskId: string
  model: string
  live: boolean
  stateLabel: string
  goal?: string
  currentWork?: string
}

export interface AgentControlState {
  mode: 'pause' | 'resume'
  onToggle?: () => void
  onKill?: () => void
  unavailableReason?: string
}

export function AgentStatusBar(props: {
  agent: AgentIdentity
  onRestart(): void
  toastHandle: UndoToastHandle
  controls?: AgentControlState
  killPauseAvailable?: false
}): JSX.Element {
  const queueRestart = () => {
    props.toastHandle.toastUndo(`Restarting ${props.agent.agentId} — nothing sent yet.`, {
      seconds: 5,
      onUndo() {},
      onCommit: props.onRestart,
    })
  }
  const controls = props.controls
  const queueKill = () => {
    if (!controls?.onKill) return
    props.toastHandle.toastUndo(`Killing ${props.agent.agentId} — nothing sent yet.`, {
      seconds: 5,
      onUndo() {},
      onCommit: controls.onKill,
    })
  }

  return (
    <header className="rounded-xl border border-border bg-surface px-5 py-4">
      <div className="grid min-w-0 gap-4 lg:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)_minmax(0,auto)] lg:items-center">
        <div className="min-w-0">
          <span className="block text-[10px] font-semibold uppercase tracking-wider text-fg-subtle">
            Task goal
          </span>
          <strong className="block truncate text-sm text-fg">
            {props.agent.goal ?? 'Task goal was not recorded.'}
          </strong>
          {props.agent.currentWork && <span className="mt-1 block truncate text-xs text-fg-muted">{props.agent.currentWork}</span>}
        </div>
        <div className="min-w-0">
          <span className="block text-[10px] font-semibold uppercase tracking-wider text-fg-subtle">
            State
          </span>
          <strong className="flex items-center gap-2 text-sm text-fg">
            <span
              aria-hidden="true"
              className={`h-2 w-2 rounded-full ${props.agent.live ? 'bg-success' : 'bg-fg-subtle'}`}
            />
            {props.agent.stateLabel}
          </strong>
        </div>
        {props.agent.live && (
          <div className="flex flex-wrap items-center gap-2" aria-label="Agent controls">
            <button
              type="button"
              onClick={queueRestart}
              className="min-h-11 rounded-md border border-border px-4 text-sm font-semibold text-fg hover:bg-surface-raised focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
            >
              Restart
            </button>
            <button
              type="button"
              disabled={!controls?.onToggle}
              data-tipb={controls?.unavailableReason ? 'Control unavailable' : undefined}
              data-tips={controls?.unavailableReason}
              onClick={controls?.onToggle}
              className="min-h-11 rounded-md border border-border px-4 text-sm font-semibold text-fg disabled:cursor-not-allowed disabled:opacity-50"
            >
              {controls?.mode === 'resume' ? 'Resume' : 'Pause'}
            </button>
            <button
              type="button"
              disabled={!controls?.onKill}
              data-tipb={controls?.unavailableReason ? 'Control unavailable' : undefined}
              data-tips={controls?.unavailableReason}
              onClick={queueKill}
              className="min-h-11 rounded-md border border-danger px-4 text-sm font-semibold text-danger disabled:cursor-not-allowed disabled:opacity-50"
            >
              Kill
            </button>
          </div>
        )}
      </div>
    </header>
  )
}