import React from 'react';
import { CheckCircle2, Loader2, XCircle } from 'lucide-react';
import type { BulkLoadProgressState } from './bulkLoadProgress';
import styles from './BarraProgresoCargaMasiva.module.css';

interface BarraProgresoCargaMasivaProps {
    progress: BulkLoadProgressState;
}

export const BarraProgresoCargaMasiva: React.FC<BarraProgresoCargaMasivaProps> = ({ progress }) => {
    if (progress.status === 'idle') {
        return null;
    }

    const esExito = progress.status === 'success';
    const esError = progress.status === 'error';
    const esCarga = progress.status === 'loading';

    const titulo = esExito
        ? 'Carga completada'
        : esError
            ? 'Error en la carga'
            : 'Cargando CUPS...';

    const panelClass = [
        styles.panel,
        esExito ? styles.panelExito : '',
        esError ? styles.panelError : '',
    ]
        .filter(Boolean)
        .join(' ');

    const rellenoClass = [
        styles.relleno,
        esExito ? styles.rellenoExito : '',
        esError ? styles.rellenoError : '',
        esCarga ? styles.rellenoAnimado : '',
    ]
        .filter(Boolean)
        .join(' ');

    const porcentajeClass = [
        styles.porcentaje,
        esExito ? styles.porcentajeExito : '',
        esError ? styles.porcentajeError : '',
    ]
        .filter(Boolean)
        .join(' ');

    return (
        <div
            className={styles.overlay}
            role="dialog"
            aria-modal="true"
            aria-live="polite"
            aria-label={progress.message || titulo}
        >
            <div className={panelClass}>
                <div className={styles.iconoEstado} aria-hidden="true">
                    {esCarga && <Loader2 size={44} className={styles.spinner} />}
                    {esExito && <CheckCircle2 size={44} className={styles.iconoExito} />}
                    {esError && <XCircle size={44} className={styles.iconoError} />}
                </div>

                <h5 className={styles.titulo}>{titulo}</h5>

                {progress.message && (
                    <p className={styles.mensaje}>{progress.message}</p>
                )}

                <div className={styles.progresoBloque}>
                    <div className={styles.cabecera}>
                        <span className={styles.etiquetaProgreso}>Progreso</span>
                        <span className={porcentajeClass}>{progress.percent}%</span>
                    </div>
                    <div className={styles.pista}>
                        <div
                            className={rellenoClass}
                            style={{ width: `${progress.percent}%` }}
                        />
                    </div>
                </div>
            </div>
        </div>
    );
};