{% extends "base.html" %}

{% block title %}Config Dashboard{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2 class="mb-4">Configuration Dashboard</h2>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    Actions
                </div>
                <div class="card-body">
                    <button id="send-test-notification-btn" class="btn btn-primary">Send Test Notification</button>
                    <button id="check-expiring-accounts-btn" class="btn btn-info">Check Expiring Accounts</button>
                    <button id="force-resubscribe-btn" class="btn btn-warning">Force Re-subscribe</button>
                    <button id="update-host-9-btn" class="btn btn-success">Update Redirect URLS</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    DNS Manager
                </div>
                <div class="card-body">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" id="dns-entry-input" placeholder="Enter DNS entry">
                        <div class="input-group-append">
                            <button class="btn btn-primary" id="add-dns-btn">Add</button>
                        </div>
                    </div>
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>DNS Entry</th>
                                <th style="width: 10%;">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="dns-list-table-body">
                            <!-- DNS entries will be loaded here -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    Extra URLs Manager
                </div>
                <div class="card-body">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" id="extra-url-input" placeholder="Enter Extra URL">
                        <div class="input-group-append">
                            <button class="btn btn-primary" id="add-extra-url-btn">Add</button>
                        </div>
                    </div>
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Extra URL</th>
                                <th style="width: 10%;">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="extra-urls-table-body">
                            <!-- Extra URLs will be loaded here -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // DNS Manager
        const dnsListTableBody = document.getElementById('dns-list-table-body');
        const addDnsBtn = document.getElementById('add-dns-btn');
        const dnsEntryInput = document.getElementById('dns-entry-input');

        function fetchDnsList() {
            fetch("{{ url_for('proxy_dns') }}")
                .then(response => {
                    if (!response.ok) {
                        // Log the error response text for debugging
                        response.text().then(text => console.error('Error response from proxy:', text));
                        throw new Error(`HTTP error! Status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    dnsListTableBody.innerHTML = '';
                    if (!Array.isArray(data)) {
                        console.error("Received data is not an array:", data);
                        throw new Error("Invalid data format received from server.");
                    }
                    if (data.length === 0) {
                        const row = dnsListTableBody.insertRow();
                        const cell = row.insertCell();
                        cell.colSpan = 2;
                        cell.textContent = 'No DNS entries found.';
                        cell.classList.add('text-center');
                    } else {
                        data.forEach(entry => {
                            const row = dnsListTableBody.insertRow();
                            const entryCell = row.insertCell();
                            entryCell.textContent = entry;
                            const actionCell = row.insertCell();
                            const removeBtn = document.createElement('button');
                            removeBtn.className = 'btn btn-danger btn-sm';
                            removeBtn.textContent = 'Delete';
                            removeBtn.addEventListener('click', () => removeDnsEntry(entry));
                            actionCell.appendChild(removeBtn);
                        });
                    }
                })
                .catch(e => {
                    console.error('Error during fetchDnsList:', e);
                    dnsListTableBody.innerHTML = '';
                    const row = dnsListTableBody.insertRow();
                    const cell = row.insertCell();
                    cell.colSpan = 2;
                    cell.textContent = 'Error loading DNS entries. See browser console for details.';
                    cell.classList.add('text-center', 'text-danger');
                });
        }

        function addDnsEntry() {
            const dnsEntry = dnsEntryInput.value.trim();
            if (dnsEntry) {
                fetch("{{ url_for('proxy_dns') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ dns_entry: dnsEntry })
                }).then(() => {
                    dnsEntryInput.value = '';
                    fetchDnsList();
                });
            }
        }

        function removeDnsEntry(dnsEntry) {
            fetch("{{ url_for('proxy_dns') }}", {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ dns_entry: dnsEntry })
            }).then(() => {
                fetchDnsList();
            });
        }

        addDnsBtn.addEventListener('click', addDnsEntry);
        fetchDnsList();

        // Extra URLs Manager
        const extraUrlsTableBody = document.getElementById('extra-urls-table-body');
        const addExtraUrlBtn = document.getElementById('add-extra-url-btn');
        const extraUrlInput = document.getElementById('extra-url-input');

        function fetchExtraUrlsList() {
            fetch("{{ url_for('proxy_extra_urls') }}")
                .then(response => {
                    if (!response.ok) {
                        // Log the error response text for debugging
                        response.text().then(text => console.error('Error response from proxy:', text));
                        throw new Error(`HTTP error! Status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    extraUrlsTableBody.innerHTML = '';
                    if (!Array.isArray(data)) {
                        console.error("Received data is not an array:", data);
                        throw new Error("Invalid data format received from server.");
                    }
                    if (data.length === 0) {
                        const row = extraUrlsTableBody.insertRow();
                        const cell = row.insertCell();
                        cell.colSpan = 2;
                        cell.textContent = 'No extra URLs found.';
                        cell.classList.add('text-center');
                    } else {
                        data.forEach(entry => {
                            const row = extraUrlsTableBody.insertRow();
                            const entryCell = row.insertCell();
                            entryCell.textContent = entry;
                            const actionCell = row.insertCell();
                            const removeBtn = document.createElement('button');
                            removeBtn.className = 'btn btn-danger btn-sm';
                            removeBtn.textContent = 'Delete';
                            removeBtn.addEventListener('click', () => removeExtraUrl(entry));
                            actionCell.appendChild(removeBtn);
                        });
                    }
                })
                .catch(e => {
                    console.error('Error during fetchExtraUrlsList:', e);
                    extraUrlsTableBody.innerHTML = '';
                    const row = extraUrlsTableBody.insertRow();
                    const cell = row.insertCell();
                    cell.colSpan = 2;
                    cell.textContent = 'Error loading extra URLs. See browser console for details.';
                    cell.classList.add('text-center', 'text-danger');
                });
        }

        function addExtraUrl() {
            const extraUrl = extraUrlInput.value.trim();
            if (extraUrl) {
                fetch("{{ url_for('proxy_extra_urls') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ extra_url: extraUrl })
                }).then(() => {
                    extraUrlInput.value = '';
                    fetchExtraUrlsList();
                });
            }
        }

        function removeExtraUrl(extraUrl) {
            fetch("{{ url_for('proxy_extra_urls') }}", {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ extra_url: extraUrl })
            }).then(() => {
                fetchExtraUrlsList();
            });
        }

        addExtraUrlBtn.addEventListener('click', addExtraUrl);
        fetchExtraUrlsList();

        // Other buttons
        document.getElementById('send-test-notification-btn').addEventListener('click', function() {
            fetch('{{ url_for("send_test_notification") }}', {
                method: 'POST'
            }).then(response => {
                if (response.ok) {
                    alert('Test notification sent successfully!');
                } else {
                    alert('Failed to send test notification.');
                }
            }).catch(err => {
                console.error('Error sending test notification:', err);
                alert('An error occurred while sending the test notification.');
            });
        });

        document.getElementById('check-expiring-accounts-btn').addEventListener('click', function() {
            fetch('{{ url_for("check_expiring_accounts") }}', {
                method: 'POST'
            }).then(response => {
                if (response.ok) {
                    alert('Expiring accounts check triggered successfully!');
                } else {
                    alert('Failed to trigger expiring accounts check.');
                }
            }).catch(err => {
                console.error('Error triggering expiring accounts check:', err);
                alert('An error occurred while triggering the expiring accounts check.');
            });
        });

        document.getElementById('update-host-9-btn').addEventListener('click', function() {
            fetch('{{ url_for("update_host_9_config") }}', {
                method: 'POST'
            }).then(response => {
                if (response.ok) {
                    alert('Host 9 config updated successfully!');
                } else {
                    alert('Failed to update Host 9 config.');
                }
            }).catch(err => {
                console.error('Error updating Host 9 config:', err);
                alert('An error occurred while updating the Host 9 config.');
            });
        });
    });
</script>
{% endblock %}