app.js

const SETTINGS_KEY = 'idaNotifier.settings.v3';
const CUSTOM_CITY_VALUE = '__custom__';
const POPULAR_CITIES = ['København', 'Aarhus', 'Odense', 'Aalborg', 'Roskilde', 'Lyngby', 'Kolding', 'Esbjerg'];

const defaults = {
  backendUrl: '',
  cityFilter: 'Odense',
};

const state = {
  deferredInstallPrompt: null,
  refreshHandle: null,
  swRegistration: null,
  vapidPublicKey: '',
  isBusy: false,
  endpoint: null,
  subscriberCountHint: null,
  subscriptionState: 'unknown',
};

const el = {
  statusBadge: document.getElementById('statusBadge'),
  lastCheckText: document.getElementById('lastCheckText'),
  subscriptionText: document.getElementById('subscriptionText'),
  mainHelpText: document.getElementById('mainHelpText'),
  iosInstallNotice: document.getElementById('iosInstallNotice'),
  settingsForm: document.getElementById('settingsForm'),
  backendUrlInput: document.getElementById('backendUrlInput'),
  cityPresetSelect: document.getElementById('cityPresetSelect'),
  customCityField: document.getElementById('customCityField'),
  customCityInput: document.getElementById('customCityInput'),
  filterSummaryText: document.getElementById('filterSummaryText'),
  saveBtn: document.getElementById('saveBtn'),
  requestPermissionBtn: document.getElementById('requestPermissionBtn'),
  checkNowBtn: document.getElementById('checkNowBtn'),
  testFilterBtn: document.getElementById('testFilterBtn'),
  testNotificationBtn: document.getElementById('testNotificationBtn'),
  clearSeenBtn: document.getElementById('clearSeenBtn'),
  installBtn: document.getElementById('installBtn'),
  eventsSummaryText: document.getElementById('eventsSummaryText'),
  eventsList: document.getElementById('eventsList'),
  logList: document.getElementById('logList'),
};

function loadSettings() {
  try {
    const raw = localStorage.getItem(SETTINGS_KEY);
    if (!raw) {
      return { ...defaults };
    }

    const parsed = JSON.parse(raw);
    return {
      ...defaults,
      ...parsed,
    };
  } catch {
    return { ...defaults };
  }
}

function saveSettings(settings) {
  localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
}

function normalizeCityName(city) {
  if (typeof city !== 'string') {
    return '';
  }

  return city.trim().toLocaleLowerCase('da-DK');
}

function formatCityName(city) {
  return city
    .split(/\s+/)
    .filter(Boolean)
    .map((part) => part.charAt(0).toLocaleUpperCase('da-DK') + part.slice(1))
    .join(' ');
}

function parseCityFilterInput(value) {
  const source = typeof value === 'string' ? value : '';
  const tokens = source
    .split(',')
    .map((token) => normalizeCityName(token))
    .filter(Boolean);

  return [...new Set(tokens)];
}

function describeCityFilter(cityFilter) {
  const cities = parseCityFilterInput(cityFilter);
  if (!cities.length) {
    return 'Alle byer';
  }

  return cities.map((city) => formatCityName(city)).join(', ');
}

function buildPreferencesFromSettings(settings) {
  return {
    cities: parseCityFilterInput(settings.cityFilter),
  };
}

function findPresetForCityFilter(cityFilter) {
  const cities = parseCityFilterInput(cityFilter);
  if (cities.length !== 1) {
    return CUSTOM_CITY_VALUE;
  }

  const match = POPULAR_CITIES.find((city) => normalizeCityName(city) === cities[0]);
  return match || CUSTOM_CITY_VALUE;
}

function toggleCustomCityField() {
  const isCustom = el.cityPresetSelect.value === CUSTOM_CITY_VALUE;
  el.customCityField.hidden = !isCustom;
  el.customCityInput.disabled = !isCustom;
}

function fillForm(settings) {
  el.backendUrlInput.value = settings.backendUrl;

  const preset = settings.cityFilter ? findPresetForCityFilter(settings.cityFilter) : '';
  el.cityPresetSelect.value = preset;
  if (preset === CUSTOM_CITY_VALUE) {
    el.customCityInput.value = settings.cityFilter;
  } else {
    el.customCityInput.value = '';
  }

  toggleCustomCityField();
  updateFilterSummary(previewSettingsFromForm());
}

