document.addEventListener("DOMContentLoaded", function () {
    // Get UI elements
    const addTrustedBtn = document.getElementById("addTrustedDomain");
    const addBlockedBtn = document.getElementById("addBlockedDomain");
    const domainModal = document.getElementById("domainModal");
    const modalTitle = document.getElementById("modalTitle");
    const domainNameInput = document.getElementById("domainName");
    const domainTypeSelect = document.getElementById("domainType");
    const saveDomainBtn = document.getElementById("saveDomain");
    const cancelDomainBtn = document.getElementById("cancelDomain");
    const trustedSearch = document.getElementById("trustedSearch");
    const blockedSearch = document.getElementById("blockedSearch");
    const trustedDomainsList = document.getElementById("trustedDomainsList");
    const blockedDomainsList = document.getElementById("blockedDomainsList");
    const statusMessage = document.getElementById("statusMessage");

    let currentDomainType = 'trusted';
    let editingDomain = null;

    // Load saved domains
    loadDomains();

    // Add domain buttons
    if (addTrustedBtn) {
        addTrustedBtn.addEventListener("click", () => openAddModal('trusted'));
    }
    if (addBlockedBtn) {
        addBlockedBtn.addEventListener("click", () => openAddModal('blocked'));
    }

    // Modal buttons
    if (saveDomainBtn) {
        saveDomainBtn.addEventListener("click", saveDomain);
    }
    if (cancelDomainBtn) {
        cancelDomainBtn.addEventListener("click", closeModal);
    }

    // Search functionality
    if (trustedSearch) {
        trustedSearch.addEventListener("input", (e) => filterDomains('trusted', e.target.value));
    }
    if (blockedSearch) {
        blockedSearch.addEventListener("input", (e) => filterDomains('blocked', e.target.value));
    }

    // Functions
    function loadDomains() {
        chrome.storage.local.get(["trustedDomains", "blockedDomains"], function (data) {
            renderDomainList('trusted', data.trustedDomains || []);
            renderDomainList('blocked', data.blockedDomains || []);
        });
    }

    function renderDomainList(type, domains) {
        const list = type === 'trusted' ? trustedDomainsList : blockedDomainsList;
        if (!list) return;

        list.innerHTML = '';
        domains.forEach(domain => {
            const item = createDomainItem(domain, type);
            list.appendChild(item);
        });
    }

    function createDomainItem(domain, type) {
        const div = document.createElement('div');
        div.className = 'domain-item';
        div.innerHTML = `
            <div class="domain-info">
                <span class="domain-name">${domain}</span>
                <span class="domain-type">${type}</span>
            </div>
            <div class="domain-actions">
                <button class="edit-btn" onclick="editDomain('${domain}', '${type}')">
                    <span>✏️</span>
                    <span>Edit</span>
                </button>
                <button class="remove-btn" onclick="removeDomain('${domain}', '${type}')">
                    <span>🗑️</span>
                    <span>Remove</span>
                </button>
            </div>
        `;
        return div;
    }

    function openAddModal(type) {
        currentDomainType = type;
        editingDomain = null;
        modalTitle.textContent = `Add ${type === 'trusted' ? 'Trusted' : 'Blocked'} Domain`;
        domainNameInput.value = '';
        domainTypeSelect.value = type;
        domainModal.classList.add('active');
    }

    function closeModal() {
        domainModal.classList.remove('active');
        editingDomain = null;
    }

    function saveDomain() {
        const domain = domainNameInput.value.trim();
        if (!domain) {
            showStatus('Please enter a domain name', 'error');
            return;
        }

        chrome.storage.local.get(["trustedDomains", "blockedDomains"], function (data) {
            const trustedDomains = data.trustedDomains || [];
            const blockedDomains = data.blockedDomains || [];
            const type = domainTypeSelect.value;

            // Remove from both lists if editing
            if (editingDomain) {
                const oldType = currentDomainType;
                if (oldType === 'trusted') {
                    const index = trustedDomains.indexOf(editingDomain);
                    if (index > -1) trustedDomains.splice(index, 1);
                } else {
                    const index = blockedDomains.indexOf(editingDomain);
                    if (index > -1) blockedDomains.splice(index, 1);
                }
            }

            // Add to appropriate list
            if (type === 'trusted' && !trustedDomains.includes(domain)) {
                trustedDomains.push(domain);
            } else if (type === 'blocked' && !blockedDomains.includes(domain)) {
                blockedDomains.push(domain);
            }

            // Save to storage
            chrome.storage.local.set({
                trustedDomains: trustedDomains,
                blockedDomains: blockedDomains
            }, function () {
                loadDomains();
                closeModal();
                showStatus(`Domain ${editingDomain ? 'updated' : 'added'} successfully`, 'success');
            });
        });
    }

    function editDomain(domain, type) {
        currentDomainType = type;
        editingDomain = domain;
        modalTitle.textContent = `Edit ${type === 'trusted' ? 'Trusted' : 'Blocked'} Domain`;
        domainNameInput.value = domain;
        domainTypeSelect.value = type;
        domainModal.classList.add('active');
    }

    function removeDomain(domain, type) {
        if (confirm(`Are you sure you want to remove ${domain}?`)) {
            chrome.storage.local.get(["trustedDomains", "blockedDomains"], function (data) {
                const trustedDomains = data.trustedDomains || [];
                const blockedDomains = data.blockedDomains || [];

                if (type === 'trusted') {
                    const index = trustedDomains.indexOf(domain);
                    if (index > -1) trustedDomains.splice(index, 1);
                } else {
                    const index = blockedDomains.indexOf(domain);
                    if (index > -1) blockedDomains.splice(index, 1);
                }

                chrome.storage.local.set({
                    trustedDomains: trustedDomains,
                    blockedDomains: blockedDomains
                }, function () {
                    loadDomains();
                    showStatus('Domain removed successfully', 'success');
                });
            });
        }
    }

    function filterDomains(type, searchTerm) {
        const list = type === 'trusted' ? trustedDomainsList : blockedDomainsList;
        if (!list) return;

        const items = list.getElementsByClassName('domain-item');
        searchTerm = searchTerm.toLowerCase();

        Array.from(items).forEach(item => {
            const domainName = item.querySelector('.domain-name').textContent.toLowerCase();
            item.style.display = domainName.includes(searchTerm) ? '' : 'none';
        });
    }

    function showStatus(message, type) {
        statusMessage.textContent = message;
        statusMessage.className = `status-message ${type}`;
        statusMessage.style.display = 'block';
        setTimeout(() => {
            statusMessage.style.display = 'none';
        }, 3000);
    }

    // Make functions available globally for onclick handlers
    window.editDomain = editDomain;
    window.removeDomain = removeDomain;
});