document.addEventListener('DOMContentLoaded', () => {
    const fileInput = document.getElementById('fileInput');
    const fileNameDisplay = document.getElementById('fileName');
    const imagePreview = document.getElementById('imagePreview');
    const previewSection = document.getElementById('preview-section');
    const uploadForm = document.getElementById('uploadForm');
    const loadingDiv = document.getElementById('loading');
    const resultsDiv = document.getElementById('results');

    // Handle file selection
    fileInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file) {
            fileNameDisplay.textContent = file.name;

            // Show preview
            const reader = new FileReader();
            reader.onload = (e) => {
                imagePreview.src = e.target.result;
                previewSection.classList.remove('hidden');
                resultsDiv.classList.add('hidden'); // Hide previous results
            };
            reader.readAsDataURL(file);
        }
    });

    // Handle form submission
    uploadForm.addEventListener('submit', async (e) => {
        e.preventDefault();

        const file = fileInput.files[0];
        if (!file) {
            alert('Please select an image first.');
            return;
        }

        const preprocessing = 'v2';
        const formData = new FormData();
        formData.append('file', file);
        formData.append('preprocessing', preprocessing);

        // Show loading state
        loadingDiv.classList.remove('hidden');
        resultsDiv.classList.add('hidden');
        resultsDiv.innerHTML = '';

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

            if (!response.ok) {
                throw new Error(`Server error: ${response.statusText}`);
            }

            const data = await response.json();
            displayResults(data);

        } catch (error) {
            console.error('Error:', error);
            resultsDiv.innerHTML = `<div class="result-card"><p style="color: red;">Error: ${error.message}</p></div>`;
            resultsDiv.classList.remove('hidden');
        } finally {
            loadingDiv.classList.add('hidden');
        }
    });

    function displayResults(data) {
        let html = '';

        // Stage 1 Results
        const s1 = data.stage1;
        const s1Class = s1.is_cancerous ? 'cancerous' : 'healthy';
        const s1Title = s1.is_cancerous ? 'Cancerous Detected' : 'Healthy';

        html += `
            <div class="result-card ${s1Class}">
                <div class="result-title">Stage 1: ${s1Title}</div>
                <p>Status: <strong>${s1.label}</strong></p>
                <div>
                    <span>Healthy Probability: ${(s1.prob_healthy * 100).toFixed(2)}%</span>
                    <div class="prob-bar"><div class="prob-fill" style="width: ${s1.prob_healthy * 100}%"></div></div>
                </div>
                <div style="margin-top: 10px;">
                    <span>Cancer Probability: ${(s1.prob_cancer * 100).toFixed(2)}%</span>
                    <div class="prob-bar"><div class="prob-fill" style="width: ${s1.prob_cancer * 100}%; background-color: var(--primary-color);"></div></div>
                </div>
            </div>
        `;

        // Stage 2 Results (if applicable)
        if (data.stage2) {
            const s2 = data.stage2;
            const s2Class = s2.label === 'ALL' ? 'subtype-all' : 'subtype-hem';

            html += `
                <div class="result-card ${s2Class}">
                    <div class="result-title">Stage 2: Subtype Classification</div>
                    <p>Subtype: <strong>${s2.label}</strong></p>
                    <p>Confidence: <strong>${(s2.confidence * 100).toFixed(2)}%</strong></p>
                    <p class="small">${s2.label === 'ALL' ? 'Acute Lymphoblastic Leukemia' : 'Hematological Malignancies'}</p>
                </div>
            `;
        } else if (s1.is_cancerous) {
            html += `
                <div class="result-card">
                    <div class="result-title">Stage 2: Subtype Classification</div>
                    <p>Stage 2 model not loaded or failed.</p>
                </div>
            `;
        } else {
            html += `
                <div class="result-card healthy">
                    <div class="result-title">Stage 2: Skipped</div>
                    <p>Sample classified as Healthy, so subtype classification is not needed.</p>
                </div>
            `;
        }

        resultsDiv.innerHTML = html;
        resultsDiv.classList.remove('hidden');
    }
});