"use strict";

/**
 * @file app.js
 * @description Initialisiert die eBPF Analyse-Ergebnis-Visualisierung, lädt Daten und bindet UI-Events.
 */

/**
 * Lädt die Analyseergebnisse von der API.
 * @param {Object} [filters] - optionale Filterparameter
 * @returns {Promise<Array>} Liste der Analyseergebnisse
 */
async function fetchAnalysisResults(filters = {}) {
  const params = new URLSearchParams(filters);
  const url = `/analyze_results?${params.toString()}`;
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`Fehler beim Laden der Analyseergebnisse: ${response.status}`);
  }
  return await response.json();
}

/**
 * Bindet UI-Events für Filter und Interaktionen.
 * @function bindUIEvents
 */
function bindUIEvents() {
  const filterForm = document.getElementById("filter-form");
  if (!filterForm) return;

  filterForm.addEventListener("submit", async (event) => {
    event.preventDefault();
    const corrId = document.getElementById("filter-corr_id")?.value.trim();
    const type = document.getElementById("filter-type")?.value.trim();

    const filters = {};
    if (corrId) filters.filter = corrId;
    if (type) filters.type = type;

    try {
      const data = await fetchAnalysisResults(filters);
      renderResults(data);
    } catch (error) {
      console.error(error);
    }
  });
}

/**
 * Rendert die Ergebnisse auf der Seite (Platzhalter für Rendering-Logik).
 * @param {Array} data - Analyseergebnisse
 */
function renderResults(data) {
  const container = document.getElementById("results-container");
  if (!container) return;

  container.innerHTML = "";
  if (!Array.isArray(data) || data.length === 0) {
    container.textContent = "Keine Ergebnisse gefunden.";
    return;
  }

  data.forEach((entry) => {
    const item = document.createElement("div");
    item.className = "results_visualization__entry";
    item.innerHTML = `
      <div><strong>corr_id:</strong> ${entry.corr_id}</div>
      <div><strong>type:</strong> ${entry.type}</div>
      <div><strong>timestamp:</strong> ${entry.timestamp}</div>
      <div><strong>details:</strong> ${entry.details || "-"}</div>
    `;
    container.appendChild(item);
  });
}

/**
 * Initialisiert die Anwendung, lädt Daten und bindet Events.
 * @function initApp
 */
async function initApp() {
  try {
    const data = await fetchAnalysisResults();
    renderResults(data);
  } catch (error) {
    console.error("Initial load error:", error);
  }

  bindUIEvents();
}

window.addEventListener("load", initApp);