import { loadResults } from './api.js';
import { renderVisualization, renderSummary } from './visualization.js';

/**
 * Initialisiert die Anwendung.
 * Lädt initiale Ergebnisse und bindet UI-Events.
 * @returns {Promise<void>}
 */
export async function initApp() {
  try {
    const filterControls = document.getElementById('filter-controls');
    bindEvents(filterControls);

    const data = await loadResults();
    renderVisualization(data);
    renderSummary(data);
  } catch (error) {
    console.error('Fehler bei der Initialisierung der App:', error);
    const main = document.querySelector('main');
    if (main) {
      const errorMsg = document.createElement('div');
      errorMsg.textContent = 'Fehler beim Laden der Ergebnisse. Bitte neu laden.';
      errorMsg.className = 'results-visualization__error';
      main.appendChild(errorMsg);
    }
  }
}

/**
 * Bindet UI-Events für Filtersteuerungen.
 * @param {HTMLElement|null} container - Container mit Filter-Controls
 */
export function bindEvents(container) {
  if (!container) return;

  container.querySelectorAll('select, input').forEach((control) => {
    control.addEventListener('change', async () => {
      const params = collectFilters(container);
      try {
        const data = await loadResults(params);
        renderVisualization(data);
        renderSummary(data);
      } catch (err) {
        console.error('Daten konnten nicht aktualisiert werden:', err);
      }
    });
  });
}

/**
 * Liest aktuelle Filterwerte aus DOM-Elementen.
 * @param {HTMLElement} container
 * @returns {Object}
 */
function collectFilters(container) {
  const filters = {};
  container.querySelectorAll('select, input').forEach((control) => {
    if (control.id && control.value) {
      filters[control.id] = control.value;
    }
  });
  return filters;
}

window.addEventListener('load', initApp);