<template>
  <div
    class="flex"
    :class="message.fromMe ? 'justify-end' : 'justify-start'"
  >
    <div
      class="max-w-[70%] rounded-lg px-3 py-2"
      :class="message.fromMe ? 'bubble-out' : 'bubble-in'"
    >
      <!-- Message content -->
      <p class="text-[var(--wa-text)] whitespace-pre-wrap break-words">{{ message.content }}</p>

      <!-- Image -->
      <img
        v-if="message.mediaUrl && message.type === 'image'"
        :src="message.mediaUrl"
        class="rounded-lg max-w-full mt-2"
      />

      <!-- Caption for media -->
      <p
        v-if="message.caption"
        class="text-[var(--wa-text)] mt-2"
      >
        {{ message.caption }}
      </p>

      <!-- Footer -->
      <div class="flex items-center justify-end gap-1 mt-1">
        <span class="text-xs text-[var(--wa-text-muted)]">
          {{ formatTime(message.timestamp) }}
        </span>
        <UIcon
          v-if="message.fromMe"
          :name="statusIcon"
          class="w-4 h-4"
          :class="statusColor"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Message {
  id: string
  content: string
  type: 'text' | 'image' | 'video' | 'document' | 'audio'
  mediaUrl?: string
  caption?: string
  fromMe: boolean
  timestamp: Date
  status: 'pending' | 'sent' | 'delivered' | 'read' | 'failed'
}

interface Props {
  message: Message
}

const props = defineProps<Props>()

const formatTime = (date: Date) => {
  return new Date(date).toLocaleTimeString('es-AR', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

const statusIcon = computed(() => {
  const icons: Record<string, string> = {
    pending: 'i-lucide-clock',
    sent: 'i-lucide-check',
    delivered: 'i-lucide-check-check',
    read: 'i-lucide-check-check',
    failed: 'i-lucide-alert-circle'
  }
  return icons[props.message.status] || 'i-lucide-check'
})

const statusColor = computed(() => {
  if (props.message.status === 'read') return 'text-[var(--wa-blue)]'
  if (props.message.status === 'failed') return 'text-red-500'
  return 'text-[var(--wa-text-muted)]'
})
</script>
