import React, { useState } from 'react';
import { Card, Table, Input, DatePicker, Space, Tabs, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';

const { Search } = Input;
const { RangePicker } = DatePicker;

// 集运人员托管明细数据
const mockAgentData = [
  { key: '1', name: '集运人员A', staffCount: 15, newStaff: 2, totalCustomer: 300, newCustomer: 15 },
  { key: '2', name: '集运人员B', staffCount: 12, newStaff: 0, totalCustomer: 250, newCustomer: 5 },
  { key: '3', name: '集运人员C', staffCount: 20, newStaff: 5, totalCustomer: 450, newCustomer: 30 },
  { key: '4', name: '集运人员D', staffCount: 8, newStaff: 1, totalCustomer: 180, newCustomer: 8 },
  { key: '5', name: '集运人员E', staffCount: 18, newStaff: 3, totalCustomer: 400, newCustomer: 22 },
];

const agentColumns: ColumnsType<any> = [
  { title: '集运人员', dataIndex: 'name', key: 'name' },
  { title: '托管员工数', dataIndex: 'staffCount', key: 'staffCount', sorter: (a, b) => a.staffCount - b.staffCount },
  { title: '新增托管员工数', dataIndex: 'newStaff', key: 'newStaff', sorter: (a, b) => a.newStaff - b.newStaff },
  { title: '托管客户总数', dataIndex: 'totalCustomer', key: 'totalCustomer', sorter: (a, b) => a.totalCustomer - b.totalCustomer },
  { title: '新增托管客户数', dataIndex: 'newCustomer', key: 'newCustomer', sorter: (a, b) => a.newCustomer - b.newCustomer },
];

// 托管员工明细数据
const mockStaffData = [
  { key: '1', name: '员工甲', agent: '集运人员A', totalCustomer: 80, newCustomer: 5, duration: '120小时', lastAssigned: '2023-01-01 10:00' },
  { key: '2', name: '员工乙', agent: '集运人员B', totalCustomer: 65, newCustomer: 2, duration: '95小时', lastAssigned: '2023-01-02 14:30' },
  { key: '3', name: '员工丙', agent: '集运人员C', totalCustomer: 90, newCustomer: 8, duration: '150小时', lastAssigned: '2023-01-03 09:15' },
  { key: '4', name: '员工丁', agent: '集运人员A', totalCustomer: 75, newCustomer: 3, duration: '110小时', lastAssigned: '2023-01-04 16:45' },
  { key: '5', name: '员工戊', agent: '集运人员B', totalCustomer: 55, newCustomer: 1, duration: '80小时', lastAssigned: '2023-01-05 11:20' },
];

const staffColumns: ColumnsType<any> = [
  { title: '托管员工', dataIndex: 'name', key: 'name' },
  { title: '所属集运人员', dataIndex: 'agent', key: 'agent' },
  { title: '客户总数', dataIndex: 'totalCustomer', key: 'totalCustomer', sorter: (a, b) => a.totalCustomer - b.totalCustomer },
  { title: '新增客户数', dataIndex: 'newCustomer', key: 'newCustomer', sorter: (a, b) => a.newCustomer - b.newCustomer },
  { title: '托管总时长', dataIndex: 'duration', key: 'duration' },
  { title: '最近分配时间', dataIndex: 'lastAssigned', key: 'lastAssigned', sorter: (a, b) => new Date(a.lastAssigned).getTime() - new Date(b.lastAssigned).getTime() },
];

const DetailsView: React.FC = () => {
  const [activeTab, setActiveTab] = useState('agent');
  const [searchText, setSearchText] = useState('');
  const [dateRange, setDateRange] = useState<any>(null);

  const filteredAgentData = mockAgentData.filter(item => 
    item.name.includes(searchText)
  );

  const filteredStaffData = mockStaffData.filter(item => 
    item.name.includes(searchText) || item.agent.includes(searchText)
  );

  return (
    <Card bordered={false}>
      <Space direction="vertical" style={{ width: '100%' }} size="middle">
        <Space style={{ marginBottom: 16 }}>
          <Search 
            placeholder={activeTab === 'agent' ? "搜索集运人员姓名" : "搜索托管员工姓名"} 
            onSearch={setSearchText} 
            onChange={e => setSearchText(e.target.value)}
            style={{ width: 200 }} 
          />
          <RangePicker onChange={(dates) => setDateRange(dates)} />
          <Button type="primary">查询</Button>
          <Button>重置</Button>
        </Space>

        <Tabs 
          activeKey={activeTab} 
          onChange={setActiveTab}
          items={[
            {
              key: 'agent',
              label: '集运人员托管明细',
              children: <Table columns={agentColumns} dataSource={filteredAgentData} />
            },
            {
              key: 'staff',
              label: '托管员工明细',
              children: <Table columns={staffColumns} dataSource={filteredStaffData} />
            }
          ]}
        />
      </Space>
    </Card>
  );
};

export default DetailsView;