document.addEventListener("DOMContentLoaded", function () {
    fetchFirewallData();
});

function renderRulesets(container, rulesets, ipVersion) {
    container.innerHTML = "";

    if (!rulesets || rulesets.length === 0) {
        container.innerHTML = `<p class="text-muted">No ${ipVersion} firewall rulesets found.</p>`;
        return;
    }

    rulesets.forEach(ruleset => {
        const card = document.createElement("div");
        card.className = "card mb-4";

        let tableRows = '';
        ruleset.rules.forEach(rule => {
            const logUrl = `/firewall/log/${ipVersion.toLowerCase()}/${ruleset.name}/${rule.rule}`;
            
            tableRows += `
                <tr>
                    <td>${rule.rule}</td>
                    <td>${rule.action}</td>
                    <td>${rule.protocol}</td>
                    <td>${rule.packets}</td>
                    <td>${rule.bytes}</td>
                    <td style="word-break: break-all;">${rule.conditions}</td>
                    <td>
                        <a href="${logUrl}" target="_blank" class="btn btn-outline-secondary btn-sm" title="View Logs">
                            Logs
                        </a>
                    </td>
                </tr>
            `;
        });

        card.innerHTML = `
            <div class="card-header">
                <strong>Firewall:</strong> ${ruleset.name}
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-bordered mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Rule</th>
                            <th>Action</th>
                            <th>Protocol</th>
                            <th>Packets</th>
                            <th>Bytes</th>
                            <th>Conditions</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${tableRows}
                    </tbody>
                </table>
            </div>
        `;
        container.appendChild(card);
    });
}

async function fetchFirewallData() {
    const ipv4Container = document.getElementById("ipv4-rulesets-container");
    const ipv6Container = document.getElementById("ipv6-rulesets-container");

    try {
        const response = await fetch("/firewall/json");
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();

        if (data.error) {
            throw new Error(data.details || data.error);
        }

        renderRulesets(ipv4Container, data.ipv4, 'IPv4');
        renderRulesets(ipv6Container, data.ipv6, 'IPv6');

    } catch (error) {
        console.error("Error fetching firewall data:", error);
        ipv4Container.innerHTML = `<div class="alert alert-danger">Error loading IPv4 firewall data.</div>`;
        ipv6Container.innerHTML = `<div class="alert alert-danger">Error loading IPv6 firewall data.</div>`;
    }
}