static/script.js

const API_URL = window.location.origin;

// Page Navigation
function showPage(pageId) {
    document.querySelectorAll('.page').forEach(page => page.classList.add('hidden'));
    document.getElementById(pageId).classList.remove('hidden');
}

// Drag & Drop Handling
const dropZone = document.getElementById('drop-zone');
const fileInput = document.getElementById('file-input');
const analyzeBtn = document.getElementById('analyze-btn');
const audioPlayback = document.getElementById('audio-playback');
let audioFile = null;

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

dropZone.addEventListener('dragleave', () => {
    dropZone.classList.remove('drag-over');
});

dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropZone.classList.remove('drag-over');

    if (e.dataTransfer.files.length > 0) {
        handleFile(e.dataTransfer.files[0]);
    }
});

fileInput.addEventListener('change', (e) => {
    handleFile(e.target.files[0]);
});

function handleFile(file) {
    if (file && file.type.startsWith('audio/')) {
        audioFile = file;
        analyzeBtn.disabled = false;
        audioPlayback.src = URL.createObjectURL(file);
        audioPlayback.classList.remove('hidden');
    } else {
        showError('Please upload a valid audio file');
    }
}

// Voice Recording
let mediaRecorder;
let audioChunks = [];
const recordBtn = document.getElementById('record-btn');
const recordingStatus = document.getElementById('recording-status');

recordBtn.addEventListener('click', async () => {
    try {
        if (recordBtn.textContent === '🎤 Record Voice') {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            mediaRecorder = new MediaRecorder(stream);
            audioChunks = [];
            
            mediaRecorder.ondataavailable = (e) => {
                audioChunks.push(e.data);
            };

            mediaRecorder.onstop = () => {
                audioFile = new Blob(audioChunks, { type: 'audio/wav' });
                analyzeBtn.disabled = false;
                audioPlayback.src = URL.createObjectURL(audioFile);
                audioPlayback.classList.remove('hidden');
                recordingStatus.textContent = 'Recording saved!';
            };

            mediaRecorder.start();
            recordBtn.textContent = '⏹ Stop Recording';
            recordingStatus.textContent = 'Recording...';
        } else {
            mediaRecorder.stop();
            recordBtn.textContent = '🎤 Record Voice';
        }
    } catch (error) {
        showError('Unable to access microphone');
    }
});

// Processing & Prediction
analyzeBtn.addEventListener('click', async () => {
    showPage('processing-page');
    const progressBar = document.getElementById('progress-bar');

    try {
        const formData = new FormData();
        formData.append('audio', audioFile, "recorded_audio.wav");

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

        if (!response.ok) throw new Error('Prediction failed');

        const results = await response.json();
        progressBar.style.width = '100%';
        displayResults(results);
    } catch (error) {
        showError('Analysis failed. Please try again.');
    }
});

function displayResults(results) {
    document.getElementById('age-result').textContent = results.age_group;
    document.getElementById('gender-result').textContent = results.gender;
    showPage('results-page');
}

function showError(message) {
    document.getElementById('error-message').textContent = message;
    showPage('error-page');
}

function downloadReport() {
    const results = {
        age: document.getElementById('age-result').textContent,
        gender: document.getElementById('gender-result').textContent,
        timestamp: new Date().toISOString()
    };

    const blob = new Blob([JSON.stringify(results, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'voice-analysis-report.json';
    a.click();
}