static/js/script.js

let selectedFile = null;

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('analysisForm');
    const fileInput = document.getElementById('fileInput');
    const textInput = document.getElementById('textInput');
    const textClaim = document.getElementById('textClaim');
    const dropZone = document.getElementById('dropZone');
    const fileLabel = document.getElementById('fileLabel');

    if (!form) return;

    const resetFileState = () => {
        selectedFile = null;
        fileInput.value = '';
        fileLabel.textContent = 'Drop media here or click to upload';
        dropZone.classList.remove('upload-active');
    };

    fileInput.addEventListener('change', () => {
        if (fileInput.files.length > 0) {
            selectedFile = fileInput.files[0];
            fileLabel.innerHTML = `Ready: <strong>${selectedFile.name}</strong>`;
            dropZone.classList.add('upload-active');
            textInput.value = '';
        } else {
            resetFileState();
        }
    });

    textInput.addEventListener('input', () => {
        if (textInput.value.trim().length > 0) {
            resetFileState();
        }
    });

    form.addEventListener('submit', async (event) => {
        event.preventDefault();

        const resultBox = document.getElementById('resultBox');
        const loader = document.getElementById('loader');

        if (!textInput.value.trim() && !selectedFile && !textClaim.value.trim()) {
            resultBox.innerHTML = '<div class="alert alert-warning">Please provide a media file, a URL, or a text claim.</div>';
            return;
        }

        resultBox.innerHTML = '';
        loader.classList.remove('hidden');

        const formData = new FormData();
        if (selectedFile) formData.append('file', selectedFile);
        if (textInput.value.trim()) formData.append('input', textInput.value.trim());
        if (textClaim.value.trim()) formData.append('text_claim', textClaim.value.trim());

        try {
            const response = await fetch('/analyze', {
                method: 'POST',
                body: formData,
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            });
            const data = await response.json();
            loader.classList.add('hidden');

            if (response.status === 401) {
                window.location.href = '/login';
                return;
            }

            if (!response.ok || data.error) {
                resultBox.innerHTML = `<div class="alert alert-danger"><strong>Error:</strong> ${data.error || 'Analysis failed.'}</div>`;
                return;
            }

            const sourcesHtml = (data.context_sources || []).length
                ? `<div class="mt-3"><div class="text-uppercase small text-secondary fw-bold">Context sources</div><ul class="source-links">${data.context_sources.map(source => `<li><a href="${source.url}" target="_blank" rel="noreferrer">${source.title}</a></li>`).join('')}</ul></div>`
                : '';

            const score = Number(data.confidence || 0);
            const verdict = String(data.verdict || 'Unknown');
            const verdictClass = verdict.toLowerCase().includes('fake') ? 'text-danger' : verdict.toLowerCase().includes('authentic') ? 'text-success' : 'text-warning';

            resultBox.innerHTML = `
                <div class="result-card">
                    <div class="d-flex justify-content-between align-items-start gap-3 flex-wrap">
                        <div>
                            <div class="eyebrow">Analysis complete</div>
                            <h3 class="${verdictClass} fw-bold mb-1">${verdict}</h3>
                            <p class="mb-0 text-secondary">${data.reasoning || ''}</p>
                        </div>
                        <div class="score-pill">${score}%</div>
                    </div>
                    <div class="progress mt-3" style="height: 8px;">
                        <div class="progress-bar bg-info" style="width: ${score}%"></div>
                    </div>
                    ${sourcesHtml}
                    <div class="d-flex gap-2 mt-4 flex-wrap">
                        <a href="${data.report_url}" class="btn btn-light">Open saved report</a>
                        <button type="button" class="btn btn-outline-light" id="startAnotherBtn">Analyze another</button>
                    </div>
                </div>
            `;

            const anotherBtn = document.getElementById('startAnotherBtn');
            if (anotherBtn) {
                anotherBtn.addEventListener('click', () => {
                    form.reset();
                    resetFileState();
                    resultBox.innerHTML = '';
                });
            }
        } catch (err) {
            loader.classList.add('hidden');
            resultBox.innerHTML = `<div class="alert alert-danger">Server error: ${err}</div>`;
        }
    });
});