function setStatus(text, tone = 'neutral') {
  el.statusBadge.textContent = text;
  el.statusBadge.dataset.tone = tone;
}

function ensureLogEmptyState() {
  if (el.logList.children.length) {
    return;
  }

  const item = document.createElement('li');
  item.textContent = 'Ingen aktivitet endnu.';
  item.className = 'log-empty';
  el.logList.append(item);
}

function addLog(message) {
  const empty = el.logList.querySelector('.log-empty');
  if (empty) {
    empty.remove();
  }

  const now = new Date();
  const item = document.createElement('li');
  item.textContent = `[${now.toLocaleTimeString('da-DK', { hour: '2-digit', minute: '2-digit' })}] ${message}`;
  el.logList.prepend(item);

  while (el.logList.children.length > 20) {
    el.logList.lastElementChild.remove();
  }
}

function updateActionHelpText() {
  if (isIosDevice() && !isStandaloneMode()) {
    el.mainHelpText.textContent = 'På iPhone skal du først føje siden til hjemmeskærmen. Notifikationer virker kun fra den installerede app.';
    return;
  }

  if (state.subscriptionState === 'active') {
    el.mainHelpText.textContent = `Notifikationer er slået til for ${describeCityFilter(loadSettings().cityFilter)}.`;
    return;
  }

  if (!el.installBtn.hidden) {
    el.mainHelpText.textContent = 'Installer appen, hvis du vil, og tryk derefter på Abonnér på notifikationer.';
    return;
  }

  el.mainHelpText.textContent = 'Vælg din by, og tryk derefter på Abonnér på notifikationer.';
}

function setSubscriptionText(text, tone = 'neutral', stateName = 'unknown') {
  el.subscriptionText.textContent = text;
  el.subscriptionText.dataset.tone = tone;
  state.subscriptionState = stateName;
  updateActionHelpText();
}

function updateFilterSummary(settings) {
  el.filterSummaryText.textContent = `Nuværende filter: ${describeCityFilter(settings.cityFilter)}.`;
}

function previewSettingsFromForm() {
  const preset = el.cityPresetSelect.value;
  const cityFilter = preset === CUSTOM_CITY_VALUE ? el.customCityInput.value.trim() : preset;

  return {
    backendUrl: el.backendUrlInput.value.trim(),
    cityFilter,
  };
}

function readSettingsFromForm() {
  const settings = previewSettingsFromForm();

  if (el.cityPresetSelect.value === CUSTOM_CITY_VALUE && !settings.cityFilter) {
    throw new Error('Skriv en by, eller vælg en fra listen.');
  }

  return settings;
}

function getBackendOrigin() {
  const raw = loadSettings().backendUrl.trim();
  if (!raw) {
    return window.location.origin;
  }

  try {
    const parsed = new URL(raw);
    return parsed.origin;
  } catch {
    addLog('Ugyldig backend-URL. Bruger dette site i stedet.');
    return window.location.origin;
  }
}

function buildApiUrl(resourcePath) {
  return new URL(resourcePath, `${getBackendOrigin()}/`).toString();
}

async function apiFetchJson(resourcePath, options = {}) {
  const { body, headers = {}, method = 'GET' } = options;
  const response = await fetch(buildApiUrl(resourcePath), {
    method,
    cache: 'no-store',
    headers: {
      Accept: 'application/json',
      ...(body ? { 'Content-Type': 'application/json' } : {}),
      ...headers,
    },
    body: body ? JSON.stringify(body) : undefined,
  });

  if (!response.ok) {
    const text = await response.text();
    throw new Error(`Request ${method} ${resourcePath} failed (${response.status}): ${text.slice(0, 200)}`);
  }

  if (response.status === 204) {
    return null;
  }

  return response.json();
}

function isIosDevice() {
  const ua = window.navigator.userAgent;
  const platform = window.navigator.platform || '';
  const touchMac = platform === 'MacIntel' && window.navigator.maxTouchPoints > 1;
  return /iPad|iPhone|iPod/i.test(ua) || touchMac;
}

function isStandaloneMode() {
  return window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true;
}

function supportsBrowserInstallPrompt() {
  return !isIosDevice();
}

