// Configuration constants
window.updateMap = {
  'update-database': ['domains', 'entries'],
  'update-peers': ['peers'],
  'update-certs': ['certs'],
  'update-interfaces': ['interfaces'],
  'update-local-dns': ['local-dns', 'dns-conflicts', 'p2p-domain-conflicts'],
  'update-holesail': [],
  'update-holesail-clients': [],
  'update-settings': ['settings'],
  'update-stats': [],
  'system-reset': () => location.reload()
};

window.paginationState = {
  domains: { current: 1, size: 8 },
  entries: { current: 1, size: 10 },
  peers: { current: 1, size: 4 },
  certs: { current: 1, size: 5 },
  interfaces: { current: 1, size: 10 },
  'local-dns': { current: 1, size: 10 },
  'dns-conflicts': { current: 1, size: 10 },
  'host-servers': { current: 1, size: 10 },
  'host-clients': { current: 1, size: 10 },
  settings: { current: 1, size: 20 },
  backups: { current: 1, size: 10 },
  plugins: { current: 1, size: 10 }
};

// Helper function to get consensus status badge
function getConsensusStatusBadge(status) {
  const badges = {
    'resolved': '<span class="px-2 py-1 bg-green-500 text-white rounded text-xs">Resolved</span>',
    'tie': '<span class="px-2 py-1 bg-yellow-500 text-white rounded text-xs">Tie</span>',
    'conflict': '<span class="px-2 py-1 bg-red-500 text-white rounded text-xs">Conflict</span>',
    'insufficient_quorum': '<span class="px-2 py-1 bg-orange-500 text-white rounded text-xs">No Quorum</span>',
    'no_claims': '<span class="px-2 py-1 bg-gray-500 text-white rounded text-xs">No Claims</span>',
    'error': '<span class="px-2 py-1 bg-red-500 text-white rounded text-xs">Error</span>',
    'internal': '<span class="px-2 py-1 bg-blue-500 text-white rounded text-xs">Internal</span>',
    'unknown': '<span class="px-2 py-1 bg-gray-400 text-white rounded text-xs">Unknown</span>'
  };
  return badges[status] || badges['unknown'];
}

// Make function globally available
window.getConsensusStatusBadge = getConsensusStatusBadge;

function updateCertsListChrome() {
  const totalCount = (window.certsData || []).length;
  const emptyEl = document.getElementById('certsEmpty');
  const endEl = document.getElementById('certsEnd');
  const listEl = document.getElementById('certsList');
  const trulyEmpty = totalCount === 0;

  if (emptyEl) {
    emptyEl.classList.toggle('cert-empty--visible', trulyEmpty);
  }
  if (listEl) {
    listEl.classList.toggle('cert-list--hidden', trulyEmpty);
  }
  if (endEl) {
    endEl.classList.remove('cert-list-end--visible');
  }
}

function showCertsListEnd() {
  const totalCount = (window.certsData || []).length;
  const visibleCount = (window.filteredCerts || window.certsData || []).length;
  const endEl = document.getElementById('certsEnd');
  if (endEl && totalCount > 0 && visibleCount > 0) {
    endEl.classList.add('cert-list-end--visible');
  }
}

function updatePeersListChrome() {
  const totalCount = (window.peersData || []).length;
  const filteredCount = (window.filteredPeers || window.peersData || []).length;
  const searchEl = document.getElementById('search-peers');
  const hasFilter = Boolean(searchEl?.value?.trim());

  const emptyEl = document.getElementById('peersEmpty');
  const filteredEmptyEl = document.getElementById('peersFilteredEmpty');
  const listEl = document.getElementById('peersList');
  const endEl = document.getElementById('peersEnd');

  const trulyEmpty = totalCount === 0;
  const filteredEmpty = !trulyEmpty && filteredCount === 0;

  if (emptyEl) emptyEl.classList.toggle('peer-empty--visible', trulyEmpty);
  if (filteredEmptyEl) filteredEmptyEl.classList.toggle('peer-empty--visible', filteredEmpty);
  if (listEl) listEl.classList.toggle('peer-list--hidden', trulyEmpty || filteredEmpty);
  if (endEl) endEl.classList.remove('peer-list-end--visible');

  const countEl = document.getElementById('peersCount');
  if (countEl) {
    if (trulyEmpty) countEl.textContent = 'No peers connected';
    else if (hasFilter) countEl.textContent = `${filteredCount} of ${totalCount} shown`;
    else countEl.textContent = `${totalCount} peer${totalCount === 1 ? '' : 's'}`;
  }
}

