'use client'

import { AgentAction } from '@/lib/api/agent'
import { Badge } from '@/components/ui/Badge'
import { EmptyState } from '@/components/ui/EmptyState'
import { formatRelativeTime } from '@/lib/types'
import { Zap } from 'lucide-react'
import { cn } from '@/lib/utils'

interface AgentActionsListProps {
  actions: AgentAction[]
}

export function AgentActionsList({ actions }: AgentActionsListProps) {
  if (actions.length > 0) {
    return (
      <div className="space-y-3 max-h-96 overflow-y-auto">
        {actions.map(action => (
          <div key={action.id} className="flex items-start gap-3 p-3 rounded-lg bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700">
            <div className={cn('p-2 rounded-lg', action.status === 'completed' ? 'bg-emerald-100 text-emerald-600' : action.status === 'running' ? 'bg-blue-100 text-blue-600' : 'bg-red-100 text-red-600')}>
              <Zap className="h-4 w-4" />
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-gray-900 dark:text-white">{action.description || action.tool_name}</p>
              <p className="text-xs text-gray-500 dark:text-gray-400">{action.tool_name} &bull; {formatRelativeTime(action.started_at)}</p>
            </div>
            <Badge variant={
              action.status === 'completed' ? 'success' :
              action.status === 'running' ? 'info' : 'danger'
            } className="text-xs">
              {action.status}
            </Badge>
          </div>
        ))}
      </div>
    )
  }
  
  return (
    <EmptyState icon={Zap} title="No agent actions" description="Actions appear when the agent runs" />
  )
}