"use strict";

/**
 * Application entry logic for visualization_tool
 * Handles initialization, data loading, and UI event binding.
 */

/**
 * Fetches metrics and initializes the interface.
 * @returns {Promise<void>}
 */
async function initApp() {
  try {
    const metricsContainer = document.getElementById('metrics-container');
    if (!metricsContainer) {
      console.warn('Metrics container not found.');
      return;
    }

    const filterSelect = document.getElementById('filter-select');
    
    // Fetch data from /metrics
    const filter = filterSelect?.value || '';
    const response = await fetch(`/metrics${filter ? `?filter=${encodeURIComponent(filter)}` : ''}`);
    if (!response.ok) throw new Error(`Failed to fetch metrics: ${response.statusText}`);
    const metricsData = await response.json();

    renderMetrics(metricsData);
    bindUIEvents();

  } catch (error) {
    console.error('Error initializing app:', error);
    const status = document.getElementById('status-message');
    if (status) status.textContent = 'Fehler beim Laden der Daten.';
  }
}

/**
 * Sets up event listeners for UI interactions.
 */
function bindUIEvents() {
  const filterSelect = document.getElementById('filter-select');
  if (filterSelect) {
    filterSelect.addEventListener('change', async () => {
      await initApp();
    });
  }
}

/**
 * Renders the metrics table or visualization.
 * @param {Array<Object>} data - Array of metrics data.
 */
function renderMetrics(data) {
  const container = document.getElementById('metrics-container');
  if (!container) return;
  container.innerHTML = '';

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

  const table = document.createElement('table');
  table.className = 'metrics-table';
  const thead = document.createElement('thead');
  const headerRow = document.createElement('tr');
  ;['Metrik', 'Run-ID', 'Pinned', 'Effektgröße', 'CI-unter', 'CI-ober'].forEach(h => {
    const th = document.createElement('th');
    th.textContent = h;
    headerRow.appendChild(th);
  });
  thead.appendChild(headerRow);

  const tbody = document.createElement('tbody');
  data.forEach(item => {
    const tr = document.createElement('tr');
    const { metric_name, run_id, pinned_flag, effect_size, ci_low, ci_high } = item;

    [metric_name, run_id, pinned_flag ? 'Ja' : 'Nein', effect_size, ci_low, ci_high].forEach(val => {
      const td = document.createElement('td');
      td.textContent = val;
      tr.appendChild(td);
    });
    tbody.appendChild(tr);
  });

  table.appendChild(thead);
  table.appendChild(tbody);
  container.appendChild(table);
}

// Initialize app on window load
document.addEventListener('DOMContentLoaded', initApp);