import { fetchVisualizationData } from './api.js';
import { renderChart, updateChart } from './chart.js';

/**
 * Initialisiert die Anwendung: lädt Chart, ruft API auf, registriert Event-Listener.
 */
export async function initApp() {
  try {
    const defaultRun = '31b';
    const defaultMetric = 'tail';
    const data = await fetchVisualizationData({ run: defaultRun, metric: defaultMetric });
    renderChart(data);
    registerEventListeners();
  } catch (error) {
    console.error('Fehler bei der Initialisierung der App:', error);
    const container = document.getElementById('chart-container');
    if (container) {
      container.textContent = 'Fehler beim Laden der Visualisierung.';
    }
  }
}

/**
 * Reagiert auf Benutzeränderungen im Filterpanel und aktualisiert Diagrammdaten.
 * @param {Event} event
 */
export async function handleFilterChange(event) {
  try {
    const runSelector = document.getElementById('run-filter');
    const metricSelector = document.getElementById('metric-filter');
    const selectedRun = runSelector?.value ?? '31b';
    const selectedMetric = metricSelector?.value ?? 'tail';

    const newData = await fetchVisualizationData({ run: selectedRun, metric: selectedMetric });
    updateChart(newData);
  } catch (error) {
    console.error('Fehler bei der Aktualisierung des Diagramms:', error);
  }
}

/**
 * Registriert Event-Listener für Filterelemente.
 */
function registerEventListeners() {
  const runFilter = document.getElementById('run-filter');
  const metricFilter = document.getElementById('metric-filter');

  if (runFilter) runFilter.addEventListener('change', handleFilterChange);
  if (metricFilter) metricFilter.addEventListener('change', handleFilterChange);
}

window.addEventListener('load', initApp);