"use strict";

/**
 * @module charts
 * Visualization logic module for metric_visualization
 */

/**
 * Zeichnet ein Linien- oder Scatter-Diagramm basierend auf Δt-Daten.
 * @param {Array<Object>} analysisData - Analyse-Daten mit {run_id, t_index_visible, t_gate_read, delta_t}.
 * @param {string} [chartContainerId="chart-area"] - ID des Containers zur Anzeige des Charts.
 */
export function renderTimeSeriesChart(analysisData, chartContainerId = "chart-area") {
  if (!Array.isArray(analysisData) || analysisData.length === 0) {
    console.warn("renderTimeSeriesChart: No analysis data provided.");
    return;
  }

  const container = document.getElementById(chartContainerId);
  if (!container) {
    console.error(`Container with id '${chartContainerId}' not found.`);
    return;
  }

  container.innerHTML = "";
  const canvas = document.createElement("canvas");
  canvas.setAttribute("role", "img");
  canvas.setAttribute("aria-label", "Δt-Zeitverlauf Diagramm");
  container.appendChild(canvas);

  const context = canvas.getContext("2d");
  const labels = analysisData.map(d => d.t_index_visible);
  const deltaTValues = analysisData.map(d => d.delta_t);

  const data = {
    labels,
    datasets: [
      {
        label: "Δt Werte",
        data: deltaTValues,
        borderColor: "#007acc",
        backgroundColor: "rgba(0,122,204,0.2)",
        pointBackgroundColor: highlightNegativeDeltaT(analysisData),
        fill: false,
        tension: 0.2
      }
    ]
  };

  const config = {
    type: "line",
    data,
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        tooltip: {
          callbacks: {
            label: context => {
              const { label, parsed } = context;
              return `t=${label}: Δt=${parsed}`;
            }
          }
        },
        legend: {
          display: true,
          labels: {
            color: "#222"
          }
        }
      },
      scales: {
        x: {
          title: {
            display: true,
            text: "Zeitindex"
          },
          ticks: {
            color: "#333"
          }
        },
        y: {
          title: {
            display: true,
            text: "Δt"
          },
          ticks: {
            color: "#333"
          }
        }
      }
    }
  };

  // Chart.js wird hier erwartet, global verfügbar zu sein (z. B. über <script>-Einbindung)
  if (typeof Chart === "undefined") {
    console.error("Chart.js not loaded. Please include Chart.js before rendering charts.");
    return;
  }

  new Chart(context, config);
}

/**
 * Hebt Δt < 0 Punkte visuell hervor.
 * @param {Array<Object>} analysisData - Analyse-Daten mit Δt-Werten.
 * @returns {string[]} Farben für jeden Datenpunkt.
 */
export function highlightNegativeDeltaT(analysisData) {
  if (!Array.isArray(analysisData)) {
    return [];
  }

  return analysisData.map(item => {
    if (typeof item.delta_t !== "number") return "#007acc";
    return item.delta_t < 0 ? "#e74c3c" : "#007acc";
  });
}