'use client';

import React from 'react';
import { CheckCircle, XCircle, Clock, Send, ArrowLeft, UserPlus, RotateCcw, ArrowRightCircle } from 'lucide-react';
import { formatDateTime } from '@/utils/format';

// ============================================
// 类型定义
// ============================================

interface UserInfo {
  id: string;
  name: string;
  displayName?: string;
  avatar?: string;
}

interface ApprovalAction {
  id: string;
  action: string;
  operator: UserInfo;
  targetUser?: UserInfo;  // ⭐ 转交、退回等操作的目标用户
  comment?: string;
  actionTime: string;
}

interface ApprovalTask {
  id: string;
  assignee?: UserInfo;
  status: string;
  autoApproved: boolean;
  autoApproveReason?: string;
  actions: ApprovalAction[];
  // ⭐ 委托/重新分配信息
  isDelegated?: boolean;
  delegatedFrom?: UserInfo;  // 原审批人
  delegationReason?: string;
}

interface ApprovalHistoryNode {
  nodeId: string;
  nodeName: string;
  nodeType: string;
  status: string;
  startTime: string;
  endTime?: string;
  tasks: ApprovalTask[];
}

interface ApprovalTimelineProps {
  history: ApprovalHistoryNode[];
  locale?: 'zh' | 'en';
}

// ============================================
// 工具函数
// ============================================

const getActionIcon = (action: string) => {
  switch (action) {
    case 'APPROVE':
    case 'ADMIN_APPROVE':
      return <CheckCircle className="w-4 h-4 text-green-600" />;
    case 'REJECT':
    case 'ADMIN_REJECT':
      return <XCircle className="w-4 h-4 text-red-600" />;
    case 'RETURN':
      return <ArrowLeft className="w-4 h-4 text-yellow-600" />;
    case 'WITHDRAW':
    case 'ADMIN_TERMINATE':
      return <RotateCcw className="w-4 h-4 text-orange-600" />;
    case 'FORWARD':
    case 'ADMIN_REASSIGN':
      return <ArrowRightCircle className="w-4 h-4 text-blue-600" />;
    case 'ADD_SIGN':
      return <UserPlus className="w-4 h-4 text-blue-600" />;
    default:
      return <Clock className="w-4 h-4 text-gray-600" />;
  }
};

const getActionText = (action: string, locale: 'zh' | 'en' = 'zh') => {
  const actionMap: Record<string, { zh: string; en: string }> = {
    'SUBMIT': { zh: '提交申请', en: 'Submit' },
    'APPROVE': { zh: '审批通过', en: 'Approved' },
    'REJECT': { zh: '审批拒绝', en: 'Rejected' },
    'RETURN': { zh: '退回', en: 'Returned' },
    'WITHDRAW': { zh: '撤回申请', en: 'Withdrawn' },
    'FORWARD': { zh: '转交审批', en: 'Forwarded' },
    'ADD_SIGN': { zh: '加签', en: 'Add Sign' },
    'AUTO_APPROVE': { zh: '自动通过', en: 'Auto Approved' },
    // 管理员操作
    'ADMIN_APPROVE': { zh: '管理员代审批通过', en: 'Admin Approved' },
    'ADMIN_REJECT': { zh: '管理员代审批驳回', en: 'Admin Rejected' },
    'ADMIN_TERMINATE': { zh: '管理员强制终止', en: 'Admin Terminated' },
    'ADMIN_REASSIGN': { zh: '管理员重新分配', en: 'Admin Reassigned' },
  };
  return actionMap[action]?.[locale] || action;
};

const getNodeStatusColor = (status: string, nodeType?: string) => {
  // 流程操作节点：已完成的流程操作使用灰色（表示流程已结束）
  if (nodeType === 'PROCESS_ACTION' && status === 'COMPLETED') {
    return 'bg-gray-500';
  }
  
  switch (status) {
    case 'COMPLETED':
      return 'bg-green-500';
    case 'ACTIVE':
      return 'bg-blue-500';
    case 'CANCELLED':
      return 'bg-gray-400';
    case 'FAILED':
      return 'bg-red-500';
    default:
      return 'bg-gray-300';
  }
};

const isProcessAction = (nodeType: string) => {
  return nodeType === 'PROCESS_ACTION';
};

// ============================================
// 主组件
// ============================================

