import React, { useState, useEffect, useCallback } from 'react';
import { Table, Card, Input, Button, Space, Row, Col, Form, message, Spin } from 'antd';
import { SearchOutlined, DownloadOutlined } from '@ant-design/icons';
import { userAPI } from '../../services/api';


const VolunteerPoints = () => {
  const [searchForm] = Form.useForm();
  const [volunteerPoints, setVolunteerPoints] = useState([]);
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });
  const [filters, setFilters] = useState({});

  const columns = [
    {
      title: '志愿者姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '总积分',
      dataIndex: 'totalPoints',
      key: 'totalPoints',
      render: (points) => <span style={{ color: '#52c41a', fontWeight: 'bold' }}>{points || 0}</span>,
    },
    {
      title: '获得积分',
      dataIndex: 'points',
      key: 'points',
      render: (points) => <span style={{ color: '#1890ff' }}>+{points || 0}</span>,
    },
    {
      title: '使用积分',
      dataIndex: 'redeemedPoints',
      key: 'redeemedPoints',
      render: (points) => <span style={{ color: '#ff4d4f' }}>-{points || 0}</span>,
    },
  ];

  // 获取积分数据
  const fetchPointsData = useCallback(async (params = {}) => {
    try {
      setLoading(true);
      const queryParams = {
        page: pagination.current,
        size: pagination.pageSize,
        ...filters,
        ...params,
      };
      
      const response = await userAPI.getUserList(queryParams);
      if (response.code === 0) {
        setVolunteerPoints(response.data.content || []);
        setPagination(prev => ({
          ...prev,
          total: response.data.totalElements || 0,
        }));
      }
    } catch (error) {
      console.error('获取积分数据失败:', error);
      message.error('获取积分数据失败');
    } finally {
      setLoading(false);
    }
  }, [pagination.current, pagination.pageSize, filters]);

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

  const handleSearch = (values) => {
    setFilters(values);
    setPagination(prev => ({ ...prev, current: 1 }));
    fetchPointsData({ ...values, page: 1 });
  };

  const handleReset = () => {
    searchForm.resetFields();
    setFilters({});
    setPagination(prev => ({ ...prev, current: 1 }));
    fetchPointsData({ page: 1 });
  };

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

  const handleExport = () => {
    console.log('导出数据');
  };

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">积分查询</h1>
        <p className="page-description">查询志愿者积分情况，支持导出数据</p>
      </div>

      <Card className="search-form">
        <Form
          form={searchForm}
          layout="inline"
          onFinish={handleSearch}
        >
          <Row gutter={[16, 16]} style={{ width: '100%' }} align="middle">
            <Col xs={24} sm={12} md={6}>
              <Form.Item name="name" label="姓名">
                <Input placeholder="请输入姓名" />
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <Form.Item name="phone" label="手机号">
                <Input placeholder="请输入手机号" />
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={12}>
              <Space>
                <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                  搜索
                </Button>
                <Button onClick={handleReset}>
                  重置
                </Button>
                <Button icon={<DownloadOutlined />} onClick={handleExport}>
                  导出
                </Button>
              </Space>
            </Col>
          </Row>
        </Form>
      </Card>

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

export default VolunteerPoints;