options.js

// Template for creating new alert configuration
function createAlertConfig(id, config = {}) {
    const div = document.createElement('div');
    div.className = 'alert-config';
    div.innerHTML = `
        <button class="delete-btn" data-id="${id}">Delete</button>
        <div class="form-group">
            <label for="alertName_${id}">Alert Name:</label>
            <input type="text" id="alertName_${id}" placeholder="Enter a name for this alert" value="${config.alertName || ''}">
        </div>
        <div class="form-group">
            <label for="targetWord_${id}">Target Word/Phrase:</label>
            <input type="text" id="targetWord_${id}" placeholder="Enter word or phrase to watch for" value="${config.targetWord || ''}">
        </div>
        <div class="form-group">
            <label for="targetUrl_${id}">Target URL:</label>
            <input type="text" id="targetUrl_${id}" placeholder="Enter URL to monitor" value="${config.targetUrl || ''}">
        </div>
        <div class="form-group">
            <label for="refreshInterval_${id}">Refresh Interval (seconds):</label>
            <input type="number" id="refreshInterval_${id}" min="5" value="${config.refreshInterval || 10}">
        </div>
    `;
    return div;
}

// Load saved alerts when options page opens
document.addEventListener('DOMContentLoaded', () => {
    const alertList = document.getElementById('alertList');
    const addAlertBtn = document.getElementById('addAlert');

    // Load existing alerts
    chrome.storage.sync.get(['alerts'], (result) => {
        const alerts = result.alerts || {};
        Object.entries(alerts).forEach(([id, config]) => {
            alertList.appendChild(createAlertConfig(id, config));
        });
    });

    // Add new alert
    addAlertBtn.addEventListener('click', () => {
        const id = Date.now().toString();
        alertList.appendChild(createAlertConfig(id));
        saveAlerts();
    });

    // Handle delete buttons
    alertList.addEventListener('click', (e) => {
        if (e.target.classList.contains('delete-btn')) {
            const id = e.target.dataset.id;
            e.target.closest('.alert-config').remove();
            saveAlerts();
        }
    });

    // Save alerts when inputs change
    alertList.addEventListener('input', () => {
        saveAlerts();
    });
});

// Save all alerts to storage
function saveAlerts() {
    const alertList = document.getElementById('alertList');
    const alerts = {};
    
    alertList.querySelectorAll('.alert-config').forEach(config => {
        const id = config.querySelector('.delete-btn').dataset.id;
        const alertName = config.querySelector(`#alertName_${id}`).value;
        const targetWord = config.querySelector(`#targetWord_${id}`).value;
        const targetUrl = config.querySelector(`#targetUrl_${id}`).value;
        const refreshInterval = parseInt(config.querySelector(`#refreshInterval_${id}`).value);

        if (alertName && targetWord && targetUrl && refreshInterval) {
            alerts[id] = {
                alertName,
                targetWord,
                targetUrl,
                refreshInterval
            };
        }
    });

    chrome.storage.sync.set({ alerts }, () => {
        // Show success message
        const status = document.getElementById('status');
        status.textContent = 'Settings saved!';
        status.className = 'status success';
        status.style.display = 'block';
        
        // Hide success message after 2 seconds
        setTimeout(() => {
            status.style.display = 'none';
        }, 2000);
    });
}