document.addEventListener('DOMContentLoaded', function() {
    const statusDiv = document.getElementById('status');
    const suggestionsDiv = document.getElementById('suggestions');
    const suggestionsList = document.getElementById('suggestionsList');
    const acceptAllButton = document.getElementById('acceptAll');
    const regenerateButton = document.getElementById('regenerate');
    const apiKeyForm = document.getElementById('apiKeyForm');
    const saveApiKeyButton = document.getElementById('saveApiKey');

    console.log('Popup loaded!');

    let currentSuggestions = [];

    // Function to update status
    function updateStatus(message, isError = false, isLoading = false) {
        console.log('Status update:', message, isError, isLoading);
        statusDiv.textContent = message;
        statusDiv.className = `status ${isError ? 'error' : isLoading ? 'loading' : 'success'}`;
    }

    // Function to send message to content script
    async function sendMessage(action, data = {}) {
        try {
            console.log('Sending message:', action, data);
            const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
            if (!tab) {
                throw new Error('No active tab found');
            }
            
            console.log('Found active tab:', tab.id);
            const response = await browser.tabs.sendMessage(tab.id, { action, ...data });
            console.log('Received response:', response);
            
            if (!response.success) {
                throw new Error(response.message);
            }
            
            return response;
        } catch (error) {
            console.error('Error sending message:', error);
            throw error;
        }
    }

    // Function to display suggestions
    function displaySuggestions(suggestions) {
        currentSuggestions = suggestions;
        suggestionsList.innerHTML = '';
        
        if (suggestions.length === 0) {
            suggestionsList.innerHTML = '<div class="no-suggestions">No suggestions available</div>';
            acceptAllButton.style.display = 'none';
            regenerateButton.style.display = 'block';
            return;
        }

        let hasUnappliedSuggestions = false;

        suggestions.forEach((suggestion, index) => {
            const item = document.createElement('div');
            item.className = 'suggestion-item';
            
            const info = document.createElement('div');
            info.className = 'suggestion-info';
            
            const label = document.createElement('div');
            label.className = 'suggestion-label';
            label.textContent = suggestion.fieldIdentifier.label || 
                              suggestion.fieldIdentifier.name || 
                              suggestion.fieldIdentifier.id || 
                              `Field ${index + 1}`;
            
            const value = document.createElement('div');
            value.className = 'suggestion-value';
            value.textContent = `Suggested: ${suggestion.value}`;
            
            const confidence = document.createElement('div');
            confidence.className = 'suggestion-confidence';
            confidence.textContent = `Confidence: ${Math.round(suggestion.confidence * 100)}%`;
            
            info.appendChild(label);
            info.appendChild(value);
            info.appendChild(confidence);
            
            const acceptButton = document.createElement('button');
            acceptButton.className = 'accept-button';
            
            if (suggestion.applied) {
                acceptButton.disabled = true;
                acceptButton.textContent = 'Applied';
            } else {
                hasUnappliedSuggestions = true;
                acceptButton.textContent = 'Accept';
                acceptButton.onclick = async () => {
                    try {
                        await sendMessage('executeFillLogic', { fillLogic: suggestion.fillLogic });
                        acceptButton.disabled = true;
                        acceptButton.textContent = 'Applied';
                        suggestion.applied = true;
                        
                        // Check if all suggestions are applied
                        if (!currentSuggestions.some(s => !s.applied)) {
                            acceptAllButton.disabled = true;
                            acceptAllButton.textContent = 'All Applied';
                        }
                    } catch (error) {
                        updateStatus('Error applying suggestion: ' + error.message, true);
                    }
                };
            }
            
            item.appendChild(info);
            item.appendChild(acceptButton);
            suggestionsList.appendChild(item);
        });
        
        // Show/hide accept all button based on unapplied suggestions
        acceptAllButton.style.display = hasUnappliedSuggestions ? 'block' : 'none';
        regenerateButton.style.display = 'block';
        
        if (!hasUnappliedSuggestions) {
            acceptAllButton.disabled = true;
            acceptAllButton.textContent = 'All Applied';
        } else {
            acceptAllButton.disabled = false;
            acceptAllButton.textContent = 'Accept All';
        }
    }

    // Function to generate suggestions
    async function generateSuggestions(clearCache = false) {
        try {
            updateStatus('Detecting fields and generating suggestions...', false, true);
            suggestionsDiv.style.display = 'none';
            
            if (clearCache) {
                await sendMessage('clearSuggestions');
            }
            
            const response = await sendMessage('generateSuggestions');
            displaySuggestions(response.data.suggestions);
            suggestionsDiv.style.display = 'block';
            updateStatus(clearCache ? 'Generated new suggestions!' : 'Loaded suggestions');
        } catch (error) {
            updateStatus('Error: ' + error.message, true);
        }
    }

    // Check if API key is stored
    browser.storage.local.get('geminiApiKey').then(result => {
        if (!result.geminiApiKey) {
            apiKeyForm.style.display = 'block';
        }
    });

    // Save API key
    saveApiKeyButton.addEventListener('click', function() {
        const apiKey = document.getElementById('apiKey').value;
        if (apiKey) {
            browser.storage.local.set({ geminiApiKey: apiKey }).then(() => {
                apiKeyForm.style.display = 'none';
                updateStatus('API Key saved successfully');
            }).catch(error => {
                updateStatus('Failed to save API Key', true);
            });
        }
    });

    // Generate suggestions when popup opens
    generateSuggestions(false);

    // Regenerate suggestions
    regenerateButton.addEventListener('click', () => generateSuggestions(true));

    // Accept all suggestions
    acceptAllButton.addEventListener('click', async () => {
        console.log('Accept all clicked');
        try {
            updateStatus('Applying all suggestions...');
            let successCount = 0;
            
            for (const suggestion of currentSuggestions) {
                if (!suggestion.applied) {
                    try {
                        await sendMessage('executeFillLogic', { fillLogic: suggestion.fillLogic });
                        successCount++;
                    } catch (error) {
                        console.error('Error applying suggestion:', error);
                    }
                }
            }
            
            updateStatus(`Successfully applied ${successCount} suggestions`);
            acceptAllButton.disabled = true;
            acceptAllButton.textContent = 'All Applied';
            
            // Refresh suggestions to show updated state
            const response = await sendMessage('generateSuggestions');
            displaySuggestions(response.data.suggestions);
        } catch (error) {
            updateStatus('Error: ' + error.message, true);
        }
    });
});