export const ApprovalTimeline: React.FC<ApprovalTimelineProps> = ({ 
  history, 
  locale = 'zh' 
}) => {
  // ⭐ 过滤掉技术性的结束节点
  // 结束节点是工作流引擎内部的技术节点，不应展示给用户
  // 参考钉钉/飞书设计：最后一个实际操作就是终点
  // 注意：PROCESS_ACTION 节点（撤回、提交）需要保留，但显示方式特殊处理
  const filteredHistory = history.filter(node => {
    const isEndNode = 
      node.nodeType === 'END_NODE' ||
      node.nodeType === 'PROCESS_END' ||
      node.nodeName === '流程结束' ||
      node.nodeName === '结束';
    
    return !isEndNode;
  });
  
  if (!filteredHistory || filteredHistory.length === 0) {
    return (
      <div className="text-center py-8 text-gray-400">
        <Clock className="w-12 h-12 mx-auto mb-2 opacity-50" />
        <p className="text-sm">{locale === 'zh' ? '暂无审批记录' : 'No approval history'}</p>
      </div>
    );
  }

  return (
    <div className="space-y-6 pb-8">
      {filteredHistory.map((node, nodeIndex) => {
        const isProcessOp = isProcessAction(node.nodeType);
        const isLastNode = nodeIndex === filteredHistory.length - 1;
        
        return (
          <div key={node.nodeId} className="relative">
            {/* ⭐ 节点标题 - 流程操作节点（撤回、提交）不显示节点标题 */}
            {!isProcessOp && (
              <div className="flex items-center gap-3 mb-4">
                <div className={`w-3 h-3 rounded-full ${getNodeStatusColor(node.status, node.nodeType)}`} />
                <h4 className="text-sm font-semibold text-gray-900">
                  {node.nodeName}
                </h4>
                <span className="text-xs text-gray-500">
                  {formatDateTime(new Date(node.startTime), locale)}
                </span>
              </div>
            )}

            {/* 任务列表 */}
            <div className={`${isProcessOp ? '' : 'ml-6'} space-y-4 ${isProcessOp ? '' : 'border-l-2 border-gray-200 pl-6'}`}>
            {node.tasks.map((task, taskIndex) => {
              // ⭐ 检查任务是否包含转交或重新分配操作
              const hasForwardAction = task.actions.some(action => action.action === 'FORWARD');
              const hasReassignAction = task.actions.some(action => action.action === 'ADMIN_REASSIGN');
              const isLastTask = taskIndex === node.tasks.length - 1;
              
              // ⭐ 对于重新分配/转交的任务，需要显示原审批人信息（delegatedFrom）
              // 但如果任务还没有任何操作（actions为空），则显示当前 assignee
              const shouldShowOriginalAssignee = (hasForwardAction || hasReassignAction) && task.actions.length > 0;
              
              return (
                <div key={task.id} className="space-y-2">
                  {/* ⭐ 显示原审批人信息（被转交/重新分配前的审批人） */}
                  {shouldShowOriginalAssignee && task.delegatedFrom && (
                    <div className="flex items-center gap-2">
                      <div className="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center text-xs font-medium text-gray-600">
                        {task.delegatedFrom.displayName?.substring(0, 2) || task.delegatedFrom.name?.substring(0, 2) || '?'}
                      </div>
                      <span className="text-sm font-medium text-gray-500">
                        {task.delegatedFrom.displayName || task.delegatedFrom.name}
                      </span>
                      <span className="text-xs text-gray-400">
                        {locale === 'zh' ? '待审批' : 'Pending'}
                      </span>
                    </div>
                  )}
                  
                  {/* 审批人信息 - 流程操作节点不显示受理人 */}
                  {task.assignee && !isProcessOp && !shouldShowOriginalAssignee && (
                    <div className="flex items-center gap-2">
                      <div className="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-xs font-medium text-blue-600">
                        {task.assignee.displayName?.substring(0, 2) || task.assignee.name?.substring(0, 2) || '?'}
                      </div>
                      <span className="text-sm font-medium text-gray-700">
                        {task.assignee.displayName || task.assignee.name}
                      </span>
                    </div>
                  )}

                {/* 操作记录 */}
                {task.actions.map((action, actionIndex) => {
                  // 判断是否需要显示操作人：
                  // 1. 流程操作节点：始终显示操作人（因为上面没有显示审批人）
                  // 2. 普通节点：操作人与任务审批人不一致时显示
                  // 3. 特殊操作类型（管理员操作、转交等）：始终显示
                  const shouldShowOperator = 
                    action.operator && 
                    (isProcessOp ||
                     action.operator.id !== task.assignee?.id || 
                     ['ADMIN_APPROVE', 'ADMIN_REJECT', 'ADMIN_TERMINATE', 'ADMIN_REASSIGN', 'FORWARD'].includes(action.action));
                  
                  const isLastAction = actionIndex === task.actions.length - 1;
                  const isVeryLastAction = isLastNode && isLastTask && isLastAction;
                  
                  return (
                    <div key={action.id} className="space-y-1">
                      <div className="flex items-center gap-2">
                        {getActionIcon(action.action)}
                        
                        {/* ⭐ 特殊处理：转交操作显示"XXX转交给YYY" */}
                        {action.action === 'FORWARD' && action.targetUser ? (
                          <>
                            <span className="text-xs text-gray-600">
                              {action.operator.displayName || action.operator.name}
                            </span>
                            <span className="text-sm font-medium text-gray-700">
                              {locale === 'zh' ? '转交给' : 'forwarded to'}
                            </span>
                            <span className="text-xs text-gray-600">
                              {action.targetUser.displayName || action.targetUser.name}
                            </span>
                          </>
                        ) : action.action === 'ADMIN_REASSIGN' && action.targetUser ? (
                          /* ⭐ 特殊处理：管理员重新分配显示"管理员XXX重新分配给YYY" */
                          <>
                            <span className="text-sm font-medium text-gray-700">
                              {locale === 'zh' ? '管理员' : 'Admin'}
                            </span>
                            <span className="text-xs text-gray-600">
                              {action.operator.displayName || action.operator.name}
                            </span>
                            <span className="text-sm font-medium text-gray-700">
                              {locale === 'zh' ? '重新分配给' : 'reassigned to'}
                            </span>
                            <span className="text-xs text-gray-600">
                              {action.targetUser.displayName || action.targetUser.name}
                            </span>
                          </>
                        ) : (
                          <>
                            <span className="text-sm font-medium text-gray-700">
                              {getActionText(action.action, locale)}
                            </span>
                            {/* 显示操作人 */}
                            {shouldShowOperator && (
                              <span className="text-xs text-gray-600">
                                {action.operator.displayName || action.operator.name}
                              </span>
                            )}
                          </>
                        )}
                        
                        <span className="text-xs text-gray-500">
                          {formatDateTime(new Date(action.actionTime), locale)}
                        </span>
                      </div>
                      
                      {/* 审批意见 */}
                      {action.comment && (
                        <div className="ml-6 mt-1 p-2 bg-gray-50 rounded text-sm text-gray-600 border-l-2 border-gray-300">
                          💬 {action.comment}
                        </div>
                      )}
                      
                      {/* ⭐ 最后一个操作添加结束分隔线 - 仅当流程真正结束时显示 */}
                      {isVeryLastAction && node.status === 'COMPLETED' && (
                        <div className="mt-4 pt-3 border-t border-gray-200">
                          <div className="flex items-center gap-2 text-xs text-gray-400">
                            <span>流程结束于</span>
                            <span className="font-medium">
                              {formatDateTime(new Date(action.actionTime), locale)}
                            </span>
                          </div>
                        </div>
                      )}
                    </div>
                  );
                })}

                {/* 自动通过提示 */}
                {task.autoApproved && task.autoApproveReason && (
                  <div className="ml-6 text-xs text-gray-500 italic">
                    ℹ️ {task.autoApproveReason}
                  </div>
                )}

                {/* ⭐ 如果任务被转交或重新分配且尚未处理，显示新审批人的待处理状态 */}
                {(hasForwardAction || hasReassignAction) && ['PENDING', 'ASSIGNED'].includes(task.status) && task.assignee && (
                  <div className="ml-6 space-y-1">
                    <div className="flex items-center gap-2">
                      <div className="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-xs font-medium text-blue-600">
                        {task.assignee.displayName?.substring(0, 2) || task.assignee.name?.substring(0, 2) || '?'}
                      </div>
                      <span className="text-sm font-medium text-gray-700">
                        {task.assignee.displayName || task.assignee.name}
                      </span>
                      <div className="flex items-center gap-1 text-xs text-blue-600">
                        <Clock className="w-3 h-3" />
                        <span>{locale === 'zh' ? '审批中' : 'In Progress'}</span>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            );
            })}
          </div>

          {/* 连接线（最后一个节点不显示） */}
          {nodeIndex < filteredHistory.length - 1 && (
            <div className="ml-1.5 h-4 border-l-2 border-gray-200" />
          )}
        </div>
        );
      })}
    </div>
  );
};

export default ApprovalTimeline;