<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: 'doughnut',
          data: data,
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                display: true,
                position: 'bottom',
                labels: {
                  color: '#a6adbb',
                  font: {
                    size: 12,
                    family: "'Inter', sans-serif",
                  },
                  usePointStyle: true,
                  padding: 15,
                  generateLabels: (chart) => {
                    const datasets = chart.data.datasets;
                    return chart.data.labels!.map((label, i) => ({
                      text: `${label}: ${datasets[0].data[i]}${typeof datasets[0].data[i] === 'number' ? '%' : ''}`,
                      fillStyle: datasets[0].backgroundColor![i] as string,
                      hidden: false,
                      index: i
                    }));
                  }
                }
              },
              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,
                callbacks: {
                  label: function(context: any) {
                    return `${context.label}: ${context.parsed}%`;
                  }
                }
              }
            },
            animation: {
              duration: 1000,
              easing: 'easeInOutQuart'
            }
          }
        });
      }
    }
  });

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

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

<div style="height: {height}px;" class="flex items-center justify-center">
  <canvas bind:this={canvas}></canvas>
</div>

