document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('fileInput');
    const detectButton = document.getElementById('detectButton');
    const testButton = document.getElementById('testButton');
    const originalImage = document.getElementById('originalImage');
    const resultImage = document.getElementById('resultImage');
    const loading = document.getElementById('loading');

    // Handle drag and drop
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.style.borderColor = '#2980b9';
    });

    dropZone.addEventListener('dragleave', (e) => {
        e.preventDefault();
        dropZone.style.borderColor = '#3498db';
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.style.borderColor = '#3498db';
        
        const file = e.dataTransfer.files[0];
        if (file && file.type.startsWith('image/')) {
            handleImageSelection(file);
        }
    });

    // Handle click to upload
    dropZone.addEventListener('click', () => {
        fileInput.click();
    });

    fileInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file) {
            handleImageSelection(file);
        }
    });

    function handleImageSelection(file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            originalImage.src = e.target.result;
            originalImage.style.display = 'block';
            detectButton.disabled = false;
        };
        reader.readAsDataURL(file);
    }

    // Handle detect button click
    detectButton.addEventListener('click', async () => {
        const formData = new FormData();
        formData.append('image', fileInput.files[0]);
        
        try {
            loading.style.display = 'flex';
            const response = await fetch('/detect', {
                method: 'POST',
                body: formData
            });
            
            if (response.ok) {
                const blob = await response.blob();
                resultImage.src = URL.createObjectURL(blob);
                resultImage.style.display = 'block';
            } else {
                alert('Error processing image');
            }
        } catch (error) {
            console.error('Error:', error);
            alert('Error processing image');
        } finally {
            loading.style.display = 'none';
        }
    });

    // Handle test button click
    testButton.addEventListener('click', async () => {
        try {
            loading.style.display = 'flex';
            const response = await fetch('/detect/test');
            
            if (response.ok) {
                const blob = await response.blob();
                resultImage.src = URL.createObjectURL(blob);
                resultImage.style.display = 'block';
            } else {
                alert('Error running test detection');
            }
        } catch (error) {
            console.error('Error:', error);
            alert('Error running test detection');
        } finally {
            loading.style.display = 'none';
        }
    });
});