import type { JSX, KeyboardEvent, MouseEvent } from 'react'
import { DiffViewer } from './DiffViewer'

export interface AgentActivityBase { id: string; at: number; title: string; summary?: string; diagnosticEventIds: string[]; severity?: 'info' | 'warning' | 'error'; expanded?: boolean }
export interface AgentProgressItem extends AgentActivityBase { kind: 'progress' }
export interface AgentTestItem extends AgentActivityBase { kind: 'test' }
export interface AgentDecisionItem extends AgentActivityBase { kind: 'decision' }
export interface AgentWarningItem extends AgentActivityBase { kind: 'warning' }
export interface AgentOutcomeItem extends AgentActivityBase { kind: 'outcome' }
export interface AgentEditItem extends AgentActivityBase { kind: 'edit'; path: string; insertions: number | null; deletions: number | null; diffText: string | null; truncated: boolean; evidenceLevel: 'event' | 'phase' }
export interface AgentGroupItem extends AgentActivityBase { kind: 'group'; category: string; children: AgentProgressItem[]; expanded: boolean }
export type AgentActivityItem = AgentProgressItem | AgentGroupItem | AgentEditItem | AgentTestItem | AgentDecisionItem | AgentWarningItem | AgentOutcomeItem

export function AgentActivityRow({ item, onOpenDiagnostics, onToggleGroup, diffExpanded, onToggleDiff }: { item: AgentActivityItem; onOpenDiagnostics(id: string, trigger: HTMLElement): void; onToggleGroup(id: string): void; diffExpanded: boolean; onToggleDiff(): void }): JSX.Element {
  const diagnostic = (event: MouseEvent<HTMLElement>) => { event.preventDefault(); event.currentTarget.focus(); onOpenDiagnostics(item.id, event.currentTarget) }
  const keys = (event: KeyboardEvent<HTMLElement>) => { if ((event.shiftKey && event.key === 'F10') || event.key === 'ContextMenu') { event.preventDefault(); event.currentTarget.focus(); onOpenDiagnostics(item.id, event.currentTarget) } }
  const region = `activity-detail-${item.id}`
  return <article data-testid="agent-turn-card" tabIndex={0} onContextMenu={diagnostic} onKeyDown={keys} className="min-w-0 rounded-lg border border-border bg-surface p-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent">
    <div className="flex items-start gap-3"><div className="min-w-0 flex-1">{item.summary?.startsWith('In progress') && <span data-testid="agent-turn-progress" className="sr-only animate-pulse">In progress</span>}<p className="font-medium text-fg">{item.kind === 'edit' ? `Edited (${item.path})` : item.title}</p>{item.summary && <p className="mt-1 whitespace-pre-wrap text-sm text-fg-muted">{item.summary}</p>}</div><button type="button" onClick={(event) => onOpenDiagnostics(item.id, event.currentTarget)} className="min-h-11 shrink-0 px-3 text-xs font-semibold text-fg underline">Diagnostics</button></div>
    {item.kind === 'group' && <><button type="button" aria-expanded={item.expanded} aria-controls={region} onClick={() => onToggleGroup(item.id)} className="mt-3 min-h-11 text-sm font-semibold text-fg underline">See {item.children.length} actions</button>{item.expanded && <ol id={region} className="mt-2 grid gap-2 border-l border-border pl-3">{item.children.map(child => <li key={child.id} className="text-sm text-fg-muted">{child.title}{child.summary ? ` — ${child.summary}` : ''}</li>)}</ol>}</>}
    {item.kind === 'edit' && <><p className="mt-2 text-xs text-fg-muted">{item.evidenceLevel === 'phase' ? 'Phase changes' : 'Event changes'}</p>{item.truncated && <p className="mt-2 text-sm text-warning">Coverage warning: diff evidence is truncated.</p>}<button type="button" aria-expanded={diffExpanded} aria-controls={region} onClick={onToggleDiff} className="mt-2 min-h-11 text-sm font-semibold text-fg underline">{diffExpanded ? 'Show less' : 'See more'}</button>{diffExpanded && <div id={region} className="mt-3">{item.diffText ? <DiffViewer diff={item.diffText} selectedPath={item.path} /> : <p className="text-sm text-fg-muted">Diff was not recorded for this edit.</p>}</div>}</>}
  </article>
}