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

const RegistrationDetail = () => {
  const navigate = useNavigate();
  const { id } = useParams();
  const [registrationDetail, setRegistrationDetail] = useState(null);
  const [loading, setLoading] = useState(false);

  // 获取报名详情数据
  const fetchRegistrationDetail = useCallback(async () => {
    try {
      setLoading(true);
      const response = await activityUserAPI.getRegistrationById(id);
      if (response.code === 0) {
        const data = response.data;
        // 转换数据格式以适配前端显示
        const transformedData = {
          id: data.id,
          volunteerName: data.userName, // userName -> volunteerName
          phone: data.userPhone, // userPhone -> phone
          registerTime: data.createTime ? dayjs(data.createTime).format('YYYY-MM-DD HH:mm') : '', // 格式化报名时间
          checkInLocation: data.checkinLocation || '', // checkinLocation -> checkInLocation
          checkInTime: data.checkinTime ? dayjs(data.checkinTime).format('YYYY-MM-DD HH:mm') : '', // 格式化签到时间
          checkOutLocation: data.checkoutLocation || '', // checkoutLocation -> checkOutLocation
          checkOutTime: data.checkoutTime ? dayjs(data.checkoutTime).format('YYYY-MM-DD HH:mm') : '', // 格式化签退时间
          status: (data.status === 1 || data.status === '1') ? '1' : (data.status === 2 || data.status === '2') ? '2' : (data.status === 3 || data.status === '3') ? '3' : '未知', // 状态映射
          serviceHours: data.serviceHours || 0, // 服务时长
          earnedPoints: data.earnedPoints || 0, // 获得积分
          activityTitle: data.volActivities?.title || '', // 活动名称
          activityCategory: data.volActivities?.categoryDesc || '', // 活动分类
          activityStartTime: data.volActivities?.startTime ? dayjs(data.volActivities.startTime).format('YYYY-MM-DD HH:mm') : '', // 活动开始时间
          activityEndTime: data.volActivities?.endTime ? dayjs(data.volActivities.endTime).format('YYYY-MM-DD HH:mm') : '', // 活动结束时间
          activityLocation: data.volActivities?.location || '', // 活动地点
          activityPoints: data.volActivities?.points || 0, // 活动积分
          originalData: data,
        };
        setRegistrationDetail(transformedData);
      } else {
        message.error('获取报名详情失败');
        navigate(-1);
      }
    } catch (error) {
      console.error('获取报名详情失败:', error);
      message.error('获取报名详情失败');
      navigate(-1);
    } finally {
      setLoading(false);
    }
  }, [id, navigate]);

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

  const getStatusColor = (status) => {
    const colorMap = {
      '1': 'blue',
      '2': 'green',
      '3': 'purple',
      '未知': 'default',
    };
    return colorMap[status] || 'default';
  };

  const getStatusText = (status) => {
    const statusMap = {
      '1': '已报名',
      '2': '已签到',
      '3': '已签退',
      '未知': '未知',
    };
    return statusMap[status] || status;
  };

  const handleBack = () => {
    navigate(-1);
  };

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <Spin size="large" />
        <div style={{ marginTop: '16px' }}>加载中...</div>
      </div>
    );
  }

  if (!registrationDetail) {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <div>报名详情不存在</div>
        <Button type="primary" onClick={() => navigate(-1)} style={{ marginTop: '16px' }}>
          返回
        </Button>
      </div>
    );
  }

  return (
    <div>
      <div className="page-header">
        <Button 
          icon={<ArrowLeftOutlined />} 
          onClick={handleBack}
          style={{ marginBottom: '16px' }}
        >
          返回
        </Button>
        <h1 className="page-title">报名详情</h1>
        <p className="page-description">查看志愿者报名详细信息，管理服务时长和积分</p>
      </div>

      <Row gutter={[24, 24]}>
        {/* 基本信息 */}
        <Col xs={24} lg={12}>
          <Card title="基本信息" className="detail-card">
            <Descriptions column={1} size="small">
              <Descriptions.Item label="志愿者姓名">
                <Space>
                  <Avatar icon={<UserOutlined />} />
                  {registrationDetail.volunteerName}
                </Space>
              </Descriptions.Item>
              <Descriptions.Item label="联系电话">
                {registrationDetail.phone}
              </Descriptions.Item>
              <Descriptions.Item label="报名时间">
                {dayjs(registrationDetail.registerTime).format('YYYY-MM-DD HH:mm:ss')}
              </Descriptions.Item>
              <Descriptions.Item label="报名状态">
                <Tag color={getStatusColor(registrationDetail.status)}>
                  {getStatusText(registrationDetail.status)}
                </Tag>
              </Descriptions.Item>
            </Descriptions>
          </Card>
        </Col>

        {/* 活动信息 */}
        <Col xs={24} lg={12}>
          <Card title="活动信息" className="detail-card">
            <Descriptions column={1} size="small">
              <Descriptions.Item label="活动名称">
                {registrationDetail.activityTitle}
              </Descriptions.Item>
              <Descriptions.Item label="活动分类">
                <Tag color="blue">{registrationDetail.activityCategory}</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="活动时间">
                {dayjs(registrationDetail.activityStartTime).format('MM-DD HH:mm')} - {dayjs(registrationDetail.activityEndTime).format('MM-DD HH:mm')}
              </Descriptions.Item>
              <Descriptions.Item label="活动地点">
                {registrationDetail.activityLocation}
              </Descriptions.Item>
              <Descriptions.Item label="活动积分">
                <span style={{ color: '#52c41a', fontWeight: 'bold' }}>
                  +{registrationDetail.activityPoints}
                </span>
              </Descriptions.Item>
            </Descriptions>
          </Card>
        </Col>

        {/* 签到签退信息 */}
        <Col xs={24}>
          <Card title="签到签退信息" className="detail-card">
            <Row gutter={[24, 16]}>
              <Col xs={24} md={12}>
                <Descriptions title="签到信息" column={1} size="small">
                  <Descriptions.Item label="签到地点">
                    {registrationDetail.checkInLocation || '未签到'}
                  </Descriptions.Item>
                  <Descriptions.Item label="签到时间">
                    {registrationDetail.checkInTime ? dayjs(registrationDetail.checkInTime).format('YYYY-MM-DD HH:mm:ss') : '未签到'}
                  </Descriptions.Item>
                </Descriptions>
              </Col>
              <Col xs={24} md={12}>
                <Descriptions title="签退信息" column={1} size="small">
                  <Descriptions.Item label="签退地点">
                    {registrationDetail.checkOutLocation || '未签退'}
                  </Descriptions.Item>
                  <Descriptions.Item label="签退时间">
                    {registrationDetail.checkOutTime ? dayjs(registrationDetail.checkOutTime).format('YYYY-MM-DD HH:mm:ss') : '未签退'}
                  </Descriptions.Item>
                </Descriptions>
              </Col>
            </Row>
          </Card>
        </Col>

        {/* 服务时长和积分管理 */}
        <Col xs={24}>
          <Card title="服务时长和积分管理" className="detail-card">
            <Row gutter={[24, 16]}>
              <Col xs={24} md={12}>
                <Descriptions column={1} size="small">
                  <Descriptions.Item label="服务时长">
                    <span style={{ fontSize: '16px', fontWeight: 'bold', color: '#1890ff' }}>
                      {registrationDetail.serviceHours} 小时
                    </span>
                  </Descriptions.Item>
                </Descriptions>
              </Col>
              <Col xs={24} md={12}>
                <Descriptions column={1} size="small">
                  <Descriptions.Item label="获取积分">
                    <span style={{ fontSize: '16px', fontWeight: 'bold', color: '#52c41a' }}>
                      +{registrationDetail.earnedPoints} 分
                    </span>
                  </Descriptions.Item>
                </Descriptions>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default RegistrationDetail;