document.addEventListener('DOMContentLoaded', () => {
    
    // Auto-fill form if parameters exist in URL (from Home page)
    const urlParams = new URLSearchParams(window.location.search);
    const temaParam = urlParams.get('tema');
    if (temaParam) {
        document.getElementById('tema-input').value = temaParam;
    }

    const form = document.getElementById('generate-form');
    const generateBtn = document.getElementById('generate-btn');
    const btnText = document.getElementById('btn-text');
    const btnSpinner = document.getElementById('btn-spinner');
    
    const emptyState = document.getElementById('empty-state');
    const resultContainer = document.getElementById('result-container');
    const resultBadge = document.getElementById('result-badge');
    const resultText = document.getElementById('result-text');
    const analyticsContainer = document.getElementById('analytics-container');
    const visualizationContainer = document.getElementById('visualization-container');

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

        const tema = document.getElementById('tema-input').value.trim();
        const gaya = document.getElementById('gaya-input').value;

        if (!tema) {
            window.showToast('Tema tidak boleh kosong!', 'error');
            return;
        }

        // Set Loading State
        setLoadingState(true);

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

            if (!response.ok) {
                throw new Error('Terjadi kesalahan pada server');
            }

            const data = await response.json();
            
            // Display Results
            displayResults(data);

        } catch (error) {
            console.error('Generation error:', error);
            window.showToast(error.message || 'Gagal terhubung ke server', 'error');
        } finally {
            // Remove Loading State
            setLoadingState(false);
        }
    });

    function setLoadingState(isLoading) {
        if (isLoading) {
            generateBtn.disabled = true;
            btnText.textContent = 'Memproses...';
            btnSpinner.classList.remove('hidden');
            
            // Hide previous results if any
            resultContainer.classList.add('hidden');
            analyticsContainer.classList.add('hidden');
            visualizationContainer.classList.add('hidden');
            
            // Show empty state briefly with loading indication if desired
            // Or leave it hidden during loading
            emptyState.classList.add('hidden');
        } else {
            generateBtn.disabled = false;
            btnText.textContent = 'Generate Now';
            btnSpinner.classList.add('hidden');
        }
    }

    function displayResults(data) {
        // Update DOM elements with data
        resultBadge.textContent = `Tema: ${data.tema} | Gaya: ${data.gaya}`;
        resultText.textContent = data.pantun;
        
        document.getElementById('stat-rima').textContent = data.pola_rima;
        document.getElementById('stat-suku').textContent = data.suku_kata;
        document.getElementById('stat-conf').textContent = `${(data.confidence * 100).toFixed(0)}%`;
        document.getElementById('stat-sent').textContent = data.sentiment;

        // Apply animations
        resultContainer.classList.remove('hidden');
        resultContainer.classList.add('fade-in');
        
        analyticsContainer.classList.remove('hidden');
        analyticsContainer.classList.add('fade-in');
        
        visualizationContainer.classList.remove('hidden');
        visualizationContainer.classList.add('fade-in');
        
        // Ensure empty state is hidden
        emptyState.classList.add('hidden');
        
        // Remove animation class after it completes to allow re-triggering
        setTimeout(() => {
            resultContainer.classList.remove('fade-in');
            analyticsContainer.classList.remove('fade-in');
            visualizationContainer.classList.remove('fade-in');
        }, 500);
    }
});