function showPeersListEnd() {
  const totalCount = (window.peersData || []).length;
  const visibleCount = (window.filteredPeers || window.peersData || []).length;
  const endEl = document.getElementById('peersEnd');
  if (endEl && totalCount > 0 && visibleCount > 0) {
    endEl.classList.add('peer-list-end--visible');
  }
}

window.updateCertsListChrome = updateCertsListChrome;
window.showCertsListEnd = showCertsListEnd;
window.updatePeersListChrome = updatePeersListChrome;
window.showPeersListEnd = showPeersListEnd;

window.chartColors = {
  primary: 'rgb(59, 130, 246)',
  success: 'rgb(34, 197, 94)',
  warning: 'rgb(234, 179, 8)',
  danger: 'rgb(239, 68, 68)',
  info: 'rgb(59, 130, 246)',
  gray: 'rgb(107, 114, 128)',
  dark: 'rgb(17, 24, 39)'
};

window.darkModeColors = {
  primary: 'rgb(96, 165, 250)',
  success: 'rgb(74, 222, 128)',
  warning: 'rgb(250, 204, 21)',
  danger: 'rgb(248, 113, 113)',
  info: 'rgb(96, 165, 250)',
  gray: 'rgb(156, 163, 175)',
  dark: 'rgb(243, 244, 246)'
};

