/**
 * BulkHealthCheckProgressModal Component
 * 
 * Displays real-time progress of bulk health check operations.
 * Shows:
 * - Total machines being checked
 * - Completion percentage
 * - Live status updates
 * - Cancel button
 */

import { useEffect, useState } from 'react';
import { Activity, X, CheckCircle, XCircle, Clock } from 'lucide-react';
import { Button } from './shared/Button';

interface ProgressData {
  total: number;
  checked: number;
  available: number;
  unavailable: number;
  currentMachine?: string;
}

interface BulkHealthCheckProgressModalProps {
  isOpen: boolean;
  progress: ProgressData;
  isComplete: boolean;
  onClose: () => void;
  onCancel?: () => void;
}

export function BulkHealthCheckProgressModal({
  isOpen,
  progress,
  isComplete,
  onClose,
  onCancel
}: BulkHealthCheckProgressModalProps) {
  
  const [animatedProgress, setAnimatedProgress] = useState(0);

  // Animate progress bar
  useEffect(() => {
    const targetProgress = progress.total > 0 ? (progress.checked / progress.total) * 100 : 0;
    const timer = setTimeout(() => setAnimatedProgress(targetProgress), 100);
    return () => clearTimeout(timer);
  }, [progress.checked, progress.total]);

  if (!isOpen) return null;

  const percentage = progress.total > 0 ? Math.round((progress.checked / progress.total) * 100) : 0;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[100]">
      <div className="bg-kaspersky-bg-card rounded-lg shadow-2xl border border-kaspersky-border max-w-lg w-full mx-4 select-none">
        
        {/* Header */}
        <div className="p-6 border-b border-kaspersky-border">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-kaspersky-primary bg-opacity-10 rounded-full flex items-center justify-center">
                <Activity className={`w-6 h-6 text-kaspersky-primary ${!isComplete ? 'animate-pulse' : ''}`} />
              </div>
              <div>
                <h2 className="text-xl font-bold text-kaspersky-text-dark">
                  {isComplete ? 'Health Check Complete' : 'Checking Machines...'}
                </h2>
                <p className="text-sm text-kaspersky-text-light">
                  {isComplete 
                    ? `Checked ${progress.total} machine${progress.total !== 1 ? 's' : ''}`
                    : `${progress.checked} of ${progress.total} machines checked`
                  }
                </p>
              </div>
            </div>
            
            {isComplete && (
              <button
                onClick={onClose}
                className="text-kaspersky-text-light hover:text-kaspersky-text-dark transition-colors"
              >
                <X size={24} />
              </button>
            )}
          </div>
        </div>

        {/* Progress Content */}
        <div className="p-6 space-y-4">
          
          {/* Progress Bar */}
          <div>
            <div className="flex items-center justify-between mb-2">
              <span className="text-sm font-medium text-kaspersky-text-dark">Progress</span>
              <span className="text-sm font-bold text-kaspersky-primary">{percentage}%</span>
            </div>
            <div className="w-full h-3 bg-kaspersky-bg rounded-full overflow-hidden">
              <div
                className={`h-full transition-all duration-300 ${
                  isComplete 
                    ? 'bg-kaspersky-success' 
                    : 'bg-kaspersky-primary'
                }`}
                style={{ width: `${animatedProgress}%` }}
              />
            </div>
          </div>

          {/* Current Machine */}
          {!isComplete && progress.currentMachine && (
            <div className="flex items-center gap-2 text-sm text-kaspersky-text-light">
              <Clock size={16} className="animate-spin" />
              <span>Checking: <span className="font-medium text-kaspersky-text-dark">{progress.currentMachine}</span></span>
            </div>
          )}

          {/* Statistics */}
          <div className="grid grid-cols-3 gap-3">
            <div className="bg-kaspersky-bg p-3 rounded-lg text-center">
              <div className="text-2xl font-bold text-kaspersky-text-dark">{progress.total}</div>
              <div className="text-xs text-kaspersky-text-light mt-1">Total</div>
            </div>
            
            <div className="bg-green-50 p-3 rounded-lg text-center">
              <div className="flex items-center justify-center gap-1">
                <CheckCircle size={16} className="text-kaspersky-success" />
                <span className="text-2xl font-bold text-kaspersky-success">{progress.available}</span>
              </div>
              <div className="text-xs text-kaspersky-success mt-1">Available</div>
            </div>
            
            <div className="bg-red-50 p-3 rounded-lg text-center">
              <div className="flex items-center justify-center gap-1">
                <XCircle size={16} className="text-kaspersky-danger" />
                <span className="text-2xl font-bold text-kaspersky-danger">{progress.unavailable}</span>
              </div>
              <div className="text-xs text-kaspersky-danger mt-1">Unavailable</div>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="p-6 border-t border-kaspersky-border flex justify-end gap-3">
          {!isComplete && onCancel && (
            <Button
              onClick={onCancel}
              variant="secondary"
              leftIcon={<X size={18} />}
            >
              Cancel
            </Button>
          )}
          
          {isComplete && (
            <Button
              onClick={onClose}
              variant="primary"
              leftIcon={<CheckCircle size={18} />}
            >
              View Results
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}

