/* global marked */
import { KIND_APP_DATA } from '../src/constants.mjs';
import { createElement } from './domUtils.js';

// -----------------------------------------------------------------------
// Modal Logic
// -----------------------------------------------------------------------
const docsModal = document.getElementById("docsModal");
const settingsModal = document.getElementById("settingsModal");
const openDocsBtn = document.getElementById("openDocs");
const openSettingsBtn = document.getElementById("settingsBtn");
const closeDocsBtn = document.getElementsByClassName("close-modal")[0];
const closeSettingsBtn = document.getElementById("closeSettings");
const contentDiv = document.getElementById("markdown-content");
let docsLoaded = false;

// Docs Modal
if (openDocsBtn) {
  openDocsBtn.onclick = function(e) {
      e.preventDefault();
      docsModal.classList.add("show");
      if (!docsLoaded) {
          fetchDocs();
      }
  }
}

if (closeDocsBtn) {
  closeDocsBtn.onclick = function() {
      docsModal.classList.remove("show");
  }
}

// Settings Modal
if (openSettingsBtn) {
  openSettingsBtn.onclick = function(e) {
      e.preventDefault();

      // Pre-fill values
      document.getElementById('settingHashtag').value = HASHTAG;
      document.getElementById('settingNamespace').value = DASHBOARD_CONFIG.namespace;
      document.getElementById('settingRelays').value = RELAYS.join(', ');

      settingsModal.classList.add("show");
  }
}

if (closeSettingsBtn) {
  closeSettingsBtn.onclick = function() {
      settingsModal.classList.remove("show");
  }
}

document.getElementById('cancelSettings').onclick = function() {
  settingsModal.classList.remove("show");
}

// Handle Settings Save
document.getElementById('settingsForm').onsubmit = function(e) {
  e.preventDefault();

  const newHashtag = document.getElementById('settingHashtag').value.trim();
  const newNamespace = document.getElementById('settingNamespace').value.trim();
  const newRelays = document.getElementById('settingRelays').value.split(',').map(r => r.trim()).filter(Boolean);

  if (!newHashtag) {
    alert('Hashtag is required.');
    return;
  }

  const prefs = {
    hashtag: newHashtag,
    namespace: newNamespace,
    relays: newRelays
  };

  // Save to LocalStorage
  localStorage.setItem('torch_dashboard_prefs', JSON.stringify(prefs));

  // Update URL to reflect new settings (so link is shareable)
  const url = new URL(window.location);
  url.searchParams.set('hashtag', newHashtag);
  url.searchParams.set('namespace', newNamespace);
  url.searchParams.set('relays', newRelays.join(','));
  window.history.pushState({}, '', url);

  // Reload to apply
  window.location.reload();
}

window.onclick = function(event) {
    if (event.target == docsModal) {
        docsModal.classList.remove("show");
    }
    if (event.target == settingsModal) {
        settingsModal.classList.remove("show");
    }
}

async function fetchDocs() {
    try {
        const response = await fetch('../src/docs/TORCH.md');
        if (!response.ok) {
            throw new Error('Failed to load documentation');
        }
        const text = await response.text();
        contentDiv.innerHTML = marked.parse(text);
        docsLoaded = true;
    } catch (error) {
        console.error(error);
        const p = document.createElement('p');
        p.className = 'text-danger';
        p.textContent = `Error loading documentation: ${error.message}`;
        contentDiv.replaceChildren(p);
    }
}

// -----------------------------------------------------------------------
// Configuration — matches bin/torch-lock.mjs defaults
// Optional URL params:
//   ?namespace=torch&hashtag=torch-agent-lock&relays=wss://relay.damus.io,wss://nos.lol
// -----------------------------------------------------------------------
const DASHBOARD_DEFAULTS = {
  namespace: 'torch',
  hashtag: '',
  defaultCadenceView: 'daily',
  defaultStatusView: 'active',
  relays: [
    'wss://relay.damus.io',
    'wss://nos.lol',
    'wss://relay.primal.net',
  ],
};

function normalizeCadence(value) {
  const normalized = String(value || '').trim().toLowerCase();
  return normalized === 'daily' || normalized === 'weekly' || normalized === 'all'
    ? normalized
    : DASHBOARD_DEFAULTS.defaultCadenceView;
}

