/***** Options JS for Chrome Extension: Tracking Proxy Helper *****/

document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('options-form');
    const addUrlButton = document.getElementById('add-url-field');
    const urlFieldsContainer = document.getElementById('url-fields-container');
    const savedValuesContainer = document.getElementById('saved-values');

    // Add event listener for adding URL fields
    addUrlButton.addEventListener('click', function () {
        const urlField = createUrlField();
        urlFieldsContainer.appendChild(urlField);
    });

    // Load saved options
    loadOptions();

    // Save options on form submit
    form.addEventListener('submit', function (event) {
        event.preventDefault();
        saveOptions();
    });
});

/**
 * Create a new URL field element
 * @returns {HTMLDivElement} The created URL field element
 */
function createUrlField() {
    const urlField = document.createElement('div');
    urlField.className = 'url-field';
    urlField.innerHTML = `
        <input type="text" class="url-input" name="url[]">
        <label>
            <input type="checkbox" class="regex-checkbox"> Is Regex
        </label>
        <button type="button" class="remove-url-field">Remove</button>
    `;

    // Add event listener for removing URL fields
    urlField.querySelector('.remove-url-field').addEventListener('click', function () {
        urlField.remove();
    });

    return urlField;
}

/**
 * Save options to chrome.storage.sync
 */
function saveOptions() {
    const headerValue = document.getElementById('header-value').value;
    const urlFields = document.querySelectorAll('#httpheader .url-field'); // Only URL fields
    const urls = Array.from(urlFields).map(urlField => {
        const urlInput = urlField.querySelector('.url-input');
        const regexCheckbox = urlField.querySelector('.regex-checkbox');

        // Ensure that the inputs exist
        if (!urlInput || !regexCheckbox) {
            console.error('Invalid URL field:', urlField);
            return null;
        }

        return {
            url: urlInput.value,
            isRegex: regexCheckbox.checked
        };
    }).filter(urlObj => urlObj !== null); // Remove null entries

    const scriptContent = document.getElementById('script-content').value;
    const scriptUrl = document.getElementById('script-url').value;
    const scriptUrlIsRegex = document.getElementById('script-url-regex').checked;
    const blockGtm = document.getElementById('block-gtm').checked;
    const gtmContainerId = document.getElementById('gtm-container-id').value;
    const gtmContainerIdIsRegex = document.getElementById('gtm-container-id-regex').checked;
    const trackingProxyUrl = document.getElementById('tracking-proxy-url').value;
    const trackingProxyUrlIsRegex = document.getElementById('tracking-proxy-url-regex').checked;
    const blockTrackingProxy = document.getElementById('block-tracking-proxy').checked;

    chrome.storage.sync.set({
        headerValue,
        urls,
        scriptContent,
        scriptUrl,
        scriptUrlIsRegex,
        blockGtm,
        gtmContainerId,
        gtmContainerIdIsRegex,
        trackingProxyUrl,
        trackingProxyUrlIsRegex,
        blockTrackingProxy
    }, function () {
        alert('Options saved!');
        displaySavedValues();  // Update displayed saved values
    });
}

/**
 * Load options from chrome.storage.sync
 */
function loadOptions() {
    chrome.storage.sync.get([
        'headerValue',
        'urls',
        'scriptContent',
        'scriptUrl',
        'scriptUrlIsRegex',
        'blockGtm',
        'gtmContainerId',
        'gtmContainerIdIsRegex',
        'trackingProxyUrl',
        'trackingProxyUrlIsRegex',
        'blockTrackingProxy'
    ], function (data) {
        document.getElementById('header-value').value = data.headerValue || '';

        const urlFieldsContainer = document.getElementById('url-fields-container');
        urlFieldsContainer.innerHTML = '';

        (data.urls || []).forEach(urlObj => {
            const urlField = createUrlField();
            urlField.querySelector('.url-input').value = urlObj.url;
            urlField.querySelector('.regex-checkbox').checked = urlObj.isRegex;
            urlFieldsContainer.appendChild(urlField);
        });

        document.getElementById('script-content').value = data.scriptContent || '';
        document.getElementById('script-url').value = data.scriptUrl || '';
        document.getElementById('script-url-regex').checked = data.scriptUrlIsRegex || false;
        document.getElementById('block-gtm').checked = data.blockGtm || false;
        document.getElementById('gtm-container-id').value = data.gtmContainerId || '';
        document.getElementById('gtm-container-id-regex').checked = data.gtmContainerIdIsRegex || false;
        document.getElementById('tracking-proxy-url').value = data.trackingProxyUrl || '';
        document.getElementById('tracking-proxy-url-regex').checked = data.trackingProxyUrlIsRegex || false;
        document.getElementById('block-tracking-proxy').checked = data.blockTrackingProxy || false;

        displaySavedValues();  // Display saved values on load
    });
}

/**
 * Display saved values in a <pre> element
 */
function displaySavedValues() {
    chrome.storage.sync.get(null, function(items) {
        const savedValuesContainer = document.getElementById('saved-values');
        savedValuesContainer.textContent = JSON.stringify(items, null, 2);
    });
}

// EOF