pedidos-express/public/main/js/utils/progressBar.js

import { freeBeer } from "../service/product.js";
import { getUserData } from "../service/user.js";

const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');

let currentProgress = 0;

// Función para actualizar la barra de progreso
export function updateProgress(value) {
    const currentProgress = Math.min(value, 100);

    // Actualizar visualmente
    progressBar.style.width = currentProgress + '%';
    progressText.textContent = currentProgress + '%';
    
    // Cambiar colores según el progreso
    if (currentProgress >= 100) {
        progressBar.className = 'h-full bg-gradient-to-r from-green-400 to-emerald-500 rounded-full transition-all duration-500 ease-out shadow-sm relative overflow-hidden';
        progressText.textContent = '¡100% - Cerveza lista!';
        progressText.className = 'text-sm font-bold text-green-700';
        
        // Activar botón de recompensa
        rewardBtn.disabled = false;
        rewardBtn.className = 'text-xs bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded-full font-medium transition-all duration-200 animate-bounce';
        
        // Efecto de confeti (simulado con animación)
        const confetti = document.querySelector('.bg-gradient-to-r.from-amber-50')
        if (confetti) {
            confetti.className = 'mx-4 mb-6 p-4 bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl border border-green-200 animate-pulse';
        }
        
    } else if (currentProgress >= 75) {
        progressBar.className = 'h-full bg-gradient-to-r from-orange-400 to-red-500 rounded-full transition-all duration-500 ease-out shadow-sm relative overflow-hidden';
    }
}

export function getProgress() {
    return currentProgress;
}

export async function claimReward(token, userTable) {
            const userData = await getUserData(token);
            const progress = userData.rewardProgress || 0;
            if (currentProgress >= progress) {

                const response = await freeBeer(token, userTable);
                if (!response || response.error) {
                    alert("Error al reclamar la cerveza gratis. Por favor, inténtalo de nuevo más tarde.");
                    return;
                }

                progressBar.style.width = '0%';
                progressBar.className = 'h-full bg-gradient-to-r from-amber-400 to-orange-500 rounded-full transition-all duration-500 ease-out shadow-sm relative overflow-hidden';
                progressText.textContent = '0%';
                progressText.className = 'text-sm font-bold text-amber-700';
                
                // Desactivar botón
                rewardBtn.disabled = true;
                rewardBtn.className = 'text-xs bg-amber-500 hover:bg-amber-600 text-white px-3 py-1 rounded-full font-medium transition-colors duration-200 opacity-50 cursor-not-allowed';
                
                // Restaurar colores originales
                document.querySelector('.bg-gradient-to-r.from-green-50').className = 'mx-4 mb-6 p-4 bg-gradient-to-r from-amber-50 to-orange-50 rounded-xl border border-amber-200';

                document.querySelector("#successRewardModal").classList.remove("hidden");
        }else {
            alert("Te pedimos disculpas, aún no has alcanzado el progreso necesario para reclamar tu recompensa. Notifica este error al administrador del sistema.");
        }
}