/**
 * 飞书风格流程预览组件 - 时间线样式
 * 参考飞书/钉钉审批流程展示风格
 * 支持设计时预览和运行时状态展示
 */

'use client';

import React from 'react';
import {
  User,
  UserCheck,
  Users,
  Check,
  Clock,
} from 'lucide-react';
import { ProcessModel, ProcessNode, ProcessNodeType } from './types';
import { useTranslation } from '@/hooks/useTranslation';

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

interface NodeStatus {
  status: 'pending' | 'active' | 'completed' | 'rejected' | 'returned' | 'cancelled' | 'terminated' | 'failed' | 'skipped';
  completedAt?: string;
  operator?: string;
  comment?: string;
  action?: string;              // ⭐ 新增：操作类型（ADMIN_REASSIGN、ADMIN_APPROVE等）
  isAdminAction?: boolean;     // ⭐ 新增：是否为管理员操作
  targetUser?: string;          // ⭐ 新增：目标用户（代审批、重新分配等）
  autoApproveReason?: string;   // ⭐ 新增：自动审批原因
  errorDetails?: string;        // ⭐ 新增：错误详情（FAILED状态）
  
  // ⭐⭐ 已完成的操作记录（零技术债重构 - 2026-01-08，重命名自 allActions）
  completedActions?: Array<{
    id: string;
    action: string;
    operator: {
      id: string;
      name: string;
      displayName?: string;
      avatar?: string;
    };
    targetUser?: {
      id: string;
      name: string;
      displayName?: string;
      avatar?: string;
    };
    comment?: string;
    actionTime: string;
  }>;
  
  // ⭐⭐⭐ 待审批的任务（零技术债重构 - 2026-01-08 新增）
  pendingApprovals?: Array<{
    taskId: string;
    assignee: {
      id: string;
      name: string;
      displayName?: string;
      avatar?: string;
    };
    assignedAt: string;
  }>;
}

interface LarkProcessPreviewProps {
  /** 流程模型 */
  model: ProcessModel;
  /** 节点状态映射（运行时使用） */
  nodeStatuses?: Record<string, NodeStatus>;
  /** 类名 */
  className?: string;
  /** 是否显示发起人节点 */
  showInitiator?: boolean;
  /** 发起人名称 */
  initiatorName?: string;
  /** 是否显示结束节点 */
  showEndNode?: boolean;
  /** 是否为紧凑模式 */
  compact?: boolean;
}

// ============================================
// 辅助函数
// ============================================

function getApproverTypeLabel(approverType?: string, t?: any): string {
  if (!approverType) return t?.approvals?.larkPreview?.notSet || 'Not set';
  
  const config = t?.approvals?.approverTypesConfig?.[approverType];
  if (config?.label) {
    return config.label;
  }
  
  return approverType;
}

function getNodeTypeLabel(type: ProcessNodeType, t?: any): string {
  const typeKey = type.toLowerCase().replace(/_/g, '');
  const label = t?.approvals?.larkPreview?.nodeTypeLabels?.[typeKey];
  return label || type;
}

// ⭐⭐ 新增：格式化操作人字符串（多操作支持 - 2026-01-07）
/**
 * 根据操作类型格式化操作人显示字符串
 * @param action 操作对象
 * @param t 翻译对象
 * @returns 格式化后的操作人字符串
 */
function formatOperatorString(action: any, t: any): string {
  const operatorName = action.operator.displayName || action.operator.name;
  const targetName = action.targetUser?.displayName || action.targetUser?.name;
  
  switch (action.action) {
    case 'FORWARD':
      return `${operatorName} 转交给 ${targetName || '未知'}`;
    case 'DELEGATE':
      return `${operatorName} 委托给 ${targetName || '未知'}`;
    case 'ADMIN_REASSIGN':
      return `管理员 ${operatorName} 重新分配给 ${targetName || '未知'}`;
    case 'APPROVE':
      return `${operatorName} 审批通过`;
    case 'REJECT':
      return `${operatorName} 审批拒绝`;
    case 'RETURN':
      return `${operatorName} 退回`;
    case 'APPROVER_WITHDRAW':
      return `${operatorName} 撤销审批`;
    case 'ADMIN_APPROVE':
      // ⭐ 零技术债修复（2026-01-07）：显示"代xxx"
      return targetName 
        ? `管理员 ${operatorName} 代 ${targetName} 审批通过`
        : `管理员 ${operatorName} 审批通过`;
    case 'ADMIN_REJECT':
      // ⭐ 零技术债修复（2026-01-07）：显示"代xxx"
      return targetName 
        ? `管理员 ${operatorName} 代 ${targetName} 审批拒绝`
        : `管理员 ${operatorName} 审批拒绝`;
    case 'ADMIN_TERMINATE':
      return `管理员 ${operatorName} 强制终止流程`;
    case 'AUTO_APPROVE':
      return '系统自动通过';
    case 'AUTO_REJECT':
      return '系统自动拒绝';
    case 'ESCALATE':
      return `${operatorName} 升级至 ${targetName || '未知'}`;
    case 'ADD_SIGN':
      return `${operatorName} 加签 ${targetName || '未知'}`;
    case 'SUBMIT':
      return `${operatorName} 提交申请`;
    case 'EXECUTE':
      return '系统执行任务';
    default:
      return operatorName;
  }
}

