import { Card, Statistic } from 'antd';
import {
  RiseOutlined,
  FallOutlined,
  MinusOutlined,
  StockOutlined,
  DollarOutlined,
  LineChartOutlined,
} from '@ant-design/icons';

interface StatCardsProps {
  data: {
    total_stocks: number;
    up_count: number;
    down_count: number;
    flat_count: number;
    total_turnover: number;
    avg_pct_change: number;
  };
}

export default function StatCards({ data }: StatCardsProps) {
  const cards = [
    {
      title: '总股票数',
      value: data.total_stocks,
      icon: <StockOutlined />,
      color: '#e6f4ff',
    },
    {
      title: '上涨',
      value: data.up_count,
      icon: <RiseOutlined />,
      valueStyle: { color: '#cf1322' },
      color: '#fff1f0',
    },
    {
      title: '下跌',
      value: data.down_count,
      icon: <FallOutlined />,
      valueStyle: { color: '#3f8600' },
      color: '#f6ffed',
    },
    {
      title: '平盘',
      value: data.flat_count,
      icon: <MinusOutlined />,
      color: '#fafafa',
    },
    {
      title: '总成交额(亿)',
      value: +(data.total_turnover / 1e8).toFixed(2),
      icon: <DollarOutlined />,
      color: '#e6f4ff',
    },
    {
      title: '平均涨跌幅(%)',
      value: data.avg_pct_change,
      precision: 2,
      icon: <LineChartOutlined />,
      valueStyle: {
        color: data.avg_pct_change >= 0 ? '#cf1322' : '#3f8600',
      },
      color: data.avg_pct_change >= 0 ? '#fff1f0' : '#f6ffed',
    },
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
      {cards.map((c) => (
        <Card key={c.title} style={{ background: c.color }}>
          <Statistic
            title={c.title}
            value={c.value}
            precision={'precision' in c ? c.precision : undefined}
            prefix={c.icon}
            valueStyle={c.valueStyle}
          />
        </Card>
      ))}
    </div>
  );
}
