"use strict";

/**
 * Initialisiert die App, lädt Ergebnisse und rendert Diagramme.
 * @module app
 */

/** @typedef {Object} ResultEntry
 * @property {string} run_id
 * @property {number} parallelism
 * @property {number} band_width
 * @property {number} retry_tail_p99
 * @property {string} timestamp
 */

/**
 * Ruft Daten von der /results API ab.
 * @param {Object} [filters]
 * @returns {Promise<ResultEntry[]>}
 */
async function fetchResults(filters = {}) {
  const params = new URLSearchParams(filters);
  const res = await fetch(`/results?${params.toString()}`, {
    method: 'GET',
    headers: { 'Accept': 'application/json' }
  });
  if (!res.ok) throw new Error(`Fehler beim Laden der Ergebnisse: ${res.status}`);
  return res.json();
}

/**
 * Rendert Diagramme basierend auf Resultaten.
 * @param {ResultEntry[]} data
 */
function renderCharts(data) {
  const container = document.getElementById('chart-container');
  if (!container) return;

  container.innerHTML = '';
  const chart = document.createElement('div');
  chart.className = 'chart';

  const summary = document.createElement('p');
  summary.textContent = `Anzahl Ergebnisse: ${data.length}`;
  chart.appendChild(summary);

  // Beispielhafte Darstellung von Trends
  const list = document.createElement('ul');
  data.forEach(entry => {
    const item = document.createElement('li');
    item.textContent = `Parallelität: ${entry.parallelism}, Bandbreite: ${entry.band_width}, Retry p99: ${entry.retry_tail_p99}`;
    list.appendChild(item);
  });
  chart.appendChild(list);
  container.appendChild(chart);
}

/**
 * Wendet aktuelle Filter an und aktualisiert Diagramme.
 */
export async function applyFilters() {
  const parallelismSelect = document.getElementById('filter-parallelism');
  const parallelism = parallelismSelect?.value || '';

  const filters = {};
  if (parallelism) filters.parallelism = parallelism;

  try {
    const results = await fetchResults(filters);
    renderCharts(results);
  } catch (err) {
    console.error(err);
  }
}

/**
 * Initialisiert die Anwendung und bindet Eventlistener.
 */
export async function initApp() {
  try {
    const initialData = await fetchResults();
    renderCharts(initialData);

    const filterForm = document.getElementById('filter-form');
    if (filterForm) {
      filterForm.addEventListener('change', () => {
        applyFilters();
      });
    }
  } catch (err) {
    console.error('Fehler bei Initialisierung:', err);
  }
}

window.addEventListener('load', initApp);