<script lang="ts">
	import { goto } from '$app/navigation';
	import { page } from '$app/state';
	import { preferences } from '$lib/stores/preferences.svelte';
	import { get } from 'svelte/store';

	let showCompleted = $state(false);

	// Initialize and sync with URL on mount
	$effect(() => {
		if (typeof window !== 'undefined') {
			showCompleted = get(preferences).showCompleted;
		}
	});

	function handleChange(e: Event) {
		const target = e.target as HTMLInputElement;
		showCompleted = target.checked;

		// Update preference store
		preferences.update((p) => ({ ...p, showCompleted }));

		// Update URL to refresh data from server
		const url = new URL(page.url);
		if (showCompleted) {
			url.searchParams.set('showCompleted', 'true');
		} else {
			url.searchParams.delete('showCompleted');
		}
		goto(url.toString(), { invalidateAll: true });
	}
</script>

<label class="flex items-center gap-2 text-sm text-gray-600 cursor-pointer select-none">
	<input
		type="checkbox"
		checked={showCompleted}
		onchange={handleChange}
		class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
	/>
	Show completed
</label>
