// Peers UI — flat admin layout with overview stats and connection details

let peerChart = null;

async function renderPeers() {
  if (window.genericFetch) {
    await window.genericFetch('peers', true);
  }
  renderPeerGraph();
}

function filterPeers() {
  if (window.genericFilter) {
    window.genericFilter('peers');
  }
}

function setPeerStat(id, value) {
  const el = document.getElementById(id);
  if (el) el.textContent = value;
}

function escapePeerHtml(value) {
  return window.escapeHtml ? window.escapeHtml(value) : String(value);
}

async function showPeerDetails(peerId) {
  try {
    const [peerRes, historyRes] = await Promise.all([
      fetch(`/api/peers/${encodeURIComponent(peerId)}`),
      fetch(`/api/peers/${encodeURIComponent(peerId)}/history`)
    ]);

    if (!peerRes.ok || !historyRes.ok) {
      throw new Error('Failed to fetch peer details');
    }

    const peer = await peerRes.json();
    const history = await historyRes.json();

    const modal = document.getElementById('peerDetailsModal');
    if (!modal) return;

    const content = document.getElementById('peer-details-content');
    if (!content) return;

    const uptime = peer.uptime
      ? (window.formatUptime ? window.formatUptime(peer.uptime) : `${Math.floor(peer.uptime / 1000)}s`)
      : 'N/A';
    const connectTime = peer.connectTime ? new Date(peer.connectTime).toLocaleString() : 'N/A';
    const lastSeen = peer.metrics?.lastSeen ? new Date(peer.metrics.lastSeen).toLocaleString() : 'N/A';
    const totalDuration = peer.metrics?.totalDuration
      ? (window.formatDuration ? window.formatDuration(peer.metrics.totalDuration) : `${Math.floor(peer.metrics.totalDuration / 1000)}s`)
      : '0s';
    const avgDuration = peer.metrics?.avgDuration
      ? (window.formatDuration ? window.formatDuration(peer.metrics.avgDuration) : `${Math.floor(peer.metrics.avgDuration / 1000)}s`)
      : 'N/A';

    const statusBadge = peer.connected
      ? '<span class="peer-badge peer-badge--ok">Connected</span>'
      : '<span class="peer-badge peer-badge--muted">Disconnected</span>';
    const blockedBadge = peer.isBlocked
      ? '<span class="peer-badge peer-badge--danger">Blocked</span>'
      : '<span class="peer-badge peer-badge--muted">Not blocked</span>';

    content.innerHTML = `
      <div class="peer-details-grid">
        <section class="peer-details-section">
          <h4 class="peer-details-section-title">Peer information</h4>
          <dl class="peer-details-dl">
            <div><dt>ID</dt><dd><code>${escapePeerHtml(peer.id)}</code></dd></div>
            <div><dt>Status</dt><dd>${statusBadge}</dd></div>
            <div><dt>Blocked</dt><dd>${blockedBadge}</dd></div>
            <div><dt>Uptime</dt><dd>${escapePeerHtml(uptime)}</dd></div>
            <div><dt>Connected at</dt><dd>${escapePeerHtml(connectTime)}</dd></div>
          </dl>
        </section>

        <section class="peer-details-section">
          <h4 class="peer-details-section-title">Metrics</h4>
          <dl class="peer-details-dl">
            <div><dt>Connections</dt><dd>${peer.metrics?.connections || 0}</dd></div>
            <div><dt>Total duration</dt><dd>${escapePeerHtml(totalDuration)}</dd></div>
            <div><dt>Average duration</dt><dd>${escapePeerHtml(avgDuration)}</dd></div>
            <div><dt>Last seen</dt><dd>${escapePeerHtml(lastSeen)}</dd></div>
          </dl>
        </section>

        <section class="peer-details-section">
          <h4 class="peer-details-section-title">Connection history</h4>
          <div class="peer-history-list">
            ${history.length === 0
              ? '<p class="theme-text-tertiary text-sm">No history available.</p>'
              : history.slice(-50).reverse().map((event) => `
                <article class="peer-history-item">
                  <div class="peer-history-head">
                    <span class="peer-history-type peer-history-type--${event.type === 'connect' ? 'connect' : 'disconnect'}">${event.type === 'connect' ? 'Connected' : 'Disconnected'}</span>
                    <time class="theme-text-tertiary">${escapePeerHtml(new Date(event.timestamp).toLocaleString())}</time>
                  </div>
                  ${event.duration ? `<div class="peer-history-meta">Duration: ${escapePeerHtml(window.formatDuration ? window.formatDuration(event.duration) : `${Math.floor(event.duration / 1000)}s`)}</div>` : ''}
                  ${event.error ? `<div class="peer-history-meta text-error">Error: ${escapePeerHtml(event.error)}</div>` : ''}
                </article>
              `).join('')
            }
          </div>
        </section>
      </div>
    `;

    modal.showModal();
  } catch (err) {
    console.error('Failed to fetch peer details:', err);
    if (window.showNotification) window.showNotification('Failed to load peer details: ' + err.message, 'error');
  }
}

