<script setup lang="ts">
import { computed } from 'vue';
import { route } from 'ziggy-js';

const props = defineProps<{
    message: {
        id: number;
        user: { id: number; name: string } | null;
        content: string;
        created_at: string;
        subject_id?: number | null;
        subject_type?: string | null;
        subject?: any;
        media?: Array<{
            id: number;
            url: string;
            file_name: string;
            mime_type: string;
        }>;
    };
    participantsById: Record<
        number,
        {
            id: number;
            name: string;
            pivot?: { display_name: string | null } | null;
        }
    >;
    dynamicId: string;
}>();

const emit = defineEmits<{
    (e: 'open-lightbox', url: string, mimeType: string): void;
}>();

function formatTimestamp(isoString: string): { full: string; time: string } {
    const date = new Date(isoString);
    return {
        full: date.toLocaleString(),
        time: date.toLocaleTimeString([], {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false,
        }),
    };
}

const parsedContent = computed(() => {
    let content = props.message.content;

    // 1. Replace <user:id> placeholders with links to their dynamic profile
    const userRegex = /<user:([0-9a-f-]+)>/g;
    content = content.replace(userRegex, (match, userId) => {
        const user = props.participantsById[(userId)];

        if (user) {
            const url = route('dynamics.users.show', [
                props.dynamicId,
                (userId),
            ]);

            return `<a href="${url}" class="c-chat__user-link font-semibold text-blue-500 hover:underline">${
                user.pivot?.display_name ?? user.name
            }</a>`;
        }

        return `User #${userId}`;
    });

    // 2. Link subjects if found in the text
    if (props.message.subject_id && props.message.subject_type) {
        if (
            props.message.subject_type === 'mutation' ||
            props.message.subject_type === 'ledger'
        ) {
            const ledgerId =
                props.message.subject_type === 'mutation'
                    ? props.message.subject?.ledger_id
                    : props.message.subject?.id;

            const ledgerName =
                props.message.subject_type === 'mutation'
                    ? props.message.subject?.ledger?.name
                    : props.message.subject?.name;

            if (ledgerId && ledgerName) {
                const ledgerUrl = route('dynamics.ledgers.show', [
                    props.dynamicId,
                    ledgerId,
                ]);

                const escapedName = ledgerName.replace(
                    /[-\/\\^$*+?.()|[\]{}]/g,
                    '\\$&',
                );

                const nameRegex = new RegExp(`"${escapedName}"`, 'g');
                content = content.replace(
                    nameRegex,
                    `"<a href="${ledgerUrl}" class="c-chat__subject-link font-semibold text-blue-500 hover:underline">${ledgerName}</a>"`,
                );
            }
        }
    }

    return content;
});
</script>

<template>
    <div>
        <div class="c-chat__message-header">
            <span class="c-chat__message-author">{{ message.user?.name }}</span>
            <span
                class="c-chat__message-time"
                :title="formatTimestamp(message.created_at).full"
            >
                {{ formatTimestamp(message.created_at).time }}
            </span>
        </div>
        <p class="c-chat__message-text" v-html="parsedContent"></p>

        <!-- Attached Media Display -->
        <div
            v-if="message.media && message.media.length > 0"
            class="c-chat__message-media"
        >
            <div
                v-for="item in message.media"
                :key="item.id"
                class="c-chat__media-item"
            >
                <img
                    v-if="item.mime_type.startsWith('image/')"
                    :src="item.url"
                    :alt="item.file_name"
                    class="c-chat__image cursor-pointer transition-opacity hover:opacity-90"
                    @click="emit('open-lightbox', item.url, item.mime_type)"
                />
                <div
                    v-else-if="item.mime_type.startsWith('video/')"
                    class="relative cursor-pointer transition-opacity hover:opacity-90"
                    @click="emit('open-lightbox', item.url, item.mime_type)"
                >
                    <video :src="item.url" class="c-chat__video"></video>
                    <div class="c-chat__play-overlay">▶</div>
                </div>
            </div>
        </div>
    </div>
</template>
