<script lang="ts">
	import type { NostrEvent } from '../eve';
	import Avatar from '$lib/components/User/Avatar.svelte';
	import { formatDate } from '../utils.svelte';
	import ObjectPrinter from './ObjectPrinter.svelte';
	import UserName from '$lib/components/User/UserName.svelte';
	import { nip19 } from 'nostr-tools';

	let { note }: { note: NostrEvent } = $props();
	let showRaw = $state(false);

	let formattedDate = $derived(formatDate(note.created_at));
	let noteKindName = $derived(
		{
			0: 'Profile Metadata',
			1: 'Text Note',
			3: 'Contact List',
			4: 'Encrypted DM',
			5: 'Event Deletion',
			6: 'Repost',
			7: 'Reaction',
			8: 'Badge Award',
			16: 'Generic Repost',
			40: 'Channel Creation',
			41: 'Channel Metadata',
			42: 'Channel Message',
			43: 'Channel Hide Message',
			44: 'Channel Mute User',
			1984: 'Report',
			9734: 'Zap Request',
			9735: 'Zap',
			10000: 'Mute List',
			10001: 'Pin List',
			10002: 'Relay List',
			30000: 'Categorized People',
			30001: 'Categorized Bookmarks',
			30008: 'Profile Badges',
			30009: 'Badge Definition',
			30017: 'Create or Update Stall',
			30018: 'Create or Update Product',
			30023: 'Long-form Content',
			30024: 'Draft Long-form Content',
			30078: 'Application Specific Data'
		}[note.kind] || 'Unknown Kind'
	);
	let parsedContent = $derived(parseContent(note));

	function parseContent(note: NostrEvent) {
		if (!note.content) return '';

		switch (note.kind) {
			case 0:
				try {
					return JSON.parse(note.content);
				} catch (e) {
					return note.content;
				}
			case 1:
				return note.content;
			case 7:
				return note.content || '👍';
			case 1059:
			case 1060:
				return '[Encrypted Message]';
			default:
				return note.content;
		}
	}

	function truncateId(id, length = 8) {
		return id ? `${id.substring(0, length)}...${id.substring(id.length - length)}` : '';
	}

	function copyToClipboard(text) {
		navigator.clipboard.writeText(text);
	}

	function getKindColor(kind) {
		const colors = {
			0: 'badge-info',
			1: 'badge-primary',
			3: 'badge-secondary',
			4: 'badge-warning',
			5: 'badge-error',
			6: 'badge-accent',
			7: 'badge-success',
			9735: 'badge-warning'
		};
		return colors[kind] || 'badge-neutral';
	}
</script>

{#if note}
	<div class="card bg-base-100 shadow-xl border border-base-300 mb-4">
		<!-- Card Header -->
		<div class="card-body">
			<div class="flex justify-between items-start mb-4">
				<div class="flex items-center gap-3">
					<Avatar pubkey={note.pubkey} />
					<div>
						<UserName pubkey={note.pubkey} />
						<div class="text-sm opacity-70">{formattedDate}</div>
					</div>
				</div>

				<div class="flex items-center gap-2">
					<div class="badge {getKindColor(note.kind)} badge-sm">
						Kind {note.kind}
					</div>
					<div class="badge badge-outline badge-sm">
						{noteKindName}
					</div>
				</div>
			</div>

			{#if note.kind === 0}
				<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-full border p-4">
					<legend class="fieldset-legend text-center"> Profile Information </legend>
					<ObjectPrinter obj={parsedContent} />
				</fieldset>
			{:else if note.kind === 7}
				<!-- Reaction Display -->
				<div class="text-center py-8">
					<div class="text-6xl mb-2">{parsedContent}</div>
					<div class="text-sm opacity-70">Reaction</div>
				</div>
			{:else if note.content}
				<div class="prose prose-sm max-w-none">
					<div class="whitespace-pre-wrap break-words">
						{@html parsedContent}
					</div>
				</div>
			{/if}

			{#if note.tags && note.tags.length > 0}
				<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-full border p-4">
					<legend class="fieldset-legend text-center">Tags</legend>
					<div class="flex flex-wrap gap-2 card bg-base-200 p-6">
						{#each note.tags as tag}
							<div class="badge badge-outline badge-sm">
								{#if tag[0] === 'e'}
									<span class="mr-1">📝</span> Event: {truncateId(tag[1], 4)}
								{:else if tag[0] === 'p'}
									<span class="mr-1">👤</span> User: {truncateId(tag[1], 4)}
								{:else if tag[0] === 't'}
									<span class="mr-1">#</span> {tag[1]}
								{:else}
									{tag[0]}: {tag[1] || ''}
								{/if}
							</div>
						{/each}
					</div>
				</fieldset>
			{/if}

			<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-full border p-4">
				<legend class="fieldset-legend text-center">Note Details</legend>
				<div>
					<span class="font-medium">Note ID:</span>
					<span class="ml-2 font-mono">{nip19.noteEncode(note.id)}</span>
				</div>
			</fieldset>

			<div class="card-actions justify-end mt-4">
				<button class="btn btn-outline btn-sm" onclick={() => (showRaw = !showRaw)}>
					{showRaw ? 'Hide' : 'Show'} Raw JSON
				</button>
			</div>

			{#if showRaw}
				<ObjectPrinter obj={note} />
			{/if}
		</div>
	</div>
{:else}
	<div class="alert alert-info">
		<span>No note provided</span>
	</div>
{/if}
