<script lang="ts">
	import { onMount, onDestroy } from 'svelte';
	import {
		Chart,
		BarController,
		BarElement,
		LinearScale,
		CategoryScale,
		Title,
		Tooltip,
		Legend,
		type ChartConfiguration
	} from 'chart.js';

	// Register Chart.js components
	Chart.register(BarController, BarElement, LinearScale, CategoryScale, Title, Tooltip, Legend);

	interface Props {
		data: {
			labels: string[];
			datasets: Array<{
				label: string;
				data: number[];
				backgroundColor?: string | string[];
				borderColor?: string | string[];
				borderWidth?: number;
			}>;
		};
		options?: Partial<ChartConfiguration<'bar'>['options']>;
		height?: number;
		horizontal?: boolean;
		class?: string;
	}

	let {
		data,
		options = {},
		height = 300,
		horizontal = false,
		class: className = ''
	}: Props = $props();

	let canvas: HTMLCanvasElement;
	let chart: Chart<'bar'> | null = null;

	// Convert Svelte 5 $state proxy to plain object for Chart.js compatibility
	// Using JSON parse/stringify to handle Svelte proxies that structuredClone can't handle
	const plainData = $derived(JSON.parse(JSON.stringify(data)));

	const defaultOptions: ChartConfiguration<'bar'>['options'] = {
		responsive: true,
		maintainAspectRatio: false,
		indexAxis: horizontal ? 'y' : 'x',
		plugins: {
			legend: {
				display: true,
				position: 'top',
				labels: {
					color: 'rgba(255, 255, 255, 0.7)',
					font: {
						family: 'Inter, system-ui, sans-serif',
						size: 12
					}
				}
			},
			tooltip: {
				backgroundColor: 'rgba(18, 18, 26, 0.95)',
				padding: 12,
				titleColor: '#fff',
				bodyColor: 'rgba(255, 255, 255, 0.8)',
				borderColor: 'rgba(0, 212, 255, 0.3)',
				borderWidth: 1
			}
		},
		scales: {
			x: {
				grid: {
					color: 'rgba(255, 255, 255, 0.05)'
				},
				ticks: {
					color: 'rgba(255, 255, 255, 0.5)',
					font: {
						size: 11
					}
				}
			},
			y: {
				grid: {
					color: 'rgba(255, 255, 255, 0.05)'
				},
				ticks: {
					color: 'rgba(255, 255, 255, 0.5)',
					font: {
						size: 11
					}
				}
			}
		}
	};

	onMount(() => {
		const ctx = canvas.getContext('2d');
		if (ctx) {
			chart = new Chart(ctx, {
				type: 'bar',
				data: plainData,
				options: { ...defaultOptions, ...options }
			});
		}
	});

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

	// Watch for data changes and update chart
	$effect(() => {
		if (chart && plainData) {
			chart.data = plainData;
			chart.options = { ...defaultOptions, ...options };
			chart.update();
		}
	});
</script>

<div class="relative w-full {className}" style="height: {height}px">
	<canvas bind:this={canvas}></canvas>
</div>
