(function ($, Drupal, drupalSettings) {
  Drupal.behaviors.apiMonitorCharts = {
    attach: function (context, settings) {
      if (context !== document) {
        return;
      }

      Drupal.behaviors.apiMonitorCharts.responseTimeChart();
      Drupal.behaviors.apiMonitorCharts.historyChart();
    },
    responseTimeChart: function () {
      new Chart(document.getElementById('apiResponseChart'), {
        type: 'line',
        data: {
          labels: drupalSettings.apiMonitorData.labels,
          datasets: [{
            label: 'Response Time (ms)',
            data: drupalSettings.apiMonitorData.values,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1,
            fill: true
          }]
        },
        options: {
          responsive: true,
          scales: {
            y: { beginAtZero: true }
          }
        }
      });
    },
    historyChart: function () {
      new Chart(document.getElementById('apiHistoryChart'), {
        type: 'line',
        data: {
          labels: drupalSettings.apiMonitorData.labels,
          datasets: [{
            label: drupalSettings.apiMonitorData.labels,
            data: drupalSettings.apiMonitorData.values,
            borderColor: '#0071b3', // Blu Drupal
            backgroundColor: 'rgba(0, 113, 179, 0.1)',
            borderWidth: 2,
            pointRadius: 3,
            fill: true,
            tension: 0.3 // Rende la linea curva e morbida
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: { display: true },
            tooltip: {
              mode: 'index',
              intersect: false,
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              title: {
                display: true,
                text: 'Millisecondi (ms)'
              }
            },
            x: {
              title: {
                display: true,
                text: 'Orario (Ultime 72h)'
              }
            }
          }
        }
      });
    }
  };
})(jQuery, Drupal, drupalSettings);
