import React, { useState, useEffect } from 'react';
import { Card, Typography, Row, Col, Button, Statistic, Space, Tabs } from 'antd';
import { FileTextOutlined, AlertOutlined, BarChartOutlined, SyncOutlined, PlusOutlined, SearchOutlined, FilterOutlined, DollarOutlined, TruckOutlined, ClockCircleOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { Link } from 'umi';
import { Area, Pie, Column } from '@ant-design/plots';
import moment from 'moment';

const { Title, Text, Paragraph } = Typography;
const { TabPane } = Tabs;

// 模拟订单数据
const mockOrderData = {
  // 最近7天订单趋势
  trend: [
    { date: '3月12日', orders: 12, amount: 2500 },
    { date: '3月13日', orders: 18, amount: 3200 },
    { date: '3月14日', orders: 15, amount: 2800 },
    { date: '3月15日', orders: 22, amount: 4100 },
    { date: '3月16日', orders: 19, amount: 3500 },
    { date: '3月17日', orders: 25, amount: 4800 },
    { date: '3月18日', orders: 30, amount: 5200 },
  ],
  // 平台分布
  platform: [
    { name: 'Amazon', value: 45 },
    { name: 'eBay', value: 25 },
    { name: 'Shopify', value: 15 },
    { name: 'Shopee', value: 10 },
    { name: 'Lazada', value: 5 },
  ],
  // 订单状态分布
  status: [
    { name: '待处理', value: 12, color: '#faad14' },
    { name: '已确认', value: 18, color: '#1890ff' },
    { name: '已发货', value: 25, color: '#13c2c2' },
    { name: '已完成', value: 45, color: '#52c41a' },
    { name: '已取消', value: 5, color: '#ff4d4f' },
    { name: '退款中', value: 3, color: '#722ed1' },
  ],
  // 关键指标
  metrics: {
    totalOrders: 108,
    totalAmount: 21500,
    pendingOrders: 12,
    todayOrders: 30,
    todayAmount: 5200,
    avgOrderValue: 199.07,
  },
  // 最近订单
  recentOrders: [
    { id: 'ORD-2026-001', customer: '张三', amount: 159.99, status: '已发货', platform: 'Amazon' },
    { id: 'ORD-2026-002', customer: '李四', amount: 299.99, status: '待处理', platform: 'eBay' },
    { id: 'ORD-2026-003', customer: '王五', amount: 459.98, status: '已确认', platform: 'Shopify' },
    { id: 'ORD-2026-004', customer: '赵六', amount: 89.99, status: '已完成', platform: 'Shopee' },
  ],
};

const OrderManagement: React.FC = () => {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // 模拟数据加载
    const fetchData = async () => {
      setLoading(true);
      await new Promise(resolve => setTimeout(resolve, 500));
      setLoading(false);
    };
    fetchData();
  }, []);

  // 配置图表
  const trendConfig = {
    data: mockOrderData.trend,
    xField: 'date',
    yField: 'amount',
    seriesField: 'category',
    yAxis: {
      title: {
        text: '订单金额 (USD)',
      },
    },
    areaStyle: {
      fill: 'l(270) 0:#ffffff 0.5:#1890ff 1:#1890ff',
    },
  };

  const platformConfig = {
    data: mockOrderData.platform,
    angleField: 'value',
    colorField: 'name',
    radius: 0.8,
    label: {
      type: 'outer',
      content: '{name}: {percentage}',
    },
  };

  const statusConfig = {
    data: mockOrderData.status,
    xField: 'name',
    yField: 'value',
    colorField: 'name',
    color: mockOrderData.status.map(item => item.color),
    label: {
      position: 'top',
    },
  };

  return (
    <div style={{ padding: '0 24px 24px' }}>
      {/* 页面标题和操作区 */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24, marginTop: 16 }}>
        <div>
          <Title level={4}>订单管理</Title>
          <Text type="secondary">管理和分析所有订单</Text>
        </div>
        <Space>
          <Button icon={<SearchOutlined />}>
            <Link to="/Orders/OrderList">高级搜索</Link>
          </Button>
          <Button icon={<FilterOutlined />}>
            <Link to="/Orders/OrderList">筛选订单</Link>
          </Button>
          <Button type="primary" icon={<SyncOutlined />} loading={loading}>
            刷新数据
          </Button>
        </Space>
      </div>

      {/* 关键指标卡片 */}
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card hoverable>
            <Statistic 
              title="总订单数" 
              value={mockOrderData.metrics.totalOrders} 
              prefix={<FileTextOutlined />}
              suffix={<Text type="secondary">单</Text>}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card hoverable>
            <Statistic 
              title="总销售额" 
              value={mockOrderData.metrics.totalAmount} 
              prefix={<DollarOutlined />}
              suffix={<Text type="secondary">USD</Text>}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card hoverable>
            <Statistic 
              title="待处理订单" 
              value={mockOrderData.metrics.pendingOrders} 
              prefix={<ClockCircleOutlined />}
              suffix={<Text type="secondary">单</Text>}
              valueStyle={{ color: '#faad14' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card hoverable>
            <Statistic 
              title="今日订单" 
              value={mockOrderData.metrics.todayOrders} 
              prefix={<PlusOutlined />}
              suffix={<Text type="secondary">单</Text>}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 图表区域 */}
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col span={16}>
          <Card title="订单趋势" loading={loading}>
            <Area {...trendConfig} />
          </Card>
        </Col>
        <Col span={8}>
          <Card title="平台分布" loading={loading}>
            <Pie {...platformConfig} />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col span={12}>
          <Card title="订单状态分布" loading={loading}>
            <Column {...statusConfig} />
          </Card>
        </Col>
        <Col span={12}>
          <Card title="最近订单" loading={loading}>
            <div style={{ maxHeight: 300, overflowY: 'auto' }}>
              {mockOrderData.recentOrders.map((order, index) => (
                <div key={order.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderBottom: index < mockOrderData.recentOrders.length - 1 ? '1px solid #f0f0f0' : 'none' }}>
                  <div>
                    <Text strong>{order.id}</Text>
                    <div style={{ marginTop: 4 }}>
                      <Text type="secondary">客户: {order.customer}</Text>
                    </div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <Text strong>${order.amount.toFixed(2)}</Text>
                    <div style={{ marginTop: 4 }}>
                      <Text type="secondary">{order.platform}</Text>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </Col>
      </Row>

      {/* 快速导航 */}
      <Card title="快速导航" style={{ marginBottom: 24 }}>
        <Row gutter={[16, 16]}>
          <Col span={8}>
            <Card hoverable onClick={() => window.location.href = '/Orders/OrderList'}>
              <div style={{ textAlign: 'center' }}>
                <FileTextOutlined style={{ fontSize: 32, color: '#1890ff', marginBottom: 8 }} />
                <div>
                  <Text strong>订单列表</Text>
                  <p style={{ color: '#999', marginTop: 4 }}>查看和管理所有订单</p>
                </div>
              </div>
            </Card>
          </Col>
          <Col span={8}>
            <Card hoverable onClick={() => window.location.href = '/Orders/ExceptionOrder'}>
              <div style={{ textAlign: 'center' }}>
                <AlertOutlined style={{ fontSize: 32, color: '#ff4d4f', marginBottom: 8 }} />
                <div>
                  <Text strong>异常订单</Text>
                  <p style={{ color: '#999', marginTop: 4 }}>处理退款和取消订单</p>
                </div>
              </div>
            </Card>
          </Col>
          <Col span={8}>
            <Card hoverable onClick={() => window.location.href = '/Orders/OrderAggregation'}>
              <div style={{ textAlign: 'center' }}>
                <BarChartOutlined style={{ fontSize: 32, color: '#52c41a', marginBottom: 8 }} />
                <div>
                  <Text strong>订单统计</Text>
                  <p style={{ color: '#999', marginTop: 4 }}>分析订单数据和趋势</p>
                </div>
              </div>
            </Card>
          </Col>
        </Row>
      </Card>

      {/* 订单状态概览 */}
      <Card title="订单状态概览">
        <Tabs defaultActiveKey="all">
          <TabPane tab="全部" key="all">
            <Paragraph>
              查看所有订单，包括待处理、已确认、已发货、已完成等状态。
            </Paragraph>
            <Button type="primary" style={{ marginTop: 16 }}>
              <Link to="/Orders/OrderList">查看全部订单</Link>
            </Button>
          </TabPane>
          <TabPane tab="待处理" key="pending">
            <Paragraph>
              待处理订单需要您的确认，包括新订单和未处理的订单。
            </Paragraph>
            <Button type="primary" style={{ marginTop: 16 }}>
              <Link to="/Orders/OrderList?status=PENDING">处理待处理订单</Link>
            </Button>
          </TabPane>
          <TabPane tab="已发货" key="shipped">
            <Paragraph>
              已发货订单正在运输中，您可以查看物流信息和预计送达时间。
            </Paragraph>
            <Button type="primary" style={{ marginTop: 16 }}>
              <Link to="/Orders/OrderList?status=SHIPPED">查看已发货订单</Link>
            </Button>
          </TabPane>
          <TabPane tab="异常" key="exception">
            <Paragraph>
              异常订单包括已取消和退款中的订单，需要您的关注和处理。
            </Paragraph>
            <Button type="primary" style={{ marginTop: 16 }}>
              <Link to="/Orders/ExceptionOrder">处理异常订单</Link>
            </Button>
          </TabPane>
        </Tabs>
      </Card>
    </div>
  );
};

export default OrderManagement;
