@extends('admin.firewallplus.layout', ['fwpTab' => 'server-rules'])

@section('fwp_title')
    Firewall-Plus: Server Rules
@endsection

@section('fwp_subtitle')
    View firewall rules for any server (edit on the server panel)
@endsection

@section('fwp')

@php
    $preloaded = $preloaded_server ?? null;
    $clientFirewallBase = rtrim((string) config('app.url'), '/') . '/server';
@endphp

<style>
#fwp-server-search-wrap { position:relative; }
#fwp-server-results {
    position:absolute; top:100%; left:0; right:0; z-index:200;
    background:#222d32; border:1px solid rgba(255,255,255,0.12);
    border-top:none; border-radius:0 0 4px 4px;
    max-height:260px; overflow-y:auto;
}
#fwp-server-results .fwp-srv-item {
    padding:9px 14px; cursor:pointer;
    border-bottom:1px solid rgba(255,255,255,0.06);
    display:flex; align-items:center; gap:10px;
}
#fwp-server-results .fwp-srv-item:hover { background:rgba(255,255,255,0.07); }
#fwp-server-results .fwp-srv-item .srv-name { font-weight:600; flex:1; }
#fwp-server-results .fwp-srv-item .srv-meta { font-size:11px; color:rgba(255,255,255,0.5); }
#fwp-rules-panel { display:none; }
.fwp-rule-row td { vertical-align:middle !important; }
.fwp-rule-row.fwp-rule-disabled td { opacity:0.55; }
.fwp-type-badge {
    display:inline-block; padding:2px 8px; border-radius:3px;
    font-size:11px; font-weight:600; background:rgba(0,172,193,0.18);
    color:#6dd9e8; border:1px solid rgba(0,172,193,0.25); white-space:nowrap;
}
.fwp-scope-badge, .fwp-proto-badge {
    display:inline-block; padding:1px 6px; border-radius:3px; font-size:10px;
    background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.7); white-space:nowrap;
}
#fwp-status-bar {
    padding:8px 14px; border-radius:4px; margin-bottom:14px;
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
    display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:12px;
}
.fwp-error-banner {
    background:rgba(231,76,60,0.14); border:1px solid rgba(231,76,60,0.35);
    border-radius:4px; padding:9px 14px; font-size:12px; color:#e74c3c; margin-bottom:10px;
}
</style>

<div class="box box-primary">
    <div class="box-header with-border">
        <h3 class="box-title"><i class="fa fa-server"></i> Select a Server</h3>
    </div>
    <div class="box-body">
        <div class="row">
            <div class="col-md-6">
                <div id="fwp-server-search-wrap">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        <input type="text" id="fwp-server-search" class="form-control"
                               placeholder="Search by server name or ID…" autocomplete="off">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" id="fwp-server-clear" style="display:none;">
                                <i class="fa fa-times"></i>
                            </button>
                        </span>
                    </div>
                    <div id="fwp-server-results" style="display:none;"></div>
                </div>
            </div>
            <div class="col-md-6" id="fwp-selected-server-info" style="display:none;">
                <div style="padding:7px 0;">
                    <strong id="fwp-sel-name" style="font-size:15px;"></strong>
                    <span id="fwp-sel-meta" style="margin-left:10px;font-size:12px;color:rgba(255,255,255,0.55);"></span>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="fwp-rules-panel">
    <div id="fwp-status-bar">
        <span id="fwp-rule-count-label" style="color:rgba(255,255,255,0.65);">Loading…</span>
        <span style="flex:1;"></span>
        <span id="fwp-sync-status" style="color:rgba(255,255,255,0.45);"></span>
        <a id="fwp-manage-link" class="btn btn-primary btn-sm" href="#" target="_blank" rel="noopener noreferrer" style="display:none;">
            <i class="fa fa-external-link"></i> Manage rules on server
        </a>
        <button class="btn btn-default btn-xs" id="fwp-refresh-btn" title="Refresh rule list">
            <i class="fa fa-refresh"></i>
        </button>
    </div>

    <div id="fwp-error-banner" class="fwp-error-banner" style="display:none;"></div>

    <div class="box box-default" style="margin-bottom:0;">
        <div id="fwp-rules-loading" style="display:none;padding:28px;text-align:center;color:rgba(255,255,255,0.5);">
            <i class="fa fa-spinner fa-spin"></i> Loading rules…
        </div>
        <div id="fwp-rules-empty" class="text-muted" style="padding:20px 18px;display:none;">
            No rules configured. Use <strong>Manage rules on server</strong> to add rules.
        </div>
        <div class="table-responsive" style="overflow:visible;">
            <table class="table table-striped table-hover table-condensed fwp-admin-table" id="fwp-rules-table" style="margin-bottom:0;display:none;">
                <thead>
                    <tr>
                        <th style="width:52px;">On</th>
                        <th style="width:44px;">#</th>
                        <th>Type</th>
                        <th>Scope</th>
                        <th style="width:60px;">Port</th>
                        <th style="width:70px;">Protocol</th>
                        <th>Values</th>
                    </tr>
                </thead>
                <tbody id="fwp-rules-tbody"></tbody>
            </table>
        </div>
    </div>
