document.addEventListener('DOMContentLoaded', function () {
  var ctx = document.getElementById('espectroCanvas').getContext('2d');
  var temperaturaValor = document.getElementById('temperaturaValor');
  var temperaturaSlider = document.getElementById('temperaturaSlider');

  var espectroChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['Rojo', 'Verde', 'Azul'],
      datasets: [{
        label: 'Intensidad',
        data: [0, 0, 0], // Valores iniciales
        backgroundColor: 'transparent',
        borderColor: 'rgb(75, 192, 192)',
        borderWidth: 2
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

  temperaturaSlider.addEventListener('input', function () {
    temperaturaValor.innerText = temperaturaSlider.value + 'K';
    var temperatura = parseInt(temperaturaSlider.value);

    // Actualiza el gráfico basado en la temperatura
    espectroChart.data.datasets[0].data = calcularEspectro(temperatura);
    espectroChart.update();
  });

  function calcularEspectro(temperatura) {
    // Esta es una simplificación. Deberías reemplazar esta lógica con cálculos
    // basados en datos reales o una aproximación científica.
    var rojo = temperatura > 5000 ? 100 - ((temperatura - 5000) / 50) : 100;
    var verde = temperatura < 5000 ? (temperatura - 1000) / 40 : 100 - ((temperatura - 5000) / 50);
    var azul = temperatura < 4000 ? 0 : (temperatura - 4000) / 60;
    return [Math.min(rojo, 100), Math.min(verde, 100), Math.min(azul, 100)];
  }

  // Inicializar con el valor actual
  temperaturaSlider.dispatchEvent(new Event('input'));
});