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

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

	let event = $derived(data.event?.data?.event);

	function formatDateTime(dateStr: string): string {
		try {
			return format(new Date(dateStr), 'PPpp');
		} catch {
			return dateStr;
		}
	}

	function formatJson(obj: unknown): string {
		if (!obj || (typeof obj === 'object' && Object.keys(obj).length === 0)) {
			return 'None';
		}
		return JSON.stringify(obj, null, 2);
	}
</script>

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

<div class="py-8">
	<ContentContainer>
		<div class="mb-8">
			<div class="flex items-start gap-4">
				<a
					href="/admin/events"
					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 Details
					</h1>
					<p class="mt-2 text-theme-secondary">View details for a system event.</p>
				</div>
			</div>
		</div>

		{#if event}
			<div class="space-y-6">
				<!-- Event Type Card -->
				<div class="rounded-lg border border-theme bg-theme-card p-6">
					<h2 class="mb-4 text-lg font-semibold text-theme">Event Type</h2>
					<div class="flex items-center gap-3">
						<span
							class="inline-flex rounded-full bg-purple-500/10 px-3 py-1 text-sm font-medium text-purple-600 dark:text-purple-400"
						>
							{getEventTypeLabel(event.eventType)}
						</span>
						<span class="font-mono text-xs text-theme-muted">
							{event.eventType}
						</span>
					</div>
				</div>

				<!-- Entity Info Card -->
				<div class="rounded-lg border border-theme bg-theme-card p-6">
					<h2 class="mb-4 text-lg font-semibold text-theme">Entity</h2>
					<dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
						<div>
							<dt class="text-sm font-medium text-theme-muted">Entity Type</dt>
							<dd class="mt-1 text-theme">{event.entityType}</dd>
						</div>
						<div>
							<dt class="text-sm font-medium text-theme-muted">Entity ID</dt>
							<dd class="mt-1 font-mono text-sm text-theme">{event.entityId}</dd>
						</div>
					</dl>
				</div>

				<!-- Triggered By Card -->
				<div class="rounded-lg border border-theme bg-theme-card p-6">
					<h2 class="mb-4 text-lg font-semibold text-theme">Triggered By</h2>
					{#if event.triggeredById}
						<dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
							<div>
								<dt class="text-sm font-medium text-theme-muted">Profile Type</dt>
								<dd class="mt-1 text-theme">
									{event.triggeredByType === 'teamprofile' ? 'Team Member' : 'Customer'}
								</dd>
							</div>
							<div>
								<dt class="text-sm font-medium text-theme-muted">Profile ID</dt>
								<dd class="mt-1 font-mono text-sm text-theme">{event.triggeredById}</dd>
							</div>
						</dl>
					{:else}
						<p class="text-theme-muted italic">System-generated event</p>
					{/if}
				</div>

				<!-- Metadata Card -->
				<div class="rounded-lg border border-theme bg-theme-card p-6">
					<h2 class="mb-4 text-lg font-semibold text-theme">Metadata</h2>
					<pre
						class="overflow-x-auto rounded-lg bg-black/5 p-4 font-mono text-sm text-theme dark:bg-white/5">{formatJson(
							event.metadata
						)}</pre>
				</div>

				<!-- Timestamps Card -->
				<div class="rounded-lg border border-theme bg-theme-card p-6">
					<h2 class="mb-4 text-lg font-semibold text-theme">Timestamps</h2>
					<dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
						<div>
							<dt class="text-sm font-medium text-theme-muted">Created At</dt>
							<dd class="mt-1 text-theme">{formatDateTime(event.createdAt)}</dd>
						</div>
						<div>
							<dt class="text-sm font-medium text-theme-muted">Updated At</dt>
							<dd class="mt-1 text-theme">{formatDateTime(event.updatedAt)}</dd>
						</div>
					</dl>
				</div>

				<!-- Event ID -->
				<div class="text-center">
					<span class="text-xs text-theme-muted">Event ID: </span>
					<span class="font-mono text-xs text-theme-muted">{event.id}</span>
				</div>
			</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">Event not found</h2>
				<p class="empty-state-text">The requested event could not be found.</p>
			</div>
		{/if}
	</ContentContainer>
</div>
