document.addEventListener('DOMContentLoaded', function() {
    const grabButton = document.getElementById('grabKeywords');
    const semrushButton = document.getElementById('grabSemrushKeywords');
    const dialog = document.getElementById('dialog');
    const overlay = document.getElementById('overlay');
    const body = document.body;
    
    function showDialog(callback) {
        dialog.style.display = 'block';
        overlay.style.display = 'block';
        body.classList.add('dialog-open');
        
        const yesButton = document.getElementById('yesButton');
        const noButton = document.getElementById('noButton');
        
        function handleResponse(includeHeaders) {
            dialog.style.display = 'none';
            overlay.style.display = 'none';
            body.classList.remove('dialog-open');
            callback(includeHeaders);
        }
        
        yesButton.onclick = () => handleResponse(true);
        noButton.onclick = () => handleResponse(false);
    }

    async function sendMessage(action, includeHeaders) {
        try {
            const tabs = await browser.tabs.query({active: true, currentWindow: true});
            if (tabs[0]) {
                await browser.tabs.sendMessage(tabs[0].id, {
                    action: action,
                    includeHeaders: includeHeaders
                });
                console.log(`Sent ${action} message to content script`);
                window.close();
            } else {
                console.error('No active tab found');
            }
        } catch (error) {
            console.error('Error sending message:', error);
        }
    }

    grabButton.addEventListener('click', function() {
        showDialog((includeHeaders) => {
            sendMessage("GrabKeywords", includeHeaders);
        });
    });

    semrushButton.addEventListener('click', function() {
        showDialog((includeHeaders) => {
            sendMessage("GrabSemrushKeywords", includeHeaders);
        });
    });
});