document.addEventListener('DOMContentLoaded', function() {
    feather.replace();

    const scannerForm = document.querySelector('#scanner form');
    const scanButton = scannerForm.querySelector('button[type="submit"]');
    const resultsTableBody = document.querySelector('#scanner .table-responsive tbody');

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

            // Show loading state
            scanButton.disabled = true;
            scanButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Scanning...';
            resultsTableBody.innerHTML = '<tr><td colspan="5" class="text-center text-secondary py-4">Scanning for moonshots...</td></tr>';

            const formData = new FormData(scannerForm);

            fetch('scanner.php', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    // Restore button
                    scanButton.disabled = false;
                    scanButton.innerHTML = 'Scan';

                    let tableContent = '';
                    if (data.length > 0) {
                        data.forEach(stock => {
                            tableContent += `
                                <tr>
                                    <td class="fw-bold">${stock.symbol}</td>
                                    <td>${stock.company_name}</td>
                                    <td class="text-end">${parseFloat(stock.price).toFixed(2)}</td>
                                    <td class="text-end">${formatMarketCap(stock.market_cap)}</td>
                                    <td class="text-center">
                                        <form method="POST" action="index.php" style="display: inline;">
                                            <input type="hidden" name="symbol" value="${stock.symbol}">
                                            <button type="submit" class="btn btn-sm btn-outline-primary">Add to Watchlist</button>
                                        </form>
                                    </td>
                                </tr>
                            `;
                        });
                    } else {
                        tableContent = '<tr><td colspan="5" class="text-center text-secondary py-4">No stocks matched your criteria.</td></tr>';
                    }
                    resultsTableBody.innerHTML = tableContent;
                    feather.replace(); // Re-run feather icons
                })
                .catch(error => {
                    console.error('Error during scan:', error);
                    // Restore button
                    scanButton.disabled = false;
                    scanButton.innerHTML = 'Scan';
                    resultsTableBody.innerHTML = '<tr><td colspan="5" class="text-center text-danger py-4">An error occurred during the scan.</td></tr>';
                });
        });
    }
});

function formatMarketCap(num) {
    if (num >= 1000000000) {
        return '
 + (num / 1000000000).toFixed(2) + 'B';
    }
    if (num >= 1000000) {
        return '
 + (num / 1000000).toFixed(2) + 'M';
    }
    return '
 + num;
}

// Handle adding from scan results to watchlist
document.addEventListener('click', function(e) {
    if (e.target && e.target.matches('#scanner .btn-outline-primary')) {
        const form = e.target.closest('form');
        if (form) {
            e.preventDefault();
            const formData = new FormData(form);

            fetch(form.action, {
                method: 'POST',
                body: formData
            })
            .then(response => {
                // Redirect or update UI as needed. For now, we'll just reload.
                window.location.hash = 'watchlist';
                window.location.reload();
            })
            .catch(error => console.error('Error adding to watchlist:', error));
        }
    }
});