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,
      totalCustomers: Math.floor(Math.random() * 200) + 500,
      newCustomers: Math.floor(Math.random() * 20),
    });
  }
  return data;
};

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

  const handleRangeChange = (e: any) => {
    setTimeRange(e.target.value);
  };

  return (
    <Card bordered={false}>
      <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: 'staff1', label: '员工A' },
              { value: 'staff2', label: '员工B' },
            ]} 
          />
          <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={5600}
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowUpOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false} className="bg-gray-50">
            <Statistic
              title="新增客户总数"
              value={128}
              valueStyle={{ color: '#cf1322' }}
              prefix={<ArrowUpOutlined />}
            />
          </Card>
        </Col>
        {/* User mentioned 4 metric cards, but only specified 2. Leaving 2 placeholders or just 2. */}
        <Col span={6}>
          <Card bordered={false} className="bg-gray-50">
            <Statistic
              title="活跃客户数" // Placeholder
              value={3200}
              prefix={<ArrowUpOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
           <Card bordered={false} className="bg-gray-50">
            <Statistic
              title="客户流失数" // Placeholder
              value={15}
              valueStyle={{ color: '#cf1322' }}
              prefix={<ArrowDownOutlined />}
            />
          </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="totalCustomers" name="客户总数" stroke="#8884d8" />
            <Line type="monotone" dataKey="newCustomers" name="新增客户总数" stroke="#82ca9d" />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
};

export default StaffStats;