<script lang="ts">
	import type { PageData } from './$types';

	let { data }: { data: PageData } = $props();

	type Notification = { id: string; title: string; message: string; link: string; read: boolean };

	let notifications = $state<Notification[]>(data.notifications);
	let filter = $state<'all' | 'unread'>('all');
	let busy = $state(false);

	const filtered = $derived(
		filter === 'unread' ? notifications.filter(n => !n.read) : notifications
	);
	const unreadCount = $derived(notifications.filter(n => !n.read).length);

	async function markRead(id: string) {
		await fetch('/api/notifications/' + id, { method: 'PATCH' }).catch(() => {});
		notifications = notifications.map(n => n.id === id ? { ...n, read: true } : n);
	}

	async function dismiss(id: string) {
		await fetch('/api/notifications/' + id, { method: 'DELETE' }).catch(() => {});
		notifications = notifications.filter(n => n.id !== id);
	}

	async function markAllRead() {
		busy = true;
		try {
			await fetch('/api/notifications?user_id=' + data.userId, { method: 'PATCH' });
			notifications = notifications.map(n => ({ ...n, read: true }));
		} finally { busy = false; }
	}

	async function clearAll() {
		if (!confirm('Clear all notifications?')) return;
		busy = true;
		try {
			await fetch('/api/notifications?user_id=' + data.userId, { method: 'DELETE' });
			notifications = [];
		} finally { busy = false; }
	}
</script>

<svelte:head>
	<title>Notifications — Admin</title>
</svelte:head>

<div class="max-w-2xl mx-auto px-4 py-8">
	<div class="flex items-center justify-between mb-6">
		<div>
			<h1 class="text-xl font-semibold">Notifications</h1>
			{#if unreadCount > 0}
				<p class="text-sm text-(--color-muted) mt-0.5">{unreadCount} unread</p>
			{/if}
		</div>
		<div class="flex gap-2">
			{#if unreadCount > 0}
				<button
					type="button"
					onclick={markAllRead}
					disabled={busy}
					class="text-sm px-3 py-1.5 rounded border border-(--color-border) text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors disabled:opacity-50"
				>Mark all read</button>
			{/if}
			{#if notifications.length > 0}
				<button
					type="button"
					onclick={clearAll}
					disabled={busy}
					class="text-sm px-3 py-1.5 rounded border border-(--color-border) text-red-400 hover:bg-(--color-surface-2) transition-colors disabled:opacity-50"
				>Clear all</button>
			{/if}
		</div>
	</div>

	<!-- Filter tabs -->
	<div class="flex gap-0 mb-4">
		<button
			type="button"
			onclick={() => filter = 'all'}
			class="text-sm px-4 py-1.5 rounded-l border border-(--color-border) transition-colors {filter === 'all' ? 'bg-(--color-brand) text-black border-(--color-brand) font-medium' : 'text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2)'}"
		>All ({notifications.length})</button>
		<button
			type="button"
			onclick={() => filter = 'unread'}
			class="text-sm px-4 py-1.5 rounded-r border border-l-0 border-(--color-border) transition-colors {filter === 'unread' ? 'bg-(--color-brand) text-black border-(--color-brand) font-medium' : 'text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2)'}"
		>Unread ({unreadCount})</button>
	</div>

	<!-- List -->
	{#if filtered.length === 0}
		<div class="py-16 text-center text-(--color-muted)">
			{filter === 'unread' ? 'No unread notifications' : 'No notifications'}
		</div>
	{:else}
		<div class="rounded-lg border border-(--color-border) overflow-hidden">
			{#each filtered as n (n.id)}
				<div class="flex items-start gap-2 border-b border-(--color-border)/40 last:border-b-0 hover:bg-(--color-surface-2) group transition-colors {n.read ? 'opacity-60' : ''}">
					<a
						href={n.link || '/admin'}
						onclick={() => markRead(n.id)}
						class="flex-1 p-4 min-w-0"
					>
						<div class="flex items-center gap-2">
							{#if !n.read}
								<span class="w-2 h-2 rounded-full bg-(--color-brand) shrink-0"></span>
							{/if}
							<span class="font-medium text-sm">{n.title}</span>
						</div>
						<p class="text-sm text-(--color-muted) mt-1">{n.message}</p>
					</a>
					<button
						type="button"
						onclick={() => dismiss(n.id)}
						class="shrink-0 p-3 text-(--color-muted) hover:text-red-400 opacity-0 group-hover:opacity-100 transition-all"
						title="Dismiss"
					>
						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
						</svg>
					</button>
				</div>
			{/each}
		</div>
	{/if}
</div>
