import { message } from 'antd';
import React from 'react';

// 定义同步结果的数据类型
export interface SyncResultData {
  total?: number;
  processed?: number;
  synced?: number;
  created?: number;
  updated?: number;
  errors?: Array<{
    identifier: string;
    error: string;
  }>;
}

// 定义组件的 Props 类型
interface SyncResultMessageProps {
  data?: SyncResultData;
  entityType?: string; // 实体类型，如"订单"、"客户"等
}

// 显示同步结果的函数
export const showSyncResult = (
  data: SyncResultData,
  entityType: string = '订单',
) => {
  const result = data || {};
  const {
    total = 0,
    processed = 0,
    synced = 0,
    created = 0,
    updated = 0,
    errors = [],
  } = result;

  // 构建结果消息
  let resultMessage = `同步完成！共处理 ${processed} 个${entityType}（总数 ${total} 个）：`;
  if (created > 0) resultMessage += ` 新建 ${created} 个`;
  if (updated > 0) resultMessage += ` 更新 ${updated} 个`;
  if (synced > 0) resultMessage += ` 同步成功 ${synced} 个`;
  if (errors.length > 0) resultMessage += ` 失败 ${errors.length} 个`;

  // 根据是否有错误显示不同的消息类型
  if (errors.length > 0) {
    // 如果有错误，显示警告消息
    message.warning({
      content: (
        <div>
          <div>{resultMessage}</div>
          <div style={{ marginTop: 8, fontSize: 12, color: '#faad14' }}>
            失败详情：
            {errors
              .slice(0, 3)
              .map((err: any) => `${err.identifier}: ${err.error}`)
              .join(', ')}
            {errors.length > 3 && ` 等 ${errors.length - 3} 个错误...`}
          </div>
        </div>
      ),
      duration: 8,
      key: 'sync-result',
    });
  } else {
    // 完全成功
    message.success({
      content: resultMessage,
      duration: 4,
      key: 'sync-result',
    });
  }
};

// 同步结果显示组件
const SyncResultMessage: React.FC<SyncResultMessageProps> = ({
  data,
  entityType = '订单',
}) => {
  // 当组件挂载时显示结果
  React.useEffect(() => {
    if (data) {
      showSyncResult(data, entityType);
    }
  }, [data, entityType]);

  // 这个组件不渲染任何内容，只用于显示消息
  return null;
};

export default SyncResultMessage;