{{ define "content" }}
{{ $filter := index .PageData "Filter" }}
{{ $urls := index .PageData "URLs" }}
{{ $domains := index .PageData "Domains" }}
<div class="max-w-6xl">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold">{{ $filter.Name }} - Blocklist</h1>
        <a href="/filter?filter={{ $filter.Name }}" class="text-blue-400 hover:text-blue-300">← Back to Filter</a>
    </div>

    <!-- Two column layout: Domains and URLs -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Left: Manual Domains -->
        <div>
            <h2 class="text-2xl font-bold mb-4">Manual Blocked Domains</h2>
            
            <!-- Add Domain Form -->
            <div class="bg-gray-800 p-6 rounded border border-gray-700 mb-4">
                <h3 class="text-lg font-semibold mb-3">Add Blocked Domain</h3>
                <form id="addDomainForm" onsubmit="handleAddDomain(event, 'blocklist')" class="space-y-3">
                    <input type="hidden" name="action" value="add_domain">
                    <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
                    <input type="text" id="addDomainInput" name="domain" placeholder="e.g., ads.example.com" class="w-full p-2 bg-gray-700 rounded text-white placeholder-gray-400 border border-gray-600" required>
                    <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold px-4 py-2 rounded transition">Add Domain</button>
                </form>
            </div>

            <!-- Search/Lookup Domains -->
            <div class="bg-gray-800 p-6 rounded border border-gray-700">
                <h3 class="text-lg font-semibold mb-3">Search Blocked Domains</h3>
                <div class="space-y-3">
                    <input type="text" id="blocklistDomainSearch" placeholder="Search for a blocked domain (use * as wildcard, e.g. *google.com)" class="w-full p-2 bg-gray-700 rounded text-white placeholder-gray-400 border border-gray-600" onkeyup="searchBlocklistDomains()">
                    <div id="blocklistSearchResults" class="bg-gray-750 rounded border border-gray-600 max-h-96 overflow-y-auto">
                        <p class="text-gray-400 p-4 text-center text-sm">Enter a domain name to search</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right: Blocklist URLs -->
        <div>
            <h2 class="text-2xl font-bold mb-4">Public Blocklist URLs</h2>
            
            <!-- Add URL Form -->
            <div class="bg-gray-800 p-6 rounded border border-gray-700 mb-4">
                <h3 class="text-lg font-semibold mb-3">Add Blocklist URL</h3>
                <form method="POST" action="/filter/blocklist/urls?filter={{ $filter.Name }}" class="space-y-3">
                    <input type="hidden" name="action" value="add_url">
                    <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
                    <input type="text" name="name" placeholder="Name/Description" class="w-full p-2 bg-gray-700 rounded text-white placeholder-gray-400 border border-gray-600" required>
                    <input type="url" name="url" placeholder="https://example.com/blocklist.txt" class="w-full p-2 bg-gray-700 rounded text-white placeholder-gray-400 border border-gray-600" required>
                    <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold px-4 py-2 rounded transition">Add URL</button>
                </form>
            </div>

            <!-- URLs Table -->
            {{ if $urls }}
            <div class="bg-gray-800 rounded border border-gray-700 overflow-hidden">
                <div class="bg-gray-900 px-4 py-2 font-semibold text-white">Blocklist URL Sources</div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-750">
                            <tr>
                                <th class="px-4 py-2 text-left">Name</th>
                                <th class="px-4 py-2 text-left">URL</th>
                                <th class="px-4 py-2 text-center">Status</th>
                                <th class="px-4 py-2 text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-700">
                            {{ range $index, $url := $urls }}
                            <tr class="hover:bg-gray-750">
                                <td class="px-4 py-2 text-gray-300">{{ $url.Name }}</td>
                                <td class="px-4 py-2 text-gray-400 text-xs break-all">{{ $url.URL }}</td>
                                <td class="px-4 py-2 text-center">
                                    {{ if $url.Enabled }}
                                    <span class="text-green-400 text-xs font-semibold">✓ Enabled</span>
                                    {{ else }}
                                    <span class="text-red-400 text-xs font-semibold">✗ Disabled</span>
                                    {{ end }}
                                </td>
                                <td class="px-4 py-2 text-center space-x-2">
                                    <form method="POST" action="/filter/blocklist/urls?filter={{ $filter.Name }}" class="inline">
                                        <input type="hidden" name="action" value="toggle_url">
                                        <input type="hidden" name="index" value="{{ $index }}">
                                        <input type="hidden" name="csrf_token" value="{{ $.CSRFToken }}">
                                        <button type="submit" class="text-yellow-400 hover:text-yellow-300 text-xs font-semibold">Toggle</button>
                                    </form>
                                    <form method="POST" action="/filter/blocklist/urls?filter={{ $filter.Name }}" class="inline">
                                        <input type="hidden" name="action" value="remove_url">
                                        <input type="hidden" name="index" value="{{ $index }}">
                                        <input type="hidden" name="csrf_token" value="{{ $.CSRFToken }}">
                                        <button type="submit" class="text-red-400 hover:text-red-300 text-xs font-semibold">Remove</button>
                                    </form>
                                </td>
                            </tr>
                            {{ end }}
                        </tbody>
                    </table>
                </div>
            </div>
            {{ else }}
            <p class="text-gray-400 text-center py-4">No URLs added yet</p>
            {{ end }}
    </div>
</div>

