@extends('admin.firewallplus.layout', ['fwpTab' => 'nodes'])

@section('fwp_title')
    Firewall-Plus: Nodes
@endsection

@section('fwp_subtitle')
    Node health, tokens & connectivity
@endsection

@section('fwp')
<div class="box box-primary">
    <div class="box-header with-border clearfix">
        <h3 class="box-title pull-left" style="margin-top:4px;">
            <i class="fa fa-sitemap"></i> Registered nodes
        </h3>
        <div class="box-tools pull-right" style="display:flex;gap:6px;align-items:center;">
            <small class="text-muted" style="font-size:11px;margin-right:4px;">Auto-pings every 1 min · Live ping when you open this page</small>
            <button type="button" class="btn btn-default btn-sm" id="fwp-nodes-global-refresh" title="Refresh all (live ping)">
                <i class="fa fa-refresh"></i> Refresh all
            </button>
        </div>
    </div>
    <div class="box-body" style="padding-top:12px;">
        <div class="row" id="firewall-nodes-root">
            @foreach ($rows as $row)
                @php($node = $row['node'])
                @php($token = $row['token'])
                @php($isEnabled = $token->is_node_enabled ?? true)
                @php($isOnline = $token->is_online ?? false)
                <div class="col-md-6 col-lg-4" style="margin-bottom:18px;">
                    <div class="box box-default fwp-node-card"
                         data-node-id="{{ $node->id }}"
                         style="margin-bottom:0;border-radius:4px;border-top:3px solid {{ !$isEnabled ? '#7a7a7a' : ($isOnline ? '#00c97a' : '#e54b3c') }};">
                        {{-- Header row: status icon + name + refresh button --}}
                        <div class="box-header with-border" style="padding:10px 14px 8px;">
                            <div style="display:flex;align-items:center;gap:0;">
                                {{-- Heart-handshake status icon --}}
                                <span class="fwp-node-status-icon" data-node-id="{{ $node->id }}" title="{{ !$isEnabled ? 'Disabled' : ($isOnline ? 'Online' : 'Offline') }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                                         stroke="{{ !$isEnabled ? '#7a7a7a' : ($isOnline ? '#00c97a' : '#e54b3c') }}"
                                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                         style="vertical-align:-3px;flex-shrink:0;">
                                        <path d="M19.414 14.414C21 12.828 22 11.5 22 9.5a5.5 5.5 0 0 0-9.591-3.676.6.6 0 0 1-.818.001A5.5 5.5 0 0 0 2 9.5c0 2.3 1.5 4 3 5.5l5.535 5.362a2 2 0 0 0 2.879.052 2.12 2.12 0 0 0-.004-3 2.124 2.124 0 1 0 3-3 2.124 2.124 0 0 0 3.004 0 2 2 0 0 0 0-2.828l-1.881-1.882a2.41 2.41 0 0 0-3.409 0l-1.71 1.71a2 2 0 0 1-2.828 0 2 2 0 0 1 0-2.828l2.823-2.762"/>
                                    </svg>
                                </span>
                                <span class="fwp-node-status-text" data-node-id="{{ $node->id }}"
                                      style="font-size:12px;font-weight:600;margin-left:5px;color:{{ !$isEnabled ? '#7a7a7a' : ($isOnline ? '#00c97a' : '#e54b3c') }};">
                                    {{ !$isEnabled ? 'Disabled' : ($isOnline ? 'Online' : 'Offline') }}
                                </span>

                                {{-- Gap + node name --}}
                                <span style="margin-left:12px;font-size:14px;font-weight:600;color:#ddd;">
                                    {{ $node->name }}
                                </span>
                                <span style="margin-left:5px;font-size:11px;color:#888;">(#{{ $node->id }})</span>
                            </div>
                            <div class="box-tools pull-right">
                                <button type="button" class="btn btn-box-tool btn-refresh-health"
                                        data-node-id="{{ $node->id }}" title="Live ping">
                                    <i class="fa fa-refresh fa-fw"></i>
                                </button>
                            </div>
                        </div>

                        {{-- Info rows --}}
                        <div class="box-body" style="padding:8px 14px 12px;">
                            <table style="width:100%;font-size:12px;border-collapse:collapse;">
                                <tr>
                                    <td style="color:#888;width:72px;padding:2px 0;">FQDN</td>
                                    <td style="color:#ccc;padding:2px 0;">
                                        <span class="fwp-node-fqdn" data-node-id="{{ $node->id }}">{{ $token->api_url ?: $token->fqdn }}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="color:#888;padding:2px 0;">SSL</td>
                                    <td style="padding:2px 0;">
                                        <span class="fwp-node-ssl" data-node-id="{{ $node->id }}"
                                              style="font-weight:600;color:{{ $token->use_ssl ? '#00c97a' : '#e54b3c' }};">
                                            {{ $token->use_ssl ? 'ON' : 'OFF' }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="color:#888;padding:2px 0;">GeoIP</td>
                                    <td style="padding:2px 0;">
                                        <span class="fwp-node-geoip" data-node-id="{{ $node->id }}"
                                              style="font-weight:500;color:{{ $token->geoip_available ? '#00c97a' : '#e54b3c' }};">
                                            {{ $token->geoip_available ? 'Available' : 'Not available' }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="color:#888;padding:2px 0;">Last Seen</td>
                                    <td style="color:#ccc;padding:2px 0;">
                                        <span class="fwp-node-last-seen" data-node-id="{{ $node->id }}">
                                            {{ $token->last_seen_at ? $token->last_seen_at->diffForHumans() : 'Never' }}
                                        </span>
                                    </td>
                                </tr>
                            </table>

                            <p class="fwp-node-error-line" data-node-id="{{ $node->id }}"
                               style="display:none;margin:6px 0 0;font-size:11px;color:#e54b3c;"></p>

                            <hr style="margin:10px 0 10px;border-color:rgba(255,255,255,0.08);">

                            {{-- Action buttons --}}
                            <div style="display:flex;flex-wrap:wrap;gap:6px;align-items:center;">
                                <button type="button" class="btn btn-info btn-xs btn-view-token"
                                        data-node-id="{{ $node->id }}"
                                        data-node-name="{{ $node->name }}">
                                    <i class="fa fa-eye"></i> View Token
                                </button>
                                <button type="button" class="btn btn-warning btn-xs btn-reset-token"
                                        data-node-id="{{ $node->id }}"
                                        data-node-name="{{ $node->name }}">
                                    <i class="fa fa-key"></i> Reset
                                </button>
                                <button type="button" class="btn btn-default btn-xs btn-edit-api-url"
                                        data-node-id="{{ $node->id }}"
                                         data-auto-fqdn="{{ ($token->auto_fqdn ?? false) ? '1' : '0' }}"
                                        data-fqdn="{{ $token->fqdn }}"
                                        data-ssl="{{ ($token->use_ssl ?? false) ? '1' : '0' }}"
                                        data-wings-fqdn="{{ $node->fqdn }}"
                                        data-wings-ssl="{{ $node->scheme === 'https' ? '1' : '0' }}">
                                    <i class="fa fa-edit"></i> Edit API URL
                                </button>
                                <button type="button" class="btn btn-info btn-xs btn-node-stats"
                                        data-node-id="{{ $node->id }}"
                                        data-node-name="{{ $node->name }}">
                                    <i class="fa fa-bar-chart"></i> Stats
                                </button>
                                <button type="button"
                                        class="btn btn-xs btn-node-toggle {{ $isEnabled ? 'btn-danger' : 'btn-success' }}"
                                        data-node-id="{{ $node->id }}"
                                        data-enabled="{{ $isEnabled ? '1' : '0' }}"
                                        title="{{ $isEnabled ? 'Disable node (stop all pings and webhooks)' : 'Enable node' }}">
                                    <i class="fa {{ $isEnabled ? 'fa-pause' : 'fa-play' }}"></i>
                                    {{ $isEnabled ? 'Disable' : 'Enable' }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>

{{-- View / Show token modal --}}
<div class="modal fade" id="tokenModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">Node token — <span id="revealed-node-name"></span></h4>
            </div>
            <div class="modal-body">
                <div id="token-loading" class="text-muted text-center" style="padding:16px 0;">
                    <i class="fa fa-spinner fa-spin"></i> Loading token…
                </div>
                <div id="token-display" style="display:none;">
                    <div class="alert alert-info" id="token-message" style="margin-bottom:12px;"></div>
                    <pre class="well" id="revealed-token" style="word-break:break-all;"></pre>
                    <div style="display:flex;gap:8px;">
                        <button type="button" class="btn btn-primary" id="copy-token-btn">
                            <i class="fa fa-clipboard"></i> Copy Token
                        </button>
                        <button type="button" class="btn btn-danger" id="reset-token-from-view-btn">
                            <i class="fa fa-refresh"></i> Reset Token
                        </button>
                    </div>
                </div>
                <div id="token-empty" style="display:none;">
                    <div class="alert alert-warning">
                        No token stored for this node. Use Reset to generate one.
                    </div>
                    <button type="button" class="btn btn-danger" id="reset-token-from-empty-btn">
                        <i class="fa fa-refresh"></i> Reset Token
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Reset token confirmation modal (used by both View→Reset and direct Reset button) --}}
<div class="modal fade" id="resetConfirmModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">Reset node token — <span id="reset-node-name"></span></h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    The current token will be invalidated immediately. You must update
                    <code>/etc/firewall-plus/token</code> on the node.
                </div>
                <p>Type <code>RESET</code> below to confirm:</p>
                <input type="text" id="reset-confirm-input" class="form-control" placeholder="RESET" autocomplete="off">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="reset-confirm-btn" disabled>Reset Token</button>
            </div>
        </div>
    </div>
</div>

{{-- Edit API URL modal --}}
<div class="modal fade" id="editApiUrlModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">Edit Connection - <span id="edit-api-node-name"></span></h4>
            </div>
            <div class="modal-body">

                {{-- Auto Fetch toggle --}}
                <div style="display:flex;align-items:center;justify-content:space-between;
                            background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);
                            border-radius:6px;padding:10px 14px;margin-bottom:16px;">
                    <div>
                        <strong style="font-size:13px;">Auto Fetch</strong>
                        <p style="margin:2px 0 0;font-size:11px;color:#aaa;">
                            When on, FQDN &amp; protocol are synced automatically from the Wings node config on every ping.
                        </p>
                    </div>
                    <button type="button" id="edit-auto-fqdn-toggle"
                            style="min-width:72px;font-size:12px;" class="btn btn-sm btn-default">
                        <i class="fa fa-refresh"></i> <span id="edit-auto-fqdn-label">ON</span>
                    </button>
                </div>

                {{-- FQDN --}}
                <div class="form-group" style="margin-bottom:12px;">
                    <label style="font-size:12px;font-weight:600;margin-bottom:4px;display:block;">
                        FQDN / Hostname
                        <small class="text-muted">(host the node daemon listens on)</small>
                    </label>
                    <input type="text" id="edit-fqdn-input" class="form-control"
                           placeholder="e.g. 192.168.1.10 or fw.example.com">
                </div>

                {{-- Protocol toggle --}}
                <div class="form-group" style="margin-bottom:0;">
                    <label style="font-size:12px;font-weight:600;margin-bottom:6px;display:block;">Protocol</label>
                    <div class="btn-group" id="edit-ssl-toggle-group">
                        <button type="button" id="edit-ssl-http"
                                class="btn btn-sm btn-default" data-ssl="0">HTTP</button>
                        <button type="button" id="edit-ssl-https"
                                class="btn btn-sm btn-default" data-ssl="1">HTTPS</button>
                    </div>
                    <input type="hidden" id="edit-ssl-value" value="0">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="edit-api-save-btn">Save</button>
            </div>
        </div>
    </div>
</div>

{{-- Stats modal --}}
<div class="modal fade" id="statsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">Stats - <span id="stats-node-name"></span></h4>
            </div>
            <div class="modal-body">
                <div id="stats-loading" class="text-muted text-center" style="padding:20px 0;">
                    <i class="fa fa-spinner fa-spin"></i> Loading…
                </div>
                <div id="stats-body" style="display:none;">
                    <h5 style="margin-top:0;">Panel (database)</h5>
                    <table class="table table-condensed fwp-admin-table table-striped" style="margin-bottom:12px;">
                        <tbody>
                            <tr><td>Total servers on node</td><td id="stat-total-servers">...</td></tr>
                            <tr><td>Servers with FW enabled</td><td id="stat-fw-servers">...</td></tr>
                            <tr><td>Active rules</td><td id="stat-active-rules">...</td></tr>
                            <tr><td>Total rules (all)</td><td id="stat-total-rules">...</td></tr>
                        </tbody>
                    </table>
                    <div id="node-stats-section" style="display:none;">
                        <h5>Node health (last ping)</h5>
                        <table class="table table-condensed fwp-admin-table table-striped" id="node-stats-table">
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                <div id="stats-error" class="alert alert-danger" style="display:none;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('footer-scripts')
    @parent
    <script>
    (function () {
        const csrf = '{{ csrf_token() }}';
        const pollUrl = '{{ route('admin.firewallplus.nodes.poll') }}';
        const revealed = document.getElementById('revealed-token');

        /* Helpers to update a single card's visual state */
        const STATUS_COLORS = { online: '#00c97a', offline: '#e54b3c', disabled: '#7a7a7a' };
        const ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="STROKECOLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-3px;flex-shrink:0;"><path d="M19.414 14.414C21 12.828 22 11.5 22 9.5a5.5 5.5 0 0 0-9.591-3.676.6.6 0 0 1-.818.001A5.5 5.5 0 0 0 2 9.5c0 2.3 1.5 4 3 5.5l5.535 5.362a2 2 0 0 0 2.879.052 2.12 2.12 0 0 0-.004-3 2.124 2.124 0 1 0 3-3 2.124 2.124 0 0 0 3.004 0 2 2 0 0 0 0-2.828l-1.881-1.882a2.41 2.41 0 0 0-3.409 0l-1.71 1.71a2 2 0 0 1-2.828 0 2 2 0 0 1 0-2.828l2.823-2.762"/></svg>`;

        function statusKey(n) {
            if (!n.is_node_enabled) return 'disabled';
            return n.is_online ? 'online' : 'offline';
        }

        function applyNodeRow(n) {
            const id = n.node_id;
            const card = document.querySelector('.fwp-node-card[data-node-id="' + id + '"]');
            if (!card) return;

            const key = statusKey(n);
            const color = STATUS_COLORS[key];
            const label = key === 'disabled' ? 'Disabled' : (key === 'online' ? 'Online' : 'Offline');

            // Top border
            card.style.borderTopColor = color;

            // Status icon
            const iconEl = card.querySelector('.fwp-node-status-icon[data-node-id="' + id + '"]');
            if (iconEl) iconEl.innerHTML = ICON_SVG.replace('STROKECOLOR', color);

            // Status text
            const textEl = card.querySelector('.fwp-node-status-text[data-node-id="' + id + '"]');
            if (textEl) { textEl.textContent = label; textEl.style.color = color; }

            // FQDN
            const fqdnEl = card.querySelector('.fwp-node-fqdn[data-node-id="' + id + '"]');
            if (fqdnEl) fqdnEl.textContent = n.api_url || n.fqdn || '';

            // SSL
            const sslEl = card.querySelector('.fwp-node-ssl[data-node-id="' + id + '"]');
            if (sslEl) {
                sslEl.textContent = n.use_ssl ? 'ON' : 'OFF';
                sslEl.style.color = n.use_ssl ? '#00c97a' : '#e54b3c';
            }

            // GeoIP
            const geoEl = card.querySelector('.fwp-node-geoip[data-node-id="' + id + '"]');
            if (geoEl) {
                geoEl.textContent = n.geoip_available ? 'Available' : 'Not available';
                geoEl.style.color = n.geoip_available ? '#00c97a' : '#e54b3c';
            }

            // Last seen
            const lsEl = card.querySelector('.fwp-node-last-seen[data-node-id="' + id + '"]');
            if (lsEl) lsEl.textContent = n.last_seen_human || 'Never';

            // Toggle button
            const toggleBtn = card.querySelector('.btn-node-toggle[data-node-id="' + id + '"]');
            if (toggleBtn) {
                const enabled = !!n.is_node_enabled;
                toggleBtn.setAttribute('data-enabled', enabled ? '1' : '0');
                toggleBtn.className = 'btn btn-xs btn-node-toggle ' + (enabled ? 'btn-danger' : 'btn-success');
                toggleBtn.innerHTML = '<i class="fa ' + (enabled ? 'fa-pause' : 'fa-play') + '"></i> ' + (enabled ? 'Disable' : 'Enable');
                toggleBtn.title = enabled ? 'Disable node (stop all pings and webhooks)' : 'Enable node';
            }

            // Edit API URL button data attrs
            const editBtn = card.querySelector('.btn-edit-api-url[data-node-id="' + id + '"]');
            if (editBtn) {
                editBtn.setAttribute('data-api-url', n.api_url || '');
                editBtn.setAttribute('data-fqdn', n.fqdn || '');
                editBtn.setAttribute('data-ssl', n.use_ssl ? '1' : '0');
            }
        }

        /* Poll DB every 5 s */
        async function pollDb() {
            try {
                const res = await fetch(pollUrl, { headers: { 'Accept': 'application/json' } });
                const body = await res.json();
                if (!body.success || !body.data || !body.data.nodes) return;
                body.data.nodes.forEach(applyNodeRow);
            } catch (_) { /* ignore */ }
        }
        setInterval(pollDb, 5000);
        pollDb();

        /* Live health refresh (per-card) */
        async function refreshOne(nodeId, btn) {
            const orig = btn ? btn.innerHTML : '';
            if (btn) { btn.disabled = true; btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>'; }
            try {
                const res = await fetch('/admin/firewall/nodes/' + nodeId + '/refresh-health', {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                });
                const body = await res.json();
                if (!body.success) {
                    const errEl = document.querySelector('.fwp-node-error-line[data-node-id="' + nodeId + '"]');
                    if (errEl) { errEl.textContent = body.error || 'Refresh failed'; errEl.style.display = ''; }
                    return;
                }
                const d = body.data;
                // Patch the card directly with live data.
                applyNodeRow({
                    node_id: parseInt(nodeId, 10),
                    is_node_enabled: true,
                    is_online: !!d.is_online,
                    geoip_available: !!d.geoip_available,
                    last_seen_human: d.is_online ? 'just now' : (d.last_seen_human || 'Never'),
                });
                const errEl = document.querySelector('.fwp-node-error-line[data-node-id="' + nodeId + '"]');
                if (errEl) {
                    if (!d.is_online && d.error) { errEl.textContent = d.error; errEl.style.display = ''; }
                    else { errEl.style.display = 'none'; errEl.textContent = ''; }
                }
            } catch (err) {
                alert('Refresh error: ' + err.message);
            } finally {
                if (btn) { btn.disabled = false; btn.innerHTML = orig; }
            }
        }

        /* Same as "Refresh all": live ping every node once when the page loads or is hard-refreshed. */
        setTimeout(function () {
            Promise.all(Array.from(document.querySelectorAll('.btn-refresh-health')).map(function (b) {
                return refreshOne(b.getAttribute('data-node-id'), null);
            })).finally(function () { pollDb(); });
        }, 0);

        document.querySelectorAll('.btn-refresh-health').forEach(function (btn) {
            btn.addEventListener('click', function () { refreshOne(btn.getAttribute('data-node-id'), btn); });
        });

        document.getElementById('fwp-nodes-global-refresh').addEventListener('click', function () {
            const btn = this;
            btn.disabled = true;
            Promise.all(Array.from(document.querySelectorAll('.btn-refresh-health')).map(function (b) {
                return refreshOne(b.getAttribute('data-node-id'), null);
            })).finally(function () { btn.disabled = false; });
        });

        /* ── View token (copy existing, no reset) ── */
        let viewTokenNodeId = null;
        let viewTokenNodeName = '';

        document.querySelectorAll('.btn-view-token').forEach(function (btn) {
            btn.addEventListener('click', async function () {
                viewTokenNodeId = btn.getAttribute('data-node-id');
                viewTokenNodeName = btn.getAttribute('data-node-name') || ('Node ' + viewTokenNodeId);
                document.getElementById('revealed-node-name').textContent = viewTokenNodeName;
                document.getElementById('token-loading').style.display = '';
                document.getElementById('token-display').style.display = 'none';
                document.getElementById('token-empty').style.display = 'none';
                $('#tokenModal').modal('show');

                try {
                    const res = await fetch('/admin/firewall/nodes/' + viewTokenNodeId + '/token/view', {
                        headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                    });
                    const body = await res.json();
                    document.getElementById('token-loading').style.display = 'none';
                    if (!body.success) {
                        document.getElementById('token-empty').style.display = '';
                        return;
                    }
                    if (body.data.has_token) {
                        revealed.textContent = body.data.token;
                        document.getElementById('token-message').textContent = body.data.message || 'Token retrieved. Copy it now or reset to generate a new one.';
                        document.getElementById('token-display').style.display = '';
                    } else {
                        document.getElementById('token-empty').style.display = '';
                    }
                } catch (err) {
                    document.getElementById('token-loading').style.display = 'none';
                    document.getElementById('token-empty').style.display = '';
                }
            });
        });

        /* ── Copy button inside token modal ── */
        document.getElementById('copy-token-btn').addEventListener('click', function () {
            navigator.clipboard.writeText(revealed.textContent || '').then(function () {
                const btn = document.getElementById('copy-token-btn');
                btn.innerHTML = '<i class="fa fa-check"></i> Copied!';
                setTimeout(function () { btn.innerHTML = '<i class="fa fa-clipboard"></i> Copy Token'; }, 2000);
            });
        });

        /* ── Reset Token (direct button) ── */
        let pendingResetNodeId = null;
        const resetInput = document.getElementById('reset-confirm-input');
        const resetBtn = document.getElementById('reset-confirm-btn');

        resetInput.addEventListener('input', function () {
            resetBtn.disabled = resetInput.value.trim() !== 'RESET';
        });

        document.querySelectorAll('.btn-reset-token').forEach(function (btn) {
            btn.addEventListener('click', function () {
                pendingResetNodeId = btn.getAttribute('data-node-id');
                document.getElementById('reset-node-name').textContent = btn.getAttribute('data-node-name') || '';
                resetInput.value = '';
                resetBtn.disabled = true;
                $('#resetConfirmModal').modal('show');
            });
        });

        /* Reset from view modal */
        try {
            document.getElementById('reset-token-from-view-btn').addEventListener('click', function () {
                pendingResetNodeId = viewTokenNodeId;
                document.getElementById('reset-node-name').textContent = viewTokenNodeName;
                resetInput.value = '';
                resetBtn.disabled = true;
                $('#tokenModal').modal('hide');
                $('#resetConfirmModal').modal('show');
            });
        } catch (_) { /* element may not exist everywhere */ }
        try {
            document.getElementById('reset-token-from-empty-btn').addEventListener('click', function () {
                pendingResetNodeId = viewTokenNodeId;
                document.getElementById('reset-node-name').textContent = viewTokenNodeName;
                resetInput.value = '';
                resetBtn.disabled = true;
                $('#tokenModal').modal('hide');
                $('#resetConfirmModal').modal('show');
            });
        } catch (_) { /* element may not exist everywhere */ }

        resetBtn.addEventListener('click', async function () {
            if (!pendingResetNodeId) return;
            resetBtn.disabled = true; resetBtn.textContent = 'Resetting…';
            try {
                const res = await fetch('/admin/firewall/nodes/' + pendingResetNodeId + '/token/reset', {
                    method: 'POST', headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                });
                const body = await res.json();
                if (!body.success) { alert(body.error || 'Token reset failed'); return; }
                $('#resetConfirmModal').modal('hide');
                revealed.textContent = body.data.token;
                document.getElementById('token-message').textContent = body.data.message || 'Store this token immediately.';
                document.getElementById('token-display').style.display = '';
                document.getElementById('token-empty').style.display = 'none';
                document.getElementById('token-loading').style.display = 'none';
                $('#tokenModal').modal('show');
            } catch (err) { alert('Token reset failed: ' + err.message); }
            finally { resetBtn.disabled = false; resetBtn.textContent = 'Reset Token'; }
        });

        /* Edit API URL modal */
        let editApiNodeId   = null;
        let editWingsFqdn   = '';
        let editWingsSsl    = false;
        let editAutoFqdn    = false;

        const fqdnInput      = document.getElementById('edit-fqdn-input');
        const sslValue       = document.getElementById('edit-ssl-value');
        const sslHttp        = document.getElementById('edit-ssl-http');
        const sslHttps       = document.getElementById('edit-ssl-https');
        const autoToggleBtn  = document.getElementById('edit-auto-fqdn-toggle');
        const autoLabel      = document.getElementById('edit-auto-fqdn-label');

        function setSsl(isHttps) {
            sslValue.value = isHttps ? '1' : '0';
            sslHttp.className  = 'btn btn-sm ' + (!isHttps ? 'btn-primary' : 'btn-default');
            sslHttps.className = 'btn btn-sm ' + (isHttps  ? 'btn-primary' : 'btn-default');
        }

        function setAutoFqdn(auto) {
            editAutoFqdn = auto;
            autoLabel.textContent = auto ? 'ON' : 'OFF';
            autoToggleBtn.className = 'btn btn-sm ' + (auto ? 'btn-success' : 'btn-default');
            fqdnInput.disabled = auto;
            sslHttp.disabled   = auto;
            sslHttps.disabled  = auto;
            if (auto) {
                fqdnInput.value = editWingsFqdn;
                setSsl(editWingsSsl);
            }
        }

        sslHttp.addEventListener('click',  () => { if (!editAutoFqdn) setSsl(false); });
        sslHttps.addEventListener('click', () => { if (!editAutoFqdn) setSsl(true);  });
        autoToggleBtn.addEventListener('click', () => setAutoFqdn(!editAutoFqdn));

        document.querySelectorAll('.btn-edit-api-url').forEach(function (btn) {
            btn.addEventListener('click', function () {
                editApiNodeId  = btn.getAttribute('data-node-id');
                editWingsFqdn  = btn.getAttribute('data-wings-fqdn') || '';
                editWingsSsl   = btn.getAttribute('data-wings-ssl') === '1';
                const isAuto   = btn.getAttribute('data-auto-fqdn') !== '0';
                const curFqdn  = btn.getAttribute('data-fqdn') || editWingsFqdn;
                const curSsl   = btn.getAttribute('data-ssl') === '1';

                const card = document.querySelector('.fwp-node-card[data-node-id="' + editApiNodeId + '"]');
                const name = card ? card.querySelector('[style*="font-size:14px"]')?.textContent?.trim() : ('Node ' + editApiNodeId);
                document.getElementById('edit-api-node-name').textContent = name || ('Node ' + editApiNodeId);

                // Populate fields before locking (so auto mode shows wings values).
                fqdnInput.value = curFqdn;
                setSsl(curSsl);
                setAutoFqdn(isAuto);

                $('#editApiUrlModal').modal('show');
            });
        });

        document.getElementById('edit-api-save-btn').addEventListener('click', async function () {
            if (!editApiNodeId) return;
            const btn = this;
            btn.disabled = true; btn.textContent = 'Saving…';
            const payload = {
                auto_fqdn: editAutoFqdn,
                fqdn:      fqdnInput.value.trim(),
                use_ssl:   sslValue.value === '1',
            };
            try {
                const res = await fetch('/admin/firewall/nodes/' + editApiNodeId + '/api-url', {
                    method: 'PUT',
                    headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json', 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload),
                });
                const body = await res.json();
                if (!body.success) { alert(body.error || 'Update failed'); return; }
                const t = body.data.token;
                applyNodeRow({
                    node_id:         parseInt(editApiNodeId, 10),
                    is_node_enabled: t.is_node_enabled ?? true,
                    is_online:       t.is_online ?? false,
                    geoip_available: t.geoip_available ?? false,
                    use_ssl:         t.use_ssl ?? false,
                    auto_fqdn:       t.auto_fqdn ?? true,
                    fqdn:            t.fqdn,
                    api_url:         null,
                    last_seen_human: null,
                });
                // Update button data attrs for next open.
                const editBtn = document.querySelector('.btn-edit-api-url[data-node-id="' + editApiNodeId + '"]');
                if (editBtn) {
                    editBtn.setAttribute('data-auto-fqdn', t.auto_fqdn ? '1' : '0');
                    editBtn.setAttribute('data-fqdn', t.fqdn || '');
                    editBtn.setAttribute('data-ssl', t.use_ssl ? '1' : '0');
                }
                $('#editApiUrlModal').modal('hide');
            } catch (err) { alert('Update failed: ' + err.message); }
            finally { btn.disabled = false; btn.textContent = 'Save'; }
        });

        /* Toggle enable/disable */
        document.querySelectorAll('.btn-node-toggle').forEach(function (btn) {
            btn.addEventListener('click', async function () {
                const nodeId = btn.getAttribute('data-node-id');
                const currentlyEnabled = btn.getAttribute('data-enabled') === '1';
                const action = currentlyEnabled ? 'disable' : 'enable';
                if (!confirm('Are you sure you want to ' + action + ' this node? ' +
                    (currentlyEnabled ? 'All pings and webhooks will stop.' : 'Normal operation will resume.'))) return;
                btn.disabled = true;
                try {
                    const res = await fetch('/admin/firewall/nodes/' + nodeId + '/toggle', {
                        method: 'POST', headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                    });
                    const body = await res.json();
                    if (!body.success) { alert(body.error || 'Toggle failed'); return; }
                    const nowEnabled = !!body.data.is_node_enabled;
                    applyNodeRow({
                        node_id: parseInt(nodeId, 10),
                        is_node_enabled: nowEnabled,
                        is_online: nowEnabled ? (document.querySelector('.fwp-node-status-text[data-node-id="' + nodeId + '"]')?.textContent === 'Online') : false,
                        geoip_available: false,
                        last_seen_human: null,
                    });
                    // Repoll immediately to refresh all fields from DB.
                    pollDb();
                } catch (err) { alert('Toggle failed: ' + err.message); }
                finally { btn.disabled = false; }
            });
        });

        /* Stats modal */
        document.querySelectorAll('.btn-node-stats').forEach(function (btn) {
            btn.addEventListener('click', async function () {
                const nodeId = btn.getAttribute('data-node-id');
                document.getElementById('stats-node-name').textContent = btn.getAttribute('data-node-name') || ('Node ' + nodeId);
                document.getElementById('stats-loading').style.display = '';
                document.getElementById('stats-body').style.display = 'none';
                document.getElementById('stats-error').style.display = 'none';
                document.getElementById('stats-error').textContent = '';
                $('#statsModal').modal('show');
                try {
                    const res = await fetch('/admin/firewall/nodes/' + nodeId + '/stats', {
                        headers: { 'Accept': 'application/json' },
                    });
                    const body = await res.json();
                    if (!body.success) {
                        document.getElementById('stats-error').textContent = body.error || 'Could not load stats';
                        document.getElementById('stats-error').style.display = '';
                        document.getElementById('stats-loading').style.display = 'none';
                        return;
                    }
                    const p = body.data.panel;
                    document.getElementById('stat-total-servers').textContent = p.total_servers;
                    document.getElementById('stat-fw-servers').textContent = p.fw_enabled_servers;
                    document.getElementById('stat-active-rules').textContent = p.active_rules;
                    document.getElementById('stat-total-rules').textContent = p.total_rules;

                    const nodeStats = body.data.node || {};
                    const nSection = document.getElementById('node-stats-section');
                    const nTable = document.querySelector('#node-stats-table tbody');
                    const LABELS = {
                        version: 'Node version',
                        input_jump_style: 'Jump style',
                        status: 'Status',
                        pps: 'Packets/sec',
                        bps: 'Bytes/sec',
                        active_connections: 'Active connections',
                        blocked_pps: 'Blocked PPS',
                    };
                    const entries = Object.entries(nodeStats).filter(([,v]) => v !== null && v !== undefined);
                    if (entries.length > 0) {
                        nTable.innerHTML = entries.map(([k,v]) =>
                            '<tr><td>' + (LABELS[k] || k) + '</td><td><code>' + v + '</code></td></tr>'
                        ).join('');
                        nSection.style.display = '';
                    } else {
                        nSection.style.display = 'none';
                    }

                    document.getElementById('stats-loading').style.display = 'none';
                    document.getElementById('stats-body').style.display = '';
                } catch (err) {
                    document.getElementById('stats-error').textContent = 'Request failed: ' + err.message;
                    document.getElementById('stats-error').style.display = '';
                    document.getElementById('stats-loading').style.display = 'none';
                }
            });
        });
    })();
    </script>
@endsection