import { fetchTelemetryData } from './api.js';
import { renderCharts, updateCharts } from './charts.js';

/**
 * Globaler Applikationszustand
 * @typedef {Object} AppState
 * @property {Array<Object>} data - Geladene Telemetriedaten
 * @property {Object} filters - Aktuelle Filtereinstellungen
 * @property {string} filters.time_range - Zeitspanne
 * @property {number|string} filters.ir_gain - IR-Gain-Wert
 * @property {string} filters.material_type - Materialtyp
 */

/** @type {AppState} */
let appState = {
  data: [],
  filters: {
    time_range: 'all',
    ir_gain: 'all',
    material_type: 'all'
  }
};

/**
 * Initialisiert die Anwendung, lädt Daten und bindet Events.
 */
export async function initApp() {
  try {
    const data = await fetchTelemetryData(appState.filters);
    appState.data = data || [];

    renderCharts(appState.data);
    attachEventListeners();
  } catch (err) {
    console.error('Fehler bei Initialisierung:', err);
    const container = document.getElementById('chart-container');
    if (container) {
      container.innerHTML = '<p class="error-msg">Fehler beim Laden der Daten.</p>';
    }
  }
}

/**
 * Bindet Event-Listener für Filteränderungen.
 */
export function attachEventListeners() {
  const timeRangeInput = document.getElementById('filter-time-range');
  const irGainInput = document.getElementById('filter-ir-gain');
  const materialInput = document.getElementById('filter-material');

  if (!timeRangeInput || !irGainInput || !materialInput) return;

  [timeRangeInput, irGainInput, materialInput].forEach(el => {
    el.addEventListener('change', async () => {
      appState.filters = {
        time_range: timeRangeInput.value,
        ir_gain: irGainInput.value,
        material_type: materialInput.value
      };

      const updatedData = await fetchTelemetryData(appState.filters);
      appState.data = updatedData || [];
      updateCharts(appState.data);
    });
  });
}

window.addEventListener('load', initApp);