<template>
    <div class="h-screen overflow-hidden">
        <div class="flex h-full">
            <!-- Mobile sidebar overlay -->
            <Transition name="sidebar-overlay">
                <div
                    v-if="ui.sidebarOpen"
                    class="fixed inset-0 z-40 bg-black/50 lg:hidden"
                    @click="ui.closeMobileSidebar()"
                />
            </Transition>

            <aside
                class="fixed inset-y-0 left-0 z-50 flex h-full flex-shrink-0 flex-col border-r border-neutral-200 bg-tertiary-500 transition-transform duration-300 lg:static lg:z-auto lg:translate-x-0"
                :class="[
                    ui.sidebarCollapsed ? 'lg:w-16' : 'lg:w-64',
                    ui.sidebarOpen ? 'w-64 translate-x-0' : '-translate-x-full',
                ]"
            >
                <div class="flex items-center overflow-hidden" :class="sidebarIsCollapsed ? 'justify-center p-3' : 'justify-between'">
                    <img
                        v-if="!sidebarIsCollapsed"
                        src="/malio.png"
                        alt="Logo"
                        class="w-auto"
                    />
                    <img
                        v-else
                        src="/LOGO_CARRE.png"
                        alt="Logo"
                        class="w-[46px] h-[55px]"
                    />
                    <button
                        class="mr-2 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-700 transition-colors lg:hidden"
                        @click="ui.closeMobileSidebar()"
                    >
                        <Icon name="mdi:close" size="20" />
                    </button>
                </div>
                <nav class="flex-1 overflow-hidden" :class="sidebarIsCollapsed ? 'px-1 pb-6' : 'px-4 pb-6'">
                    <SidebarLink
                        to="/"
                        icon="mdi:view-dashboard-outline"
                        label="Tableau de bord"
                        :collapsed="sidebarIsCollapsed"
                        :class="sidebarIsCollapsed ? 'mt-4' : 'border-t border-secondary-500 pt-6'"
                        @click="ui.closeMobileSidebar()"
                    />
                </nav>

                <div class="flex items-center justify-center p-4">
                    <p v-if="!sidebarIsCollapsed" class="font-bold">v {{ version }}</p>
                </div>

                <!-- Collapse toggle button centered vertically on the sidebar edge -->
                <button
                    class="absolute top-1/2 -right-4 z-10 hidden h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-400 shadow-sm hover:text-neutral-700 transition-colors lg:flex"
                    :title="ui.sidebarCollapsed ? 'Ouvrir le menu' : 'Réduire le menu'"
                    @click="ui.toggleSidebar()"
                >
                    <Icon
                        :name="ui.sidebarCollapsed ? 'mdi:chevron-right' : 'mdi:chevron-left'"
                        size="18"
                    />
                </button>
            </aside>

            <div class="h-full flex-1 flex flex-col min-h-0 min-w-0">
                <AppTopNav :user="auth.user" />
                <main class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-24 sm:px-8 lg:px-16">
                    <div aria-hidden="true" class="pointer-events-none sticky top-0 z-30 h-8 flex-shrink-0 bg-white sm:h-12" />
                    <slot/>
                </main>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useAppVersion } from '~/composables/useAppVersion'

const auth = useAuthStore()
const ui = useUiStore()
const {version} = useAppVersion()
const route = useRoute()

// On mobile, sidebar is always expanded (not collapsed icon mode)
const sidebarIsCollapsed = computed(() => {
    if (ui.sidebarOpen) return false
    return ui.sidebarCollapsed
})

// Close mobile sidebar on route change
watch(() => route.path, () => {
    ui.closeMobileSidebar()
})

useHead({
    titleTemplate: (title) => title || 'Central',
})
</script>

<style scoped>
.sidebar-overlay-enter-active,
.sidebar-overlay-leave-active {
    transition: opacity 0.3s ease;
}
.sidebar-overlay-enter-from,
.sidebar-overlay-leave-to {
    opacity: 0;
}
</style>
