<script lang="ts">
	import { onMount } from 'svelte';
	import { api } from '$lib/api';
	import PageHeader from '$lib/components/PageHeader.svelte';
	import Card from '$lib/components/Card.svelte';

	let status = $state<any>(null);

	onMount(async () => {
		try { status = await api('/status'); } catch { /* ignore */ }
	});
</script>

<PageHeader title="Dashboard" description="Overview of your Immich Watcher setup" />

{#if status}
	<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
		<Card>
			<p class="text-sm text-[var(--color-muted-foreground)]">Servers</p>
			<p class="text-3xl font-semibold mt-1">{status.servers}</p>
		</Card>
		<Card>
			<p class="text-sm text-[var(--color-muted-foreground)]">Active Trackers</p>
			<p class="text-3xl font-semibold mt-1">{status.trackers.active}<span class="text-base font-normal text-[var(--color-muted-foreground)]"> / {status.trackers.total}</span></p>
		</Card>
		<Card>
			<p class="text-sm text-[var(--color-muted-foreground)]">Targets</p>
			<p class="text-3xl font-semibold mt-1">{status.targets}</p>
		</Card>
	</div>

	<h3 class="text-lg font-medium mb-3">Recent Events</h3>
	{#if status.recent_events.length === 0}
		<Card>
			<p class="text-sm text-[var(--color-muted-foreground)]">No events yet. Create a tracker to start monitoring albums.</p>
		</Card>
	{:else}
		<Card>
			<div class="divide-y divide-[var(--color-border)]">
				{#each status.recent_events as event}
					<div class="py-3 first:pt-0 last:pb-0">
						<div class="flex items-center justify-between">
							<div>
								<span class="text-sm font-medium">{event.album_name}</span>
								<span class="text-xs ml-2 px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{event.event_type}</span>
							</div>
							<span class="text-xs text-[var(--color-muted-foreground)]">{new Date(event.created_at).toLocaleString()}</span>
						</div>
					</div>
				{/each}
			</div>
		</Card>
	{/if}
{:else}
	<p class="text-sm text-[var(--color-muted-foreground)]">Loading...</p>
{/if}