function normalizeStatus(value) {
  const normalized = String(value || '').trim().toLowerCase();
  return ['active', 'completed', 'all'].includes(normalized)
    ? normalized
    : DASHBOARD_DEFAULTS.defaultStatusView;
}

async function loadTorchConfigFile() {
  const configCandidates = ['../torch-config.json', './torch-config.json'];

  for (const path of configCandidates) {
    try {
      const response = await fetch(path, { cache: 'no-store' });
      if (!response.ok) continue;
      return await response.json();
    } catch {
      // optional config, ignore
    }
  }

  return {};
}

function parseDashboardConfig(torchConfig = {}) {
  const params = new URLSearchParams(window.location.search);

  // 1. LocalStorage Preferences
  let localPrefs = {};
  try {
    localPrefs = JSON.parse(localStorage.getItem('torch_dashboard_prefs')) || {};
  } catch { /* ignore malformed localStorage */ }

  const dashboardConfig = torchConfig.dashboard || {};
  const lockConfig = torchConfig.nostrLock || {};

  // Hierarchy: URL Param > LocalStorage > Config File > Default

  // Namespace
  const configNamespace = dashboardConfig.namespace || lockConfig.namespace || DASHBOARD_DEFAULTS.namespace;
  const namespace = (
    params.get('namespace') ||
    localPrefs.namespace ||
    configNamespace
  ).trim() || DASHBOARD_DEFAULTS.namespace;

  // Hashtag
  const configHashtag = dashboardConfig.hashtag || DASHBOARD_DEFAULTS.hashtag;
  const hashtag = (
    params.get('hashtag') ||
    localPrefs.hashtag ||
    configHashtag ||
    `${namespace}-agent-lock`
  ).trim();

  // Relays
  const paramsRelays = params.get('relays') ? params.get('relays').split(',') : null;
  const localRelays = localPrefs.relays;
  const configRelays = dashboardConfig.relays || lockConfig.relays || DASHBOARD_DEFAULTS.relays;

  let relays = (paramsRelays || localRelays || configRelays)
    .map(r => r.trim())
    .filter(Boolean);

  if (relays.length === 0) relays = DASHBOARD_DEFAULTS.relays;

  const defaultCadenceView = normalizeCadence(dashboardConfig.defaultCadenceView);
  const defaultStatusView = normalizeStatus(dashboardConfig.defaultStatusView);

  return {
    namespace,
    hashtag,
    relays,
    defaultCadenceView,
    defaultStatusView,
  };
}

let DASHBOARD_CONFIG = parseDashboardConfig({});

let RELAYS = DASHBOARD_CONFIG.relays;
const LOCK_EVENT_KIND = KIND_APP_DATA;
let HASHTAG = DASHBOARD_CONFIG.hashtag;

function applyConfigToHelpText() {
  const byId = (id) => document.getElementById(id);
  const hashtagDisplay = `#${HASHTAG}`;

  const introHashtag = byId('introHashtag');
  if (introHashtag) introHashtag.textContent = hashtagDisplay;
}

// -----------------------------------------------------------------------
// State
// -----------------------------------------------------------------------
/** @type {Map<string, object>} dTag -> latest parsed lock */
const lockStore = new Map();
/** @type {WebSocket[]} */
const sockets = [];
let connectedCount = 0;
let refreshIntervalId = null;
let isTeardown = false;

// DOM refs
const connectionStatus = document.getElementById('connectionStatus');
const lockGrid = document.getElementById('lockGrid');
const emptyState = document.getElementById('emptyState');
const rawLog = document.getElementById('rawLog');
const eventCount = document.getElementById('eventCount');
const summaryBar = document.getElementById('summaryBar');
const cadenceFilter = document.getElementById('cadenceFilter');
const statusFilter = document.getElementById('statusFilter');
const refreshBtn = document.getElementById('refreshBtn');

// Pagination DOM refs
const paginationControls = document.getElementById('paginationControls');
const mobilePrevBtn = document.getElementById('mobilePrevBtn');
const mobileNextBtn = document.getElementById('mobileNextBtn');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const pageStartEl = document.getElementById('pageStart');
const pageEndEl = document.getElementById('pageEnd');
const totalItemsEl = document.getElementById('totalItems');

// Pagination State
let currentPage = 1;
const itemsPerPage = 20;

// -----------------------------------------------------------------------
// Cleanup check
// -----------------------------------------------------------------------
function isAlive() {
  if (isTeardown) return false;
  // Check if our root element is still in the DOM
  const stillInDom = document.body.contains(lockGrid);
  if (!stillInDom) {
    teardown();
    return false;
  }
  return true;
}

