<template>
  <span class="mentions-container">
    <template v-for="(part, index) in parsedContent" :key="index">
      <router-link
        v-if="part.type === 'mention'"
        :to="`/profile/${part.userId}`"
        class="mention-link"
      >
        @{{ part.username }}
      </router-link>
      <span v-else>{{ part.text }}</span>
    </template>
  </span>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  content: {
    type: String,
    required: true
  },
  mentions: {
    type: Array,
    default: () => []
  }
})

const parsedContent = computed(() => {
  if (!props.content) return []
  
  const parts = []
  let currentIndex = 0
  
  // Parcourir le contenu pour trouver les mentions
  props.content.split(/(@\w+)/).forEach((part, index) => {
    if (part.startsWith('@')) {
      const username = part.substring(1)
      const mention = props.mentions.find(m => m.username === username)
      
      if (mention) {
        parts.push({
          type: 'mention',
          username: mention.username,
          userId: mention.id,
          text: part
        })
      } else {
        // Mention non trouvée, traiter comme du texte normal
        parts.push({ type: 'text', text: part })
      }
    } else if (part.trim()) {
      parts.push({ type: 'text', text: part })
    }
  })
  
  return parts
})
</script>

<style scoped>
.mentions-container {
  white-space: pre-wrap;
  word-break: break-word;
}

.mention-link {
  @apply font-medium transition-colors cursor-pointer;
  text-decoration: none;
  color: #8b5cf6;
  filter: drop-shadow(0 0 2px rgba(139, 92, 246, 0.3));
}

.mention-link:hover {
  color: #7c3aed;
  filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.5));
}
</style>