<template>
    <div class="group relative bg-white dark:bg-gray-800 overflow-hidden shadow-sm">
        <!-- Cover avec overlay -->
        <div class="relative pb-[140%]">
            <RouterLink
                :to="{ name: 'manga-details', params: { id: manga.id } }"
                class="absolute inset-0">
                <img
                    :src="manga.thumbnailUrl || 'https://via.placeholder.com/300x400'"
                    :alt="manga.title"
                    class="w-full h-full object-cover bg-gray-100" />
            </RouterLink>

            <!-- Gradient + actions au survol -->
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
            <div class="absolute bottom-2 left-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                <button
                    class="p-1.5 bg-black/60 hover:bg-black/80 text-white rounded transition-colors"
                    title="Éditer"
                    @click="$emit('edit', manga)">
                    <PencilIcon class="w-3.5 h-3.5" />
                </button>
                <button
                    class="p-1.5 bg-black/60 hover:bg-black/80 text-white rounded transition-colors"
                    title="Sources préférées"
                    @click="$emit('sources', manga)">
                    <Cog6ToothIcon class="w-3.5 h-3.5" />
                </button>
                <button
                    class="p-1.5 bg-black/60 hover:bg-black/80 text-white rounded transition-colors"
                    title="Rafraîchir"
                    @click="$emit('refresh', manga)">
                    <ArrowPathIcon class="w-3.5 h-3.5" />
                </button>
            </div>
        </div>

        <!-- Titre + méta -->
        <RouterLink
            :to="{ name: 'manga-details', params: { id: manga.id } }"
            class="block p-2">
            <h3 v-if="options.showTitle" class="text-xs font-medium text-gray-800 dark:text-gray-100 truncate">{{ manga.title }}</h3>
            <span v-if="options.showYear && manga.publicationYear" class="text-xs text-gray-500 dark:text-gray-400">{{ manga.publicationYear }}</span>
            <span v-if="options.showAuthor && manga.authors?.length" class="text-xs text-gray-500 dark:text-gray-400 truncate block">{{ manga.authors[0] }}</span>
        </RouterLink>
    </div>
</template>

<script setup>
import { ArrowPathIcon, Cog6ToothIcon, PencilIcon } from '@heroicons/vue/24/outline';
import { RouterLink } from 'vue-router';

defineProps({
    manga: {
        type: Object,
        required: true
    },
    options: {
        type: Object,
        default: () => ({ showTitle: true, showYear: true, showAuthor: false })
    }
});

defineEmits(['edit', 'sources', 'refresh']);
</script>
