document.addEventListener('DOMContentLoaded', function () {
    const generatorForm = document.getElementById('generator-form');
    const resultContainer = document.getElementById('result-container');
    const copyButton = document.getElementById('copy-button');
    const generateButton = generatorForm.querySelector('button[type="submit"]');
    const originalButtonText = generateButton.innerHTML;

    if (generatorForm) {
        generatorForm.addEventListener('submit', function (e) {
            e.preventDefault();

            const genre = document.getElementById('genre').value;
            const topic = document.getElementById('topic').value;
            
            if (!topic.trim()) {
                alert("Please enter a topic.");
                return;
            }

            // --- UI Changes for Loading State ---
            generateButton.disabled = true;
            generateButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Generating...';
            
            resultContainer.style.display = 'block';
            resultContainer.classList.add('loading');
            resultContainer.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>';
            copyButton.style.display = 'none';

            // --- API Call ---
            fetch('/api/generate_script.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ genre: genre, topic: topic }),
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => { throw new Error(err.error || 'Network response was not ok'); });
                }
                return response.json();
            })
            .then(data => {
                if (data.error) {
                    throw new Error(data.error);
                }
                // --- Display Success ---
                resultContainer.classList.remove('loading');
                resultContainer.innerHTML = `<p id="script-content">${data.script}</p>`; // Use innerHTML to render <br> tags
                copyButton.style.display = 'block';
            })
            .catch(error => {
                // --- Display Error ---
                resultContainer.classList.remove('loading');
                resultContainer.innerHTML = `<div class="alert alert-danger" role="alert"><strong>Error:</strong> ${error.message}</div>`;
            })
            .finally(() => {
                // --- Reset Button ---
                generateButton.disabled = false;
                generateButton.innerHTML = originalButtonText;
            });
        });
    }

    if (copyButton) {
        copyButton.addEventListener('click', function () {
            const scriptContent = document.getElementById('script-content').innerText; // Use innerText to get clean text
            navigator.clipboard.writeText(scriptContent).then(() => {
                const originalCopyText = copyButton.innerHTML;
                copyButton.innerHTML = 'Copied!';
                setTimeout(() => {
                    copyButton.innerHTML = originalCopyText;
                }, 2000);
            }).catch(err => {
                alert('Failed to copy text.');
            });
        });
    }

    // Smooth scroll for hero CTA
    const heroCta = document.querySelector('.hero .btn');
    if(heroCta) {
        heroCta.addEventListener('click', function(e) {
            e.preventDefault();
            document.querySelector(heroCta.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    }

    // Social Media Connection Logic
    const socialConnectionSections = document.querySelectorAll('.social-connection');
    socialConnectionSections.forEach(section => {
        const button = section.querySelector('.social-btn');
        const statusIndicator = section.querySelector('.status-indicator');

        button.addEventListener('click', function() {
            const action = button.dataset.action;
            const platform = section.dataset.platform;
            const isConnected = action === 'connect';

            fetch('/api/update_connection.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ platform: platform, is_connected: isConnected }),
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    if (isConnected) {
                        button.dataset.action = 'disconnect';
                        button.textContent = 'Disconnect ' + platform.charAt(0).toUpperCase() + platform.slice(1);
                        statusIndicator.textContent = 'Connected';
                        statusIndicator.classList.remove('not-connected');
                        statusIndicator.classList.add('connected');
                    } else {
                        button.dataset.action = 'connect';
                        button.textContent = 'Connect ' + platform.charAt(0).toUpperCase() + platform.slice(1);
                        statusIndicator.textContent = 'Not Connected';
                        statusIndicator.classList.remove('connected');
                        statusIndicator.classList.add('not-connected');
                    }
                } else {
                    alert('Failed to update connection status.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while updating connection status.');
            });
        });
    });

    // Report Generation Logic
    const generateReportBtn = document.getElementById('generate-report-btn');
    const reportSection = document.getElementById('report-section');
    const reportContent = document.getElementById('report-content');

    if (generateReportBtn) {
        generateReportBtn.addEventListener('click', function() {
            reportSection.style.display = 'block';
            reportContent.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>';

            // Simulate report generation
            setTimeout(() => {
                const reportHTML = `
                    <div class="kpi-grid">
                        <div class="kpi">
                            <div class="kpi-value">1.2M</div>
                            <div class="kpi-label">Total Followers</div>
                        </div>
                        <div class="kpi">
                            <div class="kpi-value">5.8%</div>
                            <div class="kpi-label">Engagement Rate</div>
                        </div>
                        <div class="kpi">
                            <div class="kpi-value">25.2K</div>
                            <div class="kpi-label">Avg. Likes per Post</div>
                        </div>
                    </div>
                    <h4>Top Performing Posts</h4>
                    <div class="post-list">
                        <div class="post-item">
                            <img src="https://images.pexels.com/photos/1787235/pexels-photo-1787235.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Post thumbnail" class="post-thumbnail">
                            <div class="post-info">
                                <div class="post-caption">Unboxing the new tech gadget! You won't believe what it can do.</div>
                                <div class="post-stats">Likes: 58.1K | Comments: 2.3K</div>
                            </div>
                        </div>
                        <div class="post-item">
                            <img src="https://images.pexels.com/photos/2582937/pexels-photo-2582937.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Post thumbnail" class="post-thumbnail">
                            <div class="post-info">
                                <div class="post-caption">My morning routine for a productive day. #morningroutine</div>
                                <div class="post-stats">Likes: 42.7K | Comments: 1.8K</div>
                            </div>
                        </div>
                    </div>
                `;
                reportContent.innerHTML = reportHTML;
            }, 2000);
        });
    }

    // AI Content Strategy Logic
    const discoverStrategyBtn = document.getElementById('discover-strategy-btn');
    const strategySection = document.getElementById('strategy-section');
    const strategyContent = document.getElementById('strategy-content');

    if (discoverStrategyBtn) {
        discoverStrategyBtn.addEventListener('click', function() {
            strategySection.style.display = 'block';
            strategyContent.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>';

            // --- API Call ---
            fetch('/api/generate_script.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ genre: 'Content Strategy', topic: 'Give me a content strategy for a tech influencer.' }),
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => { throw new Error(err.error || 'Network response was not ok'); });
                }
                return response.json();
            })
            .then(data => {
                if (data.error) {
                    throw new Error(data.error);
                }
                // --- Display Success ---
                strategyContent.innerHTML = `<p>${data.script}</p>`;
            })
            .catch(error => {
                // --- Display Error ---
                strategyContent.innerHTML = `<div class="alert alert-danger" role="alert"><strong>Error:</strong> ${error.message}</div>`;
            });
        });
    }
});