<script lang="ts">
	import { goto } from '$app/navigation';
	import { currentCollective } from '$lib/stores/collective';
	import { currentUser } from '$lib/stores/auth';
	import {
		taskLists,
		taskListsLoading,
		loadTaskLists,
		createTaskList,
		deleteTaskList
	} from '$lib/stores/tasks';
	import { CheckSquare, Plus, Trash2 } from 'lucide-svelte';
	import * as m from '$lib/paraglide/messages';
	import ScreenMasthead from '$lib/components/ScreenMasthead.svelte';

	let creating = $state(false);

	$effect(() => {
		if ($currentCollective) {
			loadTaskLists($currentCollective.id);
		}
	});

	// 5s polling per analysis §6
	$effect(() => {
		if (!$currentCollective) return;
		const id = setInterval(() => {
			if ($currentCollective) loadTaskLists($currentCollective.id);
		}, 5_000);
		return () => clearInterval(id);
	});

	// Matches the /notes + /lists flow: masthead button creates an empty list
	// and sends the user to the detail view where the name is set inline.
	async function handleCreate() {
		if (!$currentCollective || !$currentUser || creating) return;
		creating = true;
		const created = await createTaskList($currentCollective.id, '', $currentUser.id);
		creating = false;
		if (created) await goto(`/tasks/${created.id}`);
	}

	async function handleDelete(id: string) {
		if (!confirm(m.tasks_delete_list_confirm())) return;
		await deleteTaskList(id);
	}
</script>

<svelte:head><title>{m.tasks_title()} — Colectivo</title></svelte:head>

<div class="flex h-full flex-col overflow-hidden">
	<ScreenMasthead label={m.masthead_tasks_label()} title={m.tasks_title()}>
		{#snippet actions()}
			<button
				type="button"
				onclick={handleCreate}
				disabled={creating || !$currentCollective}
				class="ml-1 inline-flex items-center gap-1 rounded-md bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-60 dark:bg-slate-100 dark:text-slate-900"
			>
				<Plus size={14} strokeWidth={2} />
				{m.tasks_new_list()}
			</button>
		{/snippet}
	</ScreenMasthead>

	<div class="flex-1 overflow-y-auto px-4 py-4 md:px-6 md:py-6">
		{#if $taskListsLoading && $taskLists.length === 0}
			<p class="text-sm text-text-secondary">{m.loading()}</p>
		{:else if $taskLists.length === 0}
			<div class="rounded-lg border border-dashed border-black/10 p-12 text-center dark:border-white/10">
				<p class="text-sm font-medium text-text-primary">{m.tasks_no_lists()}</p>
				<p class="mt-1 text-sm text-text-secondary">{m.tasks_create_first()}</p>
			</div>
		{:else}
			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
				{#each $taskLists as list (list.id)}
					<div class="group relative rounded-lg bg-surface-raised p-4 shadow-sm transition-shadow hover:shadow-md">
						<a href={`/tasks/${list.id}`} class="block">
							<h3 class="text-base font-semibold text-text-primary">{list.name}</h3>
						</a>
						<button
							type="button"
							class="absolute right-3 top-3 rounded p-1 text-text-secondary opacity-0 transition-opacity hover:bg-black/5 group-hover:opacity-100 dark:hover:bg-white/5"
							aria-label={m.tasks_delete_list()}
							onclick={() => handleDelete(list.id)}
						>
							<Trash2 size={14} strokeWidth={1.5} />
						</button>
					</div>
				{/each}
			</div>
		{/if}
	</div>

</div>
