<template>
  <div
    v-if="visible"
    class="absolute z-50 bg-[var(--wa-surface)] rounded-full shadow-lg border border-[var(--wa-border)] p-1 flex items-center gap-1"
    :class="position === 'top' ? 'bottom-full mb-2' : 'top-full mt-2'"
    @click.stop
  >
    <button
      v-for="emoji in quickReactions"
      :key="emoji"
      class="w-8 h-8 flex items-center justify-center text-lg hover:bg-[var(--wa-bg-light)] rounded-full transition-transform hover:scale-125"
      @click="selectReaction(emoji)"
    >
      {{ emoji }}
    </button>
    <button
      class="w-8 h-8 flex items-center justify-center text-lg hover:bg-[var(--wa-bg-light)] rounded-full"
      @click="showFullPicker = true"
      title="Más emojis"
    >
      <UIcon name="i-lucide-plus" class="w-4 h-4 text-[var(--wa-text-muted)]" />
    </button>
  </div>

  <!-- Full emoji picker modal -->
  <UModal v-model="showFullPicker">
    <template #default>
      <div class="p-4 bg-[var(--wa-surface)]">
        <h3 class="text-lg font-semibold mb-4 text-[var(--wa-text)]">Elegir reaccion</h3>

        <div class="grid grid-cols-8 gap-2 max-h-64 overflow-y-auto">
          <button
            v-for="emoji in allEmojis"
            :key="emoji"
            class="w-10 h-10 flex items-center justify-center text-2xl hover:bg-[var(--wa-bg-light)] rounded transition-transform hover:scale-110"
            @click="selectReaction(emoji); showFullPicker = false"
          >
            {{ emoji }}
          </button>
        </div>

        <div class="mt-4 flex justify-end">
          <UButton variant="ghost" @click="showFullPicker = false">
            Cancelar
          </UButton>
        </div>
      </div>
    </template>
  </UModal>
</template>

<script setup lang="ts">
interface Props {
  visible: boolean
  position?: 'top' | 'bottom'
}

withDefaults(defineProps<Props>(), {
  visible: false,
  position: 'top'
})

const emit = defineEmits<{
  select: [emoji: string]
  close: []
}>()

const showFullPicker = ref(false)

// Quick reactions (WhatsApp style)
const quickReactions = ['👍', '❤️', '😂', '😮', '😢', '🙏']

// Extended emoji list
const allEmojis = [
  // Smileys
  '😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂',
  '🙂', '🙃', '😉', '😊', '😇', '🥰', '😍', '🤩',
  '😘', '😗', '😚', '😙', '🥲', '😋', '😛', '😜',
  '🤪', '😝', '🤑', '🤗', '🤭', '🤫', '🤔', '🤐',
  '🤨', '😐', '😑', '😶', '😏', '😒', '🙄', '😬',
  '😮‍💨', '🤥', '😌', '😔', '😪', '🤤', '😴', '😷',
  // Gestures
  '👍', '👎', '👌', '🤌', '🤏', '✌️', '🤞', '🤟',
  '🤘', '🤙', '👈', '👉', '👆', '👇', '☝️', '👋',
  '🤚', '🖐️', '✋', '🖖', '👏', '🙌', '👐', '🤲',
  '🤝', '🙏', '✍️', '💪', '🦾', '🦿', '🦵', '🦶',
  // Hearts
  '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍',
  '🤎', '💔', '❣️', '💕', '💞', '💓', '💗', '💖',
  '💘', '💝', '💟', '♥️', '💌', '💋', '👄', '👅',
  // Objects
  '🎉', '🎊', '🎈', '🎁', '🏆', '🥇', '🥈', '🥉',
  '⚽', '🏀', '🏈', '⚾', '🎾', '🏐', '🎱', '🎮',
  '🎵', '🎶', '🎤', '🎧', '🎸', '🎹', '🎺', '🎻',
  '🍕', '🍔', '🍟', '🌭', '🍿', '🧁', '🍰', '🎂',
  '☕', '🍵', '🍺', '🍻', '🥂', '🍷', '🥃', '🍸',
  // Nature
  '🌸', '🌺', '🌹', '🌷', '🌻', '🌼', '💐', '🌿',
  '☀️', '🌙', '⭐', '🌟', '✨', '💫', '🔥', '💧',
  '🌈', '☁️', '⛈️', '❄️', '☃️', '⚡', '🌊', '🌍',
  // Animals
  '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼',
  '🐨', '🐯', '🦁', '🐮', '🐷', '🐸', '🐵', '🐔',
  '🦄', '🐝', '🦋', '🐌', '🐞', '🐜', '🦗', '🕷️'
]

const selectReaction = (emoji: string) => {
  emit('select', emoji)
  emit('close')
}

// Close on click outside
onMounted(() => {
  const handleClickOutside = () => {
    emit('close')
  }

  // Delay to avoid immediate close
  setTimeout(() => {
    document.addEventListener('click', handleClickOutside)
  }, 100)

  onUnmounted(() => {
    document.removeEventListener('click', handleClickOutside)
  })
})
</script>
