<script lang="ts">
	import { goto } from '$app/navigation';
	import { currentCollective } from '$lib/stores/collective';
	import { currentUser } from '$lib/stores/auth';
	import { notes, notesLoading, loadNotes, createNote } from '$lib/stores/notes';
	import { FileText, Plus, Archive, Trash2 } from 'lucide-svelte';
	import * as m from '$lib/paraglide/messages';
	import ScreenMasthead from '$lib/components/ScreenMasthead.svelte';

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

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

	const pinned = $derived($notes.filter((n) => n.is_pinned));
	const others = $derived($notes.filter((n) => !n.is_pinned));

	async function handleCreate() {
		if (!$currentCollective || !$currentUser) return;
		const created = await createNote($currentCollective.id, $currentUser.id);
		if (created) goto(`/notes/${created.id}`);
	}

	function colorClass(color: string | null): string {
		switch (color) {
			case 'yellow':
				return 'bg-yellow-100 dark:bg-yellow-900/30';
			case 'green':
				return 'bg-emerald-100 dark:bg-emerald-900/30';
			case 'blue':
				return 'bg-sky-100 dark:bg-sky-900/30';
			case 'pink':
				return 'bg-pink-100 dark:bg-pink-900/30';
			case 'purple':
				return 'bg-purple-100 dark:bg-purple-900/30';
			case 'orange':
				return 'bg-orange-100 dark:bg-orange-900/30';
			case 'gray':
				return 'bg-slate-100 dark:bg-slate-800/50';
			case 'red':
				return 'bg-red-100 dark:bg-red-900/30';
			default:
				return 'bg-surface-raised';
		}
	}
</script>

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

<div class="flex h-full flex-col overflow-hidden">
	<ScreenMasthead label={m.masthead_notes_label()} title={m.notes_title()}>
		{#snippet actions()}
			<a
				href="/notes/archive"
				class="rounded p-1.5 text-text-secondary hover:bg-black/5 dark:hover:bg-white/5"
				aria-label={m.notes_archive_view()}
				title={m.notes_archive_view()}
			>
				<Archive size={16} strokeWidth={1.5} />
			</a>
			<a
				href="/notes/trash"
				class="rounded p-1.5 text-text-secondary hover:bg-black/5 dark:hover:bg-white/5"
				aria-label={m.notes_trash_view()}
				title={m.notes_trash_view()}
			>
				<Trash2 size={16} strokeWidth={1.5} />
			</a>
			<button
				type="button"
				onclick={handleCreate}
				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 dark:bg-slate-100 dark:text-slate-900"
			>
				<Plus size={14} strokeWidth={2} />
				{m.notes_new()}
			</button>
		{/snippet}
	</ScreenMasthead>

	<div class="flex-1 overflow-y-auto px-4 py-4 md:px-6 md:py-6">
		{#if $notesLoading && $notes.length === 0}
			<p class="text-sm text-text-secondary">{m.loading()}</p>
		{:else if $notes.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.notes_empty_board()}</p>
				<p class="mt-1 text-sm text-text-secondary">{m.notes_empty_board_hint()}</p>
			</div>
		{:else}
			{#if pinned.length > 0}
				<section data-testid="notes-pinned" class="mb-8">
					<h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-text-secondary">
						{m.notes_pinned_section()}
					</h2>
					<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
						{#each pinned as note (note.id)}
							<a
								href={`/notes/${note.id}`}
								data-testid="note-card"
								class={`block rounded-lg p-4 shadow-sm transition-shadow hover:shadow-md ${colorClass(note.color)}`}
							>
								{#if note.title}
									<h3 class="mb-1 text-sm font-semibold text-text-primary">{note.title}</h3>
								{/if}
								<p class="line-clamp-6 whitespace-pre-wrap text-sm text-text-secondary">
									{note.content}
								</p>
							</a>
						{/each}
					</div>
				</section>
			{/if}

			{#if others.length > 0}
				<section data-testid="notes-active">
					{#if pinned.length > 0}
						<h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-text-secondary">
							{m.notes_active_section()}
						</h2>
					{/if}
					<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
						{#each others as note (note.id)}
							<a
								href={`/notes/${note.id}`}
								data-testid="note-card"
								class={`block rounded-lg p-4 shadow-sm transition-shadow hover:shadow-md ${colorClass(note.color)}`}
							>
								{#if note.title}
									<h3 class="mb-1 text-sm font-semibold text-text-primary">{note.title}</h3>
								{/if}
								<p class="line-clamp-6 whitespace-pre-wrap text-sm text-text-secondary">
									{note.content}
								</p>
							</a>
						{/each}
					</div>
				</section>
			{/if}
		{/if}
	</div>
</div>
