document.addEventListener('DOMContentLoaded', () => {
    const checkBtn = document.getElementById('check-btn');
    const clearBtn = document.getElementById('clear-btn');
    const contentInput = document.getElementById('content-input');
    
    // UI Elements
    const btnText = document.querySelector('.btn-text');
    const btnLoader = document.getElementById('btn-loader');
    const resultContainer = document.getElementById('result-container');
    
    const statusIcon = document.getElementById('status-icon');
    const resultLabel = document.getElementById('result-label');
    const progressFill = document.getElementById('progress-fill');
    const scoreText = document.getElementById('score-text');
    const explanationText = document.getElementById('explanation-text');

    checkBtn.addEventListener('click', async () => {
        const text = contentInput.value.trim();
        
        if (!text) {
            alert("Please enter some text or a URL to analyze.");
            return;
        }

        // Set Loading State
        setLoading(true);

        try {
            const response = await fetch('/api/analyze', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ content: text })
            });

            const data = await response.json();

            if (!response.ok) {
                throw new Error(data.error || "Failed to analyze content");
            }

            displayResult(data);

        } catch (error) {
            alert(`Error: ${error.message}`);
            // Reset UI slightly
            resultContainer.classList.add('hidden');
        } finally {
            setLoading(false);
        }
    });

    clearBtn.addEventListener('click', () => {
        contentInput.value = '';
        resultContainer.classList.add('hidden');
        // Reset classes
        resultContainer.className = 'result-card glass-panel hidden';
        progressFill.style.width = '0%';
    });

    function setLoading(isLoading) {
        if (isLoading) {
            checkBtn.disabled = true;
            btnText.classList.add('hidden');
            btnLoader.classList.remove('hidden');
            resultContainer.classList.add('hidden');
        } else {
            checkBtn.disabled = false;
            btnText.classList.remove('hidden');
            btnLoader.classList.add('hidden');
        }
    }

    function displayResult(data) {
        // Remove existing state classes
        resultContainer.className = 'result-card glass-panel';
        
        const result = data.result; // "Real", "Fake", or "Uncertain"
        const score = data.confidence; // 0 - 100
        const explanation = data.explanation;

        // Apply new state class
        resultContainer.classList.add(`state-${result.toLowerCase()}`);
        
        // Update text
        resultLabel.textContent = `${result} Content`;
        scoreText.textContent = `${score}%`;
        explanationText.textContent = explanation;

        // Icons
        if (result === 'Real') {
            statusIcon.textContent = '✓';
        } else if (result === 'Fake') {
            statusIcon.textContent = '✕';
        } else {
            statusIcon.textContent = '?';
        }

        // Show container
        resultContainer.classList.remove('hidden');

        // Animate progress bar slightly after container shows
        setTimeout(() => {
            progressFill.style.width = `${score}%`;
        }, 100);
    }
});