import * as React from 'react'
import { RefreshCw } from 'lucide-react'

import { AppDataTable, type AppDataTableColumn } from '@/components/app/AppDataTable'
import { AppEmptyState } from '@/components/app/AppEmptyState'
import { AppPage } from '@/components/app/AppPage'
import { AppPageHeader } from '@/components/app/AppPageHeader'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { StatusBadge } from '@/features/ai-platform/status'
import { formatDateTime } from '@/lib/format'

import { listAgentRuns } from './api'
import type { AgentRunSummary } from './types'

export function AgentRunListPage() {
  const [items, setItems] = React.useState<AgentRunSummary[]>([])
  const [error, setError] = React.useState('')
  const load = React.useCallback(async () => { try { setItems(await listAgentRuns()); setError('') } catch (reason) { setError(reason instanceof Error ? reason.message : '加载运行记录失败') } }, [])
  React.useEffect(() => { void load() }, [load])
  const columns: AppDataTableColumn<AgentRunSummary>[] = [
    { key: 'agent', header: 'Agent', cell: (item) => <div><p className="font-medium">{item.agent_name}</p><p className="font-mono text-xs text-muted-foreground">{item.public_id.slice(0, 8)}…</p></div> },
    { key: 'version', header: '版本', cell: (item) => <div className="flex gap-1"><Badge variant="outline">v{item.agent_version}</Badge>{item.sandbox ? <Badge variant="warning">沙箱</Badge> : <Badge variant="secondary">正式</Badge>}</div> },
    { key: 'status', header: '状态', cell: (item) => <StatusBadge status={item.status} /> },
    { key: 'progress', header: '当前阶段', cell: (item) => <div><p className="text-foreground">{item.progress_message || item.current_step || '-'}</p><p className="text-xs text-muted-foreground">{item.current_step || '等待执行'} · {item.total_steps} 步{item.retry_count ? ` · 重试 ${item.retry_count}` : ''}</p></div> },
    { key: 'usage', header: 'Token / 耗时', cell: (item) => <span className="text-muted-foreground">{item.input_tokens + item.output_tokens} · {item.duration_ms} ms</span> },
    { key: 'created', header: '创建时间', cell: (item) => <span className="text-muted-foreground">{formatDateTime(item.created_at)}</span> }
  ]
  return <AppPage header={<AppPageHeader title="Agent 运行记录" description="查看沙箱与正式版本的执行结果、Token、耗时和版本快照。" actions={<><Button variant="outline" onClick={() => { window.location.hash = '/agents' }}>Agent 管理</Button><Button variant="outline" onClick={() => void load()}><RefreshCw data-icon="inline-start" />刷新</Button></>} />}>{error ? <AppEmptyState title="无法加载运行记录" description={error} /> : <AppDataTable columns={columns} rows={items} getRowKey={(item) => item.public_id} emptyTitle="暂无运行记录" emptyDescription="从 Agent 详情的测试页启动一次运行。" onRowClick={(item) => { window.location.hash = `/agent-runs/${item.public_id}` }} />}</AppPage>
}