import React, { useState, useEffect, useCallback } from 'react';
import { Table, Button, Modal, Form, Input, Select, InputNumber, Space, Card, message, Popconfirm, Tag } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { declarationConfigAPI } from '../../services/api';

const { Option } = Select;

const PointProjectManagement = () => {
  const [form] = Form.useForm();
  const [modalVisible, setModalVisible] = useState(false);
  const [editingRecord, setEditingRecord] = useState(null);
  const [loading, setLoading] = useState(false);
  const [projectData, setProjectData] = useState([]);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });
  const [filters, setFilters] = useState({});
  const [categories, setCategories] = useState([]);

  // 获取申报项目配置列表
  const fetchProjectData = useCallback(async (page = pagination.current, size = pagination.pageSize, filterParams = {}) => {
    try {
      setLoading(true);
      const queryParams = {
        page,
        size,
        ...filters,
        ...filterParams,
      };
      
      console.log('调用接口获取申报项目配置列表:', queryParams); // 添加调试日志
      const response = await declarationConfigAPI.getDeclarationConfigList(queryParams);
      console.log('接口响应:', response); // 添加调试日志
      
      if (response.code === 0) {
        // 转换数据格式以适配前端显示
        const transformedData = response.data.content?.map(item => ({
          id: item.id,
          projectName: item.category_desc,
          projectType: item.category_desc,
          pointType: item.is_positive === 1 ? '正向积分' : '负向积分',
          basePoints: item.points,
          maxPoints: item.points, // 使用相同分值作为最高分值
          conditions: Array.isArray(JSON.parse(item.secondary || '[]')) 
            ? JSON.parse(item.secondary || '[]').join('、') 
            : item.secondary || '无',
          status: item.is_active === '1' ? '启用' : '禁用',
          createTime: item.create_time,
          // 保存原始数据用于编辑
          originalData: item,
        })) || [];
        
        setProjectData(transformedData);
        setPagination(prev => ({
          ...prev,
          total: response.data.totalElements || 0,
        }));
      }
    } catch (error) {
      console.error('获取申报项目配置列表失败:', error);
      message.error('获取申报项目配置列表失败');
    } finally {
      setLoading(false);
    }
  }, [filters]);

  // 获取分类列表
  const fetchCategories = useCallback(async () => {
    try {
      console.log('调用接口获取分类列表'); // 添加调试日志
      const response = await declarationConfigAPI.getDeclarationConfigCategories();
      console.log('分类接口响应:', response); // 添加调试日志
      if (response.code === 0) {
        setCategories(response.data || []);
      }
    } catch (error) {
      console.error('获取分类列表失败:', error);
    }
  }, []);

  // 页面初始化加载数据
  useEffect(() => {
    console.log('页面初始化，开始加载数据'); // 添加调试日志
    fetchProjectData();
    fetchCategories();
  }, []); // 只在组件挂载时执行一次

  // 处理分页变化
  const handleTableChange = (paginationInfo) => {
    setPagination(prev => ({
      ...prev,
      current: paginationInfo.current,
      pageSize: paginationInfo.pageSize,
    }));
    // 分页变化时重新获取数据
    fetchProjectData(paginationInfo.current, paginationInfo.pageSize);
  };

  const columns = [
    {
      title: '项目名称',
      dataIndex: 'projectName',
      key: 'projectName',
    },
    {
      title: '项目类型',
      dataIndex: 'projectType',
      key: 'projectType',
      render: (type) => {
        const colorMap = {
          '社区服务': 'blue',
          '敬老助残': 'green',
          '环保活动': 'orange',
          '特殊贡献': 'purple',
        };
        return <Tag color={colorMap[type]}>{type}</Tag>;
      },
    },
    {
      title: '积分类型',
      dataIndex: 'pointType',
      key: 'pointType',
    },
    {
      title: '基础分值',
      dataIndex: 'basePoints',
      key: 'basePoints',
      render: (points) => <span style={{ color: '#52c41a', fontWeight: 'bold' }}>+{points}</span>,
    },
    {
      title: '最高分值',
      dataIndex: 'maxPoints',
      key: 'maxPoints',
      render: (points) => <span style={{ color: '#1890ff', fontWeight: 'bold' }}>+{points}</span>,
    },
    {
      title: '获得条件',
      dataIndex: 'conditions',
      key: 'conditions',
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => (
        <Tag color={status === '启用' ? 'success' : 'default'}>
          {status}
        </Tag>
      ),
    },
    {
      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 = async (id) => {
    try {
      const response = await declarationConfigAPI.deleteDeclarationConfigs(id.toString());
      if (response.code === 0) {
        message.success('删除成功');
        fetchProjectData();
      }
    } catch (error) {
      console.error('删除申报项目配置失败:', error);
      message.error('删除失败');
    }
  };

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

      // 转换数据格式以适配后端接口
      const apiData = {
        id: editingRecord?.originalData?.id,
        category: values.projectType === '社区服务' ? 'community_service' :
                 values.projectType === '敬老助残' ? 'elderly_care' :
                 values.projectType === '环保活动' ? 'environmental' : 'special_contribution',
        category_desc: values.projectType,
        secondary: JSON.stringify([values.conditions || '']),
        points: values.basePoints,
        is_positive: values.pointType === '正向积分' ? 1 : 0,
        is_active: values.status === '启用' ? '1' : '0',
      };

      const response = await declarationConfigAPI.saveDeclarationConfig(apiData);
      if (response.code === 0) {
        message.success(editingRecord ? '更新成功' : '添加成功');
        setModalVisible(false);
        fetchProjectData();
      }
    } catch (error) {
      console.error('保存申报项目配置失败:', error);
      message.error('保存失败');
    } finally {
      setLoading(false);
    }
  };

  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={projectData}
          rowKey="id"
          loading={loading}
          pagination={{
            current: pagination.current,
            pageSize: pagination.pageSize,
            total: pagination.total,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
          }}
          onChange={handleTableChange}
        />
      </Card>

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

          <Form.Item
            name="projectType"
            label="项目类型"
            rules={[{ required: true, message: '请选择项目类型' }]}
          >
            <Select placeholder="请选择项目类型">
              {categories.map(category => (
                <Option key={category.category} value={category.category_desc}>
                  {category.category_desc}
                </Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item
            name="pointType"
            label="积分类型"
            rules={[{ required: true, message: '请选择积分类型' }]}
          >
            <Select placeholder="请选择积分类型">
              <Option value="正向积分">正向积分</Option>
              <Option value="负向积分">负向积分</Option>
            </Select>
          </Form.Item>

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

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

          <Form.Item
            name="conditions"
            label="获得条件"
            rules={[{ required: true, message: '请输入获得条件' }]}
          >
            <Input.TextArea rows={3} placeholder="请输入获得条件" />
          </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 PointProjectManagement;