/**
 * Stage Card Component
 * Shows status and results for each automation stage
 */
import React from 'react';
import { StageResult, PipelineStage } from '../../services/automationService';

interface StageCardProps {
  stageNumber: number;
  stageName: string;
  currentStage?: number;
  result?: StageResult | null;
  pipelineData?: PipelineStage;
}

const StageCard: React.FC<StageCardProps> = ({
  stageNumber,
  stageName,
  currentStage = 0,
  result = null,
  pipelineData,
}) => {
  const isPending = stageNumber > currentStage;
  const isActive = stageNumber === currentStage;
  const isComplete = stageNumber < currentStage || (result !== null && stageNumber <= 7);

  const getStatusColor = () => {
    if (isActive) return 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 dark:border-blue-400';
    if (isComplete) return 'border-green-500 bg-green-50 dark:bg-green-900/20 dark:border-green-400';
    if (pipelineData && pipelineData.pending > 0) return 'border-purple-400 bg-purple-50 dark:bg-purple-900/20 dark:border-purple-400';
    return 'border-gray-300 bg-gray-50 dark:bg-gray-800 dark:border-gray-600';
  };

  const getStatusIcon = () => {
    if (isActive) return '🔄';
    if (isComplete) return '✅';
    if (pipelineData && pipelineData.pending > 0) return '📋';
    return '⏸';
  };

  const getStatusText = () => {
    if (isActive) return 'Processing';
    if (isComplete) return 'Completed';
    if (pipelineData && pipelineData.pending > 0) return 'Ready';
    return 'Waiting';
  };

  return (
    <div className={`border-2 rounded-lg p-3 transition-all ${getStatusColor()}`}>
      <div className="flex items-center justify-between mb-2">
        <div className="text-sm font-bold text-gray-700 dark:text-gray-200">Stage {stageNumber}</div>
        <div className="text-xl">{getStatusIcon()}</div>
      </div>
      <div className="text-xs text-gray-700 dark:text-gray-300 mb-2 font-medium">{stageName}</div>
      
      {/* Show pipeline pending counts when not running */}
      {!isActive && !isComplete && pipelineData && (
        <div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-600">
          <div className="flex justify-between items-center">
            <span className="text-xs text-gray-600 dark:text-gray-400">Pending:</span>
            <span className="text-lg font-bold text-purple-600 dark:text-purple-400">{pipelineData.pending}</span>
          </div>
          <div className="text-xs text-gray-500 dark:text-gray-500 mt-1">{getStatusText()}</div>
        </div>
      )}

      {/* Show run results when stage has completed */}
      {result && (
        <div className="text-xs space-y-1 mt-2 pt-2 border-t border-gray-200 dark:border-gray-600">
          {Object.entries(result).map(([key, value]) => (
            <div key={key} className="flex justify-between">
              <span className="text-gray-600 dark:text-gray-400">{key.replace(/_/g, ' ')}:</span>
              <span className="font-semibold text-gray-800 dark:text-gray-200">{value}</span>
            </div>
          ))}
        </div>
      )}

      {/* Show processing indicator when active */}
      {isActive && !result && (
        <div className="mt-2 pt-2 border-t border-blue-200 dark:border-blue-600">
          <div className="text-xs text-blue-600 dark:text-blue-400 animate-pulse">Processing...</div>
        </div>
      )}
    </div>
  );
};

export default StageCard;

