<template>
  <div
    class="border rounded-lg p-4 cursor-pointer transition-all duration-200 hover:shadow-md"
    :class="{
      'border-blue-500 bg-blue-50': isSelected,
      'border-gray-200 hover:border-gray-300': !isSelected
    }"
    @click="$emit('select-match', match)"
  >
    <!-- Match Header with Score -->
    <div class="flex items-center justify-between mb-3">
      <div class="flex items-center space-x-2">
        <div
          class="w-3 h-3 rounded-full"
          :class="{
            'bg-blue-500': isSelected,
            'bg-gray-300': !isSelected
          }"
        ></div>
        <span class="text-sm font-medium text-gray-700">Score: {{ match.matchScore }}</span>
      </div>
      <div v-if="isSelected" class="text-blue-600">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
        </svg>
      </div>
    </div>

    <!-- Manga Thumbnail -->
    <div class="flex space-x-3">
      <div class="flex-shrink-0">
        <img
          v-if="match.thumbnailUrl"
          :src="match.thumbnailUrl"
          :alt="match.title"
          class="w-16 h-20 object-cover rounded border"
        />
        <div
          v-else
          class="w-16 h-20 bg-gray-200 rounded border flex items-center justify-center"
        >
          <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
        </div>
      </div>

      <!-- Manga Info -->
      <div class="flex-1 min-w-0">
        <h4 class="text-sm font-medium text-gray-900 truncate" :title="match.title">
          {{ match.title }}
        </h4>
        <p class="text-xs text-gray-500 mt-1 truncate" :title="match.slug">
          {{ match.slug }}
        </p>

        <!-- Alternative Slugs -->
        <div v-if="match.alternativeSlugs && match.alternativeSlugs.length > 0" class="mt-2">
          <p class="text-xs text-gray-400">Autres titres:</p>
          <div class="flex flex-wrap gap-1 mt-1">
            <span
              v-for="altSlug in match.alternativeSlugs.slice(0, 2)"
              :key="altSlug"
              class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded"
            >
              {{ altSlug }}
            </span>
            <span
              v-if="match.alternativeSlugs.length > 2"
              class="text-xs text-gray-400"
            >
              +{{ match.alternativeSlugs.length - 2 }} autres
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- Score Bar -->
    <div class="mt-3">
      <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
        <span>Correspondance</span>
        <span>{{ match.matchScore }}%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2">
        <div
          class="h-2 rounded-full transition-all duration-300"
          :class="{
            'bg-blue-500': isSelected,
            'bg-gray-400': !isSelected
          }"
          :style="{ width: match.matchScore + '%' }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  match: {
    type: Object,
    required: true
  },
  isSelected: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['select-match']);
</script>




