<template>
    <div class="chapter-page">
        <div class="chapter-header">
            <!-- Bouton de retour -->
            <div class="flex items-center gap-4 mb-4">
                <button
                    @click="goBackToManga"
                    class="flex items-center gap-2 px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-white transition-colors duration-200"
                    :disabled="!currentChapter?.mangaId"
                >
                    <ArrowLeftIcon class="h-5 w-5" />
                    <span class="text-sm font-medium">Retour au manga</span>
                </button>
            </div>

            <!-- Titre du chapitre amélioré -->
            <div class="chapter-title-section">
                <h1 class="text-3xl md:text-4xl font-bold text-white leading-tight">
                    {{ currentChapter?.title || 'Chargement...' }}
                </h1>
                <div class="chapter-meta mt-3">
                    <span class="inline-flex items-center px-3 py-1 bg-blue-600 text-white text-sm font-semibold rounded-full">
                        Chapitre {{ currentChapter?.number }}
                    </span>
                </div>
            </div>
        </div>

        <div class="reader-container">
            <ChapterReader :chapter-id="chapterId" />
        </div>
    </div>
</template>

<script setup>
    import { ArrowLeftIcon } from '@heroicons/vue/24/outline';
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useReaderStore } from '../../application/store/readerStore';
import ChapterReader from '../components/ChapterReader.vue';

    const route = useRoute();
    const router = useRouter();
    const store = useReaderStore();

    const chapterId = computed(() => route.params.chapterId);
    const currentChapter = computed(() => store.currentChapter);

    const goBackToManga = () => {
        if (currentChapter.value?.mangaId) {
            router.push({ name: 'manga-details', params: { id: currentChapter.value.mangaId } });
        }
    };
</script>

<style lang="postcss" scoped>
    .chapter-page {
        @apply w-full h-full flex flex-col;
    }

    .chapter-header {
        @apply p-6 bg-gradient-to-b from-gray-800 to-gray-900 border-b border-gray-700 shadow-lg;
    }

    .chapter-title-section {
        @apply space-y-2;
    }

    .chapter-meta {
        @apply flex flex-wrap items-center gap-3;
    }

    .reader-container {
        @apply flex-1 overflow-hidden;
    }
</style>
