<template>
    <MessageFrame role="user" :copyContent="msg.content">
        <!-- Voice audio: server URL (persists F5) or local blob (temporary) -->
        <audio v-if="msg.voiceAudioUrl" controls :src="msg.voiceAudioUrl" class="user-att-audio"></audio>
        <audio v-else-if="audioAttachment" controls :src="audioAttachment.dataUrl" class="user-att-audio"></audio>
        <!-- Pending transcription indicator -->
        <div v-if="msg.pending" class="voice-pending">transcribing...</div>
        <!-- Text content -->
        <div v-if="msg.content">{{ msg.content }}</div>
        <!-- Non-audio attachments -->
        <div v-if="nonAudioAttachments.length" class="user-attachments">
            <template v-for="(att, i) in nonAudioAttachments" :key="i">
                <div v-if="att.mimeType === 'application/pdf'" class="user-att-pdf" :title="att.fileName || 'PDF'">
                    <span class="pdf-icon">&#128196;</span>
                    <span class="pdf-name">{{ att.fileName || 'document.pdf' }}</span>
                </div>
                <div v-else class="user-att-thumb" @click="expandImage(att.dataUrl)">
                    <img :src="att.dataUrl" :alt="att.fileName || 'image'" loading="lazy" />
                </div>
            </template>
        </div>
        <template v-if="username" #footer>{{ username }}</template>
    </MessageFrame>
    <!-- Lightbox -->
    <div v-if="expandedSrc" class="lightbox-overlay" @click="expandedSrc = ''">
        <img :src="expandedSrc" class="lightbox-img" @click.stop />
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import MessageFrame from './MessageFrame.vue';
import { auth } from '../store';

const props = defineProps<{ msg: any }>();

const username = auth.currentUser;
const expandedSrc = ref('');
function expandImage(src: string) { expandedSrc.value = src; }

const audioAttachment = computed(() =>
    (props.msg.attachments || []).find((a: any) => a.mimeType?.startsWith('audio/')));
const nonAudioAttachments = computed(() =>
    (props.msg.attachments || []).filter((a: any) => !a.mimeType?.startsWith('audio/')));
</script>

<style scoped>
.user-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.user-att-thumb {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border);
}
.user-att-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.15s;
}
.user-att-thumb:hover img { transform: scale(1.05); }
.user-att-audio {
    width: 100%;
    min-width: 250px;
    max-width: 300px;
    height: 36px;
    border-radius: 8px;
}

.user-att-pdf {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 0.82rem;
    color: var(--text-muted);
}
.pdf-icon { font-size: 1.2rem; }
.pdf-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.voice-pending {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.7;
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } }

.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    cursor: default;
}
</style>