function teardown() {
  if (isTeardown) return;
  isTeardown = true;

  if (refreshIntervalId) {
    clearInterval(refreshIntervalId);
    refreshIntervalId = null;
  }

  for (const ws of sockets) {
    try {
      ws.close();
    } catch {
      // ignore
    }
  }
  sockets.length = 0;
}

// -----------------------------------------------------------------------
// Helpers
// -----------------------------------------------------------------------
function nowUnix() {
  return Math.floor(Date.now() / 1000);
}

function todayStr() {
  return new Date().toISOString().slice(0, 10);
}

function fmtTime(unixSec) {
  return new Date(unixSec * 1000).toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit',
  });
}

function fmtDuration(seconds) {
  if (seconds < 0) return 'expired';
  const m = Math.floor(seconds / 60);
  if (m < 60) return `${m}m`;
  const h = Math.floor(m / 60);
  return `${h}h ${m % 60}m`;
}

function parseLockEvent(event) {
  const dTag = (event.tags || []).find((t) => t[0] === 'd')?.[1] ?? '';
  const expTag = (event.tags || []).find(
    (t) => t[0] === 'expiration',
  )?.[1];
  const expiresAt = expTag ? parseInt(expTag, 10) : null;

  let content = {};
  try {
    content = JSON.parse(event.content);
  } catch {
    // non-JSON content
  }

  return {
    eventId: event.id,
    pubkey: event.pubkey,
    createdAt: event.created_at,
    expiresAt,
    dTag,
    agent: content.agent ?? dTag.split('/')[2] ?? 'unknown',
    cadence: content.cadence ?? dTag.split('/')[1] ?? 'unknown',
    status: content.status ?? 'unknown',
    date: content.date ?? dTag.split('/')[3] ?? todayStr(),
    platform: content.platform ?? 'unknown',
    model: content.model ?? null,
  };
}

function isExpired(lock) {
  return lock.expiresAt != null && lock.expiresAt <= nowUnix();
}

function shouldReplaceLock(existingLock, incomingLock) {
  if (!existingLock) return true;
  if (incomingLock.createdAt !== existingLock.createdAt) {
    return incomingLock.createdAt > existingLock.createdAt;
  }

  // Deterministic tie-break: prefer lexicographically higher event id.
  return (incomingLock.eventId || '') > (existingLock.eventId || '');
}

// -----------------------------------------------------------------------
// Platform styling
// -----------------------------------------------------------------------
const PLATFORM_COLORS = {
  jules: { bg: 'bg-info/10', text: 'text-info', label: 'Jules' },
  'claude-code': {
    bg: 'bg-warning/10',
    text: 'text-warning',
    label: 'Claude Code',
  },
  codex: {
    bg: 'bg-success/10',
    text: 'text-success',
    label: 'Codex',
  },
  goose: {
    bg: 'bg-purple/10',
    text: 'text-purple',
    label: 'Goose',
  },
  gemini: {
    bg: 'bg-accent/10',
    text: 'text-accent',
    label: 'Gemini CLI',
  },
  antigravity: {
    bg: 'bg-pink/10',
    text: 'text-pink',
    label: 'Antigravity IDE',
  },
  qwen: {
    bg: 'bg-purple/10',
    text: 'text-purple',
    label: 'Qwen Coder',
  },
  opencode: {
    bg: 'bg-teal/10',
    text: 'text-teal',
    label: 'OpenCode',
  },
  unknown: { bg: 'bg-muted/10', text: 'text-muted', label: 'Unknown' },
};

function platformStyle(platform) {
  const raw = String(platform || '').toLowerCase().trim();
  if (raw === 'claude' || raw.includes('claude')) return PLATFORM_COLORS['claude-code'];
  return PLATFORM_COLORS[raw] || PLATFORM_COLORS.unknown;
}

// -----------------------------------------------------------------------
// Rendering
// -----------------------------------------------------------------------
function getFilteredLocks() {
  const cadence = cadenceFilter.value;
  const statusMode = statusFilter.value;

  return [...lockStore.values()]
    .filter((l) => {
      if (cadence !== 'all' && l.cadence !== cadence) return false;

      if (statusMode === 'completed') {
        return l.status === 'completed';
      }

      if (statusMode === 'active') {
        // Active means not expired AND not completed
        if (isExpired(l)) return false;
        if (l.status === 'completed') return false;
        return true;
      }

      // If 'all', show everything (expired, completed, started)
      return true;
    })
    .sort((a, b) => b.createdAt - a.createdAt);
}

