document.getElementById('saveSettings').addEventListener('click', function() {
  const hours = document.getElementById('timeLimitHours').value;
  const minutes = document.getElementById('timeLimitMinutes').value;

  const timeLimitInSeconds = (parseInt(hours) * 60 * 60) + (parseInt(minutes) * 60);

  chrome.storage.local.set({ timeLimit: timeLimitInSeconds }, function() {
    alert('Temps limite mis à jour !');
  });
});

// Fonction pour afficher le diagramme
function displayPieChart(data) {
  const ctx = document.getElementById('socialMediaChart').getContext('2d');
  new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ['Facebook', 'Twitter', 'Instagram'], // Noms des réseaux sociaux
      datasets: [{
        label: 'Temps passé (en secondes)',
        data: [data.facebook, data.twitter, data.instagram], // Temps passé sur chaque réseau
        backgroundColor: ['#3b5998', '#1DA1F2', '#E1306C'], // Couleurs personnalisées
        hoverOffset: 4
      }]
    }
  });
}

// Simuler la récupération des données sur le temps passé (tu devrais les récupérer depuis chrome.storage.local)
chrome.storage.local.get(['timeSpentFacebook', 'timeSpentTwitter', 'timeSpentInstagram'], function(data) {
  const timeSpentData = {
    facebook: data.timeSpentFacebook || 0,
    twitter: data.timeSpentTwitter || 0,
    instagram: data.timeSpentInstagram || 0
  };

  displayPieChart(timeSpentData);
});