document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('fileInput');
    const analyzeBtn = document.getElementById('analyzeBtn');
    const previewContainer = document.getElementById('previewContainer');
    
    let currentImage = null;
    
    // Setup drag and drop
    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, (e) => {
            e.preventDefault();
            dropZone.classList.add('dragover');
        });
    });
    
    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, (e) => {
            e.preventDefault();
            dropZone.classList.remove('dragover');
        });
    });
    
    dropZone.addEventListener('drop', (e) => {
        const files = e.dataTransfer.files;
        if (files.length) {
            handleImageUpload(files[0]);
        }
    });
    
    dropZone.addEventListener('click', () => {
        fileInput.click();
    });
    
    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length) {
            handleImageUpload(e.target.files[0]);
        }
    });
    
    analyzeBtn.addEventListener('click', analyzeImage);
    
    function handleImageUpload(file) {
        if (!file.type.match('image.*')) {
            alert('Please select an image file');
            return;
        }
        
        const reader = new FileReader();
        reader.onload = function(e) {
            currentImage = new Image();
            currentImage.onload = function() {
                previewContainer.innerHTML = '';
                previewContainer.appendChild(currentImage);
                currentImage.classList.add('image-preview');
                analyzeBtn.disabled = false;
            };
            currentImage.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
    
    function analyzeImage() {
        if (!currentImage) return;
        
        // Simulate analysis with realistic measurements
        const length = (Math.random() * 8 + 10).toFixed(1); // 10-18 cm
        const girth = (Math.random() * 4 + 8).toFixed(1); // 8-12 cm
        const volume = (length * Math.PI * Math.pow(girth/(2*Math.PI), 2)).toFixed(1);
        
        // Update results
        document.getElementById('lengthResult').textContent = `${length} cm`;
        document.getElementById('girthResult').textContent = `${girth} cm`;
        document.getElementById('volumeResult').textContent = `${volume} cm³`;
        
        // Update percentiles (simulated)
        const lengthPercentile = Math.min(99, Math.max(1, Math.round((length - 8) / 10 * 100)));
        const girthPercentile = Math.min(99, Math.max(1, Math.round((girth - 6) / 6 * 100)));
        const volumePercentile = Math.min(99, Math.max(1, Math.round((volume - 200) / 800 * 100)));
        
        document.getElementById('lengthPercentile').textContent = `${lengthPercentile}%`;
        document.getElementById('girthPercentile').textContent = `${girthPercentile}%`;
        document.getElementById('volumePercentile').textContent = `${volumePercentile}%`;
        
        document.getElementById('lengthBar').style.width = `${lengthPercentile}%`;
        document.getElementById('girthBar').style.width = `${girthPercentile}%`;
        document.getElementById('volumeBar').style.width = `${volumePercentile}%`;
        
        // Generate recommendations
        let recommendations = "";
        if (length < 12) recommendations += "Your length is below average. ";
        else if (length > 15) recommendations += "Your length is above average. ";
        else recommendations += "Your length is average. ";
        
        if (girth < 10) recommendations += "Your girth is below average. ";
        else if (girth > 13) recommendations += "Your girth is above average. ";
        else recommendations += "Your girth is average. ";
        
        recommendations += "For optimal health, maintain a balanced diet and regular exercise.";
        
        document.getElementById('recommendations').textContent = recommendations;
        
        // Add visual measurement lines (simplified)
        const rect = currentImage.getBoundingClientRect();
        const containerRect = previewContainer.getBoundingClientRect();
        
        // Clear previous lines
        document.querySelectorAll('.measurement-line, .measurement-label').forEach(el => el.remove());
        
        // Add length line
        const lengthLine = document.createElement('div');
        lengthLine.className = 'measurement-line length';
        lengthLine.style.width = `${rect.width * 0.8}px`;
        lengthLine.style.top = `${rect.height * 0.5}px`;
        lengthLine.style.left = `${(rect.width - rect.width * 0.8) / 2}px`;
        previewContainer.appendChild(lengthLine);
        
        const lengthLabel = document.createElement('div');
        lengthLabel.className = 'measurement-label';
        lengthLabel.textContent = `${length} cm`;
        lengthLabel.style.top = `${rect.height * 0.5 - 20}px`;
        lengthLabel.style.left = `${rect.width / 2 - 30}px`;
        previewContainer.appendChild(lengthLabel);
        
        // Add girth line
        const girthLine = document.createElement('div');
        girthLine.className = 'measurement-line girth';
        girthLine.style.height = `${rect.height * 0.6}px`;
        girthLine.style.top = `${rect.height * 0.2}px`;
        girthLine.style.left = `${rect.width * 0.7}px`;
        previewContainer.appendChild(girthLine);
        
        const girthLabel = document.createElement('div');
        girthLabel.className = 'measurement-label';
        girthLabel.textContent = `${girth} cm`;
        girthLabel.style.top = `${rect.height * 0.2 - 20}px`;
        girthLabel.style.left = `${rect.width * 0.7 + 10}px`;
        previewContainer.appendChild(girthLabel);
    }
});