import React from 'react';

const BatchProgressModal = ({ 
    isOpen, 
    onClose, 
    progress, 
    currentBatch, 
    totalBatches, 
    processedItems, 
    totalItems, 
    operationType,
    isCompleted,
    error,
    isLoading = false // New prop to distinguish loading vs processing
}) => {
    if (!isOpen) return null;

    const progressPercentage = Math.round((processedItems / totalItems) * 100);
    const modalTitle = isLoading 
        ? (isCompleted ? '✅ Loading Complete' : '📦 Loading Data')
        : (isCompleted ? '✅ Batch Operation Complete' : '⚡ Processing Batch Operation');

    return (
        <div className="modal-overlay batch-progress-overlay">
            <div className="modal-content batch-progress-modal">
                <div className="modal-header">
                    <h3>{modalTitle}</h3>
                    {isCompleted && (
                        <button 
                            className="modal-close" 
                            onClick={onClose}
                            aria-label="Close"
                        >
                            ×
                        </button>
                    )}
                </div>

                <div className="modal-body">
                    {error ? (
                        <div className="batch-error">
                            <div className="error-icon">❌</div>
                            <div className="error-content">
                                <h4>Operation Failed</h4>
                                <p>{error}</p>
                            </div>
                        </div>
                    ) : (
                        <div className="batch-progress-content">
                            <div className="progress-info">
                                <div className="operation-type">
                                    <span className="operation-icon">
                                        {operationType === 'orders' ? '📦' : '🛍️'}
                                    </span>
                                    <span className="operation-text">
                                        {isLoading 
                                            ? `Loading ${operationType === 'orders' ? 'Orders' : 'Products'}`
                                            : `Updating ${operationType === 'orders' ? 'Orders' : 'Products'}`
                                        }
                                    </span>
                                </div>
                                
                                <div className="progress-stats">
                                    <div className="stat-item">
                                        <span className="stat-label">Progress:</span>
                                        <span className="stat-value">
                                            {processedItems.toLocaleString()} / {totalItems.toLocaleString()} items
                                        </span>
                                    </div>
                                    <div className="stat-item">
                                        <span className="stat-label">Batch:</span>
                                        <span className="stat-value">
                                            {currentBatch} / {totalBatches}
                                        </span>
                                    </div>
                                    <div className="stat-item">
                                        <span className="stat-label">Completion:</span>
                                        <span className="stat-value">{progressPercentage}%</span>
                                    </div>
                                </div>
                            </div>

                            <div className="progress-bar-container">
                                <div className="progress-bar">
                                    <div 
                                        className="progress-fill"
                                        style={{ width: `${progressPercentage}%` }}
                                    ></div>
                                </div>
                                <div className="progress-percentage">{progressPercentage}%</div>
                            </div>

                            {isCompleted ? (
                                <div className="completion-message">
                                    <div className="success-icon">🎉</div>
                                    <div className="success-content">
                                        <h4>{isLoading ? 'Loading Completed Successfully!' : 'Operation Completed Successfully!'}</h4>
                                        <p>
                                            Successfully {isLoading ? 'loaded' : 'processed'} {totalItems.toLocaleString()} items 
                                            in {totalBatches} batches.
                                        </p>
                                    </div>
                                </div>
                            ) : (
                                <div className="processing-message">
                                    <div className="spinner"></div>
                                    <p>
                                        {isLoading ? 'Loading' : 'Processing'} batch {currentBatch} of {totalBatches}...
                                        <br />
                                        <small>Please keep this window open until completion.</small>
                                    </p>
                                </div>
                            )}
                        </div>
                    )}
                </div>

                {(isCompleted || error) && (
                    <div className="modal-footer">
                        <button 
                            className="btn btn-primary"
                            onClick={onClose}
                        >
                            Close
                        </button>
                    </div>
                )}
            </div>
        </div>
    );
};

export default BatchProgressModal;