// popup.js

// Use runtimeAPI for cross-browser compatibility
const runtimeAPI = typeof browser !== 'undefined' ? browser : chrome;
const storageAPI = runtimeAPI.storage.local; // Using local storage API

// Cache DOM elements for better performance
const clearTraceButton = document.getElementById('clearTrace');
const clearPointsButton = document.getElementById('clearPoints');
const clearedMessage = document.getElementById('cleared');
const toggleFontCheckbox = document.getElementById('toggleFont');
const toggleBGMCheckbox = document.getElementById('toggleBGM');

// --- Helper Functions ---

// Displays a temporary message in the 'cleared' div
function showClearedMessage(message) {
    clearedMessage.textContent = `Cleared: ${message}`;
    setTimeout(() => {
        clearedMessage.textContent = ''; // Clear message after 2 seconds
    }, 2000);
}

// Sends a message to the background script
async function sendMessageToBackground(action, payload = {}) {
    try {
        const response = await runtimeAPI.runtime.sendMessage({ action, ...payload });
        console.log(`Popup: Message "${action}" sent to background, response:`, response);
        return response;
    } catch (error) {
        console.error(`Popup: Error sending message "${action}" to background:`, error);
        return { success: false, error: error.message };
    }
}


// --- Event Listeners ---

clearTraceButton.addEventListener('click', function() {
    sendMessageToBackground('clearLogs'); // Action handled by background.js
    showClearedMessage('trace');
});

clearPointsButton.addEventListener('click', function() {
    sendMessageToBackground('clearPoints'); // Action handled by background.js
    showClearedMessage('points');
});

toggleFontCheckbox.addEventListener('change', function() {
    const isChecked = this.checked;
    // Store 'fontDisabled' state (true if checkbox is UNCHECKED, false if CHECKED)
    storageAPI.set({ fontDisabled: !isChecked })
        .then(() => {
            console.log("Font state saved:", isChecked ? "Enabled" : "Disabled");
            // No direct message to content script for font, as it typically requires a page reload
            // for the font to correctly apply across all elements.
        })
        .catch(error => console.error("Error saving font state:", error));
});

toggleBGMCheckbox.addEventListener('change', function() {
    const isChecked = this.checked;
    // Send a message to the background script to toggle BGM state and playback
    sendMessageToBackground('toggleBGM', { enabled: isChecked });

    // Additionally, if the page is active, tell content script to update immediately
    // (though background script will handle persistence)
    runtimeAPI.tabs.query({ active: true, currentWindow: true }, function(tabs) {
        if (tabs[0]) {
            runtimeAPI.tabs.sendMessage(tabs[0].id, {
                action: "toggleBGMImmediate",
                enabled: isChecked
            }).catch(error => console.warn("Popup: Could not send immediate BGM toggle to content script:", error));
        }
    });
});


// --- Initial State Loading ---

// Load all states when the popup is opened
document.addEventListener('DOMContentLoaded', function() {
    storageAPI.get(['fontDisabled', 'bgmEnabled'])
        .then(result => {
            // Font: checked means font IS enabled, so `fontDisabled` should be false
            toggleFontCheckbox.checked = !(result.fontDisabled === true);
            console.log("Popup: Initial font state loaded:", toggleFontCheckbox.checked);

            // BGM: checked means BGM IS enabled
            toggleBGMCheckbox.checked = (result.bgmEnabled === true);
            console.log("Popup: Initial BGM state loaded:", toggleBGMCheckbox.checked);
        })
        .catch(error => console.error("Popup: Error loading initial states:", error));
});