<template>
  <div
    class="flex rounded-lg overflow-hidden cursor-pointer hover:opacity-80 transition-opacity"
    :class="quoted.fromMe ? 'bg-[var(--wa-green-light)]/20' : 'bg-[var(--wa-bg-light)]'"
    @click="$emit('click', quoted.id)"
  >
    <!-- Barra de color lateral -->
    <div
      class="w-1 flex-shrink-0"
      :style="{ backgroundColor: barColor }"
    />

    <div class="flex-1 px-2 py-1.5 min-w-0">
      <!-- Nombre del autor -->
      <p
        class="text-xs font-medium truncate"
        :style="{ color: barColor }"
      >
        {{ authorName }}
      </p>

      <!-- Contenido según tipo -->
      <div class="flex items-center gap-1.5 mt-0.5">
        <!-- Thumbnail si es media -->
        <img
          v-if="quoted.media?.thumbnail"
          :src="`data:image/jpeg;base64,${quoted.media.thumbnail}`"
          class="w-10 h-10 rounded object-cover flex-shrink-0"
        />

        <!-- Icono de tipo si no es texto -->
        <UIcon
          v-if="quoted.type !== 'text' && !quoted.media?.thumbnail"
          :name="typeIcon"
          class="w-4 h-4 text-[var(--wa-text-muted)] flex-shrink-0"
        />

        <!-- Texto o placeholder -->
        <p class="text-sm text-[var(--wa-text-muted)] truncate">
          {{ displayText }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { QuotedMessage } from '~/types/message'
import { getMessageTypePlaceholder, getMessageTypeIcon, stringToColor } from '~/types/message'

interface Props {
  quoted: QuotedMessage
}

const props = defineProps<Props>()

defineEmits<{
  click: [id: string]
}>()

const authorName = computed(() => {
  if (props.quoted.fromMe) return 'Tú'
  return props.quoted.participantName || props.quoted.participant?.split('@')[0] || 'Desconocido'
})

const barColor = computed(() => {
  if (props.quoted.fromMe) return 'var(--wa-green-dark)'
  return stringToColor(props.quoted.participant || '')
})

const typeIcon = computed(() => getMessageTypeIcon(props.quoted.type))

const displayText = computed(() => {
  if (props.quoted.content) return props.quoted.content
  if (props.quoted.media?.filename) return props.quoted.media.filename
  return getMessageTypePlaceholder(props.quoted.type)
})
</script>
