import { useEffect, useState, type ReactNode } from 'react'

export function RunCommandBar(props: {
  title: string
  status: string
  state: string
  seq?: number
  updatedAt: string | null
  capacity: ReactNode
  onPause?(): void
  onResume?(): void
  onKill?(): void
  controlReason?: string
  coverage: ReactNode
}) {
  const [confirmKill, setConfirmKill] = useState(false)
  useEffect(() => {
    const cancel = (event: KeyboardEvent) => {
      if (event.key === 'Escape') setConfirmKill(false)
    }
    window.addEventListener('keydown', cancel)
    return () => window.removeEventListener('keydown', cancel)
  }, [])
  const toggleControl = props.status === 'paused' ? props.onResume : props.onPause
  const controlProps = (handler: (() => void) | undefined) =>
    handler
      ? {}
      : {
          disabled: true,
          'data-tipb': props.controlReason ? 'Control unavailable' : undefined,
          'data-tips': props.controlReason,
        }

  return (
    <header className="sticky top-0 z-40 grid min-w-0 grid-cols-[minmax(0,1fr)_minmax(0,auto)_minmax(0,auto)] items-center gap-4 border-b border-border bg-surface/95 px-5 py-3 backdrop-blur">
      <div className="min-w-0">
        <a href="/plans" className="mb-1 inline-flex min-h-11 items-center text-xs font-semibold text-fg-muted no-underline hover:text-fg">
          Back to plans
        </a>
        <div className="flex min-w-0 flex-wrap items-center gap-2">
          <h1 className="truncate text-base font-semibold text-fg">{props.title}</h1>
          <span className="rounded-md border border-border px-2 py-1 text-xs font-semibold text-fg">
            {props.status}
          </span>
          <span className="text-xs text-fg-muted">{props.state}</span>
        </div>
        <div className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs tabular-nums text-fg-subtle">
          {props.seq !== undefined && <span>seq {props.seq}</span>}
          {props.updatedAt && <time dateTime={props.updatedAt}>updated {props.updatedAt}</time>}
        </div>
      </div>

      <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
        <div>
          <span className="mb-1 block text-[10px] font-semibold uppercase tracking-wider text-fg-subtle">
            Capacity
          </span>
          {props.capacity}
        </div>
        {props.coverage}
      </div>

      <div className="flex flex-wrap items-center gap-2">
        <button
          type="button"
          {...controlProps(toggleControl)}
          onClick={toggleControl}
          className="min-h-11 rounded-md border border-border px-4 text-sm font-semibold text-fg hover:bg-surface-raised disabled:cursor-not-allowed disabled:opacity-50"
        >
          {props.status === 'paused' ? 'Resume' : 'Pause'}
        </button>
        <button
          type="button"
          {...controlProps(props.onKill)}
          onClick={() => {
            if (!confirmKill) {
              setConfirmKill(true)
              return
            }
            setConfirmKill(false)
            props.onKill?.()
          }}
          className="min-h-11 rounded-md border border-danger px-4 text-sm font-semibold text-danger hover:bg-danger/10 disabled:cursor-not-allowed disabled:opacity-50"
        >
          {confirmKill ? 'Confirm kill' : 'Kill'}
        </button>
      </div>
    </header>
  )
}