<template>
  <div class="msg-row" :class="message.direction">
    <div class="bubble" :class="message.direction">
      <!-- Media types -->
      <template v-if="message.type === 'image' && message.media_url">
        <img :src="message.media_url" class="media-img" loading="lazy" @click="openMedia(message.media_url)" />
        <p v-if="message.content" class="caption">{{ message.content }}</p>
      </template>
      <template v-else-if="message.type === 'video' && message.media_url">
        <video :src="message.media_url" controls class="media-video"></video>
        <p v-if="message.content" class="caption">{{ message.content }}</p>
      </template>
      <template v-else-if="message.type === 'audio' && message.media_url">
        <audio :src="message.media_url" controls class="media-audio"></audio>
      </template>
      <template v-else-if="message.type === 'document' && message.media_url">
        <a :href="message.media_url" target="_blank" class="doc-link">
          <span class="doc-icon">📄</span>
          {{ message.media_filename || 'Document' }}
        </a>
      </template>
      <template v-else-if="message.type === 'sticker' && message.media_url">
        <img :src="message.media_url" class="sticker-img" />
      </template>
      <!-- Location -->
      <template v-else-if="message.type === 'location'">
        <div class="location-bubble">
          <span class="loc-pin">📍</span>
          <span class="loc-text">{{ message.content || 'Location' }}</span>
        </div>
      </template>
      <!-- Text or fallback -->
      <template v-else>
        <p class="msg-text">{{ message.content || typeLabel }}</p>
      </template>

      <span class="msg-time">{{ formatTime(message.created_at) }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MessageBubble',
  props: {
    message: { type: Object, required: true },
  },
  computed: {
    typeLabel() {
      const labels = { image: '📷 Image', video: '🎥 Video', audio: '🎵 Audio', document: '📄 Document', sticker: '🎭 Sticker' };
      return labels[this.message.type] || `[${this.message.type}]`;
    },
  },
  methods: {
    formatTime(iso) {
      if (!iso) return '';
      const d = new Date(iso);
      return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    },
    openMedia(url) {
      window.open(url, '_blank');
    },
  },
};
</script>

<style scoped>
.msg-row { display: flex; margin-bottom: 4px; padding: 0 16px; }
.msg-row.incoming { justify-content: flex-start; }
.msg-row.outgoing { justify-content: flex-end; }

.bubble {
  max-width: 65%;
  padding: 8px 12px;
  border-radius: 8px;
  position: relative;
  word-break: break-word;
}
.bubble.incoming { background: #202c33; border-top-left-radius: 0; }
.bubble.outgoing { background: #005c4b; border-top-right-radius: 0; }

.msg-text { color: #e9edef; font-size: 14px; margin: 0 0 4px; line-height: 1.4; white-space: pre-wrap; }
.msg-time { font-size: 11px; color: rgba(255,255,255,0.45); float: right; margin-left: 8px; margin-top: 2px; }
.caption  { font-size: 13px; color: #aebac1; margin: 4px 0 0; }

.location-bubble { display: flex; align-items: center; gap: 8px; padding: 2px 0 4px; }
.loc-pin  { font-size: 18px; }
.loc-text { font-size: 13px; color: #e9edef; flex: 1; }

.media-img  { max-width: 100%; border-radius: 6px; cursor: pointer; display: block; }
.media-video { max-width: 100%; border-radius: 6px; display: block; }
.media-audio { width: 100%; min-width: 200px; }
.sticker-img { width: 120px; height: 120px; object-fit: contain; }

.doc-link {
  display: flex; align-items: center; gap: 8px;
  color: #68d391; text-decoration: none; font-size: 13px;
  padding: 6px; background: rgba(255,255,255,0.05); border-radius: 6px;
}
.doc-link:hover { background: rgba(255,255,255,0.1); }
.doc-icon { font-size: 20px; }
</style>
