import { ChartBarIcon, ChartLineIcon, ServerIcon, Calendar1Icon } from 'tdesign-icons-react'
import { Row, Col, Card, Statistic } from 'tdesign-react'
import type { UsageStats } from '@/types'

interface StatCardsProps {
  stats: UsageStats[]
}

export function StatCards({ stats }: StatCardsProps) {
  const totalRequests = stats.reduce((sum, s) => sum + s.requestCount, 0)
  const activeModels = new Set(stats.map((s) => s.modelName)).size
  const activeProviders = new Set(stats.map((s) => s.providerId)).size

  const today = new Date().toISOString().split('T')[0]
  const todayRequests = stats.filter((s) => s.date === today).reduce((sum, s) => sum + s.requestCount, 0)

  return (
    <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
      <Col xs={12} md={6}>
        <Card bordered={false} hoverShadow>
          <Statistic
            title='总请求量'
            value={totalRequests}
            color='blue'
            prefix={<ChartBarIcon />}
            suffix='次'
            animation={{ duration: 800, valueFrom: 0 }}
            animationStart
          />
        </Card>
      </Col>
      <Col xs={12} md={6}>
        <Card bordered={false} hoverShadow>
          <Statistic
            title='活跃模型数'
            value={activeModels}
            color='green'
            prefix={<ChartLineIcon />}
            suffix='个'
            animation={{ duration: 800, valueFrom: 0 }}
            animationStart
          />
        </Card>
      </Col>
      <Col xs={12} md={6}>
        <Card bordered={false} hoverShadow>
          <Statistic
            title='活跃供应商数'
            value={activeProviders}
            color='orange'
            prefix={<ServerIcon />}
            suffix='个'
            animation={{ duration: 800, valueFrom: 0 }}
            animationStart
          />
        </Card>
      </Col>
      <Col xs={12} md={6}>
        <Card bordered={false} hoverShadow>
          <Statistic
            title='今日请求量'
            value={todayRequests}
            color='red'
            prefix={<Calendar1Icon />}
            suffix='次'
            animation={{ duration: 800, valueFrom: 0 }}
            animationStart
          />
        </Card>
      </Col>
    </Row>
  )
}
