import type { JSX } from 'react'
import { safeHttpUrl } from './safe-url'
import { SectionCard } from './SectionCard'

export function AgentMetaSidebar(props: {
  seat: string
  model: string
  attempt?: number
  branch?: string
  taskId: string
  taskHref: string
  account: string | null
}): JSX.Element {
  const accountLabel = props.account ?? 'not recorded'
  const accountMissing = props.account == null
  return (
    <aside aria-label="Agent and task details">
      <SectionCard title="Agent details" className="h-full">
        <dl className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-4 gap-y-3 text-sm">
          <dt className="text-fg-muted">Seat</dt>
          <dd className="m-0 text-right font-mono text-xs text-fg">{props.seat}</dd>
          {props.model && (
            <>
              <dt className="text-fg-muted">Model</dt>
              <dd className="m-0 max-w-56 break-words text-right font-mono text-xs text-fg">
                {props.model}
              </dd>
            </>
          )}
          {props.attempt !== undefined && (
            <>
              <dt className="text-fg-muted">Attempt</dt>
              <dd className="m-0 text-right font-mono text-xs text-fg">#{props.attempt}</dd>
            </>
          )}
          {props.branch && (
            <>
              <dt className="text-fg-muted">Branch</dt>
              <dd className="m-0 max-w-56 break-words text-right font-mono text-xs text-fg">
                {props.branch}
              </dd>
            </>
          )}
          <dt className="text-fg-muted">Task</dt>
          <dd className="m-0 text-right font-mono text-xs">
            <a className="text-accent underline-offset-2 hover:underline" href={safeHttpUrl(props.taskHref)}>
              {props.taskId}
            </a>
          </dd>
          <dt className="text-fg-muted">Account</dt>
          <dd className={`m-0 text-right text-xs ${accountMissing ? 'text-fg-subtle' : 'font-mono text-fg'}`}>
            {accountMissing ? (
              <span
                tabIndex={0}
                data-tipb="Account not recorded"
                data-tips="No executing account on dispatch.attempt for this task."
                className="cursor-help underline decoration-dotted underline-offset-2"
              >
                {accountLabel}
              </span>
            ) : (
              accountLabel
            )}
          </dd>
        </dl>
      </SectionCard>
    </aside>
  )
}