let typ = document.getElementById("type").dataset.value;
let computer = document.getElementById("computer").dataset.value;

async function fetchAndDisplayData() {
  try {
    const response = await fetch(`z_data_${typ}.php?c=${computer}`);
    const jsonData = await response.json();
    const data = jsonData.data || jsonData; // Utilisation plus robuste

    const cpuKey = Object.keys(data).find(key => key.includes('CPU'));
    const ramKey = Object.keys(data).find(key => key.includes('Memory'));

    // Utilisation d'un Set pour collecter les labels uniques plus efficacement
    const uniqueLabels = new Set();
    if (cpuKey && data[cpuKey]) {
      data[cpuKey].forEach(point => uniqueLabels.add(point.datetime));
    }
    if (ramKey && data[ramKey]) {
      data[ramKey].forEach(point => uniqueLabels.add(point.datetime));
    }
    const labels = Array.from(uniqueLabels).sort(); // Conversion en Array et tri

    // Fonction pour créer une map de données
    const createDataMap = (key, rawData) => {
      const map = {};
      if (key && rawData[key]) {
        rawData[key].forEach(point => {
          map[point.datetime] = parseFloat(point.avg_value);
        });
      }
      return map;
    };

    const cpuDataMap = createDataMap(cpuKey, data);
    const ramDataMap = createDataMap(ramKey, data);

    // Fonction pour générer les données du graphique
    const getChartData = (map, sortedLabels) => sortedLabels.map(label => map[label] ?? null);

    const cpuChartData = getChartData(cpuDataMap, labels);
    const ramChartData = getChartData(ramDataMap, labels);

    // Formatage des labels pour l'axe X
    const formattedLabels = labels.map(label => {
      const date = new Date(label);
      return !isNaN(date)
        ? date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
        : 'Invalid Date';
    });

    // *** Fonction pour créer un graphique (adaptée pour v2.x) ***
    const createChartV2 = (canvasId, label, chartData, formattedLabels) => {
      const ctx = document.getElementById(canvasId)?.getContext('2d');
      if (!ctx) {
        console.error(`Canvas element with id "${canvasId}" not found.`);
        return null;
      }
      return new Chart(ctx, {
        type: 'line',
        data: {
          labels: formattedLabels,
          datasets: [{
            label: label, // Garde le label pour l'infobulle
            data: chartData,
            borderColor: 'rgb(54, 162, 235)',
            backgroundColor: 'rgba(54, 162, 235, 0.1)',
            fill: true,
            tension: 0.3,
            pointRadius: 0
          }]
        },
        options: {
          legend: {
             display: false // Cacher la légende en v2
          },
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            yAxes: [{ // *** Utilisation de yAxes (tableau) pour v2.x ***
              ticks: {
                beginAtZero: true,
                // Ajout de la fonction callback pour formater les labels de l'axe Y
                callback: function(value, index, values) { // Note: le 3ème argument est 'values' en v2
                  return value + '%'; // Ajoute le symbole %
                }
                // max: 100, // Optionnel mais recommandé pour les pourcentages
                // stepSize: 5 // Optionnel: pour suggérer un intervalle
              }
              // scaleLabel: { // Si vous vouliez un titre d'axe en v2 (ce que vous ne voulez pas)
              //   display: false,
              //   labelString: 'Utilisation (%)'
              // }
            }],
            xAxes: [{ // *** xAxes doit aussi être dans un tableau en v2.x ***
              // ... autres options pour l'axe X si nécessaire ...
            }]
          },
          tooltips: { // *** 'tooltips' au pluriel en v2.x ***
             callbacks: {
                 label: function(tooltipItem, data) { // Arguments différents en v2
                     let label = data.datasets[tooltipItem.datasetIndex].label || '';
                     if (label) {
                         label += ': ';
                     }
                     // tooltipItem.yLabel contient la valeur numérique en v2
                     if (tooltipItem.yLabel !== null && typeof tooltipItem.yLabel !== 'undefined') {
                         label += tooltipItem.yLabel + '%';
                     }
                     return label;
                 }
             }
          }
        }
      });
    };

    // Création des graphiques en utilisant la fonction adaptée pour v2.x
    if (cpuKey && data[cpuKey]?.length > 0) {
      createChartV2('cpuChart', 'CPU (%)', cpuChartData, formattedLabels);
    } else {
      const cpuChartElement = document.getElementById('cpuChart');
      if (cpuChartElement) cpuChartElement.style.display = 'none';
      console.log("Pas de données CPU à afficher.");
    }

    if (ramKey && data[ramKey]?.length > 0) {
      createChartV2('ramChart', 'Memory (%)', ramChartData, formattedLabels);
    } else {
      const ramChartElement = document.getElementById('ramChart');
      if (ramChartElement) ramChartElement.style.display = 'none';
      console.log("Pas de données RAM à afficher.");
    }

  } catch (error) {
    console.error('Erreur lors de la récupération ou de l\'affichage des données:', error);
  }
}

window.addEventListener('load', fetchAndDisplayData);