import { fetchRunData } from './api.js';
import { renderVisualization, updateFilters } from './visualization.js';

/**
 * Bindet Benutzeroberflächenereignisse an Event-Handler.
 * @function bindUIEvents
 * @returns {void}
 */
function bindUIEvents() {
  const filterSelect = document.querySelector('#segment-filter');
  const runSelector = document.querySelector('#run-selector');

  if (filterSelect) {
    filterSelect.addEventListener('change', (e) => {
      const selectedFilter = e.target.value;
      updateFilters(selectedFilter);
    });
  }

  if (runSelector) {
    runSelector.addEventListener('change', async (e) => {
      const runId = e.target.value;
      if (runId) {
        try {
          const data = await fetchRunData(runId);
          renderVisualization(data);
        } catch (err) {
          console.error('Fehler beim Laden der Run-Daten:', err);
        }
      }
    });
  }
}

/**
 * Initialisiert die Anwendung, lädt Standarddaten und verbindet Events.
 * @async
 * @function initApp
 * @returns {Promise<void>}
 */
async function initApp() {
  try {
    const defaultRunId = document.querySelector('#run-selector')?.value;
    if (defaultRunId) {
      const data = await fetchRunData(defaultRunId);
      renderVisualization(data);
    }
    bindUIEvents();
  } catch (error) {
    console.error('Fehler bei der Initialisierung:', error);
  }
}

window.addEventListener('load', initApp);
export { initApp, bindUIEvents };