<template>
    <div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
        <Header
            :show-menu-button="isReaderMode"
            @menu-click="toggleSidebar"
            @manga-click="$emit('manga-click', $event)"
            @add-manga-click="$emit('add-manga-click', $event)" />
        <Sidebar
            :is-open="isSidebarOpen"
            :force-mobile-behavior="isReaderMode"
            @close="closeSidebar"
            @add-manga-click="$emit('add-manga-click', $event)" />

        <main :class="[
            'flex-1 pt-16',
            isReaderMode ? '' : 'md:ml-60'
        ]">
            <RouterView></RouterView>
        </main>
    </div>
</template>

<script setup>
    import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import Header from './Header.vue';
import Sidebar from './Sidebar.vue';

    const route = useRoute();
    const isSidebarOpen = ref(false);

    // Détecte si on est en mode Reader
    const isReaderMode = computed(() => {
        return route.name === 'reader';
    });

    const toggleSidebar = () => {
        isSidebarOpen.value = !isSidebarOpen.value;
    };

    const closeSidebar = () => {
        isSidebarOpen.value = false;
    };

    defineEmits(['manga-click', 'add-manga-click']);
</script>