function updatePlatformGuidance() {
  const needsIosInstall = isIosDevice() && !isStandaloneMode();
  el.iosInstallNotice.hidden = !needsIosInstall;
  el.installBtn.hidden = !supportsBrowserInstallPrompt() || !state.deferredInstallPrompt;

  if (needsIosInstall) {
    el.requestPermissionBtn.disabled = true;
    el.requestPermissionBtn.dataset.state = 'ios-install-required';
    el.requestPermissionBtn.textContent = 'Åbn fra hjemmeskærmen først';
  } else if (!state.isBusy) {
    el.requestPermissionBtn.disabled = false;
    el.requestPermissionBtn.dataset.state = 'ready';
    el.requestPermissionBtn.textContent = 'Abonnér på notifikationer';
  }

  updateActionHelpText();
}

function formatEventDate(isoValue) {
  if (!isoValue) {
    return 'Ukendt dato';
  }

  const date = new Date(isoValue);
  if (Number.isNaN(date.getTime())) {
    return 'Ukendt dato';
  }

  return date.toLocaleString('da-DK', {
    dateStyle: 'medium',
    timeStyle: 'short',
  });
}

function getSearchableLocationText(event) {
  const location = event?.location;
  if (!location || typeof location !== 'object') {
    return '';
  }

  return Object.values(location)
    .filter((value) => typeof value === 'string')
    .map((value) => normalizeCityName(value))
    .filter(Boolean)
    .join(' | ');
}

function eventMatchesCityFilter(event, cityFilters) {
  if (!cityFilters.length) {
    return true;
  }

  const searchableLocation = getSearchableLocationText(event);
  if (!searchableLocation) {
    return false;
  }

  return cityFilters.some((cityFilter) => searchableLocation.includes(cityFilter));
}

function renderEvents(events, cityFilters) {
  el.eventsList.innerHTML = '';

  if (!events.length) {
    const item = document.createElement('li');
    item.className = 'event-empty';
    item.textContent = 'Der er endnu ingen meetup-events fra backend.';
    el.eventsList.append(item);
    return;
  }

  const matchingEvents = events.filter((event) => eventMatchesCityFilter(event, cityFilters));
  const visibleEvents = matchingEvents.slice(0, 8);

  if (!cityFilters.length) {
    el.eventsSummaryText.textContent = `Viser ${visibleEvents.length} af ${events.length} seneste events på tværs af alle byer.`;
  } else {
    el.eventsSummaryText.textContent = `Viser ${visibleEvents.length} seneste events for ${describeCityFilter(cityFilters.join(', '))}.`;
  }

  if (!visibleEvents.length) {
    const item = document.createElement('li');
    item.className = 'event-empty';
    item.textContent = 'Der er ingen nyere events, som matcher denne by lige nu.';
    el.eventsList.append(item);
    return;
  }

  visibleEvents.forEach((event) => {
    const item = document.createElement('li');
    item.className = 'event-card';

    const title = document.createElement('p');
    title.className = 'event-title';
    title.textContent = event.title || 'Event uden titel';

    const details = document.createElement('p');
    details.className = 'event-meta';
    const location = event.location?.city || event.location?.name || 'Ukendt sted';
    details.textContent = `${formatEventDate(event.startDate)} • ${location}`;

    item.append(title, details);
    el.eventsList.append(item);
  });
}

function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; i += 1) {
    outputArray[i] = rawData.charCodeAt(i);
  }

  return outputArray;
}

function formatPreferences(preferences) {
  const cities = Array.isArray(preferences?.cities) ? preferences.cities : [];
  if (!cities.length) {
    return 'alle byer';
  }

  return cities.map((city) => formatCityName(city)).join(', ');
}

async function registerServiceWorker() {
  if (!('serviceWorker' in navigator)) {
    addLog('Denne browser understøtter ikke service workers.');
    return;
  }

  try {
    state.swRegistration = await navigator.serviceWorker.register('sw.js');
    addLog('Appens hjælpefiler er klar.');
  } catch (error) {
    const message = error instanceof Error ? error.message : String(error);
    addLog(`Kunne ikke registrere appens service worker: ${message}`);
  }
}

async function loadBackendConfig() {
  const config = await apiFetchJson('/api/config');
  state.vapidPublicKey = config.vapidPublicKey;
  return config;
}

