"use strict";

/**
 * @file charts.js
 * @description Visualisierung der Analyseergebnisse mittels Chart.js.
 * Verantwortlich für Erstellung und Aktualisierung der Diagramme.
 */

/* global Chart */

/** @type {Chart|null} */
let resultChart = null;

/**
 * Erstellt ein neues Chart.js-Diagramm zur Darstellung von Stability- und Correlation-Daten.
 * @param {Object[]} resultData - Datenarray aus der API /api/results.
 * @returns {void}
 */
export function renderResultChart(resultData) {
  if (!Array.isArray(resultData)) return;

  const ctx = document.getElementById("resultChartCanvas");
  if (!ctx) {
    console.error("Canvas-Element mit ID 'resultChartCanvas' wurde nicht gefunden.");
    return;
  }

  const runLabels = resultData.map(d => d.run_id);
  const stabilityScores = resultData.map(d => d.step_stability_score ?? 0);
  const correlationCoeffs = resultData.map(d => d.correlation_coefficient ?? 0);

  const chartConfig = {
    type: "bar",
    data: {
      labels: runLabels,
      datasets: [
        {
          label: "Step Stability Score",
          data: stabilityScores,
          backgroundColor: "rgba(75, 192, 192, 0.6)",
          borderColor: "rgba(75, 192, 192, 1)",
          borderWidth: 1
        },
        {
          label: "Correlation Coefficient",
          data: correlationCoeffs,
          type: "line",
          borderColor: "rgba(255, 99, 132, 1)",
          backgroundColor: "rgba(255, 99, 132, 0.2)",
          yAxisID: "y2"
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: {
        mode: "index",
        intersect: false
      },
      plugins: {
        tooltip: {
          enabled: true,
          callbacks: {
            label: function (context) {
              const label = context.dataset.label || "";
              const value = context.parsed.y;
              return `${label}: ${value.toFixed(3)}`;
            }
          }
        },
        legend: {
          position: "bottom"
        }
      },
      scales: {
        y: {
          type: "linear",
          display: true,
          position: "left",
          title: {
            display: true,
            text: "Stability Score"
          }
        },
        y2: {
          type: "linear",
          display: true,
          position: "right",
          title: {
            display: true,
            text: "Correlation Coefficient"
          },
          grid: {
            drawOnChartArea: false
          }
        },
        x: {
          title: {
            display: true,
            text: "Run ID"
          }
        }
      }
    }
  };

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

  resultChart = new Chart(ctx, chartConfig);
}

/**
 * Aktualisiert vorhandenes Diagramm mit neu gefilterten Daten.
 * @param {Object[]} filteredResultData - Gefilterte API-Daten.
 * @returns {void}
 */
export function updateChartData(filteredResultData) {
  if (!resultChart || !Array.isArray(filteredResultData)) return;

  const runLabels = filteredResultData.map(d => d.run_id);
  const stabilityScores = filteredResultData.map(d => d.step_stability_score ?? 0);
  const correlationCoeffs = filteredResultData.map(d => d.correlation_coefficient ?? 0);

  resultChart.data.labels = runLabels;
  if (resultChart.data.datasets?.length >= 2) {
    resultChart.data.datasets[0].data = stabilityScores;
    resultChart.data.datasets[1].data = correlationCoeffs;
  }

  resultChart.update();
}