import { fetchData, fetchAnalysis } from './api.js';
import { renderCharts, updateCharts } from './charts.js';
import { renderStats } from './stats.js';

/**
 * @function initApp
 * @description Initialisiert Eventlistener, ruft Datenladen und Rendering auf.
 */
export async function initApp() {
  try {
    const [data, analysis] = await Promise.all([
      fetchData({}),
      fetchAnalysis()
    ]);

    renderCharts(data);
    renderStats(analysis);
    setupEventListeners();
  } catch (error) {
    console.error('Fehler bei der Initialisierung:', error);
  }
}

/**
 * @function setupEventListeners
 * @description Verknüpft UI-Filterelemente mit der Filterlogik.
 */
function setupEventListeners() {
  const filterForm = document.getElementById('filter-form');
  if (filterForm) {
    filterForm.addEventListener('change', handleFilterChange);
  }
}

/**
 * @function handleFilterChange
 * @description Erfasst Nutzerinteraktionen mit Filterpanel und aktualisiert Diagramme.
 * @param {Event} e - Change-Event vom Filterformular
 */
export async function handleFilterChange(e) {
  e.preventDefault();
  const form = e.target.closest('form');
  if (!form) return;

  const formData = new FormData(form);
  const params = {
    time_range: formData.get('time_range') || '24h',
    sensor_id: formData.get('sensor_id') || 'all'
  };

  try {
    const [newData, newAnalysis] = await Promise.all([
      fetchData(params),
      fetchAnalysis()
    ]);
    
    updateCharts(newData);
    renderStats(newAnalysis);
  } catch (error) {
    console.error('Fehler beim Aktualisieren der Filterdaten:', error);
  }
}

// Initialisierung bei Seitenladeereignis
document.addEventListener('DOMContentLoaded', () => {
  initApp();
});