import React from 'react';
import { Card, Layout, Menu, Typography, Row, Col, Statistic } from 'antd';
import { 
  DashboardOutlined, 
  ShoppingOutlined, 
  UserOutlined, 
  TruckOutlined, 
  AuditOutlined, 
  AlertOutlined, 
  FileTextOutlined,
  DollarOutlined,
  BarChartOutlined
} from '@ant-design/icons';
import { Link } from 'umi';

const { Header, Content, Sider } = Layout;
const { Title, Text } = Typography;

const Dashboard: React.FC = () => {
  const menuItems = [
    {
      key: 'dashboard',
      icon: <DashboardOutlined />,
      label: <Link to="/">首页</Link>
    },
    {
      key: 'products',
      icon: <ShoppingOutlined />,
      label: <Link to="/Product">商品管理</Link>
    },
    {
      key: 'orders',
      icon: <FileTextOutlined />,
      label: <Link to="/Orders">订单管理</Link>
    },
    {
      key: 'merchants',
      icon: <UserOutlined />,
      label: <Link to="/Merchant">商户管理</Link>
    },
    {
      key: 'logistics',
      icon: <TruckOutlined />,
      label: <Link to="/Logistics">物流管理</Link>
    },
    {
      key: 'aftersales',
      icon: <AlertOutlined />,
      label: <Link to="/AfterSales">售后服务</Link>
    },
    {
      key: 'compliance',
      icon: <AuditOutlined />,
      label: <Link to="/Compliance">合规管理</Link>
    },
    {
      key: 'blacklist',
      icon: <AlertOutlined />,
      label: <Link to="/Blacklist">黑名单管理</Link>
    },
    {
      key: 'b2b',
      icon: <DollarOutlined />,
      label: <Link to="/B2B">B2B贸易</Link>
    },
    {
      key: 'ads',
      icon: <BarChartOutlined />,
      label: <Link to="/Ad">广告管理</Link>
    }
  ];

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header style={{ display: 'flex', alignItems: 'center', background: '#1890ff' }}>
        <Title level={3} style={{ color: 'white', margin: 0 }}>Crawlful Hub 管理系统</Title>
      </Header>
      <Layout>
        <Sider width={200} style={{ background: '#f0f2f5' }}>
          <Menu
            mode="inline"
            style={{ height: '100%', borderRight: 0 }}
            defaultSelectedKeys={['dashboard']}
            items={menuItems}
          />
        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>
          <Content style={{ padding: 24, margin: 0, minHeight: 280, background: '#fff' }}>
            <Title level={4}>系统概览</Title>
            <Row gutter={[16, 16]}>
              <Col span={6}>
                <Card>
                  <Statistic title="商品数量" value={1280} />
                </Card>
              </Col>
              <Col span={6}>
                <Card>
                  <Statistic title="订单数量" value={960} />
                </Card>
              </Col>
              <Col span={6}>
                <Card>
                  <Statistic title="商户数量" value={120} />
                </Card>
              </Col>
              <Col span={6}>
                <Card>
                  <Statistic title="总销售额" value={1280000} prefix="¥" />
                </Card>
              </Col>
            </Row>
            <div style={{ marginTop: 24 }}>
              <Card title="系统功能">
                <Text>
                  欢迎使用 Crawlful Hub 管理系统，这是一个集商品管理、订单处理、商户管理、物流管理、售后服务、合规管理等功能于一体的综合管理平台。
                </Text>
              </Card>
            </div>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default Dashboard;