document.addEventListener('DOMContentLoaded', function () {
    // Fetch the elements
    const accessTokenInput = document.getElementById('accessToken');
    const saveButton = document.getElementById('save-button');
    const deleteButton = document.getElementById('delete-button');
    const statusMessage = document.getElementById('status-message');

    // Retrieve the saved Access token from local storage
    chrome.storage.local.get(['access_token'], function (result) {
        if (result.access_token) {
            accessTokenInput.value = result.access_token;
        }
    });

    // Add event listener to the save button
    saveButton.addEventListener('click', function () {
        // Get the entered Access token
        const accessToken = accessTokenInput.value.trim();

        // Check if the Access token is not empty
        if (accessToken !== '' && accessToken.length > 10 && accessToken.length < 100) {
            // Save the Access token to local storage
            chrome.storage.local.set({ access_token: accessToken }, function () {
                // Update the status message
                statusMessage.textContent = 'Access token saved successfully!';
                setTimeout(function () {
                    // Clear the status message after 2 seconds
                    statusMessage.textContent = '';
                }, 2000);
            });
        } else {
            // Display an error message if the Access token is empty
            statusMessage.textContent = 'Please enter a valid Access token.';
        }
    });

    // Add event listener to the delete button
    deleteButton.addEventListener('click', function () {
        // Remove the Access token from local storage
        chrome.storage.local.remove(['access_token'], function () {
            // Update the status message
            statusMessage.textContent = 'Access token deleted successfully!';
            accessTokenInput.value = '';
            setTimeout(function () {
                // Clear the status message after 2 seconds
                statusMessage.textContent = '';
            }, 2000);
        });
    });
});

// localize title optionsTitle
document.getElementById('optionsTitle').innerHTML = chrome.i18n.getMessage("optionsTitle");

// localize api title apiTitle
document.getElementById('apiTitle').innerHTML = chrome.i18n.getMessage("apiTitle");

// localize the Access token input placeholder
document.getElementById('accessToken').placeholder = chrome.i18n.getMessage("optionsInputPlaceholder");

// localize access-token-note
document.getElementById('access-token-note').innerHTML = chrome.i18n.getMessage("optionsAccessTokenNote");

// localize save button text
document.getElementById('save-button-text').innerText = chrome.i18n.getMessage("optionsSaveButtonText");

// localize delete button text
document.getElementById('delete-button-text').innerText = chrome.i18n.getMessage("optionsDeleteButtonText");