import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { Card, Table, Tag, Switch, Space, Button, message, Modal, Radio, Checkbox, Row, Col } from 'antd';
import type { PersonnelItem } from '@/servers/types/evaluator';
import type { ColumnsType } from 'antd/es/table';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';
import styles from '../supplierTaskManageAdd.less';

// 评价指标类型定义
interface IndicatorItem {
  id: string;
  name: string;
  description: string;
}

// 组件接收的Props定义
interface DivisionStepProps {
  formData: any;
  onFormDataChange?: (values: any) => void;
}

// 评价方式枚举
enum EvaluateType {
  ALL = 'ALL', // 按评价单评价(全部指标)
  INDICATOR = 'INDICATOR', // 按指标评价(部分指标)
}

// 模拟的评价指标数据
const mockIndicators: IndicatorItem[] = [
  { id: 'I001', name: '产品质量', description: '评估供应商产品质量' },
  { id: 'I002', name: '交货及时性', description: '评估供应商交货的及时性' },
  { id: 'I003', name: '服务水平', description: '评估供应商提供的服务水平' },
  { id: 'I004', name: '价格竞争力', description: '评估供应商产品价格的竞争力' },
  { id: 'I005', name: '技术能力', description: '评估供应商的技术创新能力' },
];

const DivisionStep = forwardRef<any, DivisionStepProps>(({ formData, onFormDataChange }, ref) => {
  // 从上一步获取的评价人员列表
  const [evaluators, setEvaluators] = useState<PersonnelItem[]>([]);

  // 评价人员指标分配数据
  const [indicatorAssignments, setIndicatorAssignments] = useState<{
    [userId: string]: {
      type: EvaluateType;
      indicatorIds: string[];
    };
  }>({});

  // 选中的行keys
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  // 指标列表
  const [indicators] = useState<IndicatorItem[]>(mockIndicators);

  // 指标分工弹窗可见性
  const [divisionModalVisible, setDivisionModalVisible] = useState(false);

  // 评价方式类型
  const [batchEvaluateType, setBatchEvaluateType] = useState<EvaluateType>(EvaluateType.ALL);

  // 批量选择的指标
  const [batchSelectedIndicators, setBatchSelectedIndicators] = useState<string[]>([]);

  // 处理行选择变化
  const handleSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };

  // 打开指标分工弹窗
  const handleOpenDivisionModal = () => {
    if (selectedRowKeys.length === 0) {
      message.warning('请先选择评价人员');
      return;
    }
    setDivisionModalVisible(true);
  };

  // 处理评价方式变更
  const handleEvaluateTypeChange = (e: any) => {
    setBatchEvaluateType(e.target.value);
  };

  // 处理指标选择变更
  const handleIndicatorChange = (checkedValues: CheckboxValueType[]) => {
    setBatchSelectedIndicators(checkedValues.map(v => v.toString()));
  };

  // 批量设置指标分工
  const handleBatchSetDivision = () => {
    // 获取选中的评价人员
    const selectedEvaluators = evaluators.filter(
      evaluator => selectedRowKeys.includes(evaluator.id)
    );

    // 更新指标分配数据
    const newAssignments = { ...indicatorAssignments };

    selectedEvaluators.forEach(evaluator => {
      newAssignments[evaluator.id] = {
        type: batchEvaluateType,
        indicatorIds: batchEvaluateType === EvaluateType.INDICATOR ? batchSelectedIndicators : [],
      };
    });

    setIndicatorAssignments(newAssignments);
    setDivisionModalVisible(false);
    message.success(`已为${selectedRowKeys.length}名评价人员设置分工`);
  };

  // 处理单个评价人员的指标分工
  const handleAssignIndicators = (userId: string) => {
    Modal.info({
      title: '评价指标分工',
      content: '此功能将在后续完善',
      okText: '确定',
    });
  };

  // 查看评价人员的指标分工
  const handleViewAssignment = (userId: string) => {
    const assignment = indicatorAssignments[userId];
    if (!assignment) {
      message.info('该评价人员尚未设置分工');
      return;
    }

    const assignedIndicators = indicators.filter(ind =>
      assignment.type === EvaluateType.ALL ||
      assignment.indicatorIds.includes(ind.id)
    );

    Modal.info({
      title: '查看评价指标分工',
      content: (
        <div>
          <p>评价方式: {assignment.type === EvaluateType.ALL ? '按评价单评价' : '按指标评价'}</p>
          <p>评价指标: </p>
          <ul>
            {assignedIndicators.map(ind => (
              <li key={ind.id}>{ind.name}</li>
            ))}
          </ul>
        </div>
      ),
      okText: '确定',
    });
  };

  // 删除评价人员
  const handleRemoveEvaluator = (userId: string) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除该评价人员吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        // 更新评价人员列表
        setEvaluators(prev => prev.filter(e => e.id !== userId));

        // 更新指标分配数据
        const newAssignments = { ...indicatorAssignments };
        delete newAssignments[userId];
        setIndicatorAssignments(newAssignments);

        message.success('已删除评价人员');
      },
    });
  };

  // 初始化：从formData中提取指标分配数据
  useEffect(() => {
    if (formData.indicatorList) {
      // 如果已有指标分配数据，直接使用
      const assignments: any = {};
      formData.indicatorList.forEach((item: any) => {
        assignments[item.userId] = {
          type: item.type,
          indicatorIds: item.indicatorIds || [],
        };
      });
      setIndicatorAssignments(assignments);
    }
  }, [formData.indicatorList]);

  // 从上一步获取评价人员列表 - 避免频繁更新
  useEffect(() => {
    if (!formData.suppliersWithEvaluators) return;

    // 从所有供应商中提取评价人员列表
    const allEvaluators: PersonnelItem[] = [];

    formData.suppliersWithEvaluators.forEach((supplier: any) => {
      if (supplier.evaluators && supplier.evaluators.length > 0) {
        supplier.evaluators.forEach((evaluator: PersonnelItem) => {
          // 检查是否已存在（避免重复）
          if (!allEvaluators.some(e => e.id === evaluator.id)) {
            allEvaluators.push({
              ...evaluator,
              // 添加单位和员工编号，假设这些字段可能不存在
              company: evaluator.company || supplier.supplierName || '未知单位',
              employeeNumber: evaluator.employeeNumber || `EMP${evaluator.id.slice(-4)}`,
              department: evaluator.department || '未知部门',
            });
          }
        });
      }
    });

    setEvaluators(allEvaluators);
  }, [formData.suppliersWithEvaluators]);

  // 为评价人员初始化指标分配数据 - 作为单独的效果处理
  useEffect(() => {
    // 检查是否有新的评价人员需要初始化
    const newAssignments = { ...indicatorAssignments };
    let hasNewAssignments = false;

    evaluators.forEach(evaluator => {
      if (!indicatorAssignments[evaluator.id]) {
        newAssignments[evaluator.id] = {
          type: EvaluateType.ALL,
          indicatorIds: [],
        };
        hasNewAssignments = true;
      }
    });

    if (hasNewAssignments) {
      setIndicatorAssignments(newAssignments);
    }
  }, [evaluators, indicatorAssignments]);

  // 同步数据回表单 - 使用防抖确保不会频繁触发
  const previousValueRef = React.useRef<string>("");

  useEffect(() => {
    // 将评价人员列表和指标分配数据同步回表单
    const indicatorList = evaluators.map(evaluator => ({
      userId: evaluator.id,
      userName: evaluator.name,
      type: indicatorAssignments[evaluator.id]?.type || EvaluateType.ALL,
      indicatorIds: indicatorAssignments[evaluator.id]?.indicatorIds || [],
    }));

    // 使用JSON字符串比较确保只有在真正变化时才更新
    const currentValue = JSON.stringify(indicatorList);
    if (currentValue !== previousValueRef.current) {
      previousValueRef.current = currentValue;
      onFormDataChange?.({
        ...formData,
        indicatorList,
      });
    }
  }, [evaluators, indicatorAssignments, formData, onFormDataChange]);

  // 暴露给父组件的方法
  useImperativeHandle(ref, () => ({
    validate: () => {
      if (evaluators.length === 0) {
        return {
          valid: false,
          message: '请先分配评价人员',
        };
      }
      return { valid: true };
    },
  }));

  // 表格列定义
  const columns: ColumnsType<PersonnelItem> = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '所属单位',
      dataIndex: 'company',
      key: 'company',
    },
    {
      title: '所属部门',
      dataIndex: 'department',
      key: 'department',
    },
    {
      title: '员工编号',
      dataIndex: 'employeeNumber',
      key: 'employeeNumber',
    },
    {
      title: '是否设置分工',
      key: 'hasDivision',
      render: (_: any, record: PersonnelItem) => {
        const assignment = indicatorAssignments[record.id];
        if (!assignment) return <Tag color="red">未设置</Tag>;
        return <Tag color="green">已设置</Tag>;
      },
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: PersonnelItem) => (
        <Space size="middle">
          <Button type="link" onClick={() => handleAssignIndicators(record.id)}>评价指标分工</Button>
          <Button type="link" onClick={() => handleViewAssignment(record.id)}>查看</Button>
          <Button type="link" onClick={() => handleRemoveEvaluator(record.id)}>删除</Button>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Button
          type="primary"
          onClick={handleOpenDivisionModal}
          disabled={selectedRowKeys.length === 0}
        >
          设置评价指标分工
        </Button>
      </div>

      <Table
        rowKey="id"
        rowSelection={{
          selectedRowKeys,
          onChange: handleSelectChange,
        }}
        columns={columns}
        dataSource={evaluators}
        pagination={false}
      />

      {/* 批量设置指标分工弹窗 */}
      <Modal
        title="批量设置评价指标分工"
        visible={divisionModalVisible}
        onOk={handleBatchSetDivision}
        onCancel={() => setDivisionModalVisible(false)}
        okText="确定"
        cancelText="取消"
        width={700}
      >
        <div>
          <p>您已选择 {selectedRowKeys.length} 名评价人员进行指标分工设置</p>
          <Radio.Group defaultValue={EvaluateType.ALL} onChange={handleEvaluateTypeChange}>
            <Radio value={EvaluateType.ALL}>按评价单评价</Radio>
            <Radio value={EvaluateType.INDICATOR}>按指标评价</Radio>
          </Radio.Group>

          <div style={{ marginTop: 16 }}>
            <p>指标列表：</p>
            <Checkbox.Group style={{ width: '100%' }} onChange={handleIndicatorChange}>
              <Row>
                {indicators.map(indicator => (
                  <Col span={8} key={indicator.id}>
                    <Checkbox value={indicator.id}>{indicator.name}</Checkbox>
                  </Col>
                ))}
              </Row>
            </Checkbox.Group>
          </div>
        </div>
      </Modal>
    </div>
  );
});

export default DivisionStep;