import React, { useEffect, useState } from 'react';
import { Card, Row, Col, Statistic, Spin } from 'antd';
import { ArrowUpOutlined, ShoppingOutlined, DollarOutlined, HomeOutlined } from '@ant-design/icons';
import { getMerchantStatistics } from '@/api/statistics';

const Dashboard: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [stats, setStats] = useState<any>({
    today: { orderCount: 0, totalIncome: 0 },
    roomCount: 0,
    rating: 5.0,
  });

  const fetchStatistics = async () => {
    setLoading(true);
    try {
      const res: any = await getMerchantStatistics();
      setStats(res.data || {});
    } catch (error) {
      console.error('获取统计数据失败:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchStatistics();
  }, []);

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '100px 0' }}>
        <Spin size="large" />
      </div>
    );
  }

  return (
    <div>
      <h2 style={{ marginBottom: 24 }}>工作台</h2>
      <Row gutter={24}>
        <Col span={6}>
          <Card>
            <Statistic
              title="今日订单"
              value={stats.today?.orderCount || 0}
              prefix={<ShoppingOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="今日收入"
              value={stats.today?.actualIncome || 0}
              prefix={<DollarOutlined />}
              suffix="元"
              precision={2}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="在售房源"
              value={stats.roomCount || 0}
              prefix={<HomeOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="店铺评分"
              value={stats.rating || 5.0}
              precision={1}
              prefix={<ArrowUpOutlined />}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;
