<template>
    <tr class="border-t hover:bg-green-100">
        <td class="px-4 py-2" :class="{ 'text-green-500': chapter.isAvailable }">
            {{ String(chapter.number).padStart(2, '0') }}
        </td>
        <td class="px-4 py-2 w-full text-left">
            <router-link
                v-if="chapter.isAvailable"
                :to="{
                    name: 'reader',
                    params: {
                        chapterId: chapter.id
                    }
                }"
                class="text-green-500">
                {{ chapter.title || 'Sans titre' }}
            </router-link>
            <span v-else>{{ chapter.title || 'Sans titre' }}</span>
        </td>
        <td class="px-4 py-2 flex justify-end gap-2">
            <button v-if="!chapter.isAvailable" @click="handleSearch" class="text-gray-500 hover:text-green-500">
                <MagnifyingGlassIcon class="h-5 w-5" />
            </button>
            <button v-else @click="handleDelete" class="text-gray-500 hover:text-green-500">
                <XMarkIcon class="h-5 w-5" />
            </button>
            <button @click="handleDownload" class="text-gray-500 hover:text-green-500">
                <ArrowDownTrayIcon class="h-5 w-5" />
            </button>
            <button @click="handleHide" class="text-gray-500 hover:text-green-500">
                <TrashIcon class="h-5 w-5" />
            </button>
        </td>
    </tr>
</template>

<script setup>
    import { MagnifyingGlassIcon, ArrowDownTrayIcon, XMarkIcon, TrashIcon } from '@heroicons/vue/24/solid';
    import { useMangaStore } from '../../application/store/mangaStore';

    const props = defineProps({
        chapter: {
            type: Object,
            required: true
        },
        mangaSlug: {
            type: String,
            required: true
        }
    });

    const store = useMangaStore();

    const handleSearch = async () => {
        // TODO: Implémenter la recherche de chapitre
        console.log('Recherche du chapitre:', props.chapter.id);
    };

    const handleDelete = async () => {
        // TODO: Implémenter la suppression du chapitre
        console.log('Suppression du chapitre:', props.chapter.id);
    };

    const handleDownload = async () => {
        // TODO: Implémenter le téléchargement du chapitre
        console.log('Téléchargement du chapitre:', props.chapter.id);
    };

    const handleHide = async () => {
        // TODO: Implémenter le masquage du chapitre
        console.log('Masquage du chapitre:', props.chapter.id);
    };
</script>
