<script lang="ts">
	import { onMount } from 'svelte';
	import confetti from 'canvas-confetti';
	import type { ConfettiConfig } from '../types';

	interface Props { config: ConfettiConfig; width: number; height: number; }
	let { config, width, height }: Props = $props();

	let canvasEl: HTMLCanvasElement;
	let myConfetti: confetti.CreateTypes | null = null;
	let intervalId: ReturnType<typeof setInterval>;

	function fireBurst() {
		if (!myConfetti) return;
		myConfetti({
			particleCount: config.particleCount, spread: config.spread,
			startVelocity: config.startVelocity, gravity: config.gravity,
			drift: config.drift, scalar: config.scalar, colors: config.colors,
			ticks: 200, origin: { x: 0.5, y: 0.5 }, disableForReducedMotion: false
		});
	}

	function fireContinuous() {
		if (!myConfetti) return;
		myConfetti({
			particleCount: Math.max(1, Math.floor(config.particleCount / 10)),
			spread: config.spread, startVelocity: config.startVelocity * 0.6,
			gravity: config.gravity, drift: config.drift, scalar: config.scalar,
			colors: config.colors, ticks: 300, origin: { x: Math.random(), y: -0.05 },
			disableForReducedMotion: false
		});
	}

	function fireFireworks() {
		if (!myConfetti) return;
		myConfetti({
			particleCount: config.particleCount, spread: 360,
			startVelocity: config.startVelocity, gravity: config.gravity * 0.8,
			drift: 0, scalar: config.scalar, colors: config.colors,
			ticks: 150, origin: { x: 0.2 + Math.random() * 0.6, y: 0.2 + Math.random() * 0.4 },
			disableForReducedMotion: false
		});
	}

	function fireSnow() {
		if (!myConfetti) return;
		myConfetti({
			particleCount: Math.max(1, Math.floor(config.particleCount / 8)),
			spread: 180, startVelocity: 2, gravity: config.gravity * 0.3,
			drift: config.drift, scalar: config.scalar * 0.8,
			colors: ['#ffffff', '#e0e0ff', '#d0d8ff'], ticks: 600,
			origin: { x: Math.random(), y: -0.05 }, shapes: ['circle'],
			disableForReducedMotion: false
		});
	}

	function startEffect() {
		stopEffect();
		if (!myConfetti || !config.enabled) return;
		switch (config.mode) {
			case 'burst': fireBurst(); break;
			case 'continuous': fireContinuous(); intervalId = setInterval(fireContinuous, 250); break;
			case 'fireworks': fireFireworks(); intervalId = setInterval(fireFireworks, 800); break;
			case 'snow': fireSnow(); intervalId = setInterval(fireSnow, 150); break;
		}
	}

	function stopEffect() { if (intervalId) clearInterval(intervalId); }

	$effect(() => {
		const _ = [config.enabled, config.mode, config.particleCount, config.spread, config.colors, config.gravity, config.drift, config.startVelocity, config.scalar];
		if (myConfetti && config.enabled) startEffect();
		else stopEffect();
	});

	onMount(() => {
		myConfetti = confetti.create(canvasEl, { resize: false, useWorker: false });
		if (config.enabled) startEffect();
		return () => { stopEffect(); if (myConfetti) myConfetti.reset(); };
	});
</script>

<canvas bind:this={canvasEl} {width} {height} style="position:absolute;inset:0;pointer-events:none;z-index:1;"></canvas>
