import { Chart, registerables } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';
import {AnnotationOptions} from 'chartjs-plugin-annotation';

// Register all Chart.js components
Chart.register(...registerables);
Chart.register(annotationPlugin);

const sampleData = `Time,Event,Temperature
0:00,Charge,
0:00,Temp,139
0:03,Temp,90
0:10,Temp,129
0:13,Temp,161
0:19,Temp,191
0:22,Yellow,
0:24,Temp,207
0:24,First Crack,
0:30,Temp,208
0:31,Drop,`;

const lines = sampleData.split('\n');
const data = lines.slice(1).map(line => {
  const [time, event, temp] = line.split(',');
  return { time, event, temp };
});

function parseTime(time: string): number {
  const [mins, secs] = time.split(':').map(Number);
  return mins * 60 + secs;
}

const tempData = data
  .filter(entry => entry.event === 'Temp')
  .map(entry => {
    const timeInSeconds = parseTime(entry.time);
    const temp = parseFloat(entry.temp);
    return { x: timeInSeconds, y: temp };
  });

const ctx = document.getElementById('myChart') as HTMLCanvasElement;
ctx.width = 800;
ctx.height = 400;

const annotationsArray: AnnotationOptions<'line'>[] = data
  .filter(entry => entry.event !== 'Temp')
  .map(entry => {
    const timeInSeconds = parseTime(entry.time);
    return {
      type: 'line',
      mode: 'vertical',
      scaleID: 'x',
      value: timeInSeconds,
      borderColor: 'red',
      borderWidth: 2,
      label: {
        content: entry.event,
        enabled: true,
        position: 'center', // Use a valid predefined position
        yAdjust: -10
      }
    };
  });

// Your Chart.js configuration remains the same:
new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'Temperature (°C)',
      data: tempData,
      borderColor: 'blue',
      fill: false,
      pointRadius: 5,
      pointBackgroundColor: 'blue'
    }]
  },
  options: {
    responsive: true,
    scales: {
      x: {
        type: 'linear',
        position: 'bottom',
        ticks: {
          callback: function(value) {
            const mins = Math.floor(Number(value) / 60);
            const secs = Number(value) % 60;
            return `${mins}:${secs.toString().padStart(2, '0')}`;
          }
        },
        min: 0,
        max: 31
      },
      y: {
        title: {
          display: true,
          text: 'Temperature (°C)'
        }
      }
    },
    plugins: { // Correctly nested as per the previous answer
      annotation: {
        annotations: annotationsArray
      }
    }
  }
});