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

const VolunteerDetail = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [volunteerDetail, setVolunteerDetail] = useState(null);
  const [activityRecords, setActivityRecords] = useState([]);

  // 获取志愿者详情数据
  const fetchVolunteerDetail = useCallback(async () => {
    try {
      setLoading(true);
      const response = await applicationAPI.getApplicationById(id);
      if (response.code === 0) {
        const data = response.data;
        
        // 转换状态显示
        const statusMap = {
          '0': '待审核',
          '1': '审核通过', 
          '2': '审核不通过'
        };
        
        // 设置志愿者基本信息
        setVolunteerDetail({
          id: data.id,
          name: data.name,
          phone: data.phone,
          idCard: data.idCard,
          status: statusMap[data.status] || data.status,
          totalPoints: data.applicationsCount?.points || 0,
          activities: data.applicationsCount?.activityNum || 0,
          serviceHours: data.applicationsCount?.serviceHours || 0,
        });
        
        // 设置活动记录数据
        const activities = data.activitiesList?.map(item => ({
          key: item.id || Math.random(),
          activityName: item.title,
          date: item.createTime ? dayjs(item.createTime).format('YYYY-MM-DD') : '',
          points: item.earnedPoints || 0,
          status: item.status === '1' ? '已报名' : item.status === '2' ? '已签到' : item.status === '3' ? '已签退' : '未知',
        })) || [];
        
        setActivityRecords(activities);
      } else {
        message.error('获取志愿者详情失败');
        navigate(-1);
      }
    } catch (error) {
      console.error('获取志愿者详情失败:', error);
      message.error('获取志愿者详情失败');
      navigate(-1);
    } finally {
      setLoading(false);
    }
  }, [id, navigate]);

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

  const activityColumns = [
    {
      title: '活动名称',
      dataIndex: 'activityName',
      key: 'activityName',
    },
    {
      title: '参与日期',
      dataIndex: 'date',
      key: 'date',
    },
    {
      title: '获得积分',
      dataIndex: 'points',
      key: 'points',
      render: (points) => <span style={{ color: '#52c41a' }}>+{points}</span>,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => {
        const statusColorMap = {
          '已报名': 'blue',
          '已签到': 'green',
          '已签退': 'purple',
          '未知': 'default',
        };
        return <Tag color={statusColorMap[status] || 'default'}>{status}</Tag>;
      },
    },
  ];

  // 获取状态颜色
  const getStatusColor = (status) => {
    switch (status) {
      case '审核通过':
        return 'success';
      case '待审核':
        return 'warning';
      case '审核不通过':
        return 'error';
      default:
        return 'default';
    }
  };

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

  if (!volunteerDetail) {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <div>志愿者信息不存在</div>
      </div>
    );
  }

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">志愿者详情</h1>
        <p className="page-description">查看志愿者的详细信息和活动记录</p>
      </div>

      <Row gutter={[16, 16]}>
        <Col xs={24} lg={8}>
          <Card>
            <div style={{ textAlign: 'center', marginBottom: 24 }}>
              <Avatar size={80} icon={<UserOutlined />} />
              <h2 style={{ marginTop: 16 }}>{volunteerDetail.name}</h2>
              <Tag color={getStatusColor(volunteerDetail.status)}>{volunteerDetail.status}</Tag>
            </div>
            <Descriptions column={1}>
              <Descriptions.Item label="手机号">{volunteerDetail.phone}</Descriptions.Item>
              <Descriptions.Item label="身份证号">{volunteerDetail.idCard}</Descriptions.Item>
            </Descriptions>
          </Card>
        </Col>
        <Col xs={24} lg={16}>
          <Row gutter={[16, 16]}>
            <Col xs={24} sm={8}>
              <Card>
                <Statistic
                  title="总积分"
                  value={volunteerDetail.totalPoints}
                  valueStyle={{ color: '#52c41a' }}
                />
              </Card>
            </Col>
            <Col xs={24} sm={8}>
              <Card>
                <Statistic
                  title="参与活动"
                  value={volunteerDetail.activities}
                  valueStyle={{ color: '#1890ff' }}
                  suffix="次"
                />
              </Card>
            </Col>
            <Col xs={24} sm={8}>
              <Card>
                <Statistic
                  title="服务时长"
                  value={volunteerDetail.serviceHours}
                  valueStyle={{ color: '#faad14' }}
                  suffix="小时"
                />
              </Card>
            </Col>
          </Row>
          <Card title="活动记录" style={{ marginTop: 16 }}>
            <Table
              columns={activityColumns}
              dataSource={activityRecords}
              pagination={false}
              size="small"
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default VolunteerDetail;