<script lang="ts">
	import Icon from '@iconify/svelte';
	import { onMount } from 'svelte';
	import RecentActivityItem from './RecentActivityItem.svelte';
	import type { NostrEvent } from '../eve';
	import Avatar from '$lib/components/User/Avatar.svelte';
	import LiquidGlass from './LiquidGlass.svelte';
	import UserName from './User/UserName.svelte';

	let currentTime = $state(new Date());
	let recentActivity: NostrEvent[] = $state([]);

	let currentPubkey = $state('');

	onMount(() => {
		const interval = setInterval(() => {
			currentTime = new Date();
		}, 1000);

		(async () => {
			try {
				currentPubkey = await window.eve.getPublicKey();
			} catch (error) {
				console.error('Failed to load user profile:', error);
			}
		})();

		window.eve
			.getAllEventsWithFilter({
				limit: 30
			})
			.then((events) => {
				recentActivity = events;
			});

		return () => {
			clearInterval(interval);
		};
	});

	const formatTime = (date: Date) => {
		return date.toLocaleTimeString([], {
			hour: '2-digit',
			minute: '2-digit',
			second: '2-digit'
		});
	};

	const formatDate = (date: Date) => {
		return date.toLocaleDateString([], {
			weekday: 'short',
			month: 'short',
			day: 'numeric'
		});
	};
</script>

<div class="overflow-hidden h-[calc(100vh-4em)]">
	<LiquidGlass
		class="w-80 h-full shadow-2xl border-l-4 border-primary/50 flex flex-col overflow-scroll"
	>
		<div
			class="p-6 border-b border-base-300 bg-gradient-to-br from-primary/5 via-secondary/5 to-accent/5 flex-shrink-0"
		>
			<div class="flex items-center gap-3 mb-4">
				<Avatar pubkey={currentPubkey} />
				<div class="flex-1 min-w-0">
					<h4 class="font-semibold text-base-content truncate">
						<UserName pubkey={currentPubkey} />
					</h4>
				</div>
			</div>

			<LiquidGlass class="text-center rounded-lg p-3">
				<div class="text-2xl font-bold text-base-content mb-1 font-mono tracking-wide">
					{formatTime(currentTime)}
				</div>
				<div class="text-sm text-base-content/70 font-medium">
					{formatDate(currentTime)}
				</div>
			</LiquidGlass>
		</div>

		<div class="flex-1 flex flex-col min-h-0 h-[calc(100vh-16em)] overflow-hidden">
			<div class="p-6 pb-4 flex-shrink-0">
				<div class="flex items-center justify-between mb-4">
					<h3 class="text-lg font-semibold text-base-content flex items-center gap-2">
						<Icon icon="mdi:pulse" class="w-5 h-5 text-secondary" />
						Activity Feed
					</h3>
					<button class="btn btn-ghost btn-xs gap-1">
						<Icon icon="mdi:refresh" class="w-3 h-3" />
						Refresh
					</button>
				</div>
			</div>

			<div class="flex-1 px-6 pb-6 overflow-y-scroll">
				{#if recentActivity.length > 0}
					<div class="space-y-3">
						{#each recentActivity as activity}
							<RecentActivityItem {activity} />
						{/each}
					</div>
				{:else}
					<div class="text-center py-8">
						<Icon icon="mdi:inbox-outline" class="w-12 h-12 text-base-content/30 mx-auto mb-3" />
						<p class="text-sm text-base-content/60">No recent activity</p>
					</div>
				{/if}
			</div>
		</div>
	</LiquidGlass>
</div>
