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

const { Option } = Select;
const { TextArea } = Input;

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

  // 获取申报项目配置列表
  const fetchRulesData = 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,
          category: item.categoryDesc, // 使用 categoryDesc 字段
          content: item.secondary || '无', // 直接使用 secondary 字段
          points: item.points,
          pointsType: item.isPositive === 1 ? '加积分' : '减积分', // 使用 isPositive 字段
          status: item.isActive === '1' ? '启用' : '禁用', // 使用 isActive 字段，字符串类型
          createTime: item.createTime ? new Date(item.createTime).toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
          }).replace(/\//g, '-') : '', // 格式化时间
          // 保存原始数据用于编辑
          originalData: item,
        })) || [];
        
        setRules(transformedData);
        setPagination(prev => ({
          ...prev,
          total: response.data.totalElements || 0,
        }));
      }
    } catch (error) {
      console.error('获取申报项目配置列表失败:', error);
      message.error('获取申报项目配置列表失败');
    } finally {
      setLoading(false);
    }
  }, [filters]);

  // 页面初始化加载数据
  useEffect(() => {
    console.log('页面初始化，开始加载数据');
    fetchRulesData();
  }, []);

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

  // 固定的类别选项
  const categoryOptions = [
    { value: 1, name: '党的建设' },
    { value: 2, name: '经济发展' },
    { value: 3, name: '平安法治' },
    { value: 4, name: '民生服务' },
    { value: 5, name: '失信违法' }
  ];

  const columns = [
    {
      title: '类别',
      dataIndex: 'category',
      key: 'category',
      render: (category) => <Tag color="blue">{category}</Tag>,
    },
    {
      title: '类别内容',
      dataIndex: 'content',
      key: 'content',
      ellipsis: false,
      width: 300,
    },
    {
      title: '积分',
      dataIndex: 'points',
      key: 'points',
      render: (points, record) => (
        <span style={{ color: record.pointsType === '减积分' ? '#ff4d4f' : '#52c41a' }}>
          {record.pointsType === '减积分' ? '-' : '+'}{points}
        </span>
      ),
    },
    {
      title: '积分类型',
      dataIndex: 'pointsType',
      key: 'pointsType',
      render: (pointsType) => (
        <Tag color={pointsType === '减积分' ? 'error' : 'success'}>
          {pointsType}
        </Tag>
      ),
    },
    {
      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);
    // 根据categoryDesc找到对应的value
    const category = categoryOptions.find(cat => cat.name === record.category);
    const categoryValue = category ? category.value : record.category;
    
    form.setFieldsValue({
      ...record,
      category: categoryValue
    });
    setModalVisible(true);
  };

  const handleDelete = async (id) => {
    try {
      const response = await declarationConfigAPI.deleteDeclarationConfigs(id.toString());
      if (response.code === 0) {
        message.success('删除成功');
        fetchRulesData();
      }
    } catch (error) {
      console.error('删除申报项目配置失败:', error);
      message.error('删除失败');
    }
  };

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

      // 根据类别自动设置积分类型
      const category = categoryOptions.find(cat => cat.value === values.category);
      const categoryName = category ? category.name : '';
      const pointsType = categoryName === '失信违法' ? '减积分' : '加积分';

      // 转换数据格式以适配后端接口
      const apiData = {
        id: editingRecord?.originalData?.id,
        category: values.category, // 传递value值
        categoryDesc: categoryName, // 传递name值
        secondary: values.content || '', // 直接使用 secondary 字段
        points: values.points,
        isPositive: values.pointsType === '加积分' ? 1 : 0, // 使用 isPositive 字段
        isActive: values.status === '启用' ? '1' : '0', // 使用 isActive 字段，字符串类型
      };

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

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

  // 当类别改变时，自动设置积分类型
  const handleCategoryChange = (value) => {
    // 根据value找到对应的name
    const category = categoryOptions.find(cat => cat.value === value);
    const categoryName = category ? category.name : '';
    const pointsType = categoryName === '失信违法' ? '减积分' : '加积分';
    form.setFieldsValue({ pointsType });
  };

  // 获取积分类型显示值
  const getPointsTypeValue = (category) => {
    return category === '失信违法' ? '减积分' : '加积分';
  };

  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={rules}
          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: '启用',
            pointsType: '加积分',
          }}
        >
          <Form.Item
            name="category"
            label="类别"
            rules={[{ required: true, message: '请选择类别' }]}
          >
            <Select 
              placeholder="请选择类别"
              onChange={handleCategoryChange}
            >
              {categoryOptions.map(category => (
                <Option key={category.value} value={category.value}>{category.name}</Option>
              ))}
            </Select>
          </Form.Item>

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

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

          <Form.Item
            name="pointsType"
            label="积分类型"
            rules={[{ required: true, message: '请选择积分类型' }]}
          >
            <Select placeholder="请选择积分类型" disabled>
              <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 DeclarationRuleManagement;