"use strict";

/**
 * @fileoverview Einstiegspunkt der Experiment Results Visualization App.
 * Lädt die Resultate über /results, initialisiert den State und triggert das Rendering.
 *
 * @version 1.0
 * @copyright © 2026 Donau2Space.de
 */

/**
 * Globale App-State-Referenz.
 * @type {{ pinned: Array, unpinned: Array } | null}
 */
let appState = null;

/**
 * Ruft Experimentdaten von der API /results ab.
 * @returns {Promise<{ pinned: Array, unpinned: Array }>}
 */
async function fetchResults() {
  try {
    const response = await fetch("/results", { method: "GET" });
    if (!response.ok) throw new Error(`API request failed with status ${response.status}`);
    const data = await response.json();
    return data;
  } catch (err) {
    console.error("Fehler beim Laden der Ergebnisse:", err);
    return { pinned: [], unpinned: [] };
  }
}

/**
 * Rendert alle UI-Komponenten basierend auf den übergebenen Experimentdaten.
 * @param {{ pinned: Array, unpinned: Array }} experimentData
 */
function render(experimentData) {
  if (!experimentData) return;

  const pinnedCount = experimentData.pinned?.length ?? 0;
  const unpinnedCount = experimentData.unpinned?.length ?? 0;

  const pinnedContainer = document.querySelector("#pinned-results");
  const unpinnedContainer = document.querySelector("#unpinned-results");
  const summaryContainer = document.querySelector("#summary-stats");

  if (pinnedContainer) pinnedContainer.textContent = `${pinnedCount} pinned runs geladen`;
  if (unpinnedContainer) unpinnedContainer.textContent = `${unpinnedCount} unpinned runs geladen`;

  if (summaryContainer) {
    summaryContainer.innerHTML = `
      <h3>Statistik Übersicht</h3>
      <p><strong>Pinned:</strong> ${pinnedCount}</p>
      <p><strong>Unpinned:</strong> ${unpinnedCount}</p>
    `;
  }

  // Beispiel: Custom-Event für weitere Module
  document.dispatchEvent(new CustomEvent("app:rendered", { detail: experimentData }));
}

/**
 * Initialisiert die Anwendung: lädt Daten, setzt State, ruft erstes Rendern auf.
 */
async function init() {
  const data = await fetchResults();
  appState = data;
  render(appState);

  // Beispielhafte Filter-Event-Registrierung
  const filterForm = document.querySelector("#filter-form");
  if (filterForm) {
    filterForm.addEventListener("change", () => {
      // Hier Filterlogik oder Sub-Render implementieren, aktuell Platzhalter
      render(appState);
    });
  }
}

window.addEventListener("load", init);