<script lang="ts">
	import type { PageData } from './$types';
	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
	import { getEventTypeLabel } from '$lib/data/eventTypes';
	import { formatDistanceToNow } from 'date-fns';
	import { goto } from '$app/navigation';

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

	let events = $derived(data.events?.data?.events ?? []);

	function formatEventTime(dateStr: string): string {
		try {
			return formatDistanceToNow(new Date(dateStr), { addSuffix: true });
		} catch {
			return dateStr;
		}
	}

	function handleRowClick(eventId: string) {
		goto(`/admin/events/${eventId}`);
	}
</script>

<svelte:head>
	<title>Event Log - Admin - Nexus</title>
</svelte:head>

<div class="py-8">
	<ContentContainer>
		<div class="mb-8">
			<div class="flex items-start gap-4">
				<a
					href="/admin"
					class="rounded-lg p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
					aria-label="Go back"
				>
					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M15 19l-7-7 7-7"
						/>
					</svg>
				</a>
				<div>
					<h1 class="text-2xl font-bold text-purple-600 md:text-3xl dark:text-purple-400">
						Event Log
					</h1>
					<p class="mt-2 text-theme-secondary">
						View system events that may trigger notifications.
					</p>
				</div>
			</div>
		</div>

		<div class="mb-4">
			<p class="text-sm text-theme-muted">
				Showing the last {events.length} events.
			</p>
		</div>

		{#if events.length > 0}
			<div class="overflow-hidden rounded-lg border border-theme">
				<table class="w-full">
					<thead class="bg-black/5 dark:bg-white/5">
						<tr>
							<th
								class="px-4 py-3 text-left text-xs font-semibold tracking-wider text-theme-muted uppercase"
							>
								Event Type
							</th>
							<th
								class="px-4 py-3 text-left text-xs font-semibold tracking-wider text-theme-muted uppercase"
							>
								Entity
							</th>
							<th
								class="hidden px-4 py-3 text-left text-xs font-semibold tracking-wider text-theme-muted uppercase sm:table-cell"
							>
								Triggered By
							</th>
							<th
								class="px-4 py-3 text-right text-xs font-semibold tracking-wider text-theme-muted uppercase"
							>
								Time
							</th>
						</tr>
					</thead>
					<tbody class="divide-theme divide-y">
						{#each events as event (event.id)}
							<tr
								class="cursor-pointer hover:bg-black/5 dark:hover:bg-white/5"
								onclick={() => handleRowClick(event.id)}
								onkeydown={(e) => e.key === 'Enter' && handleRowClick(event.id)}
								tabindex="0"
								role="button"
							>
								<td class="px-4 py-3">
									<span
										class="inline-flex rounded-full bg-purple-500/10 px-2 py-0.5 text-xs font-medium text-purple-600 dark:text-purple-400"
									>
										{getEventTypeLabel(event.eventType)}
									</span>
								</td>
								<td class="px-4 py-3">
									<span class="text-sm text-theme">{event.entityType}</span>
									<span class="block truncate font-mono text-xs text-theme-muted">
										{event.entityId.substring(0, 8)}...
									</span>
								</td>
								<td class="hidden px-4 py-3 sm:table-cell">
									{#if event.triggeredById}
										<span class="text-sm text-theme-muted">
											{event.triggeredByType === 'teamprofile' ? 'Team' : 'Customer'}
										</span>
									{:else}
										<span class="text-sm text-theme-muted italic">System</span>
									{/if}
								</td>
								<td class="px-4 py-3 text-right">
									<span class="text-sm text-theme-muted">
										{formatEventTime(event.createdAt)}
									</span>
								</td>
							</tr>
						{/each}
					</tbody>
				</table>
			</div>
		{:else}
			<div class="empty-state">
				<svg class="empty-state-icon" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="1.5"
						d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
					/>
				</svg>
				<h2 class="empty-state-title">No events yet</h2>
				<p class="empty-state-text">Events will appear here as they occur in the system.</p>
			</div>
		{/if}
	</ContentContainer>
</div>
