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

	let { activity }: { activity: NostrEvent } = $props();

	let authorProfile = $state({
		name: 'Anonymous',
		avatar: null as string | null
	});

	$effect(() => {
		(async () => {
			try {
				const profile = await window.eve.getProfile(activity.pubkey);
				if (profile) {
					authorProfile = {
						name: profile.name || profile.display_name || 'Anonymous',
						avatar: profile.picture || null
					};
				}
			} catch (error) {
				console.error('Failed to load author profile:', error);
			}
		})();
	});

	function getDescription() {
		if (activity.kind === 0) return 'updated their profile';
		if (activity.kind === 1) return 'wrote a note';
		if (activity.kind === 5) return 'deleted a note';
		if (activity.kind === 6) return 'reposted a note';
		if (activity.kind === 7) return 'reacted to a post';
		if (activity.kind === 892) return 'created a forum topic';
		if (activity.kind === 1111) return 'commented on something';
		if (activity.kind === 30420) return 'installed an arxlet';
		if (activity.kind === 30891) return 'created a forum category';
		return 'performed an action ' + activity.kind;
	}

	function getIcon() {
		if (activity.kind === 0) return 'mdi:account-edit';
		if (activity.kind === 1) return 'mdi:note-text';
		if (activity.kind === 5) return 'mdi:delete';
		if (activity.kind === 6) return 'mdi:repeat';
		if (activity.kind === 7) return 'mdi:heart';
		if (activity.kind === 892) return 'mdi:forum';
		if (activity.kind === 1111) return 'mdi:comment-text';
		if (activity.kind === 30420) return 'mdi:package-variant';
		if (activity.kind === 30891) return 'mdi:forum';

		return 'mdi:lightning-bolt';
	}

	function getIconColor() {
		if (activity.kind === 0) return 'text-blue-500';
		if (activity.kind === 1 || activity.kind === 1111) return 'text-green-500';
		if (activity.kind === 5) return 'text-red-500';
		if (activity.kind === 6) return 'text-orange-500';
		if (activity.kind === 7) return 'text-red-500';
		if (activity.kind === 892) return 'text-pink-500';
		return 'text-secondary';
	}

	let icon = getIcon();
	let iconColor = getIconColor();
	let description = getDescription();
</script>

<div
	class="group flex items-start gap-3 p-4 rounded-xl bg-gradient-to-r from-base-100/80 to-base-200/50 hover:from-base-100 hover:to-base-200/80 transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 border border-base-300/30 hover:border-base-300/50"
>
	<div class="relative flex-shrink-0">
		<Avatar pubkey={activity.pubkey} />

		<div
			class="absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-base-100 flex items-center justify-center ring-2 ring-base-100 group-hover:scale-110 transition-transform duration-300"
		>
			<Icon {icon} class="w-3 h-3 {iconColor}" />
		</div>
	</div>

	<div class="flex-1 min-w-0">
		<div class="flex items-center gap-2 mb-1">
			<p
				class="text-sm font-semibold text-base-content group-hover:text-primary transition-colors duration-300 truncate"
			>
				{authorProfile.name}
			</p>
			<span class="text-xs text-base-content/50 font-medium">
				<RelativeTime time={activity.created_at} />
			</span>
		</div>

		<p
			class="text-sm text-base-content/70 group-hover:text-base-content/90 transition-colors duration-300"
		>
			{description}
		</p>

		{#if activity.content && (activity.kind === 1 || activity.kind === 892 || activity.kind === 1111)}
			<p class="text-xs text-base-content/60 mt-2 line-clamp-2 italic">
				"{activity.content.substring(0, 80)}{activity.content.length > 80 ? '...' : ''}"
			</p>
		{/if}
	</div>
</div>

<style>
	.line-clamp-2 {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		line-clamp: 2;
	}
</style>
