<template>
    <div>
        <Header />

        <div class="main-container" id="container" :class="mainContainerClasses">
            <div
                class="overlay"
                :class="{ show: showMobileSidebarOverlay }"
                @click="layoutStore.toggleSideBar(true)"
            />
            <div
                class="search-overlay"
                :class="{ show: layoutStore.is_show_search }"
                @click="layoutStore.toggleSearch(!layoutStore.is_show_search)"
            />

            <Sidebar />

            <div id="content" class="main-content">
                <router-view />
                <Footer />
            </div>
        </div>

        <AppSettings />
    </div>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useLayoutStore } from '@/store/layoutStore';
import Header from '../components/layout/header.vue';
import Sidebar from '../components/layout/sidebar.vue';
import Footer from '../components/layout/footer.vue';
import AppSettings from '../components/app-settings.vue';

const layoutStore = useLayoutStore();
const isMobile = ref(false);

function syncViewport() {
    isMobile.value = window.innerWidth < 992;
}

/** Overlay solo en móvil cuando el drawer del menú está visible. */
const showMobileSidebarOverlay = computed(
    () => isMobile.value && !layoutStore.is_show_sidebar,
);

const mainContainerClasses = computed(() => {
    const classes = [];
    if (!layoutStore.is_show_sidebar) {
        // Desktop: sidebar-closed expande el contenido.
        // Móvil: sbar-open muestra el drawer encima del contenido.
        classes.push('sidebar-closed');
        if (isMobile.value) {
            classes.push('sbar-open');
        }
    }
    if (layoutStore.menu_style === 'collapsible-vertical') {
        classes.push('collapsible-vertical-mobile');
    }
    return classes;
});

onMounted(() => {
    syncViewport();
    window.addEventListener('resize', syncViewport);
});

onUnmounted(() => {
    window.removeEventListener('resize', syncViewport);
});
</script>
