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

	let { data } = $props();

	// Sync URL with preference on mount (client-side only)
	$effect(() => {
		if (typeof window !== 'undefined') {
			const urlShowCompleted = page.url.searchParams.get('showCompleted') === 'true';
			const prefShowCompleted = get(preferences).showCompleted;

			// Only sync if different and not already matching
			if (urlShowCompleted !== prefShowCompleted) {
				const url = new URL(page.url);
				if (prefShowCompleted) {
					url.searchParams.set('showCompleted', 'true');
				} else {
					url.searchParams.delete('showCompleted');
				}
				goto(url.toString(), { replaceState: true, invalidateAll: true });
			}
		}
	});
</script>

<svelte:head>
	<title>TaskPlaner</title>
</svelte:head>

<main class="min-h-screen bg-gray-50 pb-40">
	<header class="bg-white border-b border-gray-200 sticky top-0 z-10">
		<div class="max-w-2xl mx-auto px-4 py-4 flex items-center justify-between">
			<h1 class="text-xl font-bold text-gray-900">TaskPlaner</h1>
			<CompletedToggle />
		</div>
	</header>

	<div class="max-w-2xl mx-auto px-4 py-4">
		<EntryList entries={data.entries} availableTags={data.allTags} />
	</div>

	<QuickCapture />
</main>
