<script lang="ts">
  import { onMount, onDestroy } from 'svelte';
  import { Chart, registerables } from 'chart.js';

  Chart.register(...registerables);

  type Props = {
    data: any;
    title?: string;
    height?: number;
  };

  let { data, title = '', height = 300 }: Props = $props();
  
  let canvas: HTMLCanvasElement;
  let chart: Chart | null = null;

  onMount(() => {
    if (canvas) {
      const ctx = canvas.getContext('2d');
      if (ctx) {
        chart = new Chart(ctx, {
          type: 'line',
          data: data,
          options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
              mode: 'nearest',
              axis: 'x',
              intersect: false
            },
            plugins: {
              legend: {
                display: true,
                position: 'top',
                labels: {
                  color: '#a6adbb',
                  font: {
                    size: 12,
                    family: "'Inter', sans-serif",
                  },
                  usePointStyle: true,
                  padding: 15,
                }
              },
              title: {
                display: !!title,
                text: title,
                color: '#e5e7eb',
                font: {
                  size: 16,
                  weight: 'bold',
                  family: "'Inter', sans-serif",
                }
              },
              tooltip: {
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                titleColor: '#fff',
                bodyColor: '#fff',
                borderColor: '#570df8',
                borderWidth: 1,
                padding: 12,
              }
            },
            scales: {
              x: {
                grid: {
                  color: 'rgba(255, 255, 255, 0.05)',
                },
                ticks: {
                  color: '#a6adbb',
                  font: {
                    size: 11,
                  }
                }
              },
              y: {
                beginAtZero: true,
                stacked: true,
                grid: {
                  color: 'rgba(255, 255, 255, 0.05)',
                },
                ticks: {
                  color: '#a6adbb',
                  font: {
                    size: 11,
                  }
                }
              }
            },
            elements: {
              line: {
                tension: 0.4,
                fill: true
              }
            },
            animation: {
              duration: 750,
              easing: 'easeInOutQuart'
            }
          }
        });
      }
    }
  });

  $effect(() => {
    if (chart && data) {
      chart.data = data;
      chart.update('none');
    }
  });

  onDestroy(() => {
    if (chart) {
      chart.destroy();
    }
  });
</script>

<div style="height: {height}px;">
  <canvas bind:this={canvas}></canvas>
</div>