/**
 * 获取意见/原因前缀
 * @param action 操作类型
 * @param t 翻译对象
 * @returns 前缀字符串
 */
function getCommentPrefix(action: string, t: any): string {
  const locale = t?.locale || 'zh';
  const colon = locale === 'zh' ? '：' : ': ';  // 中文用中文冒号，英文用英文冒号+空格
  
  const prefixMap: Record<string, string> = {
    'SUBMIT': t?.approvals?.commentPrefixes?.submitComment || '提交备注',
    'APPROVE': t?.approvals?.commentPrefixes?.approveComment || '审批意见',
    'REJECT': t?.approvals?.commentPrefixes?.rejectReason || '拒绝原因',
    'RETURN': t?.approvals?.commentPrefixes?.returnReason || '退回原因',
    'FORWARD': t?.approvals?.commentPrefixes?.forwardReason || '转交原因',
    'DELEGATE': t?.approvals?.commentPrefixes?.delegateReason || '委托原因',
    'APPROVER_WITHDRAW': t?.approvals?.commentPrefixes?.approverWithdrawReason || '撤销原因',
    'ADD_SIGN': t?.approvals?.commentPrefixes?.addSignReason || '加签原因',
    'ADMIN_REASSIGN': t?.approvals?.commentPrefixes?.reassignReason || '重新分配原因',
    'ADMIN_APPROVE': t?.approvals?.commentPrefixes?.adminApproveReason || '代审批原因',
    'ADMIN_REJECT': t?.approvals?.commentPrefixes?.adminRejectReason || '代审批拒绝原因',
    'ESCALATE': t?.approvals?.commentPrefixes?.escalateReason || '升级原因',
    'EXECUTE': t?.approvals?.commentPrefixes?.executeResult || '执行结果',
  };
  
  const prefix = prefixMap[action] || (t?.approvals?.commentPrefixes?.comment || '备注');
  return `${prefix}${colon}`;
}

// ============================================
// 管理员操作徽章
// ============================================

interface AdminActionBadgeProps {
  type: 'approve' | 'reject' | 'reassign' | 'terminate';
}

function AdminActionBadge({ type }: AdminActionBadgeProps) {
  const { t } = useTranslation();
  const badgeClasses = 'inline-flex items-center gap-1 px-2 py-0.5 text-xs font-semibold rounded-full border';
  
  if (type === 'terminate') {
    // 强制终止 - 红色 ⭐ 业界标准：红色警告（钉钉/飞书）
    return (
      <span className={`${badgeClasses} bg-red-50 text-red-700 border-red-300`}>
        <span>⛔</span>
        <span>{t.approvals.adminBadges.adminTerminate}</span>
      </span>
    );
  }
  
  // 其他管理员操作 - 橙色
  return (
    <span className={`${badgeClasses} bg-orange-50 text-orange-700 border-orange-300`}>
      <span>🔧</span>
      <span>{t.approvals.adminBadges.adminAction}</span>
    </span>
  );
}

// ============================================
// 警告提示组件
// ============================================

interface AdminWarningProps {
  type: 'default' | 'terminate';
  message: string;
}

function AdminWarning({ type, message }: AdminWarningProps) {
  const { t } = useTranslation();
  
  if (type === 'terminate') {
    // 强制终止警告 - 红色
    return (
      <div className="mt-2 px-3 py-2 bg-red-50 border-l-4 border-red-500 rounded-r text-sm">
        <div className="flex items-start gap-2">
          <span className="text-red-600 font-bold flex-shrink-0">⚠️</span>
          <span className="text-red-800 font-semibold">{message || t.approvals.warnings.adminTerminateWarning}</span>
        </div>
      </div>
    );
  }
  
  // 普通管理员操作警告 - 橙色
  return (
    <div className="mt-2 px-3 py-2 bg-orange-50 border-l-4 border-orange-500 rounded-r text-sm">
      <div className="flex items-start gap-2">
        <span className="text-orange-600 font-bold flex-shrink-0">⚠️</span>
        <span className="text-orange-800">{message || t.approvals.warnings.adminOperationWarning}</span>
      </div>
    </div>
  );
}

// ============================================
// 系统错误提示组件
// ============================================

