<!--
    Valeurs en dur issues de la maquette Figma (design Starseed) :
      - sidebar depliee : 232px (w-[232px], repli laisse par defaut 72px)
      - marge horizontale du contenu sur desktop : 170px (xl:px-[170px])
    La marge haute du contenu (44px) vit desormais DANS l'entete (PageHeader,
    pt-11) et non sur le <main> : sinon, l'entete etant sticky, ce padding
    laissait un trou blanc entre le SiteSelector et l'entete.
    A faire evoluer uniquement avec une mise a jour de maquette.
-->
<template>
    <div class="h-screen overflow-hidden">
        <div class="flex h-full">
            <MalioSidebar
                v-model="ui.sidebarCollapsed"
                :sections="translatedSections"
                :sidebar-class="ui.sidebarCollapsed ? '' : 'w-[232px]'"
            >
                <template #logo>
                    <img src="/LOGO_MALIO.png" alt="Malio"/>
                </template>
                <template #logo-collapsed>
                    <img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio"/>
                </template>
            </MalioSidebar>

            <div class="h-full flex-1 flex flex-col min-h-0 min-w-0">
                <SiteSelector v-if="showSiteSelector"/>
                <main
                    class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-10 sm:px-6 lg:px-12 xl:px-11">
                    <slot/>
                </main>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const {t} = useI18n()
const ui = useUiStore()
const {sections} = useSidebar()
const {isModuleActive} = useModules()
const auth = useAuthStore()
const route = useRoute()

// Le SiteSelector est rendu si :
//  - le module Sites est actif dans config/modules.php (sinon la feature
//    n'a pas de sens, cf. ticket 3 spec criteres d'acceptation) ;
//  - ET l'user connecte a au moins un site autorise (sinon "barre vide"
//    sans tile cliquable).
// Les deux flags sont resolus par le middleware auth.global.ts avant
// que le layout ne soit rendu (plan load parallele), donc pas de flash.
const showSiteSelector = computed(() =>
    isModuleActive('sites') && (auth.user?.sites?.length ?? 0) > 0,
)

const translatedSections = computed(() =>
    sections.value.map(section => ({
        label: t(section.label),
        icon: section.icon,
        items: section.items.map(item => ({
            label: t(item.label),
            to: item.to,
        })),
    }))
)

watch(() => route.path, () => {
    ui.closeMobileSidebar()
})

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