<!-- Confirmation Modal -->
<div id="confirmModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-gray-800 rounded-lg border border-gray-700 p-6 max-w-sm w-full mx-4">
        <h2 class="text-xl font-bold text-white mb-4">Confirm Removal</h2>
        <p class="text-gray-300 mb-6"><span id="modalDomainText"></span></p>
        <div class="flex gap-3 justify-end">
            <button onclick="closeConfirmModal()" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded transition">Cancel</button>
            <button onclick="confirmRemovalAction()" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded transition font-semibold">Remove</button>
        </div>
    </div>
</div>

<!-- Hidden data attributes for JavaScript -->
<div id="appData" data-filter-name="{{ $filter.Name }}" data-csrf-token="{{ .CSRFToken }}" style="display:none;"></div>

<!-- Store domains as JSON -->
<script id="domainsData" type="application/json">
{{ if $domains }}[{{ range $index, $domain := $domains }}{{ if gt $index 0 }},{{ end }}"{{ . }}"{{ end }}]{{ else }}[]{{ end }}
</script>

<script>
const appData = document.getElementById('appData');
const filterName = appData.getAttribute('data-filter-name');
const csrfToken = appData.getAttribute('data-csrf-token');
const domainsElement = document.getElementById('domainsData');
let blocklistDomainsData = domainsElement ? JSON.parse(domainsElement.innerText) : [];

// Modal state
let pendingDomain = null;
let pendingType = null;

function wildcardToRegex(pattern) {
    // Escape special regex characters except *
    const escaped = pattern.replace(/[.+?^${}()|[\]\\]/g, '\\$&');
    // Replace * with .* for wildcard matching
    const regex = escaped.replace(/\*/g, '.*');
    return new RegExp('^' + regex + '$', 'i');
}

function handleAddDomain(event, type) {
    event.preventDefault();
    
    const form = event.target;
    const domainInput = document.getElementById('addDomainInput');
    const domain = domainInput.value.trim();
    
    if (!domain) {
        showNotification('Domain is required', 'error');
        return;
    }
    
    const url = type === 'blocklist' ? '/filter/blocklist' : '/filter/whitelist';
    const formData = new FormData();
    formData.append('action', 'add_domain');
    formData.append('domain', domain);
    formData.append('csrf_token', csrfToken);
    
    const fullUrl = url + '?filter=' + encodeURIComponent(filterName);
    
    fetch(fullUrl, {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (response.status === 200) {
            // Add to local array
            blocklistDomainsData.push(domain);
            // Clear input
            domainInput.value = '';
            // Re-search to update results
            searchBlocklistDomains();
            // Show success notification
            showNotification(`Domain "${domain}" added successfully`, 'success');
        } else {
            showNotification('Error adding domain', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('Error adding domain: ' + error.message, 'error');
    });
}

function searchBlocklistDomains() {
    const query = document.getElementById('blocklistDomainSearch').value.trim();
    const resultsDiv = document.getElementById('blocklistSearchResults');
    
    if (!query) {
        resultsDiv.innerHTML = '<p class="text-gray-400 p-4 text-center text-sm">Enter a domain name to search (use * as wildcard)</p>';
        return;
    }
    
    const regex = wildcardToRegex(query);
    const matches = blocklistDomainsData.filter(domain => regex.test(domain));
    
    if (matches.length === 0) {
        resultsDiv.innerHTML = '<p class="text-gray-400 p-4 text-center text-sm">No domains found</p>';
        return;
    }
    
    let html = '<ul class="divide-y divide-gray-600">';
    matches.forEach(domain => {
        html += `
            <li class="px-4 py-3 hover:bg-gray-700 flex justify-between items-center">
                <span class="text-gray-300 break-all">${domain}</span>
                <button onclick="showConfirmModal('${domain.replace(/'/g, "\\'")}', 'blocklist')" class="text-red-400 hover:text-red-300 text-sm font-semibold">Remove</button>
            </li>
        `;
    });
    html += '</ul>';
    resultsDiv.innerHTML = html;
}

function showConfirmModal(domain, type) {
    pendingDomain = domain;
    pendingType = type;
    const typeName = type === 'blocklist' ? 'blocked' : 'whitelisted';
    document.getElementById('modalDomainText').textContent = `Are you sure you want to remove "${domain}" from ${typeName} domains?`;
    document.getElementById('confirmModal').classList.remove('hidden');
}

function closeConfirmModal() {
    pendingDomain = null;
    pendingType = null;
    document.getElementById('confirmModal').classList.add('hidden');
}

function confirmRemovalAction() {
    if (pendingDomain && pendingType) {
        removeDomainAjax(pendingDomain, pendingType);
        closeConfirmModal();
    }
}

function removeDomainAjax(domain, type) {
    const url = type === 'blocklist' ? '/filter/blocklist' : '/filter/whitelist';
    const formData = new FormData();
    formData.append('action', 'remove_domain');
    formData.append('domain', domain);
    formData.append('csrf_token', csrfToken);
    
    const fullUrl = url + '?filter=' + encodeURIComponent(filterName);
    console.log('Sending request to:', fullUrl);
    
    fetch(fullUrl, {
        method: 'POST',
        body: formData
    })
    .then(response => {
        console.log('Response status:', response.status);
        if (response.status === 200) {
            return response.json().then(() => {
                // Remove from local array
                blocklistDomainsData = blocklistDomainsData.filter(d => d !== domain);
                // Re-search to update results
                searchBlocklistDomains();
                // Show success notification
                showNotification(`Domain "${domain}" removed successfully`, 'success');
            });
        } else {
            return response.text().then(text => {
                console.error('Response text:', text);
                showNotification('Error removing domain: ' + response.status, 'error');
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('Error removing domain: ' + error.message, 'error');
    });
}

// Close modal when clicking outside
document.getElementById('confirmModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeConfirmModal();
    }
});
</script>
{{ end }}