<template>
    <div class="h-screen overflow-hidden">
        <div class="flex h-full">
            <!-- Mobile overlay -->
            <Transition
                enter-active-class="transition-opacity duration-300"
                enter-from-class="opacity-0"
                enter-to-class="opacity-100"
                leave-active-class="transition-opacity duration-300"
                leave-from-class="opacity-100"
                leave-to-class="opacity-0"
            >
                <div
                    v-if="sidebarOpen"
                    class="fixed inset-0 z-40 bg-black/50 lg:hidden"
                    @click="sidebarOpen = false"
                />
            </Transition>

            <!-- Sidebar -->
            <aside
                :class="[
                    'fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-neutral-200 bg-tertiary-500 transition-transform duration-300 lg:static lg:translate-x-0 lg:flex-shrink-0',
                    sidebarOpen ? 'translate-x-0' : '-translate-x-full'
                ]"
            >
                <div class="flex h-[75px] items-center justify-between">
                    <img src="/malio.png" alt="Logo" class="w-auto"/>
                    <button
                        type="button"
                        class="mr-3 rounded-md p-1 text-primary-500 hover:text-secondary-500 lg:hidden"
                        @click="sidebarOpen = false"
                    >
                        <Icon name="mdi:close" size="24"/>
                    </button>
                </div>
                <nav class="flex-1 overflow-y-auto px-4 pb-6">
                    <template v-if="isAdmin">
                        <NuxtLink
                            to="/calendar"
                            class="flex items-center gap-2 pb-2 pt-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500 border-t border-secondary-500"
                            :class="route.path.startsWith('/calendar')
                            ? 'bg-tertiary-500 text-primary-500 font-bold'
                            : ''"
                            @click="closeSidebarOnMobile"
                        >
                            <Icon name="mdi:calendar-blank" size="24"/>
                            <p>Calendrier</p>
                        </NuxtLink>
                    </template>
                    <NuxtLink
                        v-if="isAdmin || !isDriver"
                        to="/hours"
                        class="flex items-center gap-2 py-2 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
                        :class="[
                            route.path.startsWith('/hours') ? 'bg-tertiary-500 text-primary-500 font-bold' : '',
                            !isAdmin ? 'border-t border-secondary-500 pt-3' : ''
                        ]"
                        @click="closeSidebarOnMobile"
                    >
                        <Icon name="mdi:clock-time-four-outline" size="24"/>
                        <p>Heures</p>
                    </NuxtLink>
                    <NuxtLink
                        v-if="isAdmin || isDriver"
                        to="/driver-hours"
                        class="flex items-center gap-2 py-2 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
                        :class="[
                            route.path.startsWith('/driver-hours') ? 'bg-tertiary-500 text-primary-500 font-bold' : '',
                            !isAdmin && isDriver ? 'border-t border-secondary-500 pt-3' : ''
                        ]"
                        @click="closeSidebarOnMobile"
                    >
                        <Icon name="mdi:truck-outline" size="24"/>
                        <p>Heures Conducteurs</p>
                    </NuxtLink>
                    <template v-if="isAdmin">
                        <NuxtLink
                            to="/employees"
                            class="flex items-center gap-2 py-2 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
                            :class="route.path.startsWith('/employees')
                            ? 'bg-tertiary-500 text-primary-500 font-bold'
                            : ''"
                            @click="closeSidebarOnMobile"
                        >
                            <Icon name="mdi:account-group-outline" size="24"/>
                            <p>Employés</p>
                        </NuxtLink>
                        <NuxtLink
                            v-if="hasLeaveRecapAccess"
                            to="/leave-recap"
                            class="flex items-center gap-2 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
                            :class="route.path.startsWith('/leave-recap')
                            ? 'bg-tertiary-500 text-primary-500 font-bold'
                            : ''"
                            @click="closeSidebarOnMobile"
                        >
                            <Icon name="mdi:beach" size="24"/>
                            <p>Récap. congés</p>
                        </NuxtLink>
                        <NuxtLink
                            to="/sites"
                            class="flex items-center gap-2 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
                            :class="route.path.startsWith('/sites')
                            ? 'bg-tertiary-500 text-primary-500 font-bold'
                            : ''"
                            @click="closeSidebarOnMobile"
                        >
                            <Icon name="mdi:business" size="24"/>
                            <p>Sites</p>
                        </NuxtLink>
                        <NuxtLink
                            to="/absence-types"
                            class="flex items-center gap-2 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
                            :class="route.path.startsWith('/absence-types')
                            ? 'bg-tertiary-500 text-primary-500 font-bold'
                            : ''"
                            @click="closeSidebarOnMobile"
                        >
                            <Icon name="mdi:umbrella-beach-outline" size="24"/>
                            <p>Types de statut</p>
                        </NuxtLink>
                        <NuxtLink
                            to="/users"
                            class="flex items-center gap-3 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
                            :class="route.path.startsWith('/users')
                            ? 'bg-tertiary-500 text-primary-500 font-bold'
                            : ''"
                            @click="closeSidebarOnMobile"
                        >
                            <Icon name="mdi:account-outline" size="24"/>
                            <p>Utilisateurs</p>
                        </NuxtLink>
                    </template>
                    <NuxtLink
                        v-if="hasLeaveRecapAccess && !isAdmin"
                        to="/leave-recap"
                        class="flex items-center gap-2 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500 pt-3"
                        :class="route.path.startsWith('/leave-recap') ? 'bg-tertiary-500 text-primary-500 font-bold' : ''"
                        @click="closeSidebarOnMobile"
                    >
                        <Icon name="mdi:beach" size="24"/>
                        <p>Récap. congés</p>
                    </NuxtLink>
                    <NuxtLink
                        v-if="isSuperAdmin"
                        to="/audit-logs"
                        class="flex items-center gap-2 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
                        :class="route.path.startsWith('/audit-logs')
                            ? 'bg-tertiary-500 text-primary-500 font-bold'
                            : ''"
                        @click="closeSidebarOnMobile"
                    >
                        <Icon name="mdi:clipboard-text-clock-outline" size="24"/>
                        <p>Journal</p>
                    </NuxtLink>
                    <NuxtLink
                        to="/documentation"
                        class="flex items-center gap-2 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
                        :class="route.path.startsWith('/documentation')
                            ? 'bg-tertiary-500 text-primary-500 font-bold'
                            : ''"
                        @click="closeSidebarOnMobile"
                    >
                        <Icon name="mdi:book-open-page-variant-outline" size="24"/>
                        <p>Documentation</p>
                    </NuxtLink>
                </nav>

                <div class="flex flex-col gap-2 items-center p-4">
                    <p class="font-bold">v{{ version }}</p>
                </div>
            </aside>

            <div class="h-full flex-1 overflow-hidden flex flex-col min-w-0">
                <AppTopNav :user="auth.user" @toggle-sidebar="sidebarOpen = !sidebarOpen" />
                <main class="flex-1 overflow-y-auto [scrollbar-gutter:stable] px-4 py-6 lg:px-8 lg:py-12">
                    <slot/>
                </main>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const auth = useAuthStore()
const {version} = useAppVersion()
const isAdmin = computed(() => auth.user?.roles?.includes('ROLE_ADMIN') ?? false)
const isSuperAdmin = computed(() => auth.user?.roles?.includes('ROLE_SUPER_ADMIN') ?? false)
const isDriver = computed(() => auth.user?.isDriver ?? false)
const hasLeaveRecapAccess = computed(() => auth.user?.hasLeaveRecapAccess ?? false)
const route = useRoute()
const sidebarOpen = ref(false)

const closeSidebarOnMobile = () => {
    sidebarOpen.value = false
}
</script>
