import React, { useState, useEffect, useCallback } from 'react';
import { Table, Card, Button, Space, Tag, message, Avatar, Popconfirm, Spin } from 'antd';
import { UserOutlined, EyeOutlined, DeleteOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import { useNavigate, useParams } from 'react-router-dom';
import { activityUserAPI } from '../../services/api';

const RegistrationManagement = () => {
  const navigate = useNavigate();
  const { id: activityId } = useParams(); // 获取活动ID
  const [registrations, setRegistrations] = useState([]);
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });

  // 获取报名列表数据
  const fetchRegistrationData = useCallback(async (params = {}) => {
    try {
      setLoading(true);
      const queryParams = {
        activityId: activityId, // 从URL参数获取活动ID
        page: pagination.current, // 页码从1开始
        size: pagination.pageSize, // 每页大小
        ...params,
      };
      
      const response = await activityUserAPI.getRegistrationList(queryParams);
      if (response.code === 0) {
        // 转换数据格式以适配前端显示
        const transformedData = response.data.content?.map(item => {
          // 调试日志：查看原始状态值
          console.log('原始状态值:', item.status, '类型:', typeof item.status);
          return {
            id: item.id,
            volunteerName: item.userName, // userName -> volunteerName
            phone: item.userPhone, // userPhone -> phone
            registerTime: item.createTime ? dayjs(item.createTime).format('YYYY-MM-DD HH:mm') : '', // 格式化报名时间
            checkInLocation: item.checkinLocation || '', // checkinLocation -> checkInLocation
            checkInTime: item.checkinTime ? dayjs(item.checkinTime).format('YYYY-MM-DD HH:mm') : '', // 格式化签到时间
            checkOutLocation: item.checkoutLocation || '', // checkoutLocation -> checkOutLocation
            checkOutTime: item.checkoutTime ? dayjs(item.checkoutTime).format('YYYY-MM-DD HH:mm') : '', // 格式化签退时间
            status: (item.status === 1 || item.status === '1') ? '1' : (item.status === 2 || item.status === '2') ? '2' : (item.status === 3 || item.status === '3') ? '3' : '未知', // 状态映射
            originalData: item,
          };
        });
        
        console.log('转换后的数据:', transformedData);
        setRegistrations(transformedData);
        setPagination(prev => ({
          ...prev,
          total: response.data.totalElements || 0,
        }));
      }
    } catch (error) {
      console.error('获取报名列表失败:', error);
      message.error('获取报名列表失败');
    } finally {
      setLoading(false);
    }
  }, [activityId, pagination.current, pagination.pageSize]);

  // 页面初始化加载数据
  useEffect(() => {
    if (activityId) {
      fetchRegistrationData();
    }
  }, [activityId, fetchRegistrationData]);

  const columns = [
    {
      title: '志愿者',
      key: 'volunteer',
      width: 150,
      render: (_, record) => (
        <Space>
          <Avatar icon={<UserOutlined />} />
          <div>
            <div style={{ fontWeight: 'bold' }}>{record.volunteerName}</div>
            <div style={{ fontSize: '12px', color: '#8c8c8c' }}>{record.phone}</div>
          </div>
        </Space>
      ),
    },
    {
      title: '报名时间',
      dataIndex: 'registerTime',
      key: 'registerTime',
      width: 150,
      render: (time) => time || '-',
    },
    {
      title: '签到地点',
      dataIndex: 'checkInLocation',
      key: 'checkInLocation',
      width: 120,
      render: (location) => location || '-',
    },
    {
      title: '签到时间',
      dataIndex: 'checkInTime',
      key: 'checkInTime',
      width: 150,
      render: (time) => time || '-',
    },
    {
      title: '签退地点',
      dataIndex: 'checkOutLocation',
      key: 'checkOutLocation',
      width: 120,
      render: (location) => location || '-',
    },
    {
      title: '签退时间',
      dataIndex: 'checkOutTime',
      key: 'checkOutTime',
      width: 150,
      render: (time) => time || '-',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status) => {
        const statusMap = {
          '1': { text: '已报名）', color: 'blue' },
          '2': { text: '已签到', color: 'green' },
          '3': { text: '已签退', color: 'purple' },
          '未知': { text: '未知', color: 'default' },
        };
        const statusInfo = statusMap[status] || { text: status, color: 'default' };
        return <Tag color={statusInfo.color}>{statusInfo.text}</Tag>;
      },
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
            render: (_, record) => (
        <Space>
          <Button
            type="link"
            icon={<EyeOutlined />}
            onClick={() => handleViewDetail(record)}
          >
            详情
          </Button>
          {record.status === '1' && (
            <Popconfirm
              title="确定要移除这个报名者吗？"
              onConfirm={() => handleRemove(record.id)}
              okText="确定"
              cancelText="取消"
            >
              <Button
                type="link"
                danger
                icon={<DeleteOutlined />}
              >
                移除
              </Button>
            </Popconfirm>
          )}
        </Space>
      ),
    },
  ];

  const handleViewDetail = (record) => {
    navigate(`/activities/registrations/detail/${record.id}`);
  };

  const handleRemove = async (id) => {
    try {
      const response = await activityUserAPI.deleteRegistrations(id);
      if (response.code === 0) {
        message.success('已移除报名者');
        // 重新获取数据
        fetchRegistrationData();
      } else {
        message.error('移除失败');
      }
    } catch (error) {
      console.error('移除报名者失败:', error);
      message.error('移除失败');
    }
  };

  // 处理分页变化
  const handleTableChange = (paginationInfo) => {
    setPagination(prev => ({
      ...prev,
      current: paginationInfo.current,
      pageSize: paginationInfo.pageSize,
    }));
    fetchRegistrationData({
      page: paginationInfo.current,
      size: paginationInfo.pageSize,
    });
  };

  if (!activityId) {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <div>活动ID不存在</div>
        <Button type="primary" onClick={() => navigate('/activities')} style={{ marginTop: '16px' }}>
          返回活动列表
        </Button>
      </div>
    );
  }

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">报名管理</h1>
        <p className="page-description">管理活动报名者，审核报名申请</p>
      </div>

      <Card>
        <Table
          columns={columns}
          dataSource={registrations}
          rowKey="id"
          scroll={{ x: 1200 }}
          loading={loading}
          pagination={{
            ...pagination,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
          }}
          onChange={handleTableChange}
        />
      </Card>
    </div>
  );
};

export default RegistrationManagement;