<template>
    <div class="bg-white rounded-sm shadow mb-2">
        <!-- En-tête du volume -->
        <div class="relative flex items-center justify-between bg-white p-4 rounded-t-sm">
            <!-- Partie gauche -->
            <div class="flex items-center space-x-4">
                <BookmarkIcon class="h-8 w-8 text-gray-500" />
                <h2 class="text-xl font-semibold w-28">Volume {{ String(volume.number).padStart(2, '0') }}</h2>
                <div class="flex items-center w-16">
                    <span
                        :class="[
                            'px-2 py-1 text-sm rounded w-full text-center text-white',
                            {
                                'bg-red-500': volume.downloadedChapter === 0,
                                'bg-yellow-500':
                                    volume.downloadedChapter < volume.totalChapter && volume.downloadedChapter > 0,
                                'bg-green-500': volume.downloadedChapter === volume.totalChapter
                            }
                        ]">
                        {{ volume.downloadedChapter }}/{{ volume.totalChapter }}
                    </span>
                </div>
            </div>

            <!-- Bouton toggle -->
            <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
                <component
                    :is="isOpen ? ChevronUpIcon : ChevronDownIcon"
                    class="h-6 w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
                    @click="toggleVolume" />
            </div>

            <!-- Actions du volume -->
            <div class="flex space-x-2 text-xl text-bold">
                <button class="w-8 text-center" @click="handleSearch">
                    <MagnifyingGlassIcon class="h-6 w-6 text-gray-500 hover:text-green-500" />
                </button>
                <button class="w-8 text-center" @click="handleDownload">
                    <ArrowDownTrayIcon class="h-6 w-6 text-gray-500 hover:text-green-500" />
                </button>
            </div>
        </div>

        <!-- Liste des chapitres -->
        <MangaChapterList v-show="isOpen" :chapters="volume.chapters" :manga-slug="mangaSlug" />

        <!-- Chevron de fermeture -->
        <div v-show="isOpen" class="flex justify-center p-2 py bg-white rounded-b-sm">
            <ChevronUpIcon
                class="h-6 w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
                @click="toggleVolume" />
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue';
    import {
        BookmarkIcon,
        ChevronUpIcon,
        ChevronDownIcon,
        MagnifyingGlassIcon,
        ArrowDownTrayIcon
    } from '@heroicons/vue/24/outline';
    import MangaChapterList from './MangaChapterList.vue';
    import { useMangaStore } from '../../application/store/mangaStore';

    const props = defineProps({
        volume: {
            type: Object,
            required: true
        },
        mangaSlug: {
            type: String,
            required: true
        },
        isOpen: {
            type: Boolean,
            default: false
        }
    });

    const store = useMangaStore();
    const isOpen = ref(props.isOpen);

    const toggleVolume = () => {
        isOpen.value = !isOpen.value;
    };

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

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