import { PageContainer, StatisticCard } from '@ant-design/pro-components';
import { Col, Row, Table } from 'antd';
import { useEffect, useState } from 'react';
import { getStockSummary, getStockByColor, getStockByLocation } from '@/services/api';

const StatsPage: React.FC = () => {
  const [summary, setSummary] = useState<any>({});
  const [colorData, setColorData] = useState<any[]>([]);
  const [locationData, setLocationData] = useState<any[]>([]);

  useEffect(() => {
    getStockSummary().then((res) => res?.code === 0 && setSummary(res.data));
    getStockByColor().then((res) => res?.code === 0 && setColorData(res.data?.list || []));
    getStockByLocation().then((res) => res?.code === 0 && setLocationData(res.data?.list || []));
  }, []);

  return (
    <PageContainer>
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col span={5}><StatisticCard statistic={{ title: '产品总数', value: summary.productCount || 0 }} /></Col>
        <Col span={5}><StatisticCard statistic={{ title: '总匹数', value: summary.totalPieces || 0 }} /></Col>
        <Col span={5}><StatisticCard statistic={{ title: '总盘数', value: summary.totalRolls || 0 }} /></Col>
        <Col span={5}><StatisticCard statistic={{ title: '库存总值(成本)', value: summary.totalCostValue || '0', prefix: '¥' }} /></Col>
        <Col span={4}><StatisticCard statistic={{ title: '库存总值(销售)', value: summary.totalSalesValue || '0', prefix: '¥' }} /></Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Table
            title={() => '按颜色分类统计'}
            dataSource={colorData}
            rowKey="name"
            columns={[
              { title: '颜色', dataIndex: 'name' },
              { title: '产品数', dataIndex: 'count' },
              { title: '库存量', dataIndex: 'quantity' },
            ]}
            pagination={false}
            size="small"
          />
        </Col>
        <Col span={12}>
          <Table
            title={() => '按位置分布统计'}
            dataSource={locationData}
            rowKey="name"
            columns={[
              { title: '存放位置', dataIndex: 'name' },
              { title: '产品数', dataIndex: 'count' },
              { title: '库存量', dataIndex: 'quantity' },
            ]}
            pagination={false}
            size="small"
          />
        </Col>
      </Row>
    </PageContainer>
  );
};

export default StatsPage;