function renderSummary(locks) {
  const active = locks.filter((l) => !isExpired(l));
  const platforms = {};
  for (const l of active) {
    const label = platformStyle(l.platform).label;
    platforms[label] = (platforms[label] || 0) + 1;
  }

  const cards = [
    {
      label: 'Active locks',
      value: active.length,
      color: 'text-accent-strong',
    },
    {
      label: 'Total events',
      value: locks.length,
      color: 'text-text',
    },
    {
      label: 'Platforms',
      value: Object.keys(platforms).join(', ') || 'none',
      color: 'text-info',
    },
    {
      label: 'Date',
      value: todayStr(),
      color: 'text-muted',
    },
  ];

  summaryBar.replaceChildren();
  for (const c of cards) {
    const card = createElement('div', 'rounded-lg bg-surface-alt p-4');
    const label = createElement('div', 'text-xs text-muted mb-1', c.label);
    const value = createElement('div', `text-lg font-semibold ${c.color} mono`, String(c.value));
    card.appendChild(label);
    card.appendChild(value);
    summaryBar.appendChild(card);
  }
}

function createLockCard(lock, now) {
  const expired = isExpired(lock);
  const isCompleted = lock.status === 'completed';
  const ps = platformStyle(lock.platform);
  const age = now - lock.createdAt;
  const remaining = lock.expiresAt ? lock.expiresAt - now : 0;
  const ttlTotal = lock.expiresAt
    ? lock.expiresAt - lock.createdAt
    : 7200;
  const ttlPct = expired
    ? 0
    : Math.max(0, Math.min(100, (remaining / ttlTotal) * 100));

  let cardBg = 'bg-surface-alt';
  let cardBorder = expired ? 'border-border/50 opacity-60' : 'border-border';

  if (isCompleted) {
    cardBg = 'bg-success/5';
    cardBorder = 'border-success/30';
  }

  const card = createElement('div', `rounded-lg border ${cardBorder} ${cardBg} p-4 flex flex-col gap-3`);

  // Header
  const header = createElement('div', 'flex items-start justify-between');
  const left = createElement('div', 'flex items-center gap-2');
  if (!expired && !isCompleted) {
    left.appendChild(createElement('span', 'pulse-dot bg-success mt-1 shrink-0'));
  }
  const meta = createElement('div');
  meta.appendChild(createElement('div', 'font-medium text-text-strong text-sm', lock.agent));
  meta.appendChild(createElement('div', 'text-xs text-muted', `${lock.cadence} \u00B7 ${lock.date}`));
  left.appendChild(meta);
  header.appendChild(left);

  const right = createElement('div', 'flex flex-col items-end gap-1');
  const badge = createElement('span', `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${ps.bg} ${ps.text}`, ps.label);
  right.appendChild(badge);

  if (lock.model && lock.model !== 'unknown') {
    right.appendChild(createElement('span', 'text-xs text-muted mono opacity-75', lock.model));
  }
  header.appendChild(right);
  card.appendChild(header);

  // Grid
  const grid = createElement('div', 'grid grid-cols-2 gap-x-4 gap-y-1 text-xs');
  grid.appendChild(createElement('div', 'text-muted', 'Started'));
  grid.appendChild(createElement('div', 'mono text-text', fmtTime(lock.createdAt)));
  grid.appendChild(createElement('div', 'text-muted', 'Age'));
  grid.appendChild(createElement('div', 'mono text-text', fmtDuration(age)));
  grid.appendChild(createElement('div', 'text-muted', 'TTL remaining'));
  grid.appendChild(createElement('div', `mono ${expired ? 'text-danger' : 'text-text'}`, fmtDuration(remaining)));
  grid.appendChild(createElement('div', 'text-muted', 'Status'));
  grid.appendChild(createElement('div', `mono ${expired ? 'text-danger' : 'text-success'}`, expired ? 'expired' : lock.status));
  card.appendChild(grid);

  // Progress Bar
  const barContainer = createElement('div', 'w-full bg-border/30 rounded-full overflow-hidden');
  const bar = createElement('div', `ttl-bar ${expired ? 'bg-danger' : 'bg-success'}`);
  bar.style.width = `${ttlPct}%`;
  barContainer.appendChild(bar);
  card.appendChild(barContainer);

  // Footer (Event ID)
  const footer = createElement('div', 'text-xs text-muted mono truncate', lock.eventId ? lock.eventId.slice(0, 16) + '\u2026' : 'no id');
  footer.title = lock.eventId || '';
  card.appendChild(footer);

  return card;
}

