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

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

// Mock Data
const generateData = () => {
  const data = [];
  for (let i = 0; i < 7; i++) {
    const date = dayjs().subtract(6 - i, 'day').format('MM-DD');
    data.push({
      date,
      totalStaff: Math.floor(Math.random() * 50) + 100,
      newStaff: Math.floor(Math.random() * 10),
      totalCustomers: Math.floor(Math.random() * 200) + 500,
      newCustomers: Math.floor(Math.random() * 20),
    });
  }
  return data;
};

const OperatorStats: React.FC = () => {
  const [timeRange, setTimeRange] = useState<string>('7d');
  const [data] = useState(generateData());

  const handleRangeChange = (e: any) => {
    setTimeRange(e.target.value);
    // In a real app, this would trigger a data fetch
  };

  return (
    <Card bordered={false} className="mb-4">
      <div className="flex justify-between items-center mb-6">
        <Title level={4} style={{ margin: 0 }}>集运人员维度统计</Title>
        <Space>
          <Select 
            placeholder="选择集运人员" 
            style={{ width: 150 }}
            options={[
              { value: 'all', label: '全部集运人员' },
              { value: 'op1', label: '张三' },
              { value: 'op2', label: '李四' },
            ]} 
          />
          <Radio.Group value={timeRange} onChange={handleRangeChange}>
            <Radio.Button value="yesterday">昨日</Radio.Button>
            <Radio.Button value="7d">近7天</Radio.Button>
            <Radio.Button value="30d">近30天</Radio.Button>
          </Radio.Group>
          <RangePicker style={{ width: 240 }} />
        </Space>
      </div>

      <Row gutter={16} className="mb-6">
        <Col span={6}>
          <Card bordered={false} className="bg-gray-50">
            <Statistic
              title="托管员工总数"
              value={158}
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowUpOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false} className="bg-gray-50">
            <Statistic
              title="新增托管员工数"
              value={12}
              valueStyle={{ color: '#cf1322' }} // Example: assuming red is good or bad depending on context, or just distinct
              prefix={<ArrowUpOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false} className="bg-gray-50">
            <Statistic
              title="托管客户总数"
              value={2340}
              prefix={<ArrowUpOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false} className="bg-gray-50">
            <Statistic
              title="新增托管客户数"
              value={45}
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowUpOutlined />}
            />
          </Card>
        </Col>
      </Row>

      <div style={{ height: 350 }}>
        <Title level={5} className="mb-4">运行趋势</Title>
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={data}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="date" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Line type="monotone" dataKey="totalStaff" name="托管员工总数" stroke="#8884d8" />
            <Line type="monotone" dataKey="newStaff" name="新增托管员工数" stroke="#82ca9d" />
            <Line type="monotone" dataKey="totalCustomers" name="托管客户总数" stroke="#ffc658" />
            <Line type="monotone" dataKey="newCustomers" name="新增托管客户数" stroke="#ff7300" />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
};

export default OperatorStats;