import React, { useState } from 'react';
import { Card, Row, Col, Statistic, DatePicker, Space, Typography } from 'antd';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';

const { Title } = Typography;
const { RangePicker } = DatePicker;

// 模拟趋势数据
const generateTrendData = () => {
  const data = [];
  for (let i = 30; i >= 0; i--) {
    const date = new Date();
    date.setDate(date.getDate() - i);
    data.push({
      date: date.toISOString().slice(0, 10),
      staffCount: Math.floor(Math.random() * 50) + 100,
      newStaff: Math.floor(Math.random() * 10),
      customerCount: Math.floor(Math.random() * 200) + 500,
      newCustomer: Math.floor(Math.random() * 20),
    });
  }
  return data;
};

const mockData = generateTrendData();

const DashboardView: React.FC = () => {
  const [dateRange, setDateRange] = useState<any>(null);

  return (
    <div className="dashboard-view">
      <Space direction="vertical" size="large" style={{ width: '100%' }}>
        
        {/* 集运人员维度统计 */}
        <Card 
          title="集运人员维度统计" 
          extra={<RangePicker onChange={(dates) => setDateRange(dates)} />}
        >
          <Row gutter={16} style={{ marginBottom: 24 }}>
            <Col span={6}>
              <Card bordered={false}>
                <Statistic
                  title="托管员工数"
                  value={158}
                  precision={0}
                  valueStyle={{ color: '#3f8600' }}
                  prefix={<ArrowUpOutlined />}
                  suffix=""
                />
              </Card>
            </Col>
            <Col span={6}>
              <Card bordered={false}>
                <Statistic
                  title="新增托管员工数"
                  value={12}
                  precision={0}
                  valueStyle={{ color: '#cf1322' }}
                  prefix={<ArrowUpOutlined />}
                  suffix=""
                />
              </Card>
            </Col>
            <Col span={6}>
              <Card bordered={false}>
                <Statistic
                  title="托管客户总数"
                  value={2340}
                  precision={0}
                  prefix={<ArrowUpOutlined />}
                  suffix=""
                />
              </Card>
            </Col>
            <Col span={6}>
              <Card bordered={false}>
                <Statistic
                  title="新增托管客户数"
                  value={45}
                  precision={0}
                  valueStyle={{ color: '#3f8600' }}
                  prefix={<ArrowUpOutlined />}
                  suffix=""
                />
              </Card>
            </Col>
          </Row>
          
          <div style={{ height: 300 }}>
            <ResponsiveContainer width="100%" height="100%">
              <LineChart
                data={mockData}
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="date" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Line type="monotone" dataKey="staffCount" name="托管员工数" stroke="#8884d8" activeDot={{ r: 8 }} />
                <Line type="monotone" dataKey="customerCount" name="托管客户总数" stroke="#82ca9d" />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </Card>

        {/* 托管员工维度统计 */}
        <Card 
          title="托管员工维度统计" 
          extra={<RangePicker onChange={(dates) => setDateRange(dates)} />}
        >
          <Row gutter={16} style={{ marginBottom: 24 }}>
             <Col span={12}>
              <Card bordered={false}>
                <Statistic
                  title="客户总数"
                  value={5600}
                  precision={0}
                  valueStyle={{ color: '#3f8600' }}
                  prefix={<ArrowUpOutlined />}
                />
              </Card>
            </Col>
            <Col span={12}>
              <Card bordered={false}>
                <Statistic
                  title="新增客户数"
                  value={128}
                  precision={0}
                  valueStyle={{ color: '#cf1322' }}
                  prefix={<ArrowDownOutlined />}
                />
              </Card>
            </Col>
          </Row>

          <div style={{ height: 300 }}>
            <ResponsiveContainer width="100%" height="100%">
              <LineChart
                data={mockData}
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="date" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Line type="monotone" dataKey="customerCount" name="客户总数" stroke="#8884d8" />
                <Line type="monotone" dataKey="newCustomer" name="新增客户数" stroke="#82ca9d" />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </Card>
      </Space>
    </div>
  );
};

export default DashboardView;