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

interface NetworkLogStatsProps {
  logs: NetworkLog[]
  isLoading?: boolean
}

export function NetworkLogStats({ logs, isLoading = false }: NetworkLogStatsProps) {
  const stats = [
    {
      label: '总请求数',
      value: logs.length,
      color: 'text-blue-600',
    },
    {
      label: '成功请求',
      value: logs.filter(l => l.responseStatus >= 200 && l.responseStatus < 300).length,
      color: 'text-green-600',
    },
    {
      label: '失败请求',
      value: logs.filter(l => l.responseStatus >= 400).length,
      color: 'text-red-600',
    },
    {
      label: '平均响应时间',
      value: logs.length > 0
        ? Math.round(logs.reduce((sum, l) => sum + l.responseTime, 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>
  )
}