function filterTable(searchInputId, tableId) {
  const filter = document.getElementById(searchInputId).value.toUpperCase();
  const rows = document.getElementById(tableId).getElementsByTagName("tr");
  for (let i = 1; i < rows.length; i++) {
    rows[i].style.display = "none";
    for (const cell of rows[i].getElementsByTagName("td")) {
      if ((cell.textContent || cell.innerText).toUpperCase().includes(filter)) {
        rows[i].style.display = "";
        break;
      }
    }
  }
}

function sortTable(tableId, columnIndex, th) {
  const tbody = document.getElementById(tableId).tBodies[0];
  const rows = Array.from(tbody.rows);
  const headers = Array.from(th.parentNode.children);
  headers.forEach(h => h !== th && (h.className = "", h.dataset.sortState = "none"));
  const state = th.dataset.sortState || "none";
  const newState = state === "none" ? "asc" : state === "asc" ? "desc" : "none";
  th.dataset.sortState = newState;
  th.className = newState !== "none" ? newState : "";
  if (newState === "none") {
    rows.sort((a, b) => a.dataset.index - b.dataset.index);
  } else {
    rows.sort((a, b) => {
      const aTxt = a.cells[columnIndex].textContent.trim();
      const bTxt = b.cells[columnIndex].textContent.trim();
      const aNum = parseFloat(aTxt.replace(/[^0-9.-]/g, ""));
      const bNum = parseFloat(bTxt.replace(/[^0-9.-]/g, ""));
      const numeric = !isNaN(aNum) && !isNaN(bNum);
      const cmp = numeric ? aNum - bNum : aTxt.localeCompare(bTxt, undefined, { numeric: true });
      return newState === "asc" ? cmp : -cmp;
    });
  }
  rows.forEach(r => tbody.appendChild(r));
}

async function loadBgpTables() {
  const ipv4Sum = document.getElementById("ipv4Summary");
  const ipv6Sum = document.getElementById("ipv6Summary");
  const ipv4Body = document.getElementById("ipv4TableBody");
  const ipv6Body = document.getElementById("ipv6TableBody");
  try {
    const res = await fetch("/bgp/json");
    const data = await res.json();
    ipv4Sum.innerHTML = buildSummary("IPv4", data.ipv4_info);
    ipv6Sum.innerHTML = buildSummary("IPv6", data.ipv6_info);
    const bfdPeersSet = new Set(data.bfd_peers);
    renderPeers(ipv4Body, data.ipv4_peers, bfdPeersSet);
    renderPeers(ipv6Body, data.ipv6_peers, bfdPeersSet);
    activatePopoversAndTooltips();
  } catch (e) {
    showError(ipv4Sum, ipv4Body, "IPv4");
    showError(ipv6Sum, ipv6Body, "IPv6");
  }
}

function buildSummary(label, info) {
  const popContent = `<strong>BGP Router ID:</strong> ${info.router_id}<br><strong>Local AS:</strong> <a href='https://bgp.tools/search?q=${info.local_as}' target='_blank'>${info.local_as}</a><br><strong>VRF ID:</strong> ${info.vrf_id}<br><strong>RIB Entries:</strong> ${info.rib_entries} (using ${info.rib_memory})<br><strong>Peers:</strong> ${info.peers} (using ${info.peers_memory})<br><strong>BGP Table Version:</strong> ${info.table_version}`.trim();
  
  return `<h2 class="d-inline me-2">${label} Unicast Summary</h2><span tabindex="0" role="button" class="icon-info" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-html="true" data-bs-title="${label} Summary Info" data-bs-content="${popContent}"></span><div class="mt-1"><strong>Peers:</strong> ${info.peers}</div>`;
}

function renderPeers(tbody, peers, bfdPeersSet) {
  tbody.innerHTML = "";
  if (!peers.length) {
    tbody.innerHTML = `<tr><td colspan="7" class="text-center">No data available.</td></tr>`;
    return;
  }
  const ip_version = tbody.id.includes('ipv4') ? 'ipv4' : 'ipv6';
  peers.forEach((p, i) => {
    const popTitle = `<a href="https://bgp.tools/search?q=${p.as_number}" target="_blank" rel="noopener noreferrer">${p.as_number}</a> details<a>`;
    const popContent = `Messages Received: ${p.msg_received}<br>Messages Sent: ${p.msg_sent}<br>Inbound Queue: ${p.in_queue}<br>Outbound Queue: ${p.out_queue}`.trim();
    const hasBfd = bfdPeersSet.has(p.neighbor);
    let isShutdown = p.prefix_sent === '(Admin)';
    let displayState = p.state_pfx_rcd;
    let displayPrefixSent = p.prefix_sent;
    let displayDescription = p.description;
    if (isShutdown) {
      displayState = `${p.state_pfx_rcd} ${p.prefix_sent}`;
      const descParts = p.description.split(' ');
      displayPrefixSent = descParts.shift() || '0';
      displayDescription = descParts.join(' ');
    }
    const tr = document.createElement("tr");
    tr.dataset.index = i;
    tr.innerHTML = `
      <td>${p.neighbor}</td>
      <td><a href="https://bgp.tools/search?q=${p.as_number}" target="_blank">${p.as_number}</a></td>
      <td>${p.up_down}</td>
      <td>${displayState}</td>
      <td>${displayPrefixSent}</td>
      <td>${displayDescription}</td>
      <td class="actions-cell d-flex justify-content-start align-items-center">
        <span tabindex="0" role="button" class="icon-info" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-html="true" data-bs-title='${popTitle}' data-bs-content="${popContent}"></span>
        <a href="/bgp/neighbor/${ip_version}/${p.neighbor}" class="icon-details" target="_blank" role="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Display BGP neighbor details"></a>
        ${hasBfd ? `<a href="/bfd/peer/${p.neighbor}" class="icon-bfd" target="_blank" role="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Display BFD peer details"></a>` : ''}
        
        <div class="dropdown" data-bs-toggle="tooltip" data-bs-placement="top" title="Peer Actions">
          <span class="icon-gear" role="button" data-bs-toggle="dropdown" aria-expanded="false">Actions</span>
          <ul class="dropdown-menu">
            <li><button class="dropdown-item action-btn" data-action="soft_reset" data-neighbor-ip="${p.neighbor}">Soft Reset</button></li>
            <li><button class="dropdown-item action-btn" data-action="hard_reset" data-neighbor-ip="${p.neighbor}">Hard Reset</button></li>
            <li><hr class="dropdown-divider"></li>
            ${isShutdown ? `<li><button class="dropdown-item action-btn text-success" data-action="enable" data-neighbor-ip="${p.neighbor}">Enable</button></li>` : `<li><button class="dropdown-item action-btn text-danger" data-action="shutdown" data-neighbor-ip="${p.neighbor}">Shutdown</button></li>`}
          </ul>
        </div>
      </td>
    `;
    tbody.appendChild(tr);
  });
}

