import { Users, CheckCircle, XCircle, AlertTriangle, Zap, Activity } from 'lucide-react'
import type { DashboardStats } from '../../types'
import StatsCard from './StatsCard'

interface PoolStatusProps {
  stats: DashboardStats | null
  loading: boolean
  error?: string | null
}

export default function PoolStatus({ stats, loading, error }: PoolStatusProps) {
  if (error) {
    return (
      <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-4">
        <div className="flex items-center gap-2 text-red-700 dark:text-red-400">
          <XCircle className="h-5 w-5" />
          <span className="font-medium">获取数据失败</span>
        </div>
        <p className="mt-1 text-sm text-red-600 dark:text-red-300">{error}</p>
      </div>
    )
  }

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
      <StatsCard
        title="总账号数"
        value={stats?.total_accounts ?? 0}
        icon={Users}
        color="blue"
        loading={loading}
      />
      <StatsCard
        title="正常账号"
        value={stats?.normal_accounts ?? 0}
        icon={CheckCircle}
        color="green"
        loading={loading}
      />
      <StatsCard
        title="错误账号"
        value={stats?.error_accounts ?? 0}
        icon={XCircle}
        color="red"
        loading={loading}
      />
      <StatsCard
        title="限流账号"
        value={stats?.ratelimit_accounts ?? 0}
        icon={AlertTriangle}
        color="yellow"
        loading={loading}
      />
      <StatsCard
        title="今日请求"
        value={stats?.today_requests ?? 0}
        icon={Activity}
        color="slate"
        loading={loading}
      />
      <StatsCard title="RPM" value={stats?.rpm ?? 0} icon={Zap} color="blue" loading={loading} />
    </div>
  )
}
