document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('audioFile');
    const fileNameDisplay = document.getElementById('fileNameDisplay');
    const submitBtn = document.getElementById('submitBtn');
    const dropZone = document.getElementById('dropZone');

    fileInput.addEventListener('change', function(e) {
        if (this.files && this.files[0]) {
            fileNameDisplay.textContent = this.files[0].name;
            fileNameDisplay.style.color = '#ffffff';
            submitBtn.disabled = false;
            submitBtn.style.opacity = '1';
        }
    });

    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('dragover');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('dragover');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('dragover');
        
        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
            fileInput.files = e.dataTransfer.files;
            
            const event = new Event('change');
            fileInput.dispatchEvent(event);
        }
    });
});

async function makePrediction() {
    const submitBtn = document.getElementById('submitBtn');
    const originalText = submitBtn.innerText;
    const fileInput = document.getElementById('audioFile');
    const resultCard = document.getElementById('resultCard');
    
    if (!fileInput.files || !fileInput.files[0]) {
        alert("Please select a file first.");
        return;
    }

    submitBtn.innerText = "  Extracting Features & Analyzing... \n(This may take 5-10 seconds)";
    submitBtn.disabled = true;
    submitBtn.style.opacity = "0.7";
    
    const formData = new FormData();
    formData.append('audio_file', fileInput.files[0]);

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

        const result = await response.json();

        if (response.ok) {
            const genre = result.prediction;
            const confidence = result.confidence || 0;
            const barColor = '#7e57c2';

            resultCard.innerHTML = `
                <div class="result-box">
                    <p style="color: #9ca3af; font-size: 0.9rem; letter-spacing: 1px; margin-bottom:10px;">PREDICTED GENRE</p>
                    <div style="font-size: 2.5rem; font-weight: 800; margin: 15px 0; color: #7e57c2; text-transform: capitalize;">${genre}</div>
                    <p style="margin-bottom: 20px; color: #e0e0e0;">Audio feature extraction and classification complete.</p>
                    
                    <div style="text-align: left; width: 100%; background: #1c1c2e; padding: 15px; border-radius: 8px; border: 1px solid #2e2e42;">
                        <div style="display:flex; justify-content:space-between; font-size: 0.9rem; color: #ccc; margin-bottom: 8px;">
                            <span>Confidence Score</span>
                            <span style="color: #fff; font-weight: bold;">${confidence.toFixed(1)}%</span>
                        </div>
                        <div class="confidence-bar-bg">
                            <div class="confidence-bar-fill" style="width: ${confidence}%; background-color: ${barColor};"></div>
                        </div>
                    </div>
                </div>
            `;
        } else {
            alert("Error analyzing file: " + (result.error || "Unknown error"));
        }

    } catch (error) {
        console.error("Error:", error);
        alert("Server Error: Make sure the Flask app is running.");
    }

    submitBtn.innerText = originalText;
    submitBtn.disabled = false;
    submitBtn.style.opacity = "1";
}