document.addEventListener('DOMContentLoaded', function() {
    const imageUpload = document.getElementById('image-upload');
    const previewContainer = document.getElementById('preview-container');
    const imagePreview = document.getElementById('image-preview');
    const uploadPlaceholder = document.getElementById('upload-placeholder');
    const submitButton = document.getElementById('submit-button');
    const uploadForm = document.getElementById('upload-form');
    const errorMessage = document.getElementById('error-message');
    const resultContainer = document.getElementById('result-container');
    const resultMessage = document.getElementById('result-message');
    const membershipStatus = document.getElementById('membership-status');
    const probabilityFill = document.getElementById('probability-fill');
    const probabilityText = document.getElementById('probability-text');
    const loading = document.getElementById('loading');
    
    let selectedFile = null;
    
    // Handle image selection
    imageUpload.addEventListener('change', function(e) {
        selectedFile = e.target.files[0];
        
        if (selectedFile) {
            const reader = new FileReader();
            
            reader.onload = function(e) {
                imagePreview.src = e.target.result;
                previewContainer.classList.remove('hidden');
                uploadPlaceholder.classList.add('hidden');
                submitButton.disabled = false;
                errorMessage.classList.add('hidden');
                resultContainer.classList.add('hidden');
            };
            
            reader.readAsDataURL(selectedFile);
        }
    });
    
    // Handle form submission
    uploadForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        if (!selectedFile) {
            errorMessage.textContent = 'Please select an image first';
            errorMessage.classList.remove('hidden');
            return;
        }
        
        // Show loading indicator
        loading.classList.remove('hidden');
        submitButton.disabled = true;
        errorMessage.classList.add('hidden');
        resultContainer.classList.add('hidden');
        
        const formData = new FormData();
        formData.append('image', selectedFile);
        
        fetch('/api/check-membership', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`Server responded with ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            // Display results
            resultMessage.textContent = data.message;
            membershipStatus.innerHTML = `This image is <strong>${data.is_in_training_data}</strong> in the model's training data.`;
            
            const probability = data.probability * 100;
            probabilityFill.style.width = `${probability}%`;
            probabilityText.textContent = `${probability.toFixed(2)}%`;
            
            resultContainer.classList.remove('hidden');
        })
        .catch(error => {
            errorMessage.textContent = `Error: ${error.message}`;
            errorMessage.classList.remove('hidden');
        })
        .finally(() => {
            loading.classList.add('hidden');
            submitButton.disabled = false;
        });
    });
});