/* global Chart */

/**
 * @file js/chart.js
 * @description Rendert und aktualisiert das Interferenz-Diagramm basierend auf geladenen Metrikdaten.
 * @module chart_rendering
 */

let interferenceChart = null;

/**
 * Erstellt oder rendert das Interferenz-Diagramm.
 *
 * @param {HTMLCanvasElement} canvasElement - Canvas-Element, in dem das Diagramm gerendert wird.
 * @param {Array<Object>} data - Array von Messdatenobjekten, z. B. [{ run: '31b', tail: 17, band_width: -3 }, ...]
 */
export function renderInterferenceChart(canvasElement, data) {
  if (!canvasElement || !Array.isArray(data)) return;

  const runs = data.map(d => d.run);
  const tailLatencies = data.map(d => d.tail);
  const bandWidths = data.map(d => d.band_width);

  const ctx = canvasElement.getContext('2d');

  if (interferenceChart) {
    interferenceChart.destroy();
  }

  interferenceChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: runs,
      datasets: [
        {
          label: 'Tail Latency',
          data: tailLatencies,
          borderColor: 'rgba(75, 192, 192, 1)',
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          tension: 0.3,
          pointHoverRadius: 6,
          pointHoverBackgroundColor: 'rgba(75, 192, 192, 1)'
        },
        {
          label: 'Bandwidth Δ',
          data: bandWidths,
          borderColor: 'rgba(255, 99, 132, 1)',
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          tension: 0.3,
          pointHoverRadius: 6,
          pointHoverBackgroundColor: 'rgba(255, 99, 132, 1)'
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: {
        mode: 'index',
        intersect: false
      },
      plugins: {
        tooltip: {
          enabled: true,
          mode: 'nearest',
          callbacks: {
            label: function(context) {
              return `${context.dataset.label}: ${context.parsed.y}`;
            }
          }
        },
        legend: {
          position: 'top',
          labels: {
            usePointStyle: true,
            boxWidth: 6
          }
        }
      },
      scales: {
        x: {
          title: {
            display: true,
            text: 'Run ID'
          }
        },
        y: {
          title: {
            display: true,
            text: 'Metrikwert'
          }
        }
      }
    }
  });
}

/**
 * Aktualisiert die Daten des bestehenden Diagramms.
 *
 * @param {Array<Object>} newData - Neue Messwerte, die gerendert werden sollen.
 */
export function updateChartData(newData) {
  if (!interferenceChart || !Array.isArray(newData)) return;

  const runs = newData.map(d => d.run);
  const tailLatencies = newData.map(d => d.tail);
  const bandWidths = newData.map(d => d.band_width);

  interferenceChart.data.labels = runs;
  if (interferenceChart.data.datasets.length >= 2) {
    interferenceChart.data.datasets[0].data = tailLatencies;
    interferenceChart.data.datasets[1].data = bandWidths;
  }

  interferenceChart.update();
}