import { fetchData } from './api.js';
import { processData } from './dataHandler.js';
import { renderCharts, updateCharts } from './chartRenderer.js';

/**
 * Initialisiert die Anwendung, ruft Daten ab und rendert die Diagramme.
 * @returns {Promise<void>}
 */
export async function initApp() {
  try {
    const rawData = await fetchData();
    const processedData = processData(rawData);
    renderCharts(processedData);
    registerEventListeners();
  } catch (error) {
    console.error('Fehler beim Initialisieren der Anwendung:', error);
    const errorContainer = document.querySelector('#error-message');
    if (errorContainer) {
      errorContainer.textContent = 'Fehler beim Laden der Daten. Bitte versuchen Sie es erneut.';
    }
  }
}

/**
 * Bindet Benutzerinteraktionen, z.B. Filteränderungen oder Refresh.
 */
function registerEventListeners() {
  const filterForm = document.querySelector('#filter-form');
  const refreshButton = document.querySelector('#refresh-data');

  if (filterForm) {
    filterForm.addEventListener('submit', async (event) => {
      event.preventDefault();
      const formData = new FormData(filterForm);
      const filters = Object.fromEntries(formData.entries());
      await handleDataUpdate(filters);
    });
  }

  if (refreshButton) {
    refreshButton.addEventListener('click', async () => {
      await handleDataUpdate();
    });
  }
}

/**
 * Lädt aktualisierte Daten mit optionalen Filtern und aktualisiert die Diagramme.
 * @param {Object} [filters] - Optional Filterparameter.
 */
async function handleDataUpdate(filters = {}) {
  try {
    const rawData = await fetchData(filters);
    const processedData = processData(rawData);
    updateCharts(processedData);
  } catch (error) {
    console.error('Fehler beim Aktualisieren der Daten:', error);
  }
}

window.addEventListener('load', initApp);