</div>

@endsection

@section('footer-scripts')
@parent
<script>
(function () {
    'use strict';
    if (!window.jQuery) return;

    var CSRF = '{{ csrf_token() }}';
    var SEARCH_URL = '{{ route('admin.firewallplus.server-rules.search') }}';
    var CLIENT_FIREWALL_BASE = @json($clientFirewallBase);

    var RULE_LABELS = {
        stateful_tracking: 'Stateful Tracking',
        fragmented_drop: 'Drop Fragmented',
        syn_limit: 'SYN Rate Limit',
        tcp_limit: 'TCP Rate Limit',
        udp_limit: 'UDP Rate Limit',
        source_packet_limit: 'Source Packet Limit',
        global_packet_limit: 'Global Packet Limit',
        connection_limit: 'Connection Limit',
        new_connection_rate: 'New Connection Rate',
        burst_protection: 'Burst Protection',
        ttl_filter: 'TTL Filter',
        packet_size_filter: 'Packet Size Filter',
        geo_filter: 'GeoIP Country Filter',
        connection_timeout: 'Connection Timeout',
    };

    var selectedServer = null;
    var rules = [];
    var searchTimer = null;

    function esc(s) {
        return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }
    function apiUrl(path) { return '/admin/firewall/' + path; }
    function showError(msg) {
        var el = document.getElementById('fwp-error-banner');
        el.textContent = msg;
        el.style.display = '';
    }
    function clientFirewallUrl(uuid) {
        return CLIENT_FIREWALL_BASE + '/' + encodeURIComponent(uuid) + '/firewall';
    }
    function updateManageLink() {
        var link = document.getElementById('fwp-manage-link');
        if (!selectedServer || !selectedServer.uuid) {
            link.style.display = 'none';
            return;
        }
        link.href = clientFirewallUrl(selectedServer.uuid);
        link.style.display = '';
    }
    function valueDisplay(rule) {
        var vj = rule.value_json || {};
        var keys = Object.keys(vj);
        if (keys.length === 0) return '<span style="color:rgba(255,255,255,0.25)">—</span>';
        return keys.map(function(k) {
            return '<code style="font-size:10px;">' + esc(k) + ': ' + esc(String(vj[k])) + '</code>';
        }).join(' ');
    }
    function renderRules() {
        var tbody = document.getElementById('fwp-rules-tbody');
        var empty = document.getElementById('fwp-rules-empty');
        var table = document.getElementById('fwp-rules-table');
        var label = document.getElementById('fwp-rule-count-label');
        var enabled = rules.filter(function(r) { return r.enabled; }).length;

        label.textContent = rules.length + ' rule' + (rules.length === 1 ? '' : 's') + ' (' + enabled + ' enabled)';

        if (rules.length === 0) {
            empty.style.display = '';
            table.style.display = 'none';
            return;
        }
        empty.style.display = 'none';
        table.style.display = '';

        tbody.innerHTML = rules.map(function(r) {
            var typeLabel = RULE_LABELS[r.rule_type] || r.rule_type;
            var rowCls = r.enabled ? 'fwp-rule-row' : 'fwp-rule-row fwp-rule-disabled';
            return '<tr class="' + rowCls + '">'
                + '<td>' + (r.enabled ? '<span class="label label-success">Yes</span>' : '<span class="label label-default">No</span>') + '</td>'
                + '<td><small style="color:rgba(255,255,255,0.4);">#' + r.id + '</small></td>'
                + '<td><span class="fwp-type-badge">' + esc(typeLabel) + '</span></td>'
                + '<td><span class="fwp-scope-badge">' + esc(r.scope) + '</span></td>'
                + '<td style="text-align:center;">' + (r.port ? '<code style="font-size:11px;">' + esc(String(r.port)) + '</code>' : '<span style="color:rgba(255,255,255,0.25)">—</span>') + '</td>'
                + '<td><span class="fwp-proto-badge">' + esc(r.protocol) + '</span></td>'
                + '<td>' + valueDisplay(r) + '</td>'
                + '</tr>';
        }).join('');
    }
    function loadRules() {
        if (!selectedServer) return;
        var loading = document.getElementById('fwp-rules-loading');
        loading.style.display = '';
        document.getElementById('fwp-rules-table').style.display = 'none';
        document.getElementById('fwp-rules-empty').style.display = 'none';
        document.getElementById('fwp-error-banner').style.display = 'none';

        fetch(apiUrl('server-rules/' + selectedServer.id + '/rules'), {
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF },
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            loading.style.display = 'none';
            rules = data.rules || [];
            var syncStatus = document.getElementById('fwp-sync-status');
            if (data.last_sync) {
                var cls = data.last_sync.status === 'completed' ? 'color:#27c281' : 'color:#e74c3c';
                var err = data.last_sync.error ? ' — ' + data.last_sync.error : '';
                syncStatus.innerHTML = '<span style="' + cls + '"><i class="fa fa-check-circle"></i></span> Last sync: '
                    + esc(data.last_sync.at_human || '') + esc(err);
            } else {
                syncStatus.textContent = 'Never synced';
            }
            renderRules();
        })
        .catch(function(e) {
            loading.style.display = 'none';
            showError('Failed to load rules: ' + e.message);
        });
    }
    function selectServer(srv) {
        selectedServer = srv;
        document.getElementById('fwp-server-search').value = srv.name;
        document.getElementById('fwp-server-results').style.display = 'none';
        document.getElementById('fwp-server-clear').style.display = '';
        document.getElementById('fwp-selected-server-info').style.display = '';
        document.getElementById('fwp-sel-name').textContent = srv.name;
        document.getElementById('fwp-sel-meta').textContent = '#' + srv.id + '  ·  ' + srv.uuid_short + '…  ·  ' + srv.node;
        document.getElementById('fwp-rules-panel').style.display = 'block';
        updateManageLink();
        var url = new URL(window.location.href);
        url.searchParams.set('server_id', srv.id);
        history.replaceState(null, '', url.toString());
        loadRules();
    }

    document.getElementById('fwp-server-search').addEventListener('input', function() {
        var q = this.value.trim();
        clearTimeout(searchTimer);
        if (q.length < 1) {
            document.getElementById('fwp-server-results').style.display = 'none';
            return;
        }
        searchTimer = setTimeout(function() {
            fetch(SEARCH_URL + '?q=' + encodeURIComponent(q), {
                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF },
            })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                var results = document.getElementById('fwp-server-results');
                if (!data.data || data.data.length === 0) {
                    results.innerHTML = '<div class="fwp-srv-item"><span class="text-muted">No servers found.</span></div>';
                } else {
                    results.innerHTML = data.data.map(function(s) {
                        return '<div class="fwp-srv-item" data-srv=\'' + JSON.stringify(s).replace(/'/g, '&#39;') + '\'>'
                            + '<span class="srv-name">' + esc(s.name) + '</span>'
                            + '<span class="srv-meta">#' + s.id + ' &middot; ' + esc(s.node) + '</span>'
                            + '</div>';
                    }).join('');
                    results.querySelectorAll('.fwp-srv-item').forEach(function(el) {
                        el.addEventListener('click', function() {
                            selectServer(JSON.parse(this.dataset.srv));
                        });
                    });
                }
                results.style.display = '';
            });
        }, 300);
    });

    document.getElementById('fwp-server-clear').addEventListener('click', function() {
        selectedServer = null;
        document.getElementById('fwp-server-search').value = '';
        document.getElementById('fwp-server-results').style.display = 'none';
        document.getElementById('fwp-server-clear').style.display = 'none';
        document.getElementById('fwp-selected-server-info').style.display = 'none';
        document.getElementById('fwp-rules-panel').style.display = 'none';
        document.getElementById('fwp-manage-link').style.display = 'none';
        var url = new URL(window.location.href);
        url.searchParams.delete('server_id');
        history.replaceState(null, '', url.toString());
    });

    document.addEventListener('click', function(e) {
        if (!document.getElementById('fwp-server-search-wrap').contains(e.target)) {
            document.getElementById('fwp-server-results').style.display = 'none';
        }
    });

    document.getElementById('fwp-refresh-btn').addEventListener('click', loadRules);

    @if ($preloaded)
    selectServer({
        id: {{ $preloaded->id }},
        name: {{ json_encode($preloaded->name) }},
        uuid: {{ json_encode($preloaded->uuid) }},
        uuid_short: '{{ substr($preloaded->uuid, 0, 8) }}',
        node: {{ json_encode($preloaded->node?->name ?? 'Unknown') }},
    });
    @endif
})();
</script>
@endsection