import { fetchResults } from './api.js';
import { renderCharts, updateCharts } from './charts.js';
import { showLoading, hideLoading } from './ui.js';

/**
 * Initialisiert die Anwendung, lädt initiale Ergebnisse und bindet Event-Listener.
 * Wird beim Laden des Fensters aufgerufen.
 */
export async function initApp() {
  showLoading();
  try {
    const data = await fetchResults();
    renderCharts(data);
    bindFilterEvents();
  } catch (error) {
    console.error('Fehler beim Initialisieren der App:', error);
  } finally {
    hideLoading();
  }
}

/**
 * Verknüpft Filter-Interaktionen mit dem Neuladen und Rendern der Ergebnisse.
 */
export function bindFilterEvents() {
  const runSelect = document.querySelector('#filter-run');
  const paramSelect = document.querySelector('#filter-param');

  if (!runSelect || !paramSelect) return;

  const handleChange = async () => {
    showLoading();
    const runId = runSelect.value || undefined;
    const parameterFilter = paramSelect.value || undefined;
    try {
      const data = await fetchResults({ run_id: runId, parameter_filter: parameterFilter });
      updateCharts(data);
    } catch (error) {
      console.error('Fehler beim Aktualisieren der Diagramme:', error);
    } finally {
      hideLoading();
    }
  };

  runSelect.addEventListener('change', handleChange);
  paramSelect.addEventListener('change', handleChange);
}

window.addEventListener('load', initApp);