'use client'

import { AgentExecution } from '@/lib/api/agent'
import { Badge } from '@/components/ui/Badge'
import { EmptyState } from '@/components/ui/EmptyState'
import { formatRelativeTime, formatDate } from '@/lib/types'
import { Activity } from 'lucide-react'

interface AgentExecutionsListProps {
  executions: AgentExecution[]
}

export function AgentExecutionsList({ executions }: AgentExecutionsListProps) {
  if (executions.length > 0) {
    return (
      <div className="space-y-2">
        {executions.map(exec => (
          <div key={exec.id} className="p-3 rounded-lg bg-gray-50 dark:bg-gray-800/50">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium">{exec.agent_name}</p>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  Model: {exec.model || 'unknown'} &bull; Tokens: {exec.token_usage || 0}
                </p>
              </div>
              <Badge variant={
                exec.status === 'completed' ? 'success' :
                exec.status === 'running' ? 'info' : 'danger'
              }>{exec.status}</Badge>
            </div>
            <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
              {formatDate(exec.started_at)} - {exec.completed_at ? formatDate(exec.completed_at) : 'Running...'}
            </div>
          </div>
        ))}
      </div>
    )
  }
  
  return (
    <EmptyState icon={Activity} title="No executions" description="Executions appear when the agent runs" />
  )
}