import { Card } from '@/components/ui/card'
import { OperationLog } from '@/types/monitor'

interface OperationLogStatsProps {
  logs: OperationLog[]
  isLoading?: boolean
}

export function OperationLogStats({ logs, isLoading = false }: OperationLogStatsProps) {
  const stats = [
    {
      label: '总操作数',
      value: logs.length,
      color: 'text-blue-600',
    },
    {
      label: '成功操作',
      value: logs.filter(l => l.status === 'success').length,
      color: 'text-green-600',
    },
    {
      label: '失败操作',
      value: logs.filter(l => l.status === 'failed').length,
      color: 'text-red-600',
    },
    {
      label: '平均耗时',
      value: logs.length > 0
        ? Math.round(logs.reduce((sum, l) => sum + (l.duration || 0), 0) / logs.length) + 'ms'
        : '0ms',
      color: 'text-purple-600',
    },
  ]

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      {stats.map((stat, index) => (
        <Card key={index} className="p-4">
          <div className="text-sm text-muted-foreground">{stat.label}</div>
          <div className={`mt-2 text-2xl font-semibold ${stat.color}`}>
            {isLoading ? (
              <div className="animate-pulse bg-gray-200 h-8 w-16 rounded"></div>
            ) : (
              stat.value
            )}
          </div>
        </Card>
      ))}
    </div>
  )
}