import { fetchAlertData, fetchOutlierReport } from './api.js';
import { renderAlertTable, renderOutlierSummary, setLoadingState, clearLoadingState } from './ui.js';

/**
 * Initialisiert die Anwendung, lädt Daten über API und rendert die UI.
 */
export async function initApp() {
  const refreshButton = document.getElementById('refresh-btn');
  if (refreshButton) {
    refreshButton.addEventListener('click', handleRefresh);
  }

  await loadAndRenderData();
}

/**
 * Lädt Daten von API-Endpunkten und aktualisiert die Oberfläche.
 */
async function loadAndRenderData() {
  try {
    setLoadingState();
    const [alertData, outlierData] = await Promise.all([
      fetchAlertData(),
      fetchOutlierReport()
    ]);

    renderAlertTable(alertData);
    renderOutlierSummary(outlierData);
  } catch (error) {
    console.error('Fehler beim Laden der Daten:', error);
    const messageElem = document.getElementById('status-msg');
    if (messageElem) {
      messageElem.textContent = 'Fehler beim Laden der Daten. Bitte versuchen Sie es erneut.';
      messageElem.setAttribute('role', 'alert');
    }
  } finally {
    clearLoadingState();
  }
}

/**
 * Behandelt Klick auf den Refresh-Button: Lädt Daten neu und aktualisiert DOM.
 * @param {Event} event
 */
async function handleRefresh(event) {
  event.preventDefault();
  await loadAndRenderData();
}

window.addEventListener('load', initApp);