const dropZone = document.getElementById('drop-zone');
const fileInput = document.getElementById('file-input');
const preview = document.getElementById('image-preview');
const predictBtn = document.getElementById('predict-btn');
const grid = document.getElementById('comparison-grid');

dropZone.onclick = () => fileInput.click();

fileInput.onchange = (e) => {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = (ev) => {
            preview.src = ev.target.result;
            preview.classList.remove('hidden');
            // Si tienes un placeholder de "subir imagen", ocúltalo aquí
            const placeholder = document.getElementById('upload-placeholder');
            if(placeholder) placeholder.classList.add('hidden');
            
            predictBtn.disabled = false;
        };
        reader.readAsDataURL(file);
    }
};

predictBtn.onclick = async () => {
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            document.getElementById('loader').classList.remove('hidden');
            
            try {
                const response = await fetch('/predict_all', { method: 'POST', body: formData });
                const results = await response.json();
                
                emptyState.classList.add('hidden');
                resultsSection.classList.remove('hidden');
                
                grid.innerHTML = '';
                results.forEach(res => {
                    // CAMBIO CLAVE: Usamos el status de la API, no buscamos texto manualmente
                    const isHealthy = res.status === "Sana"; 
                    const color = isHealthy ? 'green' : 'amber';
                    const icon = isHealthy ? 'check-circle' : 'alert-triangle';

                    grid.innerHTML += `
                        <div class="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm hover:shadow-md transition-shadow">
                            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                                <div class="flex items-center gap-4">
                                    <div class="bg-${color}-50 p-3 rounded-xl">
                                        <i data-lucide="${icon}" class="text-${color}-600 w-6 h-6"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-gray-900">${res.name}</h4>
                                        <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Predicción de la IA</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <div class="text-lg font-extrabold text-gray-800">${res.prediction}</div>
                                    <div class="text-sm font-medium text-${color}-600">${res.confidence}% Confianza</div>
                                </div>
                            </div>
                            <div class="mt-4 w-full bg-gray-100 h-2.5 rounded-full overflow-hidden">
                                <div class="bg-${color}-500 h-full rounded-full transition-all duration-1000 ease-out" style="width: ${res.confidence}%\"></div>
                            </div>
                        </div>
                    `;
                });
                lucide.createIcons();
                resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
            } catch (e) { 
                alert("Error conectando con el servidor Python."); 
            }
            document.getElementById('loader').classList.add('hidden');
};