import { fetchMaxOutlierResults } from './api.js';
import { renderTable, renderChart, updateFilters, exportData } from './ui.js';

/**
 * Initialisiert die Anwendung, ruft Daten ab und richtet UI-Interaktionen ein.
 * @returns {Promise<void>}
 */
export async function initApp() {
  try {
    const data = await fetchMaxOutlierResults();
    if (!Array.isArray(data) || data.length === 0) {
      console.warn('Keine Max-Outlier-Ergebnisse verfügbar');
      return;
    }

    renderTable(data);
    renderChart(data);
    bindUIEvents(data);
  } catch (err) {
    console.error('Fehler beim Initialisieren der Anwendung:', err);
  }
}

/**
 * Verbindet UI-Elemente mit Logik – z. B. Filteränderungen und Export.
 * @param {Array<object>} dataset
 */
export function bindUIEvents(dataset) {
  const filterForm = document.querySelector('#filter-form');
  const exportCsvBtn = document.querySelector('#export-csv');
  const exportJsonBtn = document.querySelector('#export-json');

  if (filterForm) {
    filterForm.addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(filterForm);
      const filter = Object.fromEntries(formData.entries());

      try {
        const filteredData = await fetchMaxOutlierResults(filter);
        renderTable(filteredData);
        renderChart(filteredData);
        updateFilters(filter);
      } catch (err) {
        console.error('Fehler beim Anwenden der Filter:', err);
      }
    });
  }

  if (exportCsvBtn) {
    exportCsvBtn.addEventListener('click', () => exportData(dataset, 'csv'));
  }

  if (exportJsonBtn) {
    exportJsonBtn.addEventListener('click', () => exportData(dataset, 'json'));
  }
}

window.addEventListener('load', () => {
  initApp();
});