interface SystemErrorAlertProps {
  message: string;
  details?: string;
}

function SystemErrorAlert({ message, details }: SystemErrorAlertProps) {
  const { t } = useTranslation();
  const [showDetails, setShowDetails] = React.useState(false);
  
  return (
    <div className="mt-2 px-3 py-2 bg-red-50 border-l-4 border-red-500 rounded-r text-sm">
      <div className="flex items-start gap-2">
        <span className="text-red-600 font-bold flex-shrink-0">⚠️</span>
        <div className="flex-1">
          <span className="text-red-800 font-semibold">{message || t.approvals.warnings.systemErrorAlert}</span>
          {details && (
            <>
              <button
                onClick={() => setShowDetails(!showDetails)}
                className="ml-2 text-red-600 underline hover:text-red-700"
              >
                {showDetails ? t.approvals.warnings.hideDetails : t.approvals.warnings.showDetails}
                {t.approvals.warnings.systemErrorDetails}
              </button>
              {showDetails && (
                <pre className="mt-2 p-2 bg-red-100 rounded text-xs font-mono text-red-900 overflow-x-auto">
                  {details}
                </pre>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// ============================================
// 自动审批说明组件
// ============================================

interface AutoApprovalInfoProps {
  reason: string;
}

function AutoApprovalInfo({ reason }: AutoApprovalInfoProps) {
  const { t } = useTranslation();
  
  return (
    <div className="mt-2 px-3 py-2 bg-blue-50 border-l-4 border-blue-400 rounded-r text-sm">
      <div className="flex items-start gap-2">
        <span className="text-blue-600 flex-shrink-0">ℹ️</span>
        <div className="flex-1">
          <span className="text-blue-800 font-medium">{t.approvals.warnings.autoApprovalTitle}</span>
          <span className="text-blue-700 ml-1">{reason}</span>
        </div>
      </div>
    </div>
  );
}

// ============================================
// 时间线节点图标
// ============================================

interface TimelineIconProps {
  status: 'pending' | 'active' | 'completed' | 'rejected' | 'returned' | 'cancelled' | 'terminated' | 'failed' | 'skipped';
  type: ProcessNodeType;
  isAdminAction?: boolean;  // ⭐ 新增：是否为管理员操作
  isAutoAction?: boolean;   // ⭐ 新增：是否为自动操作
}

function TimelineIcon({ status, type, isAdminAction = false, isAutoAction = false }: TimelineIconProps) {
  const baseClasses = 'w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0';
  
  // 已通过
  if (status === 'completed') {
    const bgColor = isAdminAction ? 'bg-orange-500' : isAutoAction ? 'bg-blue-400' : 'bg-[#00b96b]';
    const icon = isAutoAction ? '⚙' : '✓';
    return (
      <div className={`${baseClasses} ${bgColor} shadow-sm`}>
        {isAutoAction ? (
          <span className="text-white text-base">⚙</span>
        ) : (
          <Check className="w-4 h-4 text-white stroke-[2.5]" />
        )}
      </div>
    );
  }
  
  // 已拒绝
  if (status === 'rejected') {
    const bgColor = isAdminAction ? 'bg-orange-600' : isAutoAction ? 'bg-red-400' : 'bg-[#f5222d]';
    return (
      <div className={`${baseClasses} ${bgColor} shadow-sm`}>
        <span className="text-white text-sm font-semibold">✕</span>
      </div>
    );
  }
  
  // 进行中
  if (status === 'active') {
    return (
      <div className={`${baseClasses} bg-[#1890ff] shadow-sm animate-pulse`}>
        <Clock className="w-4 h-4 text-white stroke-[2.5]" />
      </div>
    );
  }
  
  // 已退回
  if (status === 'returned') {
    return (
      <div className={`${baseClasses} bg-[#faad14] shadow-sm`}>
        <span className="text-white text-sm font-semibold">↩</span>
      </div>
    );
  }
  
  // 已取消（用户撤回）
  if (status === 'cancelled') {
    return (
      <div className={`${baseClasses} bg-gray-400 shadow-sm`}>
        <span className="text-white text-sm font-semibold">⊘</span>
      </div>
    );
  }
  
  // ⭐ 已终止（管理员强制终止）
  if (status === 'terminated') {
    return (
      <div className={`${baseClasses} bg-white shadow-md border-2 border-red-600`}>
        <span className="text-red-600 text-xl">⛔</span>
      </div>
    );
  }
  
  // ⭐ 系统失败
  if (status === 'failed') {
    return (
      <div className={`${baseClasses} bg-[#dc2626] shadow-sm`}>
        <span className="text-white text-base">💥</span>
      </div>
    );
  }
  
  // 已跳过（流程终止未执行）
  if (status === 'skipped') {
    return (
      <div className={`${baseClasses} bg-[#bfbfbf]`}>
        <span className="text-white text-sm">—</span>
      </div>
    );
  }
  
  // 待执行（pending，默认）
  const iconMap: Record<string, React.ReactNode> = {
    USER_TASK: <UserCheck className="w-4 h-4 text-gray-500" />,
    CC: <Users className="w-4 h-4 text-gray-500" />,
    START: <User className="w-4 h-4 text-gray-500" />,
    END: <Check className="w-4 h-4 text-gray-500" />,
  };
  
  return (
    <div className={`${baseClasses} bg-gray-50 border-2 border-[#d9d9d9]`}>
      {iconMap[type] || <UserCheck className="w-4 h-4 text-gray-500" />}
    </div>
  );
}

// ============================================
// 时间线节点
// ============================================

interface TimelineNodeProps {
  node: ProcessNode;
  status: NodeStatus;
  isLast: boolean;
  t: any;
  compact?: boolean;
}

function TimelineNode({ node, status, isLast, t, compact }: TimelineNodeProps) {
  const { locale } = useTranslation();
  const typeLabel = getNodeTypeLabel(node.type, t);
  const configLabel = getApproverTypeLabel(node.config?.approverType, t);
  
  // ⭐ 优先显示 approverDetails（实际审批人），如果没有则显示 approverType（审批人类型）
  const approverDetails = node.config?.approverDetails;
  const hasApprovers = approverDetails && approverDetails.length > 0;
  
  // 显示文本：如果有实际审批人，显示姓名列表；否则显示审批人类型
  const displayText = hasApprovers
    ? approverDetails.map((a: any) => a.name).join('、')
    : configLabel;
  
  // 确定连接线样式：未执行节点（pending/skipped）使用虚线
  const lineStyle = (status.status === 'pending' || status.status === 'skipped')
    ? 'border-dashed'
    : '';
  
  // 未执行节点的 tooltip 文本
  const tooltipText = status.status === 'skipped' 
    ? (status.operator 
        ? '流程已终止，但已有部分操作记录'  // ⭐ 有操作记录时的提示
        : (status.comment || t.approvals.timeline?.skippedTooltip || '流程已终止，此节点未执行')
      )
    : status.status === 'cancelled'
    ? (status.operator 
        ? '流程已撤回，但已有部分操作记录'  // ⭐ 有操作记录时的提示
        : '流程已撤回，此节点未执行'
      )
    : status.status === 'pending'
    ? (t.approvals.timeline?.pendingTooltip || '待执行')
    : '';
  
  // ⭐ 判断是否为自动操作
  const isAutoAction = !!status.autoApproveReason;
  
  return (
    <div className="flex gap-4" title={tooltipText}>
      {/* 左侧时间线 */}
      <div className="flex flex-col items-center">
        <TimelineIcon 
          status={status.status} 
          type={node.type}
          isAdminAction={status.isAdminAction}
          isAutoAction={isAutoAction}
        />
        {!isLast && (
          <div className={`w-0.5 border-l-2 border-gray-200 mt-2 ${lineStyle} ${compact ? 'h-8' : 'h-12'}`} />
        )}
      </div>
      
      {/* 右侧内容 */}
      <div className={`flex-1 ${compact ? 'pb-4' : 'pb-6'}`}>
        {/* 节点名称 + 徽章 */}
        <div className="flex items-center gap-2 flex-wrap">
          <h4 className={`text-sm font-medium ${status.status === 'pending' || status.status === 'skipped' ? 'text-gray-400' : 'text-gray-900'}`}>
            {node.name || typeLabel}
          </h4>
          
          {/* 状态徽章 */}
          {status.status === 'active' && (
            <span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">
              {t.approvals.larkPreview.currentNode}
            </span>
          )}
          {status.status === 'completed' && !status.isAdminAction && !isAutoAction && (
            <span className="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded-full">
              {t.approvals.larkPreview.completed}
            </span>
          )}
          {status.status === 'completed' && isAutoAction && (
            <span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full flex items-center gap-1">
              <span>⚙</span>
              <span>{t.approvals.actions.AUTO_APPROVE}</span>
            </span>
          )}
          {status.status === 'rejected' && !status.isAdminAction && (
            <span className="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded-full">
              {t.approvals.larkPreview.rejected}
            </span>
          )}
          {status.status === 'skipped' && (
            <span className="px-2 py-0.5 text-xs bg-gray-100 text-gray-500 rounded-full">
              {t.approvals.timeline?.skipped || '已跳过'}
            </span>
          )}
          {status.status === 'cancelled' && (
            <span className="px-2 py-0.5 text-xs bg-gray-100 text-gray-500 rounded-full">
              {t.approvals.timeline?.cancelled || '已取消'}
            </span>
          )}
          {status.status === 'returned' && (
            <span className="px-2 py-0.5 text-xs bg-orange-100 text-orange-700 rounded-full">
              {t.approvals.timeline?.returned || '已退回'}
            </span>
          )}
          
          {/* ⭐ 管理员操作徽章 */}
          {status.isAdminAction && (status.status === 'completed' || status.status === 'rejected' || status.status === 'active') && (
            <AdminActionBadge 
              type={status.status === 'rejected' ? 'reject' : status.status === 'active' ? 'reassign' : 'approve'} 
            />
          )}
        </div>
        
        {/* ⭐ 审批人信息：只在没有操作记录时显示（避免与operator重复） */}
        {!status.operator && (
          <p className={`text-xs mt-1 flex items-center gap-1 ${status.status === 'pending' || status.status === 'skipped' ? 'text-gray-400' : 'text-gray-500'}`}>
            <span className={`w-1.5 h-1.5 rounded-full ${status.status === 'pending' || status.status === 'skipped' ? 'bg-gray-300' : 'bg-gray-400'}`}></span>
            {displayText}
            {/* 如果有多个审批人，显示审批模式提示 */}
            {hasApprovers && approverDetails.length > 1 && node.config?.approvalMode === 'AND' && (
              <span className="ml-1 text-xs text-gray-400">
                ({t.approvals.larkPreview.allRequired})
              </span>
            )}
            {hasApprovers && approverDetails.length > 1 && node.config?.approvalMode === 'OR' && (
              <span className="ml-1 text-xs text-gray-400">
                ({t.approvals.larkPreview.anyOne})
              </span>
            )}
          </p>
        )}
        
        {/* ⭐⭐ 操作历史（零技术债重构 - 2026-01-08）*/}
        {status.operator && (() => {
          return (
          <div className="mt-2">
            {/* ⭐⭐ 第1部分：显示已完成的操作 */}
            {status.completedActions && status.completedActions.length > 0 ? (
              // 已完成的操作列表
              <div className="space-y-3">
                {status.completedActions.map((action, index) => {
                  return (
                    <div key={action.id || index}>
                      {/* 操作人 */}
                      <div className="text-sm flex items-center gap-2">
                        {/* ⭐ 管理员操作：橙色 */}
                        {action.action.startsWith('ADMIN_') ? (
                          <span className="text-orange-600 font-medium">
                            {formatOperatorString(action, t)}
                          </span>
                        ) : (
                          /* ⭐ 普通操作（已完成）：灰色 */
                          <span className="text-gray-600">
                            {formatOperatorString(action, t)}
                          </span>
                        )}
                        {/* 时间戳 */}
                        <span className="text-gray-400 text-xs">
                          {new Date(action.actionTime).toLocaleString(locale === 'zh' ? 'zh-CN' : 'en-US')}
                        </span>
                      </div>
                      
                      {/* 意见/原因 */}
                      {action.comment && (
                        <div className="text-xs text-gray-600 mt-1 pl-2 border-l-2 border-gray-200">
                          {getCommentPrefix(action.action, t)}{action.comment}
                        </div>
                      )}
                      
                      {/* 分隔线（非最后一个操作） */}
                      {index < status.completedActions!.length - 1 && (
                        <div className="my-2 border-t border-dashed border-gray-200" />
                      )}
                    </div>
                  );
                })}
              </div>
            ) : null}
            
            {/* ⭐⭐ 第2部分：显示待审批的任务（会签场景） */}
            {status.pendingApprovals && status.pendingApprovals.length > 0 && (
              <div className="mt-3">
                {/* 如果有已完成操作但没有分隔线，添加分隔线 */}
                {status.completedActions && status.completedActions.length > 0 && (
                  <div className="mb-3 border-t border-dashed border-gray-200" />
                )}
                
                <div className="space-y-2">
                  {status.pendingApprovals.map((task, index) => (
                    <div key={task.taskId || index} className="text-sm flex items-center gap-2">
                      <span className="text-blue-600 font-medium">
                        {task.assignee.displayName || task.assignee.name}
                      </span>
                      <span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">
                        {t.approvals.timeline?.currentPending || '当前待审批'}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            )}
            
            {/* ⭐⭐ 第3部分：单操作场景（无 completedActions 和 pendingApprovals） */}
            {!status.completedActions && !status.pendingApprovals && (
              <>
                <div className="text-sm">
                  {/* ⭐ 管理员操作（operator 已经包含完整格式："管理员 XXX 代/重新分配给 YYY"） */}
                  {status.isAdminAction && (
                    <span className="text-orange-600 font-medium">{status.operator}</span>
                  )}
                  {/* ⭐ ACTIVE 状态：使用蓝色 */}
                  {!status.isAdminAction && status.status === 'active' && (
                    <span className="text-blue-600 font-medium">{status.operator}</span>
                  )}
                  {/* 普通操作（非ACTIVE、非管理员） */}
                  {!status.isAdminAction && status.status !== 'active' && (
                    <span className="text-gray-600">{status.operator}</span>
                  )}
                  {/* 时间戳 */}
                  {status.completedAt && (
                    <span className="text-gray-400 text-xs ml-2">
                      {new Date(status.completedAt).toLocaleString(locale === 'zh' ? 'zh-CN' : 'en-US')}
                    </span>
                  )}
                </div>
                
                {/* ⭐ 管理员操作的comment显示（ADMIN_REASSIGN等） */}
                {status.comment && status.isAdminAction && status.action && (
                  <div className="text-xs text-gray-600 mt-1 pl-2 border-l-2 border-gray-200">
                    {status.action === 'ADMIN_REASSIGN' && <span className="font-medium">重新分配原因：</span>}
                    {status.action === 'ADMIN_APPROVE' && <span className="font-medium">代审批原因：</span>}
                    {status.action === 'ADMIN_REJECT' && <span className="font-medium text-red-600">代审批拒绝原因：</span>}
                    {status.action === 'ADMIN_TERMINATE' && <span className="font-medium text-red-600">终止原因：</span>}
                    {status.comment}
                  </div>
                )}
              </>
            )}
          </div>
          );
        })()}
        
        {/* ⭐ 管理员操作警告 */}
        {/* ⭐⭐ 【零技术债】只在已完成或已拒绝的节点显示警告，避免在SKIPPED节点显示 */}
        {status.isAdminAction && !status.targetUser && status.comment && 
         (status.status === 'completed' || status.status === 'rejected') && (
          <AdminWarning 
            type="default"
            message={status.status === 'rejected' 
              ? t.approvals.warnings.adminRejectWarning.replace('{reason}', status.comment)
              : t.approvals.warnings.adminApproveWarning.replace('{reason}', status.comment)
            }
          />
        )}
        
        {/* ⭐ 管理员重新分配警告（ACTIVE状态） */}
        {status.isAdminAction && status.action === 'ADMIN_REASSIGN' && status.status === 'active' && (
          <AdminWarning 
            type="default"
            message={t.approvals.warnings?.adminReassignWarning || '⚠️ 管理员介入：审批人已被重新分配'}
          />
        )}
        
        {/* ⭐ 自动审批说明 */}
        {isAutoAction && status.autoApproveReason && (
          <AutoApprovalInfo reason={status.autoApproveReason} />
        )}
        
        {/* 普通评论（非管理员、非自动）⭐ 流程控制操作的原因显示 - 仅单操作场景 */}
        {status.comment && !status.isAdminAction && !isAutoAction && status.status === 'active' && status.action && !status.completedActions && (
          <div className="text-xs text-gray-600 mt-1 pl-2 border-l-2 border-gray-200">
            {/* ⭐ 流程控制操作的前缀标签（中文标点） */}
            {status.action === 'FORWARD' && <span className="font-medium">转交原因：</span>}
            {status.action === 'ADD_SIGN' && <span className="font-medium">加签原因：</span>}
            {status.action === 'DELEGATE' && <span className="font-medium">委托原因：</span>}
            {status.action === 'ESCALATE' && <span className="font-medium">升级原因：</span>}
            {status.comment}
          </div>
        )}
        
        {/* 普通评论（非管理员、非自动）⭐ 已完成/拒绝/退回节点的意见显示 - 仅单操作场景 */}
        {status.comment && !status.isAdminAction && !isAutoAction && status.status !== 'active' && !status.completedActions && (
          <div className="text-xs text-gray-600 mt-1 pl-2 border-l-2 border-gray-200">
            {/* ⭐ 根据操作类型显示不同的前缀标签（中文标点） */}
            {status.action === 'APPROVE' && <span className="font-medium">审批意见：</span>}
            {status.action === 'SUBMIT' && <span className="font-medium">提交说明：</span>}
            {status.action === 'REJECT' && <span className="font-medium text-red-600">拒绝原因：</span>}
            {status.action === 'RETURN' && <span className="font-medium text-orange-600">退回原因：</span>}
            {status.action === 'APPROVER_WITHDRAW' && <span className="font-medium text-orange-600">撤销原因：</span>}
            {status.action === 'EXECUTE' && <span className="font-medium text-blue-600">执行结果：</span>}
            {status.action === 'FORWARD' && <span className="font-medium text-blue-600">转交原因：</span>}
            {status.action === 'DELEGATE' && <span className="font-medium text-blue-600">委托原因：</span>}
            {status.action === 'ADD_SIGN' && <span className="font-medium text-blue-600">加签原因：</span>}
            {/* 兜底：如果没有 action 或未知 action，根据 status 显示 */}
            {!status.action && status.status === 'completed' && <span className="font-medium">审批意见：</span>}
            {!status.action && status.status === 'rejected' && <span className="font-medium text-red-600">拒绝原因：</span>}
            {!status.action && status.status === 'returned' && <span className="font-medium text-orange-600">退回原因：</span>}
            {status.comment}
          </div>
        )}
      </div>
    </div>
  );
}

// ============================================
// 发起人节点
// ============================================

interface InitiatorNodeProps {
  name: string;
  t: any;
  compact?: boolean;
  status?: NodeStatus;  // ⭐ 新增：支持状态
}

function InitiatorNode({ name, t, compact, status }: InitiatorNodeProps) {
  const { locale } = useTranslation();
  // 默认状态为 pending
  const nodeStatus = status || { status: 'pending' as const };
  
  
  return (
    <div className="flex gap-4">
      <div className="flex flex-col items-center">
        <TimelineIcon status={nodeStatus.status} type="START" />
        <div className={`w-0.5 bg-gray-200 mt-2 ${compact ? 'h-8' : 'h-12'}`} />
      </div>
      <div className={`flex-1 ${compact ? 'pb-4' : 'pb-6'}`}>
        <div className="flex items-center gap-2">
          <h4 className="text-sm font-medium text-gray-900">
            {t.approvals.larkPreview.initiator}
          </h4>
          {nodeStatus.status === 'completed' && (
            <span className="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded-full">
              {t.approvals.larkPreview.completed}
            </span>
          )}
        </div>
        
        {/* ⭐ 只在没有操作记录时显示发起人姓名（避免重复） */}
        {!nodeStatus.operator && (
          <p className="text-xs text-gray-500 mt-1 flex items-center gap-1">
            <span className="w-1.5 h-1.5 rounded-full bg-gray-300"></span>
            {name}
          </p>
        )}
        
        {/* ⭐ 操作记录：显示"张员工 提交申请" */}
        {nodeStatus.operator && nodeStatus.completedAt && (
          <div className="mt-2 text-sm">
            <span className="text-gray-600">{nodeStatus.operator}</span>
            <span className="text-gray-400 text-xs ml-2">
              {new Date(nodeStatus.completedAt).toLocaleString(locale === 'zh' ? 'zh-CN' : 'en-US')}
            </span>
          </div>
        )}
      </div>
    </div>
  );
}

// ============================================
// 结束节点
// ============================================

interface EndNodeProps {
  t: any;
  status?: NodeStatus;  // ⭐ 新增：支持状态
}

function EndNode({ t, status }: EndNodeProps) {
  const { locale } = useTranslation();
  // 默认状态为 pending
  const nodeStatus = status || { status: 'pending' as const };
  
  return (
    <div className="flex gap-4">
      <div className="flex flex-col items-center">
        <TimelineIcon 
          status={nodeStatus.status} 
          type="END"
          isAdminAction={nodeStatus.isAdminAction}
        />
      </div>
      <div className="flex-1">
        <div className="flex items-center gap-2 flex-wrap">
          <h4 className={`text-sm font-medium ${
            nodeStatus.status === 'completed' ? 'text-gray-900' : 
            nodeStatus.status === 'rejected' ? 'text-red-600' : 
            nodeStatus.status === 'terminated' ? 'text-red-700' :  // ⭐ 业界标准：红色（强制终止是警告操作）
            nodeStatus.status === 'failed' ? 'text-red-700' :
            nodeStatus.status === 'cancelled' ? 'text-gray-600' :
            'text-gray-500'
          }`}>
            {t.approvals.larkPreview.processEnd}
          </h4>
          
          {/* 已通过 */}
          {nodeStatus.status === 'completed' && (
            <span className="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded-full">
              {t.approvals.timeline?.processCompleted || t.approvals.larkPreview.completed}
            </span>
          )}
          
          {/* 已拒绝 */}
          {nodeStatus.status === 'rejected' && (
            <span className="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded-full">
              {t.approvals.timeline?.processRejected || t.approvals.larkPreview.rejected}
            </span>
          )}
          
          {/* 已撤回 */}
          {nodeStatus.status === 'cancelled' && (
            <span className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded-full">
              {t.approvals.timeline?.processWithdrawn || '已撤回'}
            </span>
          )}
          
          {/* ⭐ 已终止（管理员强制终止） */}
          {nodeStatus.status === 'terminated' && (
            <>
              <AdminActionBadge type="terminate" />
            </>
          )}
          
          {/* ⭐ 系统失败 */}
          {nodeStatus.status === 'failed' && (
            <span className="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded-full border border-red-300">
              💥 {t.approvals.timeline.processFailed}
            </span>
          )}
          
          {/* 已跳过 */}
          {nodeStatus.status === 'skipped' && (
            <span className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded-full">
              {t.approvals.timeline?.processTerminated || '已终止'}
            </span>
          )}
        </div>
        
        {/* ⭐ 显示操作人（撤回、管理员强制终止、系统失败时）*/}
        {/* 注意：REJECTED 状态不显示 operator，因为拒绝信息已在中间节点显示（方案A） */}
        {nodeStatus.operator && (
          nodeStatus.status === 'cancelled' || 
          nodeStatus.status === 'terminated' || 
          nodeStatus.status === 'failed'
        ) && (
          <p className="text-xs text-gray-700 mt-1 font-medium">
            {nodeStatus.operator}
          </p>
        )}
        
        {/* ⭐ 显示评论文本（撤回原因、终止原因、错误信息等） */}
        {/* 注意：APPROVED/REJECTED 状态不显示 comment，因为详情已在中间节点显示（方案A） */}
        {nodeStatus.comment && (
          <p className="text-xs text-gray-600 mt-1">
            {/* ⭐ 根据状态添加前缀标签（国际化） */}
            {nodeStatus.status === 'cancelled' && <span className="font-medium">{t.approvals.warnings.withdrawReasonLabel}</span>}
            {nodeStatus.status === 'terminated' && <span className="font-medium">{t.approvals.warnings.terminateReasonLabel}</span>}
            {nodeStatus.status === 'failed' && <span className="font-medium">{t.approvals.warnings.errorMessageLabel}</span>}
            {nodeStatus.comment}
          </p>
        )}
        
        {/* ⭐ 管理员强制终止警告 */}
        {nodeStatus.status === 'terminated' && nodeStatus.isAdminAction && (
          <AdminWarning 
            type="terminate"
            message={t.approvals.warnings.adminTerminateWarning}
          />
        )}
        
        {/* ⭐ 系统错误提示 */}
        {nodeStatus.status === 'failed' && (
          <SystemErrorAlert
            message={t.approvals.warnings.systemErrorAlert}
            details={nodeStatus.errorDetails}
          />
        )}
        
        {/* 显示完成时间 */}
        {nodeStatus.completedAt && (
          <p className="text-xs text-gray-400 mt-1">
            {new Date(nodeStatus.completedAt).toLocaleString(locale === 'zh' ? 'zh-CN' : 'en-US')}
          </p>
        )}
      </div>
    </div>
  );
}

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

export function LarkProcessPreview({
  model,
  nodeStatuses = {},
  className = '',
  showInitiator = true,
  initiatorName,
  showEndNode = true,
  compact = false,
}: LarkProcessPreviewProps) {
  const { t, locale } = useTranslation();
  
  // 过滤出工作节点（排除 START 和 END）
  const workNodes = model.nodes.filter(
    (n) => n.type !== 'START' && n.type !== 'END'
  );

  // 如果没有工作节点
  if (workNodes.length === 0) {
    return (
      <div className={`flex flex-col items-center justify-center py-12 ${className}`}>
        <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
          <UserCheck className="w-8 h-8 text-gray-300" />
        </div>
        <div className="text-gray-400 text-sm">
          {t.approvals.larkPreview.noApprovalNodes}
        </div>
        <div className="text-gray-300 text-xs mt-1">
          {t.approvals.larkPreview.directSubmit}
        </div>
      </div>
    );
  }

  return (
    <div className={`${className}`}>
      {/* 发起人节点 */}
      {showInitiator && (() => {
        // ⭐ 查找 START 节点的状态
        const startNode = model.nodes.find(n => n.type === 'START');
        const startStatus = startNode ? nodeStatuses[startNode.id] : undefined;
        
        return (
          <InitiatorNode 
            name={initiatorName || t.approvals.larkPreview.submitter} 
            t={t}
            compact={compact}
            status={startStatus}
          />
        );
      })()}
      
      {/* 工作节点 */}
      {workNodes.map((node, index) => {
        const status = nodeStatuses[node.id] || { status: 'pending' };
        const isLast = index === workNodes.length - 1 && !showEndNode;
        
        return (
          <TimelineNode
            key={node.id}
            node={node}
            status={status}
            isLast={isLast}
            t={t}
            compact={compact}
          />
        );
      })}
      
      {/* 结束节点 */}
      {showEndNode && (() => {
        // ⭐ 查找 END 节点的状态
        const endNode = model.nodes.find(n => n.type === 'END');
        const endStatus = endNode ? nodeStatuses[endNode.id] : undefined;
        
        return <EndNode t={t} status={endStatus} />;
      })()}
    </div>
  );
}

export default LarkProcessPreview;