<script lang="ts">
	import type { GaugeData } from '$lib/server/integrations/types.js';

	interface Props {
		data: GaugeData;
	}

	let { data }: Props = $props();

	const percentage = $derived(data.max > 0 ? Math.min((data.value / data.max) * 100, 100) : 0);

	const color = $derived.by(() => {
		const warn = data.thresholds?.warning ?? 60;
		const crit = data.thresholds?.critical ?? 85;
		if (percentage >= crit) return '#ef4444'; // red
		if (percentage >= warn) return '#eab308'; // yellow
		return '#22c55e'; // green
	});

	// SVG circle math
	const radius = 40;
	const circumference = 2 * Math.PI * radius;
	const strokeDashoffset = $derived(circumference - (percentage / 100) * circumference);
</script>

<div class="flex flex-col items-center justify-center gap-2 p-3">
	<div class="relative h-24 w-24">
		<svg viewBox="0 0 100 100" class="h-full w-full -rotate-90">
			<circle cx="50" cy="50" r={radius} fill="none" stroke="currentColor" stroke-width="8" class="text-muted/20" />
			<circle
				cx="50" cy="50" r={radius} fill="none"
				stroke={color} stroke-width="8"
				stroke-linecap="round"
				stroke-dasharray={circumference}
				stroke-dashoffset={strokeDashoffset}
				class="transition-all duration-700 ease-out"
			/>
		</svg>
		<div class="absolute inset-0 flex flex-col items-center justify-center">
			<span class="text-lg font-bold text-foreground">{Math.round(percentage)}%</span>
		</div>
	</div>
	<div class="text-center">
		<span class="text-sm font-medium text-muted-foreground">{data.label}</span>
		<span class="block text-xs text-muted-foreground/70">{data.value}{data.unit} / {data.max}{data.unit}</span>
	</div>
</div>
