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>
          <Statistic title="总请求量" value={totalRequests} />
        </Card>
      </Col>
      <Col xs={12} md={6}>
        <Card>
          <Statistic title="活跃模型数" value={activeModels} />
        </Card>
      </Col>
      <Col xs={12} md={6}>
        <Card>
          <Statistic title="活跃供应商数" value={activeProviders} />
        </Card>
      </Col>
      <Col xs={12} md={6}>
        <Card>
          <Statistic title="今日请求量" value={todayRequests} />
        </Card>
      </Col>
    </Row>
  );
}