import { fetchMigrationReport } from './api.js';
import { renderCharts, updateCharts } from './visualizations.js';

const state = {
  filter: {
    setup_type: '',
    run_id: ''
  },
  data: null
};

async function initApp() {
  try {
    // Lade initiale Daten ohne Filter
    const data = await fetchMigrationReport();
    state.data = data;

    // Rendere erste Diagramme
    renderCharts(data);

    // Verbinde UI-Events
    const filterForm = document.getElementById('filter-panel');
    if (filterForm) {
      filterForm.addEventListener('change', handleFilterChange);
    }
  } catch (error) {
    console.error('Fehler bei der Initialisierung:', error);
  }
}

async function handleFilterChange(event) {
  if (!event || !event.target) return;

  const filterForm = document.getElementById('filter-panel');
  if (!filterForm) return;

  const formData = new FormData(filterForm);
  const newFilter = {
    setup_type: formData.get('setup_type') || '',
    run_id: formData.get('run_id') || ''
  };

  // Prüfe, ob sich der Filter geändert hat
  if (
    newFilter.setup_type === state.filter.setup_type &&
    newFilter.run_id === state.filter.run_id
  ) {
    return;
  }

  state.filter = newFilter;

  try {
    const query = [];
    if (newFilter.setup_type) query.push(`filter=${encodeURIComponent(newFilter.setup_type)}`);
    if (newFilter.run_id) query.push(`run_id=${encodeURIComponent(newFilter.run_id)}`);

    const queryString = query.length ? '?' + query.join('&') : '';
    const data = await fetchMigrationReport(queryString);
    state.data = data;

    updateCharts(data);
  } catch (error) {
    console.error('Fehler beim Aktualisieren der Diagramme:', error);
  }
}

window.addEventListener('load', initApp);

export { initApp, handleFilterChange };