async function getCurrentSubscription() {
  if (!state.swRegistration || !('PushManager' in window)) {
    return null;
  }

  return state.swRegistration.pushManager.getSubscription();
}

async function syncSubscriptionWithBackend(subscription, { silent = false } = {}) {
  const settings = loadSettings();
  const preferences = buildPreferencesFromSettings(settings);
  const response = await apiFetchJson('/api/subscribe', {
    method: 'POST',
    body: {
      subscription: subscription.toJSON(),
      preferences,
    },
  });

  state.endpoint = subscription.endpoint;
  state.subscriberCountHint = Number(response.subscriberCount) || 0;

  if (!silent) {
    addLog(`Gemt notifikationsfilter: ${formatPreferences(response.preferences)}.`);
    addLog(`Tilknyttede enheder: ${response.subscriberCount}.`);
  }

  return response;
}

async function refreshSubscriptionStatus(subscription) {
  if (!subscription) {
    setSubscriptionText('Notifikationer er slået fra på denne enhed.', 'warn', 'inactive');
    state.endpoint = null;
    return;
  }

  const status = await apiFetchJson('/api/subscription-status', {
    method: 'POST',
    body: { endpoint: subscription.endpoint },
  });

  state.endpoint = subscription.endpoint;
  state.subscriberCountHint = Number(status.subscriberCount) || 0;

  if (status.subscribed) {
    setSubscriptionText(`Notifikationer er slået til for ${formatPreferences(status.preferences)}.`, 'ok', 'active');
  } else {
    setSubscriptionText('Denne enhed er ikke gemt på backend endnu.', 'warn', 'inactive');
  }
}

async function persistSettingsFromForm({ syncSubscription = false, refresh = false, silent = false } = {}) {
  const settings = readSettingsFromForm();
  saveSettings(settings);
  updateFilterSummary(settings);

  if (!silent) {
    addLog(`Gemt filter: ${describeCityFilter(settings.cityFilter)}.`);
  }

  if (syncSubscription) {
    await loadBackendConfig();
    const existingSubscription = await getCurrentSubscription();
    if (existingSubscription) {
      await syncSubscriptionWithBackend(existingSubscription, { silent });
      await refreshSubscriptionStatus(existingSubscription);
    }
  }

  if (refresh) {
    await refreshDashboard();
  }

  return settings;
}

async function ensurePushSubscription() {
  if (isIosDevice() && !isStandaloneMode()) {
    addLog('På iPhone skal du først føje appen til hjemmeskærmen.');
    setStatus('Føj til hjemmeskærmen først', 'warn');
    return;
  }

  if (!state.swRegistration) {
    addLog('Appen er stadig ved at gøre sig klar. Prøv igen om et øjeblik.');
    return;
  }

  if (!('PushManager' in window) || !('Notification' in window)) {
    addLog('Push-notifikationer understøttes ikke i denne browser.');
    setStatus('Notifikationer understøttes ikke', 'warn');
    return;
  }

  const permission = await Notification.requestPermission();
  if (permission !== 'granted') {
    addLog(`Tilladelse til notifikationer er ${permission}.`);
    setStatus('Notifikationer blokeret', 'warn');
    setSubscriptionText('Notifikationer er blokeret i browserens indstillinger.', 'warn', 'blocked');
    return;
  }

  if (!state.vapidPublicKey) {
    await loadBackendConfig();
  }

  let subscription = await getCurrentSubscription();
  if (!subscription) {
    subscription = await state.swRegistration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(state.vapidPublicKey),
    });
  }

  await syncSubscriptionWithBackend(subscription);
  await refreshSubscriptionStatus(subscription);
  await refreshDashboard();

  addLog('Notifikationer er nu aktive på denne enhed.');
  setStatus('Notifikationer klar', 'ok');
}

async function syncExistingSubscription({ silent = false } = {}) {
  const subscription = await getCurrentSubscription();
  if (!subscription) {
    setSubscriptionText('Notifikationer er slået fra på denne enhed.', 'warn', 'inactive');
    return;
  }

  await syncSubscriptionWithBackend(subscription, { silent });
  await refreshSubscriptionStatus(subscription);
  if (!silent) {
    addLog('Det eksisterende abonnement på enheden blev opdateret.');
  }
}

