<script lang="ts" setup>
import type { Message, User } from '@/types'
import { avatar, name } from '@/utils/discord'
import { computed } from 'vue'

const props = defineProps<{ messages: Message[] }>()

const firstMessage = computed(() => props.messages[0]!)
const avatarUrl = computed(() => avatar(firstMessage.value.author))
const userName = computed(() => name(firstMessage.value.author))

const formatDate = (dateString: string) => {
	const date = new Date(dateString)
	return date.toLocaleString()
}

const formatSize = (bytes: number) => {
	if (bytes === 0) return '0 B'
	const k = 1024
	const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
	const i = Math.floor(Math.log(bytes) / Math.log(k))
	return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

type ParsedContent = { type: 'text'; content: string } | { type: 'mention'; user: User }

const parseContent = (msg: Message): ParsedContent[] => {
	if (!msg.content) return []

	const regex = /<@!?(\d+)>/g
	const parts: ParsedContent[] = []
	let lastIndex = 0
	let match

	console.log(msg.mentions)

	while ((match = regex.exec(msg.content)) !== null) {
		if (match.index > lastIndex) {
			parts.push({ type: 'text', content: msg.content.substring(lastIndex, match.index) })
		}

		const id = match[1]
		const user = msg.mentions?.[id!]

		if (user) {
			parts.push({ type: 'mention', user })
		} else {
			parts.push({ type: 'text', content: match[0] })
		}

		lastIndex = regex.lastIndex
	}

	if (lastIndex < msg.content.length) {
		parts.push({ type: 'text', content: msg.content.substring(lastIndex) })
	}

	return parts
}
</script>

<template>
	<div v-if="messages.length > 0" :class="['message', firstMessage.authorType]">
		<img :src="avatarUrl" alt="avatar" class="avatar" />
		<div class="message-content">
			<div class="message-header">
				<span class="author-name">{{ userName }}</span>
				<span class="timestamp">{{ formatDate(firstMessage.createdAt) }}</span>
				<span v-if="firstMessage.authorType === 'system'" class="badge system">System</span>
				<span v-else-if="firstMessage.authorType === 'staff'" class="badge staff">Staff</span>
			</div>
			<div class="bodies">
				<div v-for="msg in messages" :key="msg.id" class="message-part">
					<div class="body" v-if="msg.content">
						<template v-for="(part, idx) in parseContent(msg)" :key="idx">
							<span v-if="part.type === 'text'">{{ part.content }}</span>
							<span v-else-if="part.type === 'mention'" class="inline-mention">
								@{{ name(part.user) }}
							</span>
						</template>
					</div>
					<div class="attachments" v-if="msg.attachments && msg.attachments.length > 0">
						<template v-for="att in msg.attachments" :key="att.id">
							<div v-if="att.contentType.startsWith('video/')" class="attachment">
								<video :src="att.url" controls class="attachment-media"></video>
							</div>
							<a v-else :href="att.url" target="_blank" class="attachment link-attachment">
								<img
									v-if="att.contentType.startsWith('image/')"
									:src="att.url"
									:alt="att.fileName"
									class="attachment-media"
								/>
								<div class="attachment-file" v-else>
									<span class="filename">{{ att.fileName }}</span>
									<span class="size">{{ formatSize(att.size) }}</span>
								</div>
							</a>
						</template>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped>
.message {
	display: flex;
	gap: 1rem;
	padding: 1rem;
	border-bottom: 1px solid hsla(var(--surface0) / 0.5);
	transition: none;

	&:last-child {
		border-bottom: none;
	}

	&:hover {
		background-color: hsla(var(--surface0) / 0.3);
	}

	.avatar {
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.message-content {
		display: flex;
		flex-direction: column;

		.message-header {
			display: flex;
			align-items: center;
			gap: 0.5rem;

			.author-name {
				font-weight: bold;
				color: hsl(var(--text));
			}

			.timestamp {
				font-size: 0.8rem;
				color: hsl(var(--subtext0));
			}

			.badge {
				font-size: 0.7rem;
				padding: 0.1rem 0.4rem;
				border-radius: 0.25rem;
				text-transform: uppercase;
				font-weight: bold;

				&.system {
					background-color: hsla(var(--surface1));
					color: hsl(var(--subtext1));
				}
				&.staff {
					background-color: hsla(var(--accent) / 0.2);
					color: hsl(var(--accent));
				}
			}
		}

		.bodies {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
		}

		.message-part {
			display: flex;
			flex-direction: column;
			gap: 0.25rem;
		}

		.body {
			color: hsl(var(--text));
			white-space: pre-wrap;
			word-break: break-word;

			.inline-mention {
				display: inline-flex;
				align-items: center;
				background-color: hsla(var(--accent) / 0.15);
				color: hsl(var(--accent));
				font-weight: 500;
				padding: 0 0.5ch;
				border-radius: 1rem;
				margin: 0 0.1rem;
				user-select: none;

				&:hover {
					background-color: hsla(var(--accent) / 0.25);
				}
			}
		}

		.attachments {
			display: flex;
			flex-wrap: wrap;
			gap: 0.5rem;

			.attachment {
				display: block;
				border-radius: 1rem;
				overflow: hidden;

				.attachment-media {
					display: block;
					max-width: 100%;
					max-height: 300px;
					object-fit: contain;
				}

				.attachment-file {
					display: flex;
					align-items: center;
					gap: 0.5rem;
					padding: 0.5rem 0.75rem;
					color: hsl(var(--text));

					.filename {
						font-weight: 500;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						max-width: 200px;
					}

					.size {
						color: hsl(var(--subtext0));
						font-size: 0.8rem;
						white-space: nowrap;
					}
				}
			}
		}
	}
}
</style>