async function blockPeer(peerId) {
  if (window.showConfirm) {
    window.showConfirm(`Block peer ${peerId.substring(0, 16)}...?`, async () => {
      try {
        const response = await fetch(`/api/peers/${encodeURIComponent(peerId)}/block`, {
          method: 'POST'
        });
        if (!response.ok) {
          throw new Error('Failed to block peer');
        }
        if (window.showNotification) window.showNotification('Peer blocked successfully');
        await renderPeers();
      } catch (err) {
        console.error('Failed to block peer:', err);
        if (window.showNotification) window.showNotification('Failed to block peer: ' + err.message, 'error');
      }
    });
  }
}

async function unblockPeer(peerId) {
  if (window.showConfirm) {
    window.showConfirm(`Unblock peer ${peerId.substring(0, 16)}...?`, async () => {
      try {
        const response = await fetch(`/api/peers/${encodeURIComponent(peerId)}/unblock`, {
          method: 'POST'
        });
        if (!response.ok) {
          throw new Error('Failed to unblock peer');
        }
        if (window.showNotification) window.showNotification('Peer unblocked successfully');
        await renderPeers();
      } catch (err) {
        console.error('Failed to unblock peer:', err);
        if (window.showNotification) window.showNotification('Failed to unblock peer: ' + err.message, 'error');
      }
    });
  }
}

function renderPeerGraph() {
  const canvas = document.getElementById('peer-graph-chart');
  if (!canvas) return;

  const ctx = canvas.getContext('2d');
  const peersData = window.peersData || [];
  const connected = peersData.filter((p) => p.connected).length;
  const disconnected = peersData.filter((p) => !p.connected).length;
  const blocked = peersData.filter((p) => p.isBlocked).length;
  const total = peersData.length;

  setPeerStat('peerStatConnected', connected);
  setPeerStat('peerStatDisconnected', disconnected);
  setPeerStat('peerStatBlocked', blocked);

  const overviewEl = document.getElementById('peersOverviewLine');
  if (overviewEl) {
    overviewEl.textContent = total === 0
      ? 'No peers on this node'
      : `${connected} active of ${total} total`;
  }

  if (peerChart) {
    peerChart.destroy();
    peerChart = null;
  }

  const colors = window.chartColors || {
    success: 'rgb(34, 197, 94)',
    gray: 'rgb(107, 114, 128)',
    danger: 'rgb(239, 68, 68)'
  };

  peerChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ['Connected', 'Disconnected', 'Blocked'],
      datasets: [{
        data: [connected, disconnected, blocked],
        backgroundColor: [colors.success, colors.gray, colors.danger],
        borderWidth: 0
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      cutout: '62%',
      plugins: {
        legend: {
          position: 'bottom',
          labels: {
            color: '#94a3b8',
            boxWidth: 10,
            boxHeight: 10,
            padding: 14,
            font: { size: 11 }
          }
        }
      }
    }
  });
}

window.renderPeers = renderPeers;
window.showPeerDetails = showPeerDetails;
window.blockPeer = blockPeer;
window.unblockPeer = unblockPeer;
window.filterPeers = filterPeers;