<script lang="ts">
	// @ts-nocheck
	import AppChrome from '$lib/sim/ui/AppChrome.svelte';
	import { appController } from '$lib/app/controller';
	import { appState } from '$lib/app/store';
	import { Alert, AlertDescription, AlertTitle } from '$lib/components/ui/alert/index.js';
	import { Button } from '$lib/components/ui/button/index.js';
	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
</script>

<AppChrome pageKey="activity">
	<section id="screen-activity" class="flex flex-col gap-6 max-w-4xl mx-auto py-4">
		<div class="flex items-center justify-between">
			<h2 class="text-2xl font-bold text-white tracking-tight">Activity History</h2>
			<Button
				id="clearActivityBtn"
				variant="ghost"
				class="rounded-xl border border-transparent text-gray-400 hover:bg-white/5 hover:text-white"
				onclick={() => appController.clearNotifications()}
			>
				Clear Read
			</Button>
		</div>

		<Card class="glass-card rounded-3xl border-white/10 bg-[#16161d]/80">
			<CardHeader>
				<CardTitle class="text-sm font-semibold tracking-wide text-white">Motion Alerts</CardTitle>
			</CardHeader>
			<CardContent>
				<ScrollArea class="max-h-[32rem] pr-3">
					<div id="activityFeedList" class="flex flex-col gap-3">
				{#if $appState.motionNotifications.length === 0}
						<Alert class="border-white/10 bg-black/20 text-center opacity-70">
						<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
							/>
						</svg>
							<AlertTitle class="justify-self-center text-sm text-gray-200">All quiet</AlertTitle>
							<AlertDescription class="justify-self-center text-sm text-gray-400">
								No notifications yet.
							</AlertDescription>
						</Alert>
				{:else}
					{#each $appState.motionNotifications as notification (notification.id)}
							<Button
								type="button"
								variant="ghost"
								class="h-auto w-full flex-col items-start gap-1 rounded-xl border border-white/5 px-4 py-3 text-left {notification.isRead ? 'bg-gray-900/30 text-gray-200' : 'bg-blue-900/20 text-white'}"
							onclick={() => appController.openMotionNotificationTarget(notification.id, notification.cameraDeviceId)}
						>
								<p class="text-xs font-medium">{notification.message}</p>
								<p class="text-[10px] text-gray-500">{new Date(notification.createdAt).toLocaleString()}</p>
							</Button>
					{/each}
				{/if}
					</div>
				</ScrollArea>
			</CardContent>
		</Card>
	</section>
</AppChrome>
