// Monitor de surtidores en tiempo real
class PumpMonitor {
    constructor() {
        this.updateInterval = 1000; // 1 segundo
        this.lastUpdate = 0;
        this.pumps = {};
        this.isRunning = false;
    }

    start() {
        if (this.isRunning) return;
        this.isRunning = true;
        console.log('[PumpMonitor] 🚀 Iniciando monitoreo...');
        this.checkStatus();
    }

    stop() {
        this.isRunning = false;
        console.log('[PumpMonitor] ⏹️ Monitoreo detenido');
    }

    checkStatus() {
        if (!this.isRunning) return;

        fetch('api_pump_status.php?' + new Date().getTime())
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    this.updatePumps(data.pumps);
                    console.log('[PumpMonitor] ✓', Object.keys(data.pumps).length, 'bombas actualizadas');
                } else {
                    console.error('[PumpMonitor] Error:', data.error);
                }
                
                // Continuar el monitoreo
                setTimeout(() => this.checkStatus(), this.updateInterval);
            })
            .catch(error => {
                console.error('[PumpMonitor] ❌', error);
                // Reintentar después de un error
                setTimeout(() => this.checkStatus(), this.updateInterval * 2);
            });
    }

    updatePumps(pumps) {
        Object.values(pumps).forEach(pump => {
            this.updatePumpDisplay(pump.number, pump.status, pump.image);
        });
    }

    updatePumpDisplay(pumpNumber, status, imageName) {
        const statusLower = status.toLowerCase();
        
        // Actualizar imagen de la bomba
        const pumpImg = document.querySelector(`#pump-${pumpNumber}-img`);
        if (pumpImg) {
            const newSrc = `imagen/${imageName}`;
            if (pumpImg.src !== newSrc) {
                pumpImg.src = newSrc;
            }
        }

        // Actualizar bolita de estado
        const indicator = document.querySelector(`#pump-${pumpNumber}-indicator`);
        if (indicator) {
            indicator.className = `pump-status-indicator ${statusLower}`;
        }

        // Actualizar texto del estado
        const pumpStatus = document.querySelector(`#pump-${pumpNumber}-status`);
        if (pumpStatus) {
            pumpStatus.textContent = status;
            pumpStatus.className = `pump-status status-${statusLower}`;
        }

        // Actualizar badge/indicador visual si existe
        const pumpBadge = document.querySelector(`#pump-${pumpNumber}-badge`);
        if (pumpBadge) {
            pumpBadge.className = `badge badge-${this.getStatusClass(status)}`;
            pumpBadge.textContent = status;
        }
    }

    getStatusClass(status) {
        const statusMap = {
            'IDLE': 'success',
            'CALLING': 'warning',
            'STARTING': 'warning',
            'FUELLING': 'info',
            'CLOSED': 'danger',
            'ERROR': 'danger'
        };
        return statusMap[status] || 'secondary';
    }
}

// Inicializar el monitor cuando el DOM esté listo
document.addEventListener('DOMContentLoaded', function() {
    // Esperar a que el dashboard.js renderice las bombas
    setTimeout(() => {
        const monitor = new PumpMonitor();
        monitor.start();
        
        // Exponer para control manual si es necesario
        window.pumpMonitor = monitor;
    }, 1000);
});