document.addEventListener('DOMContentLoaded', () => {
    const inputText = document.getElementById('inputText');
    const analyzeBtn = document.getElementById('analyzeBtn');
    const resultCard = document.getElementById('resultCard');
    const resultLabel = document.getElementById('resultLabel');
    const resultMessage = document.getElementById('resultMessage');
    const confidenceScore = document.getElementById('confidenceScore');
    const loader = document.querySelector('.loader');
    const btnText = document.querySelector('.btn-text');
    const charCount = document.querySelector('.char-count');
    const examplesGrid = document.getElementById('examplesGrid');

    // Hindi Examples
    const examples = [
        "बांग्लादेश की शानदार वापसी, भारत को 314 रन पर रोका #INDvBAN #CWC19",
        "जल बिना मछली जिंदा रह सकती मगर बीजेपी टीवी धार्मिक विवादों बहस दिखाये बिना जिंदा नही रह सकती",
        "राजधानी दिल्ली में गर्मी का कहर जारी आज शाम हल्की बारिश की संभावना।",
        "इन लोगों को मार डालना चाहिए।",
        "धार्मिक पदों पर बैठे कुछ लोग अपने को भगवान समझ लेते हैं,कुछ लोग नत मस्तक हो उन्हें भगवान का दर्जा दिलाने के लिए अपना समय बर्बाद करते हैं,",
        "नफरत करनी है उतनी कर लो रंडवो बाजारू रंडी कि औलादो।।"
    ];

    // Populate Examples
    examples.forEach(text => {
        const chip = document.createElement('div');
        chip.className = 'example-chip';
        chip.textContent = text;
        chip.onclick = () => {
            inputText.value = text;
            updateCharCount();
            analyzeText();
        };
        examplesGrid.appendChild(chip);
    });

    // Character Count
    inputText.addEventListener('input', updateCharCount);

    function updateCharCount() {
        const length = inputText.value.length;
        charCount.textContent = `${length} / 500`;
        if (length > 500) {
            charCount.style.color = 'var(--danger)';
        } else {
            charCount.style.color = 'var(--text-dim)';
        }
    }

    // Analyze Text
    analyzeBtn.addEventListener('click', analyzeText);

    async function analyzeText() {
        const text = inputText.value.trim();
        if (!text) return;

        // UI Loading State
        setLoading(true);
        resultCard.classList.add('hidden');

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

            if (!response.ok) {
                throw new Error('API Error');
            }

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

        } catch (error) {
            console.error('Error:', error);
            alert('An error occurred while analyzing the text. Please try again.');
        } finally {
            setLoading(false);
        }
    }

    function setLoading(isLoading) {
        if (isLoading) {
            analyzeBtn.disabled = true;
            loader.classList.remove('hidden');
            btnText.textContent = 'Analyzing...';
        } else {
            analyzeBtn.disabled = false;
            loader.classList.add('hidden');
            btnText.textContent = 'Analyze Text';
        }
    }

    function showResult(data) {
        resultCard.classList.remove('hidden', 'hate', 'non-hate');

        // Add class based on result
        if (data.is_hate) {
            resultCard.classList.add('non-hate');
            resultLabel.textContent = 'Non-Hate Speech ';
            resultMessage.textContent = 'This content appears to be safe.';
        } else {
            resultCard.classList.add('hate');
            resultLabel.textContent = 'Hate Speech Detected';
            resultMessage.textContent = 'This content contains toxic or hateful language.';
        }

        // Format confidence score
        const scorePercent = (data.score * 100).toFixed(1);
        confidenceScore.textContent = `Confidence: ${scorePercent}%`;
    }
});