import React, { useState, useEffect } from 'react';
import { Table, Button, Modal, Form, Input, Select, InputNumber, Space, Card, message, Popconfirm } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { useSelector, useDispatch } from 'react-redux';
import { setPointTypes, addPointType, updatePointType, deletePointType } from '../../store/slices/pointsSlice';

const { Option } = Select;

const PointTypeManagement = () => {
  const [form] = Form.useForm();
  const [modalVisible, setModalVisible] = useState(false);
  const [editingRecord, setEditingRecord] = useState(null);
  const [loading, setLoading] = useState(false);
  
  const dispatch = useDispatch();
  const { pointTypes } = useSelector((state) => state.points);

  // 模拟数据
  const mockPointTypes = [
    {
      id: 1,
      name: '活动参与',
      code: 'ACTIVITY_PARTICIPATION',
      description: '参与志愿者活动获得的积分',
      points: 10,
      type: '增加',
      status: '启用',
      createTime: '2024-01-01 10:00:00',
    },
    {
      id: 2,
      name: '服务时长',
      code: 'SERVICE_HOURS',
      description: '根据服务时长获得的积分',
      points: 5,
      type: '增加',
      status: '启用',
      createTime: '2024-01-01 10:00:00',
    },
    {
      id: 3,
      name: '特殊贡献',
      code: 'SPECIAL_CONTRIBUTION',
      description: '特殊贡献或突出表现获得的积分',
      points: 20,
      type: '增加',
      status: '启用',
      createTime: '2024-01-01 10:00:00',
    },
    {
      id: 4,
      name: '违规扣分',
      code: 'VIOLATION_DEDUCTION',
      description: '违反规定扣除的积分',
      points: 10,
      type: '扣减',
      status: '启用',
      createTime: '2024-01-01 10:00:00',
    },
  ];

  useEffect(() => {
    // 模拟加载数据
    dispatch(setPointTypes(mockPointTypes));
  }, [dispatch]);

  const columns = [
    {
      title: '类型名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '类型代码',
      dataIndex: 'code',
      key: 'code',
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      ellipsis: true,
    },
    {
      title: '积分值',
      dataIndex: 'points',
      key: 'points',
      render: (points, record) => (
        <span style={{ color: record.type === '增加' ? '#52c41a' : '#ff4d4f' }}>
          {record.type === '增加' ? '+' : '-'}{points}
        </span>
      ),
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      render: (type) => (
        <span style={{ color: type === '增加' ? '#52c41a' : '#ff4d4f' }}>
          {type}
        </span>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => (
        <span style={{ color: status === '启用' ? '#52c41a' : '#8c8c8c' }}>
          {status}
        </span>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button
            type="link"
            icon={<EditOutlined />}
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Popconfirm
            title="确定要删除这个积分类型吗？"
            onConfirm={() => handleDelete(record.id)}
            okText="确定"
            cancelText="取消"
          >
            <Button type="link" danger icon={<DeleteOutlined />}>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  const handleAdd = () => {
    setEditingRecord(null);
    form.resetFields();
    setModalVisible(true);
  };

  const handleEdit = (record) => {
    setEditingRecord(record);
    form.setFieldsValue(record);
    setModalVisible(true);
  };

  const handleDelete = (id) => {
    dispatch(deletePointType(id));
    message.success('删除成功');
  };

  const handleModalOk = async () => {
    try {
      const values = await form.validateFields();
      setLoading(true);

      if (editingRecord) {
        // 编辑
        const updatedRecord = { ...editingRecord, ...values };
        dispatch(updatePointType(updatedRecord));
        message.success('更新成功');
      } else {
        // 新增
        const newRecord = {
          id: Date.now(),
          ...values,
          status: '启用',
          createTime: new Date().toLocaleString(),
        };
        dispatch(addPointType(newRecord));
        message.success('添加成功');
      }

      setModalVisible(false);
      setLoading(false);
    } catch (error) {
      console.error('表单验证失败:', error);
    }
  };

  const handleModalCancel = () => {
    setModalVisible(false);
    form.resetFields();
  };

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">积分类型设置</h1>
        <p className="page-description">管理志愿者积分类型，设置不同类型的积分规则</p>
      </div>

      <Card>
        <div className="table-actions">
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={handleAdd}
          >
            新增积分类型
          </Button>
        </div>

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

      <Modal
        title={editingRecord ? '编辑积分类型' : '新增积分类型'}
        open={modalVisible}
        onOk={handleModalOk}
        onCancel={handleModalCancel}
        confirmLoading={loading}
        width={600}
      >
        <Form
          form={form}
          layout="vertical"
          initialValues={{
            type: '增加',
            status: '启用',
          }}
        >
          <Form.Item
            name="name"
            label="类型名称"
            rules={[{ required: true, message: '请输入类型名称' }]}
          >
            <Input placeholder="请输入类型名称" />
          </Form.Item>

          <Form.Item
            name="code"
            label="类型代码"
            rules={[{ required: true, message: '请输入类型代码' }]}
          >
            <Input placeholder="请输入类型代码" />
          </Form.Item>

          <Form.Item
            name="description"
            label="描述"
            rules={[{ required: true, message: '请输入描述' }]}
          >
            <Input.TextArea rows={3} placeholder="请输入描述" />
          </Form.Item>

          <Form.Item
            name="points"
            label="积分值"
            rules={[{ required: true, message: '请输入积分值' }]}
          >
            <InputNumber
              min={0}
              style={{ width: '100%' }}
              placeholder="请输入积分值"
            />
          </Form.Item>

          <Form.Item
            name="type"
            label="类型"
            rules={[{ required: true, message: '请选择类型' }]}
          >
            <Select placeholder="请选择类型">
              <Option value="增加">增加</Option>
              <Option value="扣减">扣减</Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="status"
            label="状态"
            rules={[{ required: true, message: '请选择状态' }]}
          >
            <Select placeholder="请选择状态">
              <Option value="启用">启用</Option>
              <Option value="禁用">禁用</Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default PointTypeManagement;