// Screen Test - Main JS

document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('idea-form');
    const submitButton = form.querySelector('button[type="submit"]');
    const personasContainer = document.getElementById('personas-container');
    const personasGrid = document.getElementById('personas-grid');

    if (form) {
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            
            const audience = document.getElementById('target-audience').value;
            const idea = document.getElementById('business-idea').value;

            if (!audience || !idea) {
                alert('Please fill out both Target Audience and Business Idea fields.');
                return;
            }

            // --- Loading State ---
            const originalButtonText = submitButton.innerHTML;
            submitButton.disabled = true;
            submitButton.innerHTML = `
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                Generating...
            `;
            personasContainer.classList.add('d-none');
            personasGrid.innerHTML = '';


            // --- API Call ---
            fetch('api/generate_personas.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ audience, idea }),
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => { throw new Error(err.error || 'An unknown error occurred.') });
                }
                return response.json();
            })
            .then(data => {
                // --- Render Personas ---
                if (data.personas && data.personas.length > 0) {
                    renderPersonas(data.personas);
                    personasContainer.classList.remove('d-none');
                    setTimeout(() => {
                        personasContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }, 100);
                } else {
                    throw new Error('The AI did not return any personas. Please try refining your inputs.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert(`An error occurred: ${error.message}`);
            })
            .finally(() => {
                // --- Reset Button ---
                submitButton.disabled = false;
                submitButton.innerHTML = originalButtonText;
            });
        });
    }

    function renderPersonas(personas) {
        const personaGradients = [
            'persona-gradient-1',
            'persona-gradient-2',
            'persona-gradient-3'
        ];

        personasGrid.innerHTML = personas.map((persona, index) => `
            <div class="col-lg-4 col-md-6">
                <div class="card persona-card h-100 rounded-4 shadow-lg border-0 ${personaGradients[index % 3]}">
                    <div class="card-body p-4">
                        <h3 class="card-title fw-bold">${persona.name}</h3>
                        <p class="card-subtitle mb-2 text-white-75">${persona.age}, ${persona.occupation}</p>
                        <div class="mt-4">
                            <h6 class="fw-semibold">Traits:</h6>
                            <p>${persona.traits}</p>
                            <h6 class="fw-semibold">Concerns:</h6>
                            <p>${persona.concerns}</p>
                            <h6 class="fw-semibold">Style:</h6>
                            <p>${persona.style}</p>
                        </div>
                    </div>
                </div>
            </div>
        `).join('');
    }
});