// Shared Status Badge Components

/**
 * Job status configuration
 */
const JOB_STATUS_CONFIG = {
    queued: { color: 'bg-slate-100 text-slate-700', icon: '⏳', label: 'In coda' },
    running: { color: 'bg-blue-100 text-blue-700', icon: '⚡', label: 'In esecuzione' },
    completed: { color: 'bg-emerald-100 text-emerald-700', icon: '✓', label: 'Completato' },
    error: { color: 'bg-red-100 text-red-700', icon: '✕', label: 'Errore' },
    cancelled: { color: 'bg-amber-100 text-amber-700', icon: '⛔', label: 'Annullato' },
};

/**
 * Priority configuration
 */
const PRIORITY_CONFIG = {
    low: { color: 'bg-slate-100 text-slate-600', label: 'Bassa' },
    medium: { color: 'bg-orange-100 text-orange-700', label: 'Media' },
    high: { color: 'bg-red-100 text-red-700', label: 'Alta' },
};

/**
 * Progress bar color based on percentage
 */
const PROGRESS_COLORS = {
    complete: 'bg-green-500',
    high: 'bg-blue-500',
    medium: 'bg-amber-500',
    low: 'bg-slate-300',
};

/**
 * Get job status configuration
 * @param {string} status - Job status (queued, running, completed, error, cancelled)
 * @returns {Object} Status configuration with color, icon, label
 */
const getJobStatusConfig = (status) => {
    return JOB_STATUS_CONFIG[status] || JOB_STATUS_CONFIG.queued;
};

/**
 * Get priority configuration
 * @param {string} priority - Priority level (low, medium, high)
 * @returns {Object} Priority configuration with color, label
 */
const getPriorityConfig = (priority) => {
    return PRIORITY_CONFIG[priority] || { color: 'bg-gray-100 text-gray-700', label: priority };
};

/**
 * Get progress bar color based on percentage
 * @param {number} percent - Progress percentage (0-100)
 * @returns {string} Tailwind CSS class for the color
 */
const getProgressColor = (percent) => {
    if (percent === 100) return PROGRESS_COLORS.complete;
    if (percent >= 50) return PROGRESS_COLORS.high;
    if (percent > 0) return PROGRESS_COLORS.medium;
    return PROGRESS_COLORS.low;
};

/**
 * Job Status Badge Component
 * Displays a badge with icon for job status
 */
const JobStatusBadge = ({ status, showSpinner = true, className = '' }) => {
    const config = getJobStatusConfig(status);
    
    return (
        <div className={`flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium ${config.color} ${className}`}>
            <span>{config.icon}</span>
            <span>{config.label}</span>
            {showSpinner && status === 'running' && <Spinner className="w-3 h-3" />}
        </div>
    );
};

/**
 * Priority Badge Component
 * Displays a badge for priority level
 */
const PriorityBadge = ({ priority, className = '' }) => {
    const config = getPriorityConfig(priority);
    
    return (
        <span className={`px-2 py-1 text-xs font-medium rounded-full ${config.color} ${className}`}>
            {config.label}
        </span>
    );
};

/**
 * Status Indicator Component
 * A smaller indicator with just icon and optional color background
 */
const StatusIndicator = ({ status, size = 'md', className = '' }) => {
    const config = getJobStatusConfig(status);
    const sizes = {
        sm: 'w-5 h-5 text-xs',
        md: 'w-7 h-7 text-sm',
        lg: 'w-9 h-9 text-base',
    };
    
    return (
        <div className={`${sizes[size]} rounded-full flex items-center justify-center ${config.color.split(' ')[0]} ${className}`}>
            {status === 'running' ? (
                <Spinner className={size === 'sm' ? 'w-2.5 h-2.5' : size === 'lg' ? 'w-4 h-4' : 'w-3.5 h-3.5'} />
            ) : (
                <span className={config.color.split(' ')[1]}>{config.icon}</span>
            )}
        </div>
    );
};

/**
 * Progress Bar Component
 * Displays a progress bar with automatic coloring
 */
const ProgressBar = ({ percent, height = 'h-2', className = '' }) => {
    const color = getProgressColor(percent);
    
    return (
        <div className={`w-full ${height} bg-slate-100 rounded-full overflow-hidden ${className}`}>
            <div 
                className={`${height} ${color} rounded-full transition-all duration-300`} 
                style={{ width: `${percent}%` }}
            />
        </div>
    );
};

/**
 * Progress Badge Component
 * Displays progress as text with optional progress bar
 */
const ProgressBadge = ({ completed, total, showBar = false, className = '' }) => {
    const percent = total > 0 ? Math.round((completed / total) * 100) : 0;
    const color = getProgressColor(percent);
    const textColor = percent === 100 ? 'text-green-600' : percent >= 50 ? 'text-blue-600' : percent > 0 ? 'text-amber-600' : 'text-slate-500';
    
    return (
        <div className={`flex items-center gap-2 ${className}`}>
            <span className={`text-sm font-medium ${textColor}`}>
                {completed}/{total}
            </span>
            {showBar && (
                <div className="flex-1 h-1.5 bg-slate-100 rounded-full overflow-hidden min-w-[40px]">
                    <div 
                        className={`h-full ${color} rounded-full transition-all duration-300`} 
                        style={{ width: `${percent}%` }}
                    />
                </div>
            )}
        </div>
    );
};

// Export to global scope
window.StatusBadge = {
    // Config objects
    JOB_STATUS_CONFIG,
    PRIORITY_CONFIG,
    PROGRESS_COLORS,
    // Helper functions
    getJobStatusConfig,
    getPriorityConfig,
    getProgressColor,
    // Components
    JobStatusBadge,
    PriorityBadge,
    StatusIndicator,
    ProgressBar,
    ProgressBadge,
};

// Also export individual components for direct use
window.JobStatusBadge = JobStatusBadge;
window.PriorityBadge = PriorityBadge;
window.StatusIndicator = StatusIndicator;
window.ProgressBar = ProgressBar;
window.ProgressBadge = ProgressBadge;
window.getJobStatusConfig = getJobStatusConfig;
window.getPriorityConfig = getPriorityConfig;
window.getProgressColor = getProgressColor;