@extends('layout.app')

@section('content')
    <div class="row">
        <div class="col-md-5">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">OLT Test</h4>
                    <small class="text-muted">Run an SNMP walk against an OLT and view live responses.</small>
                </div>
                <div class="card-body">
                    <div id="form-errors" class="alert alert-danger d-none"></div>

                    <form id="oltTestForm">
                        @csrf
                        <div class="form-group">
                            <label for="olt_address">OLT IP Address</label>
                            <input type="text" name="olt_address" id="olt_address" class="form-control"
                                placeholder="e.g. 192.168.1.1" required>
                        </div>
                        <div class="form-group">
                            <label for="port">SNMP Port</label>
                            <input type="number" name="port" id="port" class="form-control" placeholder="161" required>
                        </div>
                        <div class="form-group">
                            <label for="community">Community</label>
                            <input type="text" name="community" id="community" class="form-control" placeholder="public" required>
                        </div>
                        <div class="form-group">
                            <label for="oids">OIDs <small class="text-muted">(one per line)</small></label>
                            <textarea name="oids" id="oids" rows="6" class="form-control"
                                placeholder="1.3.6.1.2.1.1.5.0&#10;1.3.6.1.2.1.1.1.0" required></textarea>
                        </div>
                        <div class="d-flex">
                            <button type="submit" id="runBtn" class="btn btn-primary flex-grow-1 mr-2">
                                <i class="fas fa-play"></i> Run SNMP Walk
                            </button>
                            <button type="button" id="stopBtn" class="btn btn-warning" disabled>
                                <i class="fas fa-stop"></i> Stop
                            </button>
                            <button type="button" id="clearBtn" class="btn btn-light ml-2">
                                <i class="fas fa-broom"></i> Clear
                            </button>
                        </div>
                    </form>
                </div>
                <div class="card-body">

                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">OID Reference</h4>
                    <small class="text-muted d-block">Click any OID to add it to the form.</small>
                    <small class="d-block mt-1">
                        <span class="badge badge-success">From your code</span>
                        = OID is currently used in
                        <code>OltInfoController::store()</code>.
                        <span class="badge badge-light border ml-1">Reference</span>
                        = added from general SNMP / vendor MIB knowledge — verify against your device's MIB.
                    </small>
                </div>
                <div class="card-body p-2">
                    <div class="accordion" id="oidAccordion">

                        @php
                            // src = 'code' → matches a value stored in OltInfoController::store()
                            // src = 'ref'  → general SNMP standard or vendor MIB lookup, NOT in your code
                            $oidGroups = [
                                'generic' => [
                                    'title'  => 'Standard SNMP (any device)',
                                    'badge'  => 'Generic',
                                    'badgeClass' => 'badge-secondary',
                                    'items'  => [
                                        ['oid' => '1.3.6.1.2.1.1.1.0', 'label' => 'System Description (sysDescr)', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.2.1.1.3.0', 'label' => 'System Uptime (sysUpTime)', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.2.1.1.4.0', 'label' => 'System Contact (sysContact)', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.2.1.1.5.0', 'label' => 'System Name (sysName) — used as olt_name for every brand', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.2.1.1.6.0', 'label' => 'System Location (sysLocation)', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.2.1.2.1.0', 'label' => 'Number of Interfaces (ifNumber)', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.2.1.2.2.1.2', 'label' => 'Interface Description (ifDescr) — used as onu_interface_name', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.2.1.2.2.1.5', 'label' => 'Interface Speed (ifSpeed)', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.2.1.2.2.1.7', 'label' => 'Interface Admin Status (ifAdminStatus)', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.2.1.2.2.1.8', 'label' => 'Interface Operational Status (ifOperStatus)', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.2.1.2.2.1.10', 'label' => 'Interface In Octets (ifInOctets)', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.2.1.2.2.1.16', 'label' => 'Interface Out Octets (ifOutOctets)', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.2.1.31.1.1.1.18', 'label' => 'Interface Alias (ifAlias)', 'src' => 'ref'],
                                    ],
                                ],
                                'fdb' => [
                                    'title'  => 'Dynamic MAC Address Table (Bridge MIB)',
                                    'badge'  => 'Vendor-agnostic',
                                    'badgeClass' => 'badge-success',
                                    'items'  => [
                                        // RFC 1493 / RFC 4188 — Bridge MIB (non-VLAN dynamic FDB)
                                        ['oid' => '1.3.6.1.2.1.17.4.3.1.1', 'label' => 'dot1dTpFdbAddress — dynamic MAC list (non-VLAN aware FDB).', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.2.1.17.4.3.1.2', 'label' => 'dot1dTpFdbPort — bridge port where each MAC was learned.', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.2.1.17.4.3.1.3', 'label' => 'dot1dTpFdbStatus — entry status (3 = learned, 4 = self, 5 = mgmt).', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.2.1.17.1.4.1.2', 'label' => 'dot1dBasePortIfIndex — maps bridge port → ifIndex (cross-reference with ifDescr).', 'src' => 'ref'],

                                        // RFC 2674 — Q-BRIDGE MIB (VLAN-aware FDB) — same OIDs BDCom uses
                                        ['oid' => '1.3.6.1.2.1.17.7.1.2.2.1.1', 'label' => 'dot1qTpFdbAddress — VLAN-aware MAC list. (Same as BDCom vlan_mac.)', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.2.1.17.7.1.2.2.1.2', 'label' => 'dot1qTpFdbPort — bridge port for each (VLAN, MAC). (Same as BDCom onu_id.)', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.2.1.17.7.1.2.2.1.3', 'label' => 'dot1qTpFdbStatus — VLAN-aware entry status.', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.2.1.17.7.1.4.2.1.5', 'label' => 'dot1qVlanCurrentEgressPorts — current egress port set per VLAN.', 'src' => 'ref'],
                                    ],
                                ],
                                'bdcom' => [
                                    'title'  => 'BDCom',
                                    'badge'  => 'EPON / GPON',
                                    'badgeClass' => 'badge-info',
                                    'items'  => [
                                        ['oid' => '1.3.6.1.2.1.17.7.1.2.2.1.1', 'label' => 'VLAN-MAC mapping (vlan_mac)', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.2.1.17.7.1.2.2.1.2', 'label' => 'ONU ID by VLAN (onu_id)', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.4.1.3320.101.10.5.1.5', 'label' => 'ONU Laser RX — EPON', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.4.1.3320.10.3.4.1.2', 'label' => 'ONU Laser RX — GPON', 'src' => 'code'],
                                    ],
                                ],
                                'vsol' => [
                                    'title'  => 'Vsol',
                                    'badge'  => 'EPON / GPON',
                                    'badgeClass' => 'badge-info',
                                    'items'  => [
                                        ['oid' => '1.3.6.1.4.1.37950.1.1.5.10.3.2.1.3', 'label' => 'VLAN-MAC mapping (vlan_mac)', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.4.1.37950.1.1.5.10.3.2.1.5', 'label' => 'ONU ID / Interface', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.4.1.37950.1.1.5.12.2.1.8.1.7', 'label' => 'ONU Laser — EPON', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.4.1.37950.1.1.6.1.1.3.1.7', 'label' => 'ONU Laser — GPON', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.4.1.37950.1.1.5.10.3.5.1.3', 'label' => 'VLAN-MAC mapping (GPON variant, older revision)', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.4.1.37950.1.1.5.10.3.5.1.5', 'label' => 'ONU ID / Interface (GPON variant, older revision)', 'src' => 'ref'],
                                    ],
                                ],
                                'cdata' => [
                                    'title'  => 'C-Data',
                                    'badge'  => 'EPON / GPON',
                                    'badgeClass' => 'badge-info',
                                    'items'  => [
                                        ['oid' => '1.3.6.1.4.1.17409.2.3.2.4.2.1.1', 'label' => 'VLAN-MAC mapping (vlan_mac)', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.4.1.34592.1.3.100.12.2.1.1.3', 'label' => 'ONU ID', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.4.1.17409.2.3.4.2.1.4', 'label' => 'ONU Laser RX', 'src' => 'code'],
                                    ],
                                ],
                                'ecom' => [
                                    'title'  => 'Ecom',
                                    'badge'  => 'GPON',
                                    'badgeClass' => 'badge-info',
                                    'items'  => [
                                        ['oid' => '1.3.6.1.4.1.34592.1.3.100.12.2.1.1.3', 'label' => 'VLAN-MAC mapping (vlan_mac)', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.4.1.17409.2.3.4.1.1.2', 'label' => 'ONU ID', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.4.1.17409.2.3.4.2.1.4', 'label' => 'ONU Laser RX', 'src' => 'code'],
                                    ],
                                ],
                                'tbs' => [
                                    'title'  => 'TBS (enterprise 12170)',
                                    'badge'  => 'EPON / GPON',
                                    'badgeClass' => 'badge-info',
                                    'items'  => [
                                        ['oid' => '1.3.6.1.4.1.12170.2.3.5.2.2.1.1', 'label' => 'Learned client MAC (vlan_mac). Row index is the MAC bytes + VLAN — walk with -Ox or a third of the MACs print as plain strings.', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.4.1.12170.2.3.5.2.2.1.4', 'label' => 'PON port for each learned MAC (onu_interface_name).', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.4.1.12170.2.3.5.2.2.1.5', 'label' => 'ONU index for each learned MAC (onu_id).', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.4.1.12170.2.3.5.2.2.1.2', 'label' => 'VLAN column — same value as the last segment of the row index (0 = untagged).', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.4.1.12170.2.3.4.2.1.4', 'label' => 'ONU Laser RX (onu_laser), indexed {frame}.{port}.{onu} in hundredths of a dBm.', 'src' => 'code'],
                                        ['oid' => '1.3.6.1.4.1.12170.2.3.4.1.1.2', 'label' => 'Legacy ONU table — the ONU\'s own MAC, used by TBS before the vlan-mac rewrite.', 'src' => 'ref'],
                                    ],
                                ],
                                // 'huawei' => [
                                //     'title'  => 'Huawei (MA56xx / MA58xx)',
                                //     'badge'  => 'GPON',
                                //     'badgeClass' => 'badge-warning',
                                //     'items'  => [
                                //         ['oid' => '1.3.6.1.4.1.2011.6.128.1.1.2.43.1.3', 'label' => 'ONU Serial Number', 'src' => 'ref'],
                                //         ['oid' => '1.3.6.1.4.1.2011.6.128.1.1.2.43.1.9', 'label' => 'ONU Description / Name', 'src' => 'ref'],
                                //         ['oid' => '1.3.6.1.4.1.2011.6.128.1.1.2.46.1.15', 'label' => 'ONU Run State', 'src' => 'ref'],
                                //         ['oid' => '1.3.6.1.4.1.2011.6.128.1.1.2.51.1.4', 'label' => 'ONU TX Optical Power', 'src' => 'ref'],
                                //         ['oid' => '1.3.6.1.4.1.2011.6.128.1.1.2.51.1.6', 'label' => 'ONU RX Optical Power', 'src' => 'ref'],
                                //     ],
                                // ],
                                // 'zte' => [
                                //     'title'  => 'ZTE (C300 / C320 / C600)',
                                //     'badge'  => 'EPON / GPON',
                                //     'badgeClass' => 'badge-warning',
                                //     'items'  => [
                                //         ['oid' => '1.3.6.1.4.1.3902.1012.3.28.1.1.5', 'label' => 'ONU Serial Number', 'src' => 'ref'],
                                //         ['oid' => '1.3.6.1.4.1.3902.1012.3.50.12.1.1.4', 'label' => 'ONU TX Optical Power', 'src' => 'ref'],
                                //         ['oid' => '1.3.6.1.4.1.3902.1012.3.50.12.1.1.10', 'label' => 'ONU RX Optical Power', 'src' => 'ref'],
                                //     ],
                                // ],
                                'corelink' => [
                                    'title'  => 'Corelink (enterprise 25355)',
                                    'badge'  => 'Walk to identify',
                                    'badgeClass' => 'badge-dark',
                                    'items'  => [
                                        ['oid' => '1.3.6.1.2.1.1.2.0', 'label' => 'sysObjectID — confirmed: iso.3.6.1.4.1.25355.4.1 (Corelink product family).', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.2.1.1.1.0', 'label' => 'sysDescr — model + firmware string.', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.4.1.25355', 'label' => 'Full Corelink enterprise subtree. Run this to enumerate every Corelink-specific OID, then scan for MAC / ONU ID / RX power patterns.', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.4.1.25355.4.1', 'label' => 'Corelink product subtree (one level under sysObjectID). Usually narrower than the full enterprise walk.', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.4.1.25355.4.1.1', 'label' => 'Likely PON / ONU table root — walk to look for ONU ID + MAC + RX power columns.', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.4.1.25355.4.1.2', 'label' => 'Alternate ONU table root — walk if .1.1 is empty.', 'src' => 'ref'],
                                        ['oid' => '1.3.6.1.2.1.2.2.1.2', 'label' => 'ifDescr — usable as onu_interface_name once Corelink is wired into OltInfoController.', 'src' => 'ref'],
                                    ],
                                ],
                            ];
                        @endphp

                        @foreach ($oidGroups as $key => $group)
                            @php
                                $codeCount = collect($group['items'])->where('src', 'code')->count();
                                $refCount  = collect($group['items'])->where('src', 'ref')->count();
                            @endphp
                            <div class="card mb-1">
                                <div class="card-header p-0" id="heading-{{ $key }}">
                                    <button class="btn btn-link btn-block text-left text-decoration-none px-3 py-2 d-flex justify-content-between align-items-center"
                                        type="button" data-toggle="collapse" data-target="#collapse-{{ $key }}"
                                        aria-expanded="{{ $key === 'generic' ? 'true' : 'false' }}"
                                        aria-controls="collapse-{{ $key }}">
                                        <span>
                                            <strong>{{ $group['title'] }}</strong>
                                            <small class="text-muted ml-1">
                                                @if ($codeCount) <span class="text-success">{{ $codeCount }} from code</span> @endif
                                                @if ($codeCount && $refCount) · @endif
                                                @if ($refCount) {{ $refCount }} ref @endif
                                            </small>
                                        </span>
                                        <span class="badge {{ $group['badgeClass'] }}">{{ $group['badge'] }}</span>
                                    </button>
                                </div>
                                <div id="collapse-{{ $key }}"
                                    class="collapse {{ $key === 'generic' ? 'show' : '' }}"
                                    data-parent="#oidAccordion"
                                    aria-labelledby="heading-{{ $key }}">
                                    <div class="card-body p-2">
                                        <ul class="list-unstyled mb-0 oid-list">
                                            @foreach ($group['items'] as $item)
                                                @php $isCode = ($item['src'] ?? 'ref') === 'code'; @endphp
                                                <li class="py-1 border-bottom">
                                                    <a href="#" class="oid-item d-block text-decoration-none"
                                                        data-oid="{{ $item['oid'] }}"
                                                        title="Click to add to OIDs">
                                                        <div class="d-flex justify-content-between align-items-start">
                                                            <code class="text-primary">{{ $item['oid'] }}</code>
                                                            @if ($isCode)
                                                                <span class="badge badge-success ml-2" style="font-size: 9px;">From your code</span>
                                                            @else
                                                                <span class="badge badge-light border ml-2" style="font-size: 9px;">Reference</span>
                                                            @endif
                                                        </div>
                                                        <small class="d-block text-muted">{{ $item['label'] }}</small>
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-7">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h4 class="mb-0">Results</h4>
                        <small id="results-summary" class="text-muted">Submit the form to see SNMP walk results.</small>
                    </div>
                    <div id="progress-wrap" class="d-none" style="min-width: 140px;">
                        <small id="progress-text" class="text-muted d-block text-right mb-1">0 / 0</small>
                        <div class="progress" style="height: 6px;">
                            <div id="progress-bar" class="progress-bar bg-primary" role="progressbar"
                                style="width: 0%"></div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div id="results-box">
                        <div id="results-empty" class="text-center text-muted py-5">
                            <i class="fas fa-network-wired fa-3x mb-3"></i>
                            <p class="mb-0">Submit the form to see SNMP walk results here.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        (function () {
            const form          = document.getElementById('oltTestForm');
            const runBtn        = document.getElementById('runBtn');
            const stopBtn       = document.getElementById('stopBtn');
            const clearBtn      = document.getElementById('clearBtn');
            const errorsBox     = document.getElementById('form-errors');
            const resultsBox    = document.getElementById('results-box');
            const resultsEmpty  = document.getElementById('results-empty');
            const summary       = document.getElementById('results-summary');
            const progressWrap  = document.getElementById('progress-wrap');
            const progressBar   = document.getElementById('progress-bar');
            const progressText  = document.getElementById('progress-text');
            const endpoint      = @json(route('oltTestExecute'));
            const csrfToken     = form.querySelector('input[name="_token"]').value;

            let currentController = null;
            let stopped = false;

            // Click an OID in the reference panel to append it to the textarea.
            document.querySelectorAll('.oid-item').forEach(el => {
                el.addEventListener('click', (e) => {
                    e.preventDefault();
                    const oid = el.dataset.oid;
                    const ta  = form.oids;
                    const existing = ta.value.split(/\r?\n/).map(s => s.trim()).filter(Boolean);
                    if (existing.includes(oid)) return;
                    ta.value = (ta.value.trim() ? ta.value.trimEnd() + '\n' : '') + oid;
                    ta.focus();
                });
            });

            function escapeHtml(str) {
                return String(str ?? '').replace(/[&<>"']/g, c => ({
                    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
                })[c]);
            }

            function buildPendingCard(index, oid) {
                const card = document.createElement('div');
                card.className = 'mb-3 border rounded';
                card.innerHTML = `
                    <div class="px-3 py-2 d-flex justify-content-between align-items-center bg-secondary text-white">
                        <span>
                            <strong>#${index + 1}</strong>
                            <code class="text-white ml-2">${escapeHtml(oid)}</code>
                        </span>
                        <span>
                            <span class="spinner-border spinner-border-sm mr-1" role="status"></span>
                            Running…
                        </span>
                    </div>`;
                return card;
            }

            function fillResultCard(card, index, data) {
                const headerClass = data.success ? 'bg-success text-white' : 'bg-danger text-white';
                const status      = data.success ? 'OK' : 'FAILED';
                const output      = data.output && data.output.length ? data.output : '(no output)';

                card.innerHTML = `
                    <div class="px-3 py-2 d-flex justify-content-between align-items-center ${headerClass}">
                        <span>
                            <strong>#${index + 1}</strong>
                            <code class="text-white ml-2">${escapeHtml(data.oid)}</code>
                        </span>
                        <span>
                            <span class="badge badge-light">${data.lines} line(s)</span>
                            <span class="badge badge-light">${data.time_ms} ms</span>
                            <span class="badge badge-light">${status}</span>
                        </span>
                    </div>
                    <div class="px-3 py-2 bg-light">
                        <small class="text-muted d-block mb-1">Command</small>
                        <code class="d-block text-break">${escapeHtml(data.command)}</code>
                    </div>
                    <div class="px-3 py-2">
                        <small class="text-muted d-block mb-1">Output</small>
                        <pre class="mb-0" style="max-height:300px; overflow:auto; background:#1e1e1e; color:#dcdcdc; padding:10px; border-radius:4px; font-size:12px;">${escapeHtml(output)}</pre>
                    </div>`;
            }

            function fillErrorCard(card, index, oid, message) {
                card.innerHTML = `
                    <div class="px-3 py-2 d-flex justify-content-between align-items-center bg-danger text-white">
                        <span>
                            <strong>#${index + 1}</strong>
                            <code class="text-white ml-2">${escapeHtml(oid)}</code>
                        </span>
                        <span class="badge badge-light">ERROR</span>
                    </div>
                    <div class="px-3 py-2">
                        <pre class="mb-0 text-danger">${escapeHtml(message)}</pre>
                    </div>`;
            }

            function updateProgress(done, total) {
                progressText.textContent = `${done} / ${total}`;
                progressBar.style.width = total ? `${Math.round((done / total) * 100)}%` : '0%';
            }

            function setRunning(isRunning) {
                runBtn.disabled  = isRunning;
                stopBtn.disabled = !isRunning;
                form.querySelectorAll('input, textarea').forEach(el => el.disabled = isRunning);
                runBtn.innerHTML = isRunning
                    ? '<span class="spinner-border spinner-border-sm mr-1"></span> Running…'
                    : '<i class="fas fa-play"></i> Run SNMP Walk';
            }

            stopBtn.addEventListener('click', () => {
                stopped = true;
                if (currentController) currentController.abort();
            });

            clearBtn.addEventListener('click', () => {
                resultsBox.innerHTML = '';
                resultsBox.appendChild(resultsEmpty);
                resultsEmpty.classList.remove('d-none');
                summary.textContent = 'Submit the form to see SNMP walk results.';
                progressWrap.classList.add('d-none');
                errorsBox.classList.add('d-none');
            });

            form.addEventListener('submit', async (e) => {
                e.preventDefault();
                errorsBox.classList.add('d-none');
                errorsBox.textContent = '';

                const ip        = form.olt_address.value.trim();
                const port      = form.port.value.trim();
                const community = form.community.value.trim();
                const oids      = form.oids.value.split(/\r?\n/).map(s => s.trim()).filter(Boolean);

                if (!ip || !port || !community || oids.length === 0) {
                    errorsBox.textContent = 'Please fill all fields and provide at least one OID.';
                    errorsBox.classList.remove('d-none');
                    return;
                }

                resultsBox.innerHTML = '';
                resultsEmpty.classList.add('d-none');
                progressWrap.classList.remove('d-none');
                updateProgress(0, oids.length);
                summary.textContent = `Running ${oids.length} OID(s) against ${ip}:${port}…`;

                stopped = false;
                setRunning(true);

                let okCount = 0;
                let failCount = 0;

                for (let i = 0; i < oids.length; i++) {
                    if (stopped) break;
                    const oid  = oids[i];
                    const card = buildPendingCard(i, oid);
                    resultsBox.appendChild(card);
                    card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });

                    currentController = new AbortController();
                    try {
                        const res = await fetch(endpoint, {
                            method: 'POST',
                            signal: currentController.signal,
                            headers: {
                                'X-CSRF-TOKEN': csrfToken,
                                'Accept':       'application/json',
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            body: new URLSearchParams({
                                _token:      csrfToken,
                                olt_address: ip,
                                port:        port,
                                community:   community,
                                oid:         oid
                            })
                        });

                        if (!res.ok) {
                            let msg = `HTTP ${res.status}`;
                            try {
                                const err = await res.json();
                                if (err && err.message) msg = err.message;
                                if (err && err.errors)  msg += ' — ' + Object.values(err.errors).flat().join(', ');
                            } catch (_) {}
                            fillErrorCard(card, i, oid, msg);
                            failCount++;
                        } else {
                            const data = await res.json();
                            fillResultCard(card, i, data);
                            data.success ? okCount++ : failCount++;
                        }
                    } catch (err) {
                        const msg = err.name === 'AbortError' ? 'Stopped by user.' : (err.message || 'Network error');
                        fillErrorCard(card, i, oid, msg);
                        failCount++;
                    }

                    updateProgress(i + 1, oids.length);
                }

                currentController = null;
                setRunning(false);

                const total = okCount + failCount;
                summary.innerHTML = stopped
                    ? `<span class="text-warning">Stopped.</span> ${total} processed — <span class="text-success">${okCount} OK</span>, <span class="text-danger">${failCount} failed</span>.`
                    : `${total} OID(s) processed — <span class="text-success">${okCount} OK</span>, <span class="text-danger">${failCount} failed</span>.`;
            });
        })();
    </script>
@endsection