<script lang="ts">
	import { theme } from '$lib/stores/theme.svelte.js';

	interface Blob {
		x: number;
		y: number;
		vx: number;
		vy: number;
		hueOffset: number;
		size: number;
	}

	const blobCount = 4;
	let blobs = $state<Blob[]>([]);
	let animFrame: number;

	function initBlobs(): Blob[] {
		return Array.from({ length: blobCount }, (_, i) => ({
			x: 20 + Math.random() * 60,
			y: 20 + Math.random() * 60,
			vx: (Math.random() - 0.5) * 0.02,
			vy: (Math.random() - 0.5) * 0.02,
			hueOffset: i * 40,
			size: 35 + Math.random() * 20
		}));
	}

	function animate() {
		blobs = blobs.map((blob) => {
			let { x, y, vx, vy } = blob;
			x += vx;
			y += vy;

			if (x < 5 || x > 95) vx = -vx;
			if (y < 5 || y > 95) vy = -vy;

			return { ...blob, x, y, vx, vy };
		});

		animFrame = requestAnimationFrame(animate);
	}

	$effect(() => {
		blobs = initBlobs();
		animFrame = requestAnimationFrame(animate);

		return () => {
			cancelAnimationFrame(animFrame);
		};
	});
</script>

<div class="absolute inset-0">
	<svg class="h-full w-full" xmlns="http://www.w3.org/2000/svg">
		<defs>
			<filter id="mesh-blur">
				<feGaussianBlur stdDeviation="60" />
			</filter>
		</defs>

		{#each blobs as blob (blob.hueOffset)}
			<circle
				cx="{blob.x}%"
				cy="{blob.y}%"
				r="{blob.size}%"
				fill="hsla({theme.primaryHue + blob.hueOffset}, {theme.primarySaturation}%, {theme.isDark ? 40 : 60}%, 0.12)"
				filter="url(#mesh-blur)"
			/>
		{/each}
	</svg>
</div>