function activatePopoversAndTooltips() {
  const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
  popoverTriggerList.map(el => new bootstrap.Popover(el));
  const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  tooltipTriggerList.map(el => new bootstrap.Tooltip(el));
}

function showError(sumEl, bodyEl, label) {
  sumEl.textContent = `Error fetching ${label} data.`;
  bodyEl.innerHTML = `<tr><td colspan="8" class="text-center text-danger">Error retrieving data.</td></tr>`;
}

function refreshBGPTable() {
  ["ipv4Search", "ipv6Search"].forEach(id => (document.getElementById(id).value = ""));
  toggleRefresh(true);
  loadBgpTables().finally(() => toggleRefresh(false));
}

function toggleRefresh(loading) {
  document.getElementById("refreshIcon").classList.toggle("d-none", loading);
  document.getElementById("refreshSpinner").classList.toggle("d-none", !loading);
  document.getElementById("refreshIcon2").classList.toggle("d-none", loading);
  document.getElementById("refreshSpinner2").classList.toggle("d-none", !loading);
}

function showConfirmationModal(action, neighborIp) {
  const modal = document.getElementById('confirmationModal');
  const modalTitle = document.getElementById('modalTitle');
  const modalBody = document.getElementById('modalBody');
  const modalConfirmBtn = document.getElementById('modalConfirmBtn');
  const modalCancelBtn = document.getElementById('modalCancelBtn');
  modalTitle.textContent = `Confirm: ${action.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())}`;
  modalTitle.style.color = '';
  modalBody.innerHTML = `<p>Are you sure you want to perform a ${action.replace('_', ' ').toLowerCase()} on neighbor ${neighborIp}?</p>`;
  modalConfirmBtn.style.display = 'inline-block';
  modalCancelBtn.style.display = 'inline-block';
  modalCancelBtn.textContent = 'Cancel';
  modal.style.display = 'flex';
  const newConfirmBtn = modalConfirmBtn.cloneNode(true);
  modalConfirmBtn.parentNode.replaceChild(newConfirmBtn, modalConfirmBtn);
  newConfirmBtn.addEventListener('click', () => executeAction(action, neighborIp));
}

async function executeAction(action, neighborIp) {
  const modal = document.getElementById('confirmationModal');
  const modalTitle = document.getElementById('modalTitle');
  const modalBody = document.getElementById('modalBody');
  const modalConfirmBtn = modal.querySelector('#modalConfirmBtn');
  const modalCancelBtn = modal.querySelector('#modalCancelBtn');
  modalTitle.textContent = 'Processing...';
  modalBody.innerHTML = `<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>`;
  modalConfirmBtn.style.display = 'none';
  modalCancelBtn.style.display = 'none';
  try {
    const response = await fetch('/bgp/action', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action, neighbor_ip: neighborIp }),
    });
    const result = await response.json();
    if (result.success) {
      modalTitle.textContent = 'Success';
      modalTitle.style.color = '#198754';
      modalBody.textContent = result.message || 'Action completed successfully.';
      modalCancelBtn.textContent = 'OK';
      modalCancelBtn.style.display = 'inline-block';
      modalCancelBtn.onclick = () => {
        modal.style.display = 'none';
        refreshBGPTable();
      };
    } else {
      throw new Error(result.error || 'An unknown error occurred.');
    }
  } catch (err) {
    modalTitle.textContent = 'Error';
    modalTitle.style.color = '#dc3545';
    modalBody.textContent = err.message;
    modalCancelBtn.textContent = 'Close';
    modalCancelBtn.style.display = 'inline-block';
    modalCancelBtn.onclick = () => {
      modal.style.display = 'none';
    };
  }
}

document.addEventListener("DOMContentLoaded", () => {
  loadBgpTables();
  const modal = document.getElementById('confirmationModal');
  const cancelBtn = document.getElementById('modalCancelBtn');
  cancelBtn.addEventListener('click', () => modal.style.display = 'none');
  modal.addEventListener('click', (e) => {
    if (e.target.id === 'confirmationModal') {
      modal.style.display = 'none';
    }
  });
  document.body.addEventListener('click', (event) => {
    if (event.target.classList.contains('action-btn')) {
      const { action, neighborIp } = event.target.dataset;
      showConfirmationModal(action, neighborIp);
    }
  });
});