const socket = io();
const containerName = window.location.pathname.split('/').pop();

// Chart.js setup for CPU
const cpuCtx = document.getElementById('cpuChart').getContext('2d');
const cpuChart = new Chart(cpuCtx, {
  type: 'line',
  data: {
    labels: [],
    datasets: [{
      label: 'CPU Usage (%)',
      borderColor: 'rgba(255, 99, 132, 1)',
      data: [],
      fill: false,
      tension: 0.1
    }]
  },
  options: {
    scales: {
      x: {
        title: {
          display: true,
          text: 'Time',
          color: 'white',
        },
      },
      y: {
        title: {
          display: true,
          text: 'CPU Usage (%)',
          color: 'white',
        },
        ticks: {
          color: 'white',
        }
      },
    },
    plugins: {
      legend: {
        labels: {
          color: 'white',
        },
      },
    },
  }
});

// Chart.js setup for Memory
const memoryCtx = document.getElementById('memoryChart').getContext('2d');
const memoryChart = new Chart(memoryCtx, {
  type: 'line',
  data: {
    labels: [],
    datasets: [{
      label: 'Memory Usage (MB)',
      borderColor: 'rgba(54, 162, 235, 1)',
      data: [],
      fill: false,
      tension: 0.1
    }]
  },
  options: {
    scales: {
      x: {
        title: {
          display: true,
          text: 'Time',
          color: 'white',
        },
      },
      y: {
        title: {
          display: true,
          text: 'Memory Usage (MB)',
          color: 'white',
        },
        ticks: {
          color: 'white',
        }
      },
    },
    plugins: {
      legend: {
        labels: {
          color: 'white',
        },
      },
    },
  }
});

// Chart.js setup for Network
const networkCtx = document.getElementById('networkChart').getContext('2d');
const networkChart = new Chart(networkCtx, {
  type: 'line',
  data: {
    labels: [],
    datasets: [{
      label: 'Network Usage (KB)',
      borderColor: 'rgba(75, 192, 192, 1)',
      data: [],
      fill: false,
      tension: 0.1
    }]
  },
  options: {
    scales: {
      x: {
        title: {
          display: true,
          text: 'Time',
          color: 'white',
        },
      },
      y: {
        title: {
          display: true,
          text: 'Network Usage (KB)',
          color: 'white',
        },
        ticks: {
          color: 'white',
        }
      },
    },
    plugins: {
      legend: {
        labels: {
          color: 'white',
        },
      },
    },
  }
});

// Start live updates
socket.emit('startLive', containerName);

// Listen for updates from the server
socket.on('updateStats', (stats) => {
  updateChart(cpuChart, stats.time, stats.cpu);
  updateChart(memoryChart, stats.time, stats.memory);
  updateChart(networkChart, stats.time, stats.network);
});

// Helper function to update the chart
function updateChart(chart, label, data) {
  chart.data.labels.push(label);
  chart.data.datasets[0].data.push(data);

  if (chart.data.labels.length > 30) {
    chart.data.labels.shift();
    chart.data.datasets[0].data.shift();
  }

  chart.update();
}