document.addEventListener('DOMContentLoaded', function() {
  // Load Google Charts
  google.charts.load('current', {'packages':['gauge']});
  google.charts.setOnLoadCallback(drawGauges);

  // Draw all gauges on the page
  function drawGauges() {
    const gaugeContainers = document.querySelectorAll('.gauge-container');
    
    gaugeContainers.forEach(container => {
      const label = container.dataset.label;
      const score = parseFloat(container.dataset.score);
      
      // Create data table
      const data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        [label, score]
      ]);

      // Configure gauge options
      const options = {
        width: 200,
        height: 160,
        redFrom: -100,
        redTo: 0,
        greenFrom: 0,
        greenTo: 100,
        minorTicks: 5,
        min: -100,
        max: 100,
        majorTicks: [-100, -50, 0, 50, 100],
        animation: {
          duration: 500,
          easing: 'out'
        }
      };

      // Remove yellow region
      delete options.yellowFrom;
      delete options.yellowTo;

      // Create and draw the gauge
      const chart = new google.visualization.Gauge(container);
      chart.draw(data, options);
    });
  }

  // Re-draw gauges when window is resized
  window.addEventListener('resize', function() {
    if (typeof google !== 'undefined' && google.visualization) {
      drawGauges();
    }
  });
});