MAC Address Table frontend

async function showMacAddressTable() {
    showContent('<p>Loading MAC address table...</p>');

    try {
        const response = await fetch(`${BASE_URL}/mac-address-table`);
        const data = await response.json();

        // Extract unique ports from data as strings directly
        const uniquePorts = [...new Set(data.map(entry => (entry.port ?? '').trim()))];
        const portOptions = ['<option value="All">All</option>', ...uniquePorts.map(port => `<option value="${port}">${port}</option>`)].join('');

        showContent(`
            <h2>MAC Address Table</h2>

            <div class="info">
                <label for="macPort">Port:</label>
                <select style="width:20%;" id="macPort">
                    ${portOptions}
                </select>
                <br>
                <label for="vlan">VLAN ID:</label>
                <input type="number" id="vlan" placeholder="0 means All VLAN" value="0" style="width:20%;"> 0 means All VLAN
                <br>
                <label for="macNumber">MAC Number:</label>
                <input type="number" id="macNumber" placeholder="Number of MACs to show" value="10" style="width:20%;" readonly>
                <br>

                <button onclick="displayTable()">Display</button>
                <button onclick="showHelp()">Help</button>
            </div>

            <table id="macTable">
                <thead>
                    <tr>
                        <th>MAC Address</th>
                        <th>VLAN ID</th>
                        <th>Port</th>
                        <th>Static</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Dynamic rows will be added here -->
                </tbody>
            </table>
        `);

        // Initial display after a short delay
        setTimeout(displayTable, 100);
    } catch (err) {
        console.error("Failed to load MAC address table:", err);
        showContent('<p style="color:red;">Failed to load MAC address table.</p>');
    }
}

async function displayTable() {
    const port = document.getElementById('macPort')?.value ?? "All";
    const vlan = parseInt(document.getElementById('vlan')?.value ?? "0");
    const macNumberInput = document.getElementById('macNumber');

    console.log('Selected port:', port);
    console.log('Selected vlan:', vlan);

    try {
        const response = await fetch(`${BASE_URL}/mac-address-table`);
        const data = await response.json();

        console.log('Fetched data length:', data.length);

        // Filter data based on selected port and VLAN
        const filtered = data.filter(entry => {
            const portMatch = (port === "All") || ((entry.port ?? '').trim() === port);
            const vlanMatch = (vlan === 0) || (entry.vlanId === vlan);
            return portMatch && vlanMatch;
        });

        console.log('Filtered entries count:', filtered.length);

        // Always update the MAC number input to reflect filtered count
        const macNumber = filtered.length;
        if (macNumberInput) macNumberInput.value = macNumber;

        // Limit the displayed entries to the filtered count
        const entriesToShow = filtered.slice(0, macNumber);

        const tbody = document.querySelector('#macTable tbody');
        tbody.innerHTML = '';

        entriesToShow.forEach(entry => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${entry.macAddress}</td>
                <td>${entry.vlanId ?? '-'}</td>
                <td>${entry.port}</td>
                <td>${(entry.static === true || entry.static === 1) ? '0' : '1'}</td>
            `;
            tbody.appendChild(row);
        });

        if (entriesToShow.length === 0) {
            tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;">No matching entries found.</td></tr>';
        }

    } catch (err) {
        console.error("Error fetching or displaying MAC table:", err);
        alert("Failed to fetch MAC address table.");
    }
}

function refreshMacAddressTable() {
    showMacAddressTable();
}