const imageInput = document.getElementById('imageInput');
const previewImg = document.getElementById('previewImg');
const classifyBtn = document.getElementById('classifyBtn');
const resultDiv = document.getElementById('result');

imageInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            previewImg.src = e.target.result;
            previewImg.style.display = 'block';
            classifyBtn.disabled = false;
            resultDiv.innerHTML = '';
            resultDiv.className = 'result';
        };
        reader.readAsDataURL(file);
    } else {
        previewImg.style.display = 'none';
        classifyBtn.disabled = true;
    }
});

classifyBtn.addEventListener('click', async () => {
    const file = imageInput.files[0];
    if (!file) return;

    classifyBtn.disabled = true;
    classifyBtn.innerText = '🔍 Analizando...';
    resultDiv.innerHTML = '<em>Procesando imagen...</em>';

    const formData = new FormData();
    formData.append('image', file);

    try {
        const response = await fetch('/predict', {
            method: 'POST',
            body: formData
        });

        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || 'Error del servidor');
        }

        const data = await response.json();
        const genero = data.genero;
        const confianza = data.confianza; // Capturamos la nueva variable

        // Actualizamos el HTML para mostrar tanto el género como la confianza
        resultDiv.innerHTML = `
            🧬 La persona es <strong>${genero}</strong>.<br>
            🎯 Precisión: <strong>${confianza}</strong>
        `;
        
        // Removemos clases anteriores por si acaso
        resultDiv.classList.remove('mujer', 'hombre', 'error');
        // Añadimos la clase correspondiente
        resultDiv.classList.add(genero === 'mujer' ? 'mujer' : 'hombre');

    } catch (error) {
        console.error(error);
        resultDiv.innerHTML = `❌ Error: ${error.message}`;
        resultDiv.classList.remove('mujer', 'hombre'); // Limpiar estilos previos
        resultDiv.classList.add('error');
    } finally {
        classifyBtn.disabled = false;
        classifyBtn.innerText = '🔍 Clasificar';
    }
});