import React, { useState, useEffect } from 'react';
import { TreeSelect, message, Spin } from 'antd';
import { getCategoryTree } from '@/servers/api/supplierEvaluate';
import './CategorySelector.less';

/**
 * CategorySelector组件的属性接口
 * @interface CategorySelectorProps
 * @property {string | string[]} [value] - 当前选中的品类ID或ID数组
 * @property {Function} [onChange] - 选择变化时的回调函数
 * @property {boolean} [disabled] - 是否禁用选择器
 * @property {boolean} [multiple] - 是否支持多选，默认为true
 * @property {string} [placeholder] - 占位文本
 * @property {React.CSSProperties} [style] - 自定义样式
 */
interface CategorySelectorProps {
  value?: string | string[];
  onChange?: (value: string | string[]) => void;
  disabled?: boolean;
  multiple?: boolean; // 是否多选，默认为多选
  placeholder?: string; // 占位文本
  style?: React.CSSProperties; // 自定义样式
}

/**
 * TreeSelect节点类型接口
 * @interface TreeSelectNode
 * @property {React.ReactNode} title - 节点显示的标题
 * @property {string} key - 节点唯一标识
 * @property {string} value - 节点选中时的值
 * @property {TreeSelectNode[]} [children] - 子节点
 * @property {boolean} [isLeaf] - 是否为叶子节点
 * @property {boolean} [selectable] - 是否可选
 * @property {boolean} [disabled] - 是否禁用
 */
interface TreeSelectNode {
  title: React.ReactNode;
  key: string;
  value: string;
  children?: TreeSelectNode[];
  isLeaf?: boolean;
  selectable?: boolean;
  disabled?: boolean;
}

const { SHOW_CHILD } = TreeSelect;

/**
 * 品类选择器组件
 * 用于从树形结构中选择品类，支持单选和多选模式
 *
 * @param {CategorySelectorProps} props - 组件属性
 * @returns {React.ReactElement} 品类选择器组件
 */
const CategorySelector: React.FC<CategorySelectorProps> = ({
  value,
  onChange,
  disabled = false,
  multiple = true,
  placeholder = '请选择品类',
  style = { width: '100%' }
}) => {
  // 树形数据状态
  const [treeData, setTreeData] = useState<TreeSelectNode[]>([]);
  // 加载状态
  const [loading, setLoading] = useState<boolean>(false);

  /**
   * 将后端返回的品类数据格式化为TreeSelect需要的格式
   * @param {any[]} data - 后端返回的原始品类数据
   * @returns {TreeSelectNode[]} 格式化后的树形数据
   */
  const formatCategoryTreeData = (data: any[]): TreeSelectNode[] => {
    if (!data || !Array.isArray(data) || data.length === 0) return [];

    return data.map(item => {
      if (!item || typeof item !== 'object') return null;

      // 类型为1的节点是叶子节点，只有叶子节点可选
      const isLeaf = item.type === '1';
      const node: TreeSelectNode = {
        title: item.categoryName || '未命名',
        key: item.id || `key-${Math.random()}`,
        value: item.id || `value-${Math.random()}`,
        isLeaf: isLeaf,
        selectable: isLeaf,
        disabled: !isLeaf, // 非叶子节点不可选
      };

      // 递归处理子节点
      if (Array.isArray(item.children) && item.children.length > 0) {
        const children = formatCategoryTreeData(item.children);
        if (children.length > 0) {
          node.children = children;
        }
      }

      return node;
    }).filter(Boolean) as TreeSelectNode[]; // 过滤掉可能的null值
  };

  /**
   * 从API获取品类树数据
   */
  const fetchCategoryTree = () => {
    setLoading(true);

    getCategoryTree().then(response => {
      if (response && response.success && Array.isArray(response.data)) {
        const formattedTreeData = formatCategoryTreeData(response.data);
        setTreeData(formattedTreeData);
      } else {
        console.error('获取品类数据格式错误:', response);
        message.error('获取品类数据失败');
      }
    }).catch(error => {
      console.error('获取品类数据失败:', error);
      message.error('获取品类数据失败');
    }).finally(() => {
      setLoading(false);
    });
  };

  /**
   * 组件挂载时获取品类数据
   * 只在组件挂载时执行一次
   */
  useEffect(() => {
    fetchCategoryTree();
  }, []);

  /**
   * 处理选择变化
   * 将选择结果通过onChange回调传递给父组件
   *
   * @param {string | string[]} newValue - 新的选择值
   */
  const handleChange = (newValue: string | string[]) => {
    if (onChange) {
      onChange(newValue);
    }
  };

  return (
    <div className="category-selector">
      {loading && treeData.length === 0 ? (
        // 数据加载中显示加载动画
        <Spin size="small" />
      ) : (
        // 显示树形选择器
        <TreeSelect
          treeData={treeData}
          value={value}
          onChange={handleChange}
          style={style}
          placeholder={placeholder}
          disabled={disabled}
          allowClear
          showSearch
          treeNodeFilterProp="title"
          multiple={multiple}
          treeDefaultExpandAll={treeData.length < 30} // 当节点数较少时默认展开所有节点
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          treeCheckable={multiple} // 多选模式下显示复选框
          showCheckedStrategy={SHOW_CHILD} // 显示策略：显示子节点
          filterTreeNode={(inputValue, node) => {
            // 自定义节点过滤逻辑，支持按标题搜索
            if (node && node.title) {
              return String(node.title).toLowerCase().includes(inputValue.toLowerCase());
            }
            return false;
          }}
        />
      )}
    </div>
  );
};

export default CategorySelector;