// Tabs configuration - uses functions from utils.js and other modules
window.tabs = {
  domains: {
    api: '/api/resolved-domains',
    searchId: 'search-domains',
    dataKey: 'domainsData',
    filteredKey: 'filteredDomains',
    containerId: 'domainsTable',
    paginationId: 'domainsPagination',
    sort: (a, b) => a.domain.localeCompare(b.domain, undefined, { sensitivity: 'base' }),
    filter: (item, query) => item.domain.toLowerCase().includes(query) || item.hash.toLowerCase().includes(query) || (item.consensusStatus || '').toLowerCase().includes(query),
    renderItem: (item) => {
      const tr = document.createElement('tr');
      tr.className = 'border-b hover:bg-gray-50 dark:hover:bg-gray-700';
      
      // Use consensus status from postFetch (which may include 'conflict')
      let consensusInfo = '';
      if (item.consensusState) {
        const consensusState = item.consensusState;
        const statusBadge = getConsensusStatusBadge(item.consensusStatus);
        const voteInfo = Object.keys(consensusState.voteCounts || {}).length > 0
          ? ` (${Object.values(consensusState.voteCounts).reduce((a, b) => a + b, 0)} votes)`
          : '';
        const quorumInfo = consensusState.quorumMet ? '✓' : '✗';
        consensusInfo = `<td class="p-3">
          <div class="flex items-center gap-2">
            <span>${statusBadge}</span>
            <span class="text-xs" style="color: var(--text-primary);">${voteInfo}</span>
            <span class="text-xs" style="color: var(--text-primary);" title="Quorum: ${consensusState.quorumMet ? 'Met' : 'Not Met'}">${quorumInfo}</span>
          </div>
        </td>`;
      } else if (item.consensusStatus === 'internal') {
        consensusInfo = `<td class="p-3">${getConsensusStatusBadge('internal')}</td>`;
      } else {
        consensusInfo = `<td class="p-3">${getConsensusStatusBadge('unknown')}</td>`;
      }
      
      tr.innerHTML = `<td class="p-3">${item.domain}${item.isLocal ? ' <span class="domain-local-badge" title="Local claim"><i class="fas fa-house-user" aria-hidden="true"></i></span>' : ''}</td>
        <td class="p-3 break-all">${item.hash}</td>
        ${consensusInfo}
        <td class="p-3">${item.isLocal && item.hash !== 'internal' ? `<button onclick="removeDomain('${item.domain}')" class="px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600">Remove</button>` : ''}</td>`;
      return tr;
    },
    postFetch: (data) => {
      // Data already contains consensusState from backend
      return data.map(item => {
        if (item.consensusStatus === 'internal' || item.hash === 'internal' || item.hash === 'none') {
          return { ...item, consensusStatus: 'internal' };
        }
        // Use consensusStatus set by backend (including 'conflict'), fallback to consensusState status
        return {
          ...item,
          consensusStatus: item.consensusStatus || item.consensusState?.status || 'unknown'
        };
      });
    }
  },
  entries: {
    api: '/api/entries',
    searchId: 'search-entries',
    dataKey: 'entriesData',
    filteredKey: 'filteredEntries',
    containerId: 'entriesTable',
    paginationId: 'entriesPagination',
    sentinelId: 'entriesScrollSentinel',
    sort: (a, b) => a.key.localeCompare(b.key, undefined, { sensitivity: 'base' }),
    filter: (item, query) => {
      const q = query.toLowerCase();
      const key = (item.key || '').toLowerCase();
      const value = (item.value || '').toLowerCase();
      const type = key.startsWith('claim:') ? 'claim' : key.startsWith('vote:') ? 'vote' : 'other';
      return key.includes(q) || value.includes(q) || type.includes(q);
    },
    renderItem: (item) => {
      const esc = window.escapeHtml || ((value) => String(value));
      const classify = window.classifyEntryKey || ((key) => ({ label: 'Other', className: 'entry-badge--muted' }));
      const type = classify(item.key);
      const tr = document.createElement('tr');
      tr.className = 'entry-row';
      tr.innerHTML = `
        <td class="p-3">
          <span class="entry-badge ${type.className}">${esc(type.label)}</span>
        </td>
        <td class="p-3"><code class="entry-key">${esc(item.key)}</code></td>
        <td class="p-3"><span class="entry-value">${esc(item.value)}</span></td>
        <td class="p-3 text-right">
          <button type="button" class="admin-btn admin-btn--secondary admin-btn--sm" data-entry-value="${esc(item.value)}" onclick="copyEntryValue(this.getAttribute('data-entry-value'))" title="Copy value">
            <i class="fas fa-copy" aria-hidden="true"></i>
          </button>
        </td>
      `;
      return tr;
    },
    preRender: (visibleCount) => {
      if (window.updateEntriesChrome) window.updateEntriesChrome(visibleCount);
    },
    onAllItemsLoaded: () => {
      if (window.showEntriesListEnd) window.showEntriesListEnd();
    }
  },
  peers: {
    api: '/api/peers',
    searchId: 'search-peers',
    dataKey: 'peersData',
    filteredKey: 'filteredPeers',
    containerId: 'peersList',
    paginationId: 'peersPagination',
    sentinelId: 'peersScrollSentinel',
    sort: (a, b) => (a.id || '').localeCompare(b.id || '', undefined, { sensitivity: 'base' }),
    filter: (item, query) => {
      const queryLower = query.toLowerCase();
      return (item.id || '').toLowerCase().includes(queryLower) ||
             (item.connected ? 'connected' : 'disconnected').includes(queryLower) ||
             (item.isBlocked ? 'blocked' : '').includes(queryLower);
    },
    renderItem: (peer) => {
      const li = document.createElement('li');
      li.className = 'peer-row';
      const esc = window.escapeHtml || ((value) => String(value));
      const peerIdAttr = String(peer.id || '').replace(/\\/g, '\\\\').replace(/'/g, "\\'");
      const peerId = esc(peer.id || '');

      const uptime = peer.uptime
        ? (window.sdk?.utils?.format?.formatUptime
          ? window.sdk.utils.format.formatUptime(peer.uptime)
          : `${Math.floor(peer.uptime / 1000)}s`)
        : 'N/A';
      const avgDuration = peer.metrics?.avgDuration
        ? (window.sdk?.utils?.format?.formatDuration
          ? window.sdk.utils.format.formatDuration(peer.metrics.avgDuration)
          : `${Math.floor(peer.metrics.avgDuration / 1000)}s`)
        : 'N/A';
      const statusClass = peer.connected ? 'peer-badge--ok' : 'peer-badge--muted';
      const statusLabel = peer.connected ? 'Connected' : 'Disconnected';
      const blockedBadge = peer.isBlocked
        ? '<span class="peer-badge peer-badge--danger">Blocked</span>'
        : '';

      li.innerHTML = `
        <div class="peer-row-main">
          <span class="peer-row-icon" aria-hidden="true"><i class="fas fa-server"></i></span>
          <div class="peer-row-body">
            <div class="peer-row-head">
              <button type="button" class="peer-row-id" onclick="showPeerDetails('${peerIdAttr}')">${peerId}</button>
              <div class="peer-row-badges">
                <span class="peer-badge ${statusClass}">${statusLabel}</span>
                ${blockedBadge}
              </div>
            </div>
            <dl class="peer-row-meta">
              <div><dt>Uptime</dt><dd>${esc(uptime)}</dd></div>
              <div><dt>Connections</dt><dd>${peer.metrics?.connections || 0}</dd></div>
              <div><dt>Avg duration</dt><dd>${esc(avgDuration)}</dd></div>
            </dl>
          </div>
        </div>
        <div class="peer-row-actions">
          <button type="button" class="admin-btn admin-btn--secondary admin-btn--sm" onclick="showPeerDetails('${peerIdAttr}')" title="View peer details">
            <i class="fas fa-circle-info" aria-hidden="true"></i><span class="peer-row-action-label">Details</span>
          </button>
          ${peer.isBlocked
            ? `<button type="button" class="admin-btn admin-btn--success admin-btn--sm" onclick="unblockPeer('${peerIdAttr}')" title="Unblock peer">
                <i class="fas fa-unlock" aria-hidden="true"></i><span class="peer-row-action-label">Unblock</span>
              </button>`
            : `<button type="button" class="admin-btn admin-btn--danger admin-btn--sm" onclick="blockPeer('${peerIdAttr}')" title="Block peer">
                <i class="fas fa-ban" aria-hidden="true"></i><span class="peer-row-action-label">Block</span>
              </button>`
          }
        </div>
      `;
      return li;
    },
    preRender: () => {
      updatePeersListChrome();
    },
    onAllItemsLoaded: () => {
      showPeersListEnd();
    }
  },
  certs: {
    api: '/api/certs',
    searchId: 'search-certs',
    dataKey: 'certsData',
    filteredKey: 'filteredCerts',
    containerId: 'certsList',
    paginationId: 'certsPagination',
    sentinelId: 'certsScrollSentinel',
    sort: (a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }),
    filter: (item, query) => item.toLowerCase().includes(query),
    renderItem: (cert) => {
      const li = document.createElement('li');
      li.className = 'cert-row';
      const esc = window.escapeHtml || ((value) => String(value));
      const domainAttr = String(cert).replace(/\\/g, '\\\\').replace(/'/g, "\\'");
      li.innerHTML = `
        <div class="cert-row-main">
          <span class="cert-row-icon" aria-hidden="true"><i class="fas fa-shield-halved"></i></span>
          <button type="button" class="cert-row-domain" onclick="showCertDetails('${domainAttr}')">${esc(cert)}</button>
        </div>
        <div class="cert-row-actions">
          <button type="button" class="admin-btn admin-btn--secondary admin-btn--sm" onclick="regenerateCert('${domainAttr}')" title="Regenerate certificate">
            <i class="fas fa-rotate-right" aria-hidden="true"></i><span class="cert-row-action-label">Regenerate</span>
          </button>
          <button type="button" class="admin-btn admin-btn--danger admin-btn--sm" onclick="deleteCert('${domainAttr}')" title="Delete certificate">
            <i class="fas fa-trash-can" aria-hidden="true"></i><span class="cert-row-action-label">Delete</span>
          </button>
        </div>
      `;
      return li;
    },
    preRender: () => {
      updateCertsListChrome();
    },
    onAllItemsLoaded: () => {
      showCertsListEnd();
    }
  },
  interfaces: {
    api: '/api/interfaces',
    searchId: 'search-interfaces',
    dataKey: 'interfacesData',
    filteredKey: 'filteredInterfaces',
    containerId: 'interfacesTable',
    paginationId: 'interfacesPagination',
    postFetch: (data) => {
      if (data && Array.isArray(data.interfaces)) {
        if (window.renderInterfacesSummary) {
          window.renderInterfacesSummary(data.summary, data.subnets, data.orphanedIps);
        }
        return data.interfaces;
      }
      return Array.isArray(data) ? data : [];
    },
    sort: (a, b) => a.domain.localeCompare(b.domain, undefined, { sensitivity: 'base' }),
    filter: (item, query) => {
      const q = query.toLowerCase();
      return (
        item.domain.toLowerCase().includes(q) ||
        item.ip.toLowerCase().includes(q) ||
        (item.subnetName || '').toLowerCase().includes(q) ||
        (item.type || '').toLowerCase().includes(q) ||
        (item.configuredOnSystem ? 'configured' : 'missing').includes(q)
      );
    },
    renderItem: (item) => {
      const esc = window.escapeHtml || ((value) => String(value));
      const domainAttr = esc(item.domain).replace(/'/g, "\\'");
      const ipAttr = esc(item.ip).replace(/'/g, "\\'");
      const typeBadge = item.type === 'internal'
        ? '<span class="iface-badge iface-badge--internal">Internal</span>'
        : '<span class="iface-badge iface-badge--virtual">Virtual</span>';
      const subnetLabel = item.subnetName
        ? esc(item.subnetName)
        : (item.type === 'internal' ? '—' : '<span class="theme-text-tertiary">Unassigned</span>');
      let statusBadge;
      if (item.type === 'internal') {
        statusBadge = '<span class="iface-badge iface-badge--ok">Loopback</span>';
      } else if (item.configuredOnSystem) {
        statusBadge = '<span class="iface-badge iface-badge--ok">On system</span>';
      } else {
        statusBadge = '<span class="iface-badge iface-badge--warn">Not on OS</span>';
      }
      const tunnels = item.activeConnections + item.activeClients;
      const tunnelLabel = tunnels === 0
        ? '<span class="theme-text-tertiary">—</span>'
        : `${item.activeConnections} conn${item.activeConnections === 1 ? '' : 's'}${item.activeClients > 0 ? ` · ${item.activeClients} client${item.activeClients === 1 ? '' : 's'}` : ''}`;
      const tr = document.createElement('tr');
      tr.className = 'iface-row';
      tr.innerHTML = `
        <td class="p-3">
          <a href="https://${domainAttr}" target="_blank" rel="noopener noreferrer" class="iface-domain-link">${esc(item.domain)}</a>
        </td>
        <td class="p-3"><code class="iface-ip">${esc(item.ip)}</code></td>
        <td class="p-3">${typeBadge}</td>
        <td class="p-3">${subnetLabel}</td>
        <td class="p-3">${statusBadge}</td>
        <td class="p-3">${tunnelLabel}</td>
        <td class="p-3 text-right">
          <button type="button" class="admin-btn admin-btn--secondary admin-btn--sm" onclick="copyInterfaceIp('${ipAttr}')" title="Copy IP">
            <i class="fas fa-copy" aria-hidden="true"></i>
          </button>
        </td>
      `;
      return tr;
    },
    preRender: (visibleCount) => {
      if (window.updateInterfacesChrome) window.updateInterfacesChrome(visibleCount);
    },
    onAllItemsLoaded: () => {
      if (window.showInterfacesListEnd) window.showInterfacesListEnd();
    }
  },
  'local-dns': {
    api: '/api/local-dns',
    searchId: 'search-local-dns',
    dataKey: 'localDnsData',
    filteredKey: 'filteredLocalDns',
    containerId: 'localDnsTable',
    paginationId: 'localDnsPagination',
    sentinelId: 'localDnsScrollSentinel',
    sort: (a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }),
    filter: (item, query) => {
      const queryLower = query.toLowerCase();
      return (
        item.name.toLowerCase().includes(queryLower) ||
        item.type.toLowerCase().includes(queryLower) ||
        Object.values(item).some(val => typeof val === 'string' && val.toLowerCase().includes(queryLower))
      );
    },
    renderItem: (item) => {
      const esc = window.escapeHtml || ((value) => String(value));
      const typeInfo = window.classifyDnsRecordType ? window.classifyDnsRecordType(item.type) : { label: item.type, className: 'dns-type-badge--muted' };
      const valueStr = window.formatLocalDnsValue ? window.formatLocalDnsValue(item) : (item.data || item.value || '');
      const tr = document.createElement('tr');
      tr.className = 'local-dns-row';
      tr.innerHTML = `
        <td class="p-3"><code class="local-dns-name">${esc(item.name)}</code></td>
        <td class="p-3"><span class="dns-type-badge ${typeInfo.className}">${esc(typeInfo.label)}</span></td>
        <td class="p-3"><span class="local-dns-value">${esc(valueStr)}</span></td>
        <td class="p-3 tabular-nums">${esc(String(item.ttl ?? ''))}</td>
        <td class="p-3 text-right">
          <div class="local-dns-row-actions">
            <button type="button" class="admin-btn admin-btn--secondary admin-btn--sm" onclick="editLocalDns(${item.index})" title="Edit record">
              <i class="fas fa-pen" aria-hidden="true"></i>
            </button>
            <button type="button" class="admin-btn admin-btn--danger admin-btn--sm" onclick="deleteLocalDns(${item.index})" title="Delete record">
              <i class="fas fa-trash" aria-hidden="true"></i>
            </button>
          </div>
        </td>`;
      return tr;
    },
    preRender: (visibleCount) => {
      if (window.updateLocalDnsChrome) window.updateLocalDnsChrome(visibleCount);
    },
    onAllItemsLoaded: () => {
      if (window.showLocalDnsListEnd) window.showLocalDnsListEnd();
    },
    postFetch: (data) => {
      window.dnsConflictsData = data.conflicts || [];
      window.filteredDnsConflicts = window.dnsConflictsData;
      data.records = data.records.map((rec, index) => ({ ...rec, index }));
      if (window.renderDnsConflicts) window.renderDnsConflicts();
      if (window.updateLocalDnsSubtabBadges) window.updateLocalDnsSubtabBadges();
      return data.records;
    }
  },
  'dns-conflicts': {
    api: '/api/local-dns',
    searchId: 'search-dns-conflicts',
    dataKey: 'dnsConflictsData',
    filteredKey: 'filteredDnsConflicts',
    containerId: 'dnsConflictsTable',
    paginationId: 'dnsConflictsPagination',
    sentinelId: 'dnsConflictsScrollSentinel',
    sort: (a, b) => a.domain.localeCompare(b.domain, undefined, { sensitivity: 'base' }),
    filter: (item, query) => item.domain.toLowerCase().includes(query) || item.version.toLowerCase().includes(query) || item.publicIP.toLowerCase().includes(query),
    renderItem: (item) => {
      const esc = window.escapeHtml || ((value) => String(value));
      const domainAttr = esc(item.domain).replace(/"/g, '&quot;');
      const isPublic = item.version === 'public';
      const tr = document.createElement('tr');
      tr.className = 'local-dns-row';
      tr.innerHTML = `
        <td class="p-3"><code class="local-dns-name">${esc(item.domain)}</code></td>
        <td class="p-3"><span class="local-dns-value">${esc(item.publicIP || '—')}</span></td>
        <td class="p-3">
          <label class="local-dns-toggle">
            <span class="local-dns-toggle-label">${isPublic ? 'Public' : 'P2P'}</span>
            <input type="checkbox" class="sr-only" ${isPublic ? 'checked' : ''} data-domain="${domainAttr}" onchange="toggleVersionPreference(this.dataset.domain, this.checked)">
            <span class="plugin-toggle-switch" aria-hidden="true"></span>
          </label>
        </td>`;
      return tr;
    },
    preRender: (visibleCount) => {
      if (window.updateDnsConflictsChrome) window.updateDnsConflictsChrome(visibleCount);
    },
    onAllItemsLoaded: () => {
      if (window.showDnsConflictsListEnd) window.showDnsConflictsListEnd();
    },
    postFetch: (data) => {
      window.localDnsData = data.records.map((rec, index) => ({ ...rec, index }));
      window.filteredLocalDns = window.localDnsData;
      if (window.updateLocalDnsSubtabBadges) window.updateLocalDnsSubtabBadges();
      return data.conflicts || [];
    }
  },
  'p2p-domain-conflicts': {
    api: '/api/p2p-domain-conflicts',
    searchId: 'search-p2p-domain-conflicts',
    dataKey: 'p2pDomainConflictsData',
    filteredKey: 'filteredP2pDomainConflicts',
    containerId: 'p2pDomainConflictsTable',
    paginationId: 'p2pDomainConflictsPagination',
    sentinelId: 'p2pDomainConflictsScrollSentinel',
    sort: (a, b) => a.domain.localeCompare(b.domain, undefined, { sensitivity: 'base' }),
    filter: (item, query) => item.domain.toLowerCase().includes(query) || item.localHash.toLowerCase().includes(query) || item.resolvedHash.toLowerCase().includes(query),
    renderItem: (item) => {
      const esc = window.escapeHtml || ((value) => String(value));
      const domainAttr = esc(item.domain).replace(/"/g, '&quot;');
      const useLocal = item.hashPreference === 'local';
      const tr = document.createElement('tr');
      tr.className = 'local-dns-row';
      tr.innerHTML = `
        <td class="p-3"><code class="local-dns-name">${esc(item.domain)}</code></td>
        <td class="p-3"><code class="local-dns-hash">${esc(item.localHash || 'N/A')}</code></td>
        <td class="p-3"><code class="local-dns-hash">${esc(item.resolvedHash || 'N/A')}</code></td>
        <td class="p-3">
          <label class="local-dns-toggle">
            <span class="local-dns-toggle-label">${useLocal ? 'Local' : 'Resolved'}</span>
            <input type="checkbox" class="sr-only" ${useLocal ? 'checked' : ''} data-domain="${domainAttr}" onchange="toggleHashPreference(this.dataset.domain, this.checked)">
            <span class="plugin-toggle-switch" aria-hidden="true"></span>
          </label>
        </td>`;
      return tr;
    },
    preRender: (visibleCount) => {
      if (window.updateP2pConflictsChrome) window.updateP2pConflictsChrome(visibleCount);
    },
    onAllItemsLoaded: () => {
      if (window.showP2pConflictsListEnd) window.showP2pConflictsListEnd();
    },
    postFetch: (data) => {
      if (window.updateLocalDnsSubtabBadges) window.updateLocalDnsSubtabBadges();
      return data.conflicts || [];
    }
  },
  'host-servers': {
    api: '/api/holesail-servers',
    searchId: 'search-holesail',
    dataKey: 'holesailServersData',
    filteredKey: 'filteredHolesailServers',
    containerId: 'holesailTable',
    paginationId: 'holesailPagination',
    sort: (a, b) => (a.opts.name || a.id).localeCompare(b.opts.name || b.id, undefined, { sensitivity: 'base' }),
    filter: (item, query) => (item.opts.name || '').toLowerCase().includes(query) || item.id.toLowerCase().includes(query) || item.opts.port.toString().includes(query) || (item.info.url || '').toLowerCase().includes(query),
    renderItem: (item) => {
      const isPendingRestart = window.pendingServerRestarts && window.pendingServerRestarts.has(item.id);
      const isPendingDelete = window.pendingServerDeletions && window.pendingServerDeletions.has(item.id);
      const restartBtn = isPendingRestart
        ? `<button disabled class="px-2 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600 mr-2">Restarting... <span class="inline-block animate-spin rounded-full h-4 w-4 border-t-2 border-white ml-2"></span></button>`
        : `<button onclick="restartHolesailServer('${item.id}')" class="px-2 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600 mr-2">Restart</button>`;
      const deleteBtn = isPendingDelete
        ? `<button disabled class="px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600">Deleting... <span class="inline-block animate-spin rounded-full h-4 w-4 border-t-2 border-white ml-2"></span></button>`
        : `<button onclick="deleteHolesailServer('${item.id}')" class="px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600">Delete</button>`;
      const protocol = item.opts.udp ? 'UDP' : 'TCP';
      const url = item.info.url || 'N/A';
      const truncatedUrl = window.sdk?.utils?.dom?.truncate ? window.sdk.utils.dom.truncate(url, 40) : (url.length > 40 ? url.substring(0, 37) + '...' : url);
      const tr = document.createElement('tr');
      tr.className = 'border-b hover:bg-gray-50 dark:hover:bg-gray-700';
      tr.innerHTML = `
        <td class="p-3 cursor-pointer text-blue-500 hover:underline" onclick="openHolesailLog('${item.id}', '${item.opts.name || item.id}')" title="${item.opts.name || item.id}">${item.opts.name || item.id}</td>
        <td class="p-3">${item.opts.port}</td>
        <td class="p-3">${item.opts.host || '0.0.0.0'}</td>
        <td class="p-3" title="${url}">${truncatedUrl}</td>
        <td class="p-3">${protocol}</td>
        <td class="p-3">${window.renderStatusBadge ? window.renderStatusBadge(item.info.state) : item.info.state}</td>
        <td class="p-3">
          ${restartBtn}
          ${deleteBtn}
        </td>`;
      return tr;
    }
  },
  'host-clients': {
    api: '/api/holesail-clients',
    searchId: 'search-holesail-clients',
    dataKey: 'holesailClientsData',
    filteredKey: 'filteredHolesailClients',
    containerId: 'holesailClientsTable',
    paginationId: 'holesailClientsPagination',
    sort: (a, b) => a.opts.domain.localeCompare(b.opts.domain, undefined, { sensitivity: 'base' }),
    filter: (item, query) => item.opts.domain.toLowerCase().includes(query) || item.opts.key.toLowerCase().includes(query) || item.opts.port.toString().includes(query),
    renderItem: (item) => {
      const isPendingRestart = window.pendingClientRestarts && window.pendingClientRestarts.has(item.id);
      const isPendingDelete = window.pendingClientDeletions && window.pendingClientDeletions.has(item.id);
      const restartBtn = isPendingRestart
        ? `<button disabled class="px-2 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600 mr-2">Restarting... <span class="inline-block animate-spin rounded-full h-4 w-4 border-t-2 border-white ml-2"></span></button>`
        : `<button onclick="restartHolesailClient('${item.id}')" class="px-2 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600 mr-2">Restart</button>`;
      const deleteBtn = isPendingDelete
        ? `<button disabled class="px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600">Deleting... <span class="inline-block animate-spin rounded-full h-4 w-4 border-t-2 border-white ml-2"></span></button>`
        : `<button onclick="deleteHolesailClient('${item.id}')" class="px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600">Delete</button>`;
      const protocol = (item.opts.protocol || 'tcp').toUpperCase();
      const key = item.opts.key || '';
      const truncatedKey = window.sdk?.utils?.dom?.truncate ? window.sdk.utils.dom.truncate(key, 30) : (key.length > 30 ? key.substring(0, 27) + '...' : key);
      const tr = document.createElement('tr');
      tr.className = 'border-b hover:bg-gray-50 dark:hover:bg-gray-700';
      tr.innerHTML = `
        <td class="p-3 cursor-pointer text-blue-500 hover:underline" onclick="openHolesailLog('${item.id}', '${item.opts.domain}:${item.opts.port}')" title="${item.opts.domain}">${item.opts.domain}</td>
        <td class="p-3" title="${key}">${truncatedKey}</td>
        <td class="p-3">${item.opts.port}</td>
        <td class="p-3">${protocol}</td>
        <td class="p-3">${window.renderStatusBadge ? window.renderStatusBadge(item.info.state) : item.info.state}</td>
        <td class="p-3">
          ${restartBtn}
          ${deleteBtn}
        </td>`;
      return tr;
    }
  },
  settings: {
    api: '/api/settings',
    searchId: 'search-settings',
    dataKey: 'settingsData',
    filteredKey: 'filteredSettings',
    containerId: 'settingsContainer',
    paginationId: 'settingsPagination',
    sort: null,
    filter: null,
    renderItem: null,
    postFetch: (data) => {
      // Store metadata globally for renderSettings to use
      window.settingsMetadata = data.metadata || {};
      // Return the full data object so metadata is preserved
      return data;
    }
  },
  backups: {
    api: '/api/backups',
    searchId: 'search-backups',
    dataKey: 'backupsData',
    filteredKey: 'filteredBackups',
    containerId: 'backupsTable',
    paginationId: 'backupsPagination',
    sentinelId: 'backupsScrollSentinel',
    sort: (a, b) => new Date(b.timestamp) - new Date(a.timestamp),
    filter: (item, query) => {
      const queryLower = query.toLowerCase();
      return (
        item.name.toLowerCase().includes(queryLower) ||
        item.timestamp.toLowerCase().includes(queryLower) ||
        (item.version && item.version.toLowerCase().includes(queryLower))
      );
    },
    renderItem: (backup) => {
      const esc = window.escapeHtml || ((value) => String(value));
      const name = backup.name || '';
      const nameAttr = esc(name).replace(/"/g, '&quot;');
      const slug = name.replace(/[^a-zA-Z0-9]/g, '-') || 'backup';
      const dateStr = backup.timestamp ? new Date(backup.timestamp).toLocaleString() : '—';
      const fileCount = backup.files ? backup.files.length : 0;
      const tr = document.createElement('tr');
      tr.className = 'backups-row';
      tr.innerHTML = `
        <td class="p-3"><code class="backups-name">${esc(name)}</code></td>
        <td class="p-3 backups-timestamp tabular-nums">${esc(dateStr)}</td>
        <td class="p-3 tabular-nums">${esc(backup.sizeFormatted || '0 B')}</td>
        <td class="p-3 tabular-nums">${fileCount}</td>
        <td class="p-3"><span class="backups-version-badge">${esc(backup.version || 'unknown')}</span></td>
        <td class="p-3 text-right">
          <div class="backups-row-actions">
            <button type="button" class="admin-btn admin-btn--secondary admin-btn--sm" data-backup-name="${nameAttr}" onclick="viewBackupDetails(this.getAttribute('data-backup-name'))" title="View details">
              <i class="fas fa-circle-info" aria-hidden="true"></i>
            </button>
            <button type="button" id="restore-btn-${slug}" class="admin-btn admin-btn--success admin-btn--sm" data-backup-name="${nameAttr}" onclick="restoreBackup(this.getAttribute('data-backup-name'), this)" title="Restore backup">
              <i class="fas fa-rotate-left" aria-hidden="true"></i>
            </button>
            <button type="button" id="delete-btn-${slug}" class="admin-btn admin-btn--danger admin-btn--sm" data-backup-name="${nameAttr}" onclick="deleteBackup(this.getAttribute('data-backup-name'), this)" title="Delete backup">
              <i class="fas fa-trash" aria-hidden="true"></i>
            </button>
          </div>
        </td>`;
      return tr;
    },
    preRender: (visibleCount) => {
      if (window.updateBackupsChrome) window.updateBackupsChrome(visibleCount);
    },
    onAllItemsLoaded: () => {
      if (window.showBackupsListEnd) window.showBackupsListEnd();
    },
    postFetch: (data) => {
      if (window.updateBackupsStats) window.updateBackupsStats(data);
      return data;
    }
  }
};