import React from 'react';
import { Card, Typography, Row, Col, Statistic, Divider } from 'antd';
import {
  ShoppingOutlined,
  FileTextOutlined,
  ShopOutlined,
  DollarOutlined,
  RiseOutlined,
  FallOutlined,
} from '@ant-design/icons';

const { Title, Text } = Typography;

const Dashboard: React.FC = () => {
  return (
    <div>
      <Title level={4}>系统概览</Title>
      <Text type="secondary">欢迎回来，管理员！以下是今日系统数据概览。</Text>

      <Divider />

      {/* 核心指标卡片 */}
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} md={6}>
          <Card hoverable>
            <Statistic
              title="商品数量"
              value={1280}
              prefix={<ShoppingOutlined style={{ color: '#1890ff' }} />}
              valueStyle={{ color: '#1890ff' }}
            />
            <div style={{ marginTop: 8 }}>
              <Text type="success">
                <RiseOutlined /> +12 今日新增
              </Text>
            </div>
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card hoverable>
            <Statistic
              title="订单数量"
              value={960}
              prefix={<FileTextOutlined style={{ color: '#52c41a' }} />}
              valueStyle={{ color: '#52c41a' }}
            />
            <div style={{ marginTop: 8 }}>
              <Text type="success">
                <RiseOutlined /> +8% 较昨日
              </Text>
            </div>
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card hoverable>
            <Statistic
              title="商户数量"
              value={120}
              prefix={<ShopOutlined style={{ color: '#722ed1' }} />}
              valueStyle={{ color: '#722ed1' }}
            />
            <div style={{ marginTop: 8 }}>
              <Text type="secondary">
                活跃商户 98
              </Text>
            </div>
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card hoverable>
            <Statistic
              title="总销售额"
              value={1280000}
              prefix={<DollarOutlined style={{ color: '#fa8c16' }} />}
              valueStyle={{ color: '#fa8c16' }}
              precision={2}
            />
            <div style={{ marginTop: 8 }}>
              <Text type="danger">
                <FallOutlined /> -2% 较昨日
              </Text>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 系统功能介绍 */}
      <Row gutter={[16, 16]} style={{ marginTop: 24 }}>
        <Col span={24}>
          <Card title="系统功能">
            <Text>
              欢迎使用 Crawlful Hub 管理系统，这是一个集商品管理、订单处理、商户管理、物流管理、售后服务、合规管理等功能于一体的综合管理平台。
            </Text>
            <Divider />
            <Row gutter={[16, 16]}>
              <Col xs={24} md={8}>
                <Card type="inner" title="商品管理">
                  <Text>管理跨平台商品，支持批量上下架、价格同步、库存管理等功能。</Text>
                </Card>
              </Col>
              <Col xs={24} md={8}>
                <Card type="inner" title="订单管理">
                  <Text>集中处理各平台订单，自动化订单流转，异常订单预警。</Text>
                </Card>
              </Col>
              <Col xs={24} md={8}>
                <Card type="inner" title="数据分析">
                  <Text>多维度数据分析，销售报表、利润分析、趋势预测。</Text>
                </Card>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;