let renderPending = false;
function scheduleRender() {
  if (renderPending) return;
  renderPending = true;
  requestAnimationFrame(() => {
    renderPending = false;
    if (isAlive() && !document.hidden) {
      renderLocks();
    }
  });
}

function renderLocks() {
  if (!isAlive()) return;

  const allLocks = getFilteredLocks();
  const now = nowUnix();

  eventCount.textContent = `${lockStore.size} events`;
  renderSummary(allLocks);

  const totalItems = allLocks.length;
  const totalPages = Math.ceil(totalItems / itemsPerPage);

  // Adjust currentPage if out of bounds
  if (currentPage > totalPages && totalPages > 0) {
    currentPage = totalPages;
  }
  if (currentPage < 1) currentPage = 1;

  if (totalItems === 0) {
    lockGrid.replaceChildren(emptyState);
    emptyState.textContent =
      lockStore.size === 0
        ? 'Waiting for lock events from relays\u2026'
        : 'No locks match the current filters.';
    paginationControls.classList.add('hidden');
    return;
  }

  // Slice for pagination
  const startIdx = (currentPage - 1) * itemsPerPage;
  const endIdx = Math.min(startIdx + itemsPerPage, totalItems);
  const pageLocks = allLocks.slice(startIdx, endIdx);

  const cards = pageLocks.map((lock) => createLockCard(lock, now));
  lockGrid.replaceChildren(...cards);

  // Update Pagination Controls
  if (totalItems > itemsPerPage) {
    paginationControls.classList.remove('hidden');

    // Update text
    pageStartEl.textContent = startIdx + 1;
    pageEndEl.textContent = endIdx;
    totalItemsEl.textContent = totalItems;

    // Update buttons state
    const isFirst = currentPage === 1;
    const isLast = currentPage === totalPages;

    prevBtn.disabled = isFirst;
    nextBtn.disabled = isLast;
    mobilePrevBtn.disabled = isFirst;
    mobileNextBtn.disabled = isLast;
  } else {
    paginationControls.classList.add('hidden');
  }
}

// -----------------------------------------------------------------------
// Raw log
// -----------------------------------------------------------------------
let rawLogInitialized = false;
function appendRawLog(event) {
  if (!isAlive()) return;

  if (!rawLogInitialized) {
    rawLog.replaceChildren();
    rawLogInitialized = true;
  }
  const ts = new Date(event.created_at * 1000).toISOString();
  const text = `[${ts}] ${JSON.stringify(event).slice(0, 300)}`;
  const line = createElement('div', 'mb-2 pb-2 border-b border-border/30', text);
  rawLog.prepend(line);

  // Keep log bounded
  while (rawLog.children.length > 200) {
    rawLog.removeChild(rawLog.lastChild);
  }
}

// -----------------------------------------------------------------------
// WebSocket relay connections
// -----------------------------------------------------------------------
function updateConnectionBadge() {
  if (!connectionStatus) return;
  const dot = connectionStatus.querySelector('.pulse-dot');
  if (connectedCount === RELAYS.length) {
    connectionStatus.className =
      'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium bg-success/10 text-success';
    dot.className = 'pulse-dot bg-success';
    connectionStatus.lastChild.textContent = ` ${connectedCount}/${RELAYS.length} relays`;
  } else if (connectedCount > 0) {
    connectionStatus.className =
      'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium bg-warning/10 text-warning';
    dot.className = 'pulse-dot bg-warning';
    connectionStatus.lastChild.textContent = ` ${connectedCount}/${RELAYS.length} relays`;
  } else {
    connectionStatus.className =
      'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium bg-danger/10 text-danger';
    dot.className = 'pulse-dot bg-danger';
    connectionStatus.lastChild.textContent = ' Disconnected';
  }
}

