const API_URL = window.location.origin + '/predict'; // Ajusta si es necesario

const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');
const previewSection = document.getElementById('previewSection');
const previewImage = document.getElementById('previewImage');
const predictBtn = document.getElementById('predictBtn');
const spinner = document.getElementById('spinner');
const btnText = document.getElementById('btnText');
const resultSection = document.getElementById('resultSection');
const resultIcon = document.getElementById('resultIcon');
const resultPrediction = document.getElementById('resultPrediction');
const confidenceBar = document.getElementById('confidenceBar');
const confidenceValue = document.getElementById('confidenceValue');
const probabilitiesList = document.getElementById('probabilitiesList');
const uploadAnotherBtn = document.getElementById('uploadAnotherBtn');

let selectedFile = null;

// Prevenir comportamientos por defecto para drag and drop
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    uploadArea.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
}

['dragenter', 'dragover'].forEach(eventName => {
    uploadArea.addEventListener(eventName, () => uploadArea.classList.add('dragover'));
});

['dragleave', 'drop'].forEach(eventName => {
    uploadArea.addEventListener(eventName, () => uploadArea.classList.remove('dragover'));
});

uploadArea.addEventListener('drop', handleDrop);
uploadArea.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', handleFileSelect);

function handleDrop(e) {
    const dt = e.dataTransfer;
    const files = dt.files;
    if (files.length) {
        handleFiles(files);
    }
}

function handleFileSelect(e) {
    handleFiles(e.target.files);
}

function handleFiles(files) {
    if (!files || files.length === 0) return;
    const file = files[0];
    if (!file.type.startsWith('image/')) {
        alert('Por favor selecciona una imagen válida (JPG, PNG, etc.)');
        return;
    }
    selectedFile = file;

    // Mostrar vista previa
    const reader = new FileReader();
    reader.onload = (e) => {
        previewImage.src = e.target.result;
        previewSection.classList.add('active');
        predictBtn.disabled = false;
        // Ocultar resultado anterior
        resultSection.classList.remove('active');
        uploadAnotherBtn.style.display = 'none';
    };
    reader.readAsDataURL(file);
}

predictBtn.addEventListener('click', classifyImage);

async function classifyImage() {
    if (!selectedFile) return;

    // Estado de carga
    predictBtn.disabled = true;
    spinner.style.display = 'inline-block';
    btnText.textContent = 'Analizando...';
    resultSection.classList.remove('active');

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

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

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

        const data = await response.json();
        displayResult(data);
    } catch (error) {
        alert('Error: ' + error.message);
    } finally {
        spinner.style.display = 'none';
        btnText.textContent = '🔍 Analizar imagen';
        predictBtn.disabled = false;
    }
}

function displayResult(data) {
    const classMapping = {
        airplane: { icon: '✈️', label: 'Avión (Aéreo)', color: 'linear-gradient(90deg, #4299e1, #3182ce)' },
        car: { icon: '🚗', label: 'Coche (Terrestre)', color: 'linear-gradient(90deg, #48bb78, #38a169)' },
        ship: { icon: '🚢', label: 'Barco (Marítimo)', color: 'linear-gradient(90deg, #ed8936, #dd6b20)' }
    };

    // Clase con mayor probabilidad
    const predictedClass = Object.keys(data.probabilidades).reduce((a, b) =>
        data.probabilidades[a] > data.probabilidades[b] ? a : b
    );

    const confianza = data.probabilidades[predictedClass];
    const classInfo = classMapping[predictedClass];

    resultIcon.textContent = classInfo.icon;
    resultPrediction.textContent = classInfo.label;
    confidenceBar.style.background = classInfo.color;

    const percent = Math.round(confianza * 100);
    confidenceBar.style.width = percent + '%';
    confidenceValue.textContent = percent + '%';

    // Construir lista de probabilidades
    probabilitiesList.innerHTML = '';
    const labels = {
        airplane: '✈️ Avión',
        car: '🚗 Coche',
        ship: '🚢 Barco'
    };

    for (const [key, prob] of Object.entries(data.probabilidades)) {
        const probPercent = Math.round(prob * 100);
        const item = document.createElement('div');
        item.className = 'prob-item';
        item.innerHTML = `
            <div class="prob-label">
                <span>${labels[key]}</span>
            </div>
            <span class="prob-value">${probPercent}%</span>
        `;
        probabilitiesList.appendChild(item);
    }

    resultSection.classList.add('active');
    uploadAnotherBtn.style.display = 'inline-block';
}

uploadAnotherBtn.addEventListener('click', () => {
    fileInput.value = '';
    selectedFile = null;
    previewSection.classList.remove('active');
    resultSection.classList.remove('active');
    predictBtn.disabled = true;
    uploadAnotherBtn.style.display = 'none';
});