<template>
    <div class="h-screen overflow-hidden 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 flex flex-col overflow-hidden',
            headerStore.shouldShowHeader ? 'mt-16' : 'mt-0',
            isReaderMode ? '' : 'md:ml-60'
        ]" style="transition: margin-top 300ms ease-in-out;">
            <RouterView></RouterView>
        </main>
    </div>
</template>

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

    const route = useRoute();
    const headerStore = useHeaderStore();
    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>