async function sendTestPush() {
  const subscription = await getCurrentSubscription();
  if (!subscription) {
    addLog('Slå først notifikationer til.');
    setSubscriptionText('Notifikationer skal slås til først.', 'warn', 'inactive');
    return;
  }

  await apiFetchJson('/api/test-push', {
    method: 'POST',
    body: { subscription: subscription.toJSON() },
  });

  addLog('En testnotifikation blev sendt af sted.');
}

async function triggerBackendCheck() {
  const response = await apiFetchJson('/api/check-now', { method: 'POST' });
  addLog(`Tjekkede efter nye events. Nye events fundet: ${response.newEventCount || 0}.`);
}

async function testFilter() {
  const settings = readSettingsFromForm();
  const cityFilters = parseCityFilterInput(settings.cityFilter);
  const eventsData = await apiFetchJson('/api/events');
  const events = Array.isArray(eventsData.events) ? eventsData.events : [];
  const matchingEvents = events.filter((event) => eventMatchesCityFilter(event, cityFilters));

  if (!cityFilters.length) {
    addLog(`Filterforhåndsvisning: alle ${events.length} events ville blive inkluderet.`);
    return;
  }

  addLog(
    `Filterforhåndsvisning: ${matchingEvents.length} af ${events.length} events matcher ${describeCityFilter(settings.cityFilter)}.`
  );

  if (matchingEvents.length) {
    const examples = matchingEvents.slice(0, 3).map((event) => {
      const city = typeof event?.location?.city === 'string' ? event.location.city.trim() : '';
      const locationLabel = city || event?.location?.name || 'Ukendt sted';
      return `${event.title || 'Event uden titel'} (${locationLabel})`;
    });

    addLog(`Eksempler: ${examples.join(' | ')}`);
  }
}

async function clearSeenIds() {
  const shouldClear = window.confirm('Nulstil sete events på backend? Eksisterende events kan blive opfattet som nye næste gang, du tjekker.');
  if (!shouldClear) {
    return;
  }

  await apiFetchJson('/api/reset-seen', { method: 'POST' });
  addLog('Sete events blev nulstillet på backend.');
}

async function refreshDashboard() {
  const [health, eventsData] = await Promise.all([
    apiFetchJson('/api/health'),
    apiFetchJson('/api/events'),
  ]);

  const healthSubscriberCount = Number(health.subscriberCount) || 0;
  const hintedSubscriberCount =
    typeof state.subscriberCountHint === 'number' && Number.isFinite(state.subscriberCountHint)
      ? state.subscriberCountHint
      : null;
  const displayedSubscriberCount =
    hintedSubscriberCount === null
      ? healthSubscriberCount
      : Math.max(healthSubscriberCount, hintedSubscriberCount);

  const lastPoll = health.lastPollAt
    ? new Date(health.lastPollAt).toLocaleString('da-DK', { dateStyle: 'medium', timeStyle: 'short' })
    : 'endnu ikke';

  el.lastCheckText.textContent =
    `Seneste backend-tjek: ${lastPoll}. Enheder: ${displayedSubscriberCount}. ` +
    `Sendte notifikationer: ${health.lastNotifiedCount || 0}. Fejl: ${health.lastFailedPushCount || 0}.`;

  if (health.lastPollStatus === 'ok') {
    setStatus('Backend online', 'ok');
  } else if (health.lastPollStatus === 'error') {
    setStatus('Backend kræver opmærksomhed', 'warn');
  } else {
    setStatus('Venter på første tjek', 'neutral');
  }

  const settings = loadSettings();
  const events = Array.isArray(eventsData.events) ? eventsData.events : [];
  renderEvents(events, parseCityFilterInput(settings.cityFilter));
}

function startAutoRefresh() {
  if (state.refreshHandle) {
    clearInterval(state.refreshHandle);
  }

  state.refreshHandle = setInterval(() => {
    Promise.all([refreshDashboard(), syncExistingSubscription({ silent: true })]).catch((error) => {
      const message = error instanceof Error ? error.message : String(error);
      addLog(`Opdatering mislykkedes: ${message}`);
    });
  }, 60000);
}