function connectToRelay(url) {
  if (!isAlive()) return;

  const ws = new WebSocket(url);
  const subId = 'torch-dash-' + Math.random().toString(36).slice(2, 8);

  ws.addEventListener('open', () => {
    if (!isAlive()) return;
    connectedCount++;
    updateConnectionBadge();

    // NIP-01 REQ: subscribe to TORCH lock events
    // Request from 7 days ago to cover active locks created before midnight
    // and recent history for weekly cadence
    const since = Math.floor(Date.now() / 1000) - 7 * 24 * 60 * 60;
    const filter = {
      kinds: [LOCK_EVENT_KIND],
      '#t': [HASHTAG],
      since: since,
    };
    ws.send(JSON.stringify(['REQ', subId, filter]));
  });

  ws.addEventListener('message', (msg) => {
    if (!isAlive()) return;

    let data;
    try {
      data = JSON.parse(msg.data);
    } catch {
      return;
    }

    // NIP-01: ["EVENT", subId, event]
    if (data[0] === 'EVENT' && data[2]) {
      const event = data[2];
      const lock = parseLockEvent(event);

      // De-duplicate by dTag: keep one lock per d-tag, preferring the
      // most recent created_at; if equal, replace deterministically by event id.
      const existing = lockStore.get(lock.dTag);
      if (shouldReplaceLock(existing, lock)) {
        lockStore.set(lock.dTag, lock);
      }

      appendRawLog(event);
      scheduleRender();
    }

    // NIP-01: ["EOSE", subId] — end of stored events
    if (data[0] === 'EOSE') {
      scheduleRender();
    }
  });

  ws.addEventListener('close', () => {
    // Clean up socket from tracking array
    const idx = sockets.indexOf(ws);
    if (idx !== -1) {
      sockets.splice(idx, 1);
    }

    if (isTeardown) return;
    if (ws.isManualClose) return;

    connectedCount = Math.max(0, connectedCount - 1);
    updateConnectionBadge();

    // Auto-reconnect after 5 seconds if still alive
    setTimeout(() => {
      if (isAlive()) {
        connectToRelay(url);
      }
    }, 5000);
  });

  ws.addEventListener('error', () => {
    // Error fires before close, so close handler will decrement
  });

  sockets.push(ws);
}

// -----------------------------------------------------------------------
// Periodic TTL refresh
// -----------------------------------------------------------------------
refreshIntervalId = setInterval(() => {
  if (isAlive() && !document.hidden) {
    renderLocks();
  }
}, 30_000);

document.addEventListener('visibilitychange', () => {
  if (!document.hidden && isAlive()) {
    renderLocks();
  }
});

// -----------------------------------------------------------------------
// Event handlers
// -----------------------------------------------------------------------
function setPage(p) {
  currentPage = p;
  renderLocks();
}

if (cadenceFilter) cadenceFilter.addEventListener('change', () => { currentPage = 1; renderLocks(); });
if (statusFilter) statusFilter.addEventListener('change', () => { currentPage = 1; renderLocks(); });

if (prevBtn) prevBtn.addEventListener('click', () => setPage(currentPage - 1));
if (nextBtn) nextBtn.addEventListener('click', () => setPage(currentPage + 1));
if (mobilePrevBtn) mobilePrevBtn.addEventListener('click', () => setPage(currentPage - 1));
if (mobileNextBtn) mobileNextBtn.addEventListener('click', () => setPage(currentPage + 1));

if (refreshBtn) refreshBtn.addEventListener('click', () => {
  // Close existing connections and reconnect
  for (const ws of sockets) {
    try {
      ws.isManualClose = true;
      ws.close();
    } catch {
      // ignore
    }
  }
  sockets.length = 0;
  connectedCount = 0;
  lockStore.clear();
  updateConnectionBadge();
  init();
});

// -----------------------------------------------------------------------
// Init
// -----------------------------------------------------------------------
function init() {
  if (!isAlive()) return;

  applyConfigToHelpText();

  for (const url of RELAYS) {
    connectToRelay(url);
  }
}

async function bootstrap() {
  const torchConfig = await loadTorchConfigFile();
  DASHBOARD_CONFIG = parseDashboardConfig(torchConfig);
  RELAYS = DASHBOARD_CONFIG.relays;
  HASHTAG = DASHBOARD_CONFIG.hashtag;

  cadenceFilter.value = DASHBOARD_CONFIG.defaultCadenceView;
  statusFilter.value = DASHBOARD_CONFIG.defaultStatusView;

  init();
}

bootstrap();