function setupInstallPrompt() {
  if (!supportsBrowserInstallPrompt()) {
    el.installBtn.hidden = true;
    return;
  }

  window.addEventListener('beforeinstallprompt', (event) => {
    event.preventDefault();
    state.deferredInstallPrompt = event;
    el.installBtn.hidden = false;
    addLog('Installationsknappen er klar.');
    updateActionHelpText();
  });

  window.addEventListener('appinstalled', () => {
    state.deferredInstallPrompt = null;
    el.installBtn.hidden = true;
    addLog('Appen er installeret. Åbn den fra hjemmeskærmen for at bruge notifikationer.');
    updateActionHelpText();
  });

  el.installBtn.addEventListener('click', async () => {
    if (!state.deferredInstallPrompt) {
      return;
    }

    state.deferredInstallPrompt.prompt();
    await state.deferredInstallPrompt.userChoice;
    state.deferredInstallPrompt = null;
    el.installBtn.hidden = true;
    updateActionHelpText();
  });
}

function setBusyState(isBusy) {
  state.isBusy = isBusy;
  el.saveBtn.disabled = isBusy;
  el.checkNowBtn.disabled = isBusy;
  el.testFilterBtn.disabled = isBusy;
  el.testNotificationBtn.disabled = isBusy;
  el.clearSeenBtn.disabled = isBusy;
  el.installBtn.disabled = isBusy;

  if (isBusy) {
    el.requestPermissionBtn.disabled = true;
    el.requestPermissionBtn.dataset.state = 'busy';
  } else {
    updatePlatformGuidance();
  }
}

function withBusyGuard(fn) {
  return async (...args) => {
    if (state.isBusy) {
      return;
    }

    setBusyState(true);
    try {
      await fn(...args);
    } catch (error) {
      const message = error instanceof Error ? error.message : String(error);
      addLog(message);
      setStatus('Handling mislykkedes', 'warn');
    } finally {
      setBusyState(false);
    }
  };
}

function wireEvents() {
  el.cityPresetSelect.addEventListener('change', () => {
    toggleCustomCityField();
    updateFilterSummary(previewSettingsFromForm());
  });

  el.customCityInput.addEventListener('input', () => {
    updateFilterSummary(previewSettingsFromForm());
  });

  el.settingsForm.addEventListener('submit', withBusyGuard(async (event) => {
    event.preventDefault();
    await persistSettingsFromForm({ syncSubscription: true, refresh: true });
  }));

  el.requestPermissionBtn.addEventListener('click', withBusyGuard(async () => {
    await persistSettingsFromForm({ silent: true });
    await ensurePushSubscription();
  }));

  el.checkNowBtn.addEventListener('click', withBusyGuard(async () => {
    await persistSettingsFromForm({ silent: true });
    await triggerBackendCheck();
    await refreshDashboard();
    await syncExistingSubscription();
  }));

  el.testFilterBtn.addEventListener('click', withBusyGuard(async () => {
    await testFilter();
  }));

  el.testNotificationBtn.addEventListener('click', withBusyGuard(async () => {
    await persistSettingsFromForm({ silent: true });
    await sendTestPush();
  }));

  el.clearSeenBtn.addEventListener('click', withBusyGuard(async () => {
    await clearSeenIds();
    await refreshDashboard();
  }));

  window.addEventListener('pageshow', () => {
    updatePlatformGuidance();
  });

  const mediaQuery = window.matchMedia('(display-mode: standalone)');
  if (typeof mediaQuery.addEventListener === 'function') {
    mediaQuery.addEventListener('change', updatePlatformGuidance);
  }
}

async function init() {
  const settings = loadSettings();
  fillForm(settings);
  ensureLogEmptyState();

  wireEvents();
  setupInstallPrompt();
  updatePlatformGuidance();
  await registerServiceWorker();

  try {
    await loadBackendConfig();
    await syncExistingSubscription();
    await refreshDashboard();
  } catch (error) {
    const message = error instanceof Error ? error.message : String(error);
    addLog(`Backend utilgængelig: ${message}`);
    setStatus('Backend utilgængelig', 'warn');
    setSubscriptionText('Der er ikke forbindelse til backend lige nu.', 'warn', 'error');
    el.eventsSummaryText.textContent = 'Seneste events er utilgængelige, indtil backend svarer.';
  }

  startAutoRefresh();
}

init();