<template>
    <div class="min-h-screen text-neutral-900 flex flex-col">
        <!-- HEADER -->
        <header class="w-full bg-primary-500 py-5 px-6">
            <div class="flex w-full items-center justify-between">
                <!-- Burger (mobile) -->
                <button
                    type="button"
                    class="inline-flex items-center justify-center text-3xl text-white md:hidden"
                    aria-label="Ouvrir le menu"
                    @click="toggleMenu"
                >
          <span aria-hidden="true" class="flex items-center">
            <Icon name="mdi:menu" size="44"/>
          </span>
                </button>

                <!-- Logo -->
                <NuxtLink to="/" class="shrink-0">
          <span class="flex items-center justify-center bg-white text-xl font-bold uppercase px-6 py-4">
            LOGO
          </span>
                </NuxtLink>

                <!-- NAV centré (desktop) -->
                <nav
                    class="hidden md:flex flex-1 items-center justify-center gap-8 text-xl font-bold uppercase text-white"
                >
                    <NuxtLink to="/" custom v-slot="{ href, navigate }">
                        <a
                            :href="href"
                            @click="navigate"
                            :class="route.path === '/'
                            ? 'opacity-100'
                            : 'opacity-65 hover:opacity-100 transition'"
                        >
                            Accueil
                        </a>
                    </NuxtLink>

                    <NuxtLink
                        v-if="auth.isAdmin"
                        to="/admin/supplier/supplier-list"
                        custom
                        v-slot="{ href, navigate }"
                    >
                        <a
                            :href="href"
                            @click="navigate"
                            :class="route.path.startsWith('/admin/supplier')
                            ? 'opacity-100'
                            : 'opacity-65 hover:opacity-100 transition'"
                        >
                            Fournisseurs
                        </a>
                    </NuxtLink>

                    <NuxtLink
                        v-if="auth.isAdmin"
                        to="/admin/carrier/carrier-list"
                        custom
                        v-slot="{ href, navigate }"
                    >
                        <a
                            :href="href"
                            @click="navigate"
                            :class="route.path.startsWith('/admin/carrier')
                            ? 'opacity-100'
                            : 'opacity-65 hover:opacity-100 transition'"
                        >
                            Transporteurs
                        </a>
                    </NuxtLink>

                    <NuxtLink
                        v-if="auth.isAdmin"
                        to="/admin/user/list"
                        custom
                        v-slot="{ href, navigate }"
                    >
                        <a
                            :href="href"
                            @click="navigate"
                            :class="route.path.startsWith('/admin/user')
                            ? 'opacity-100'
                            : 'opacity-65 hover:opacity-100 transition'"
                        >
                            Utilisateurs
                        </a>
                    </NuxtLink>

                    <NuxtLink
                        v-if="auth.isAdmin"
                        to="/admin/customer/customer-list"
                        custom
                        v-slot="{ href, navigate }"
                    >
                        <a
                            :href="href"
                            @click="navigate"
                            :class="route.path.startsWith('/admin/customer')
                            ? 'opacity-100'
                            : 'opacity-65 hover:opacity-100 transition'"
                        >
                            Clients
                        </a>
                    </NuxtLink>

                    <NuxtLink
                        v-if="auth.isAdmin"
                        to="/admin/bovin/bovin-list"
                        custom
                        v-slot="{ href, navigate }"
                    >
                        <a
                            :href="href"
                            @click="navigate"
                            :class="route.path.startsWith('/admin/bovin')
                            ? 'opacity-100'
                            : 'opacity-65 hover:opacity-100 transition'"
                        >
                            Bovins
                        </a>
                    </NuxtLink>
                </nav>

                <!-- Spacer mobile (pour centrer visuellement le header si besoin) -->
                <div class="w-[44px] md:hidden"></div>

                <!-- User dropdown à droite (desktop) -->
                <div v-if="auth.isAuthenticated" class="ml-auto relative hidden md:flex items-center text-white group">
                    <button
                        type="button"
                        class="inline-flex items-center py-2 -my-2 text-xl leading-none transition hover:opacity-80"
                        aria-haspopup="true"
                    >
                        <span class="capitalize font-bold">{{ userDisplayName }}</span>
                        <span
                            class="ml-[6px] inline-flex items-center font-bold transition-transform group-hover:rotate-180 group-focus-within:rotate-180">
                            <Icon name="mdi:chevron-down" size="20"/>
                        </span>
                    </button>

                    <div
                        class="absolute right-0 top-full z-10 w-56 rounded-md bg-primary-500 py-2 border-neutral-300 border shadow-lg
                        opacity-0 invisible pointer-events-none transition
                        group-hover:opacity-100 group-hover:visible group-hover:pointer-events-auto
                        group-focus-within:opacity-100 group-focus-within:visible group-focus-within:pointer-events-auto"
                        role="menu"
                    >
                        <button
                            type="button"
                            class="w-full px-4 py-2 text-left text-sm font-semibold text-white opacity-85 hover:opacity-100 transition"
                            @click="handleLogout"
                        >
                            Déconnexion
                        </button>
                    </div>
                </div>
            </div>

            <!-- Overlay (mobile) -->
            <transition
                enter-active-class="transition duration-200 ease-out"
                enter-from-class="opacity-0"
                enter-to-class="opacity-100"
                leave-active-class="transition duration-150 ease-in"
                leave-from-class="opacity-100"
                leave-to-class="opacity-0"
            >
                <div
                    v-if="isMenuOpen"
                    class="fixed inset-0 z-40 bg-black/40 md:hidden"
                    @click="closeMenu"
                />
            </transition>

            <!-- Drawer (mobile) -->
            <transition
                enter-active-class="transition duration-200 ease-out"
                enter-from-class="-translate-x-full"
                enter-to-class="translate-x-0"
                leave-active-class="transition duration-150 ease-in"
                leave-from-class="translate-x-0"
                leave-to-class="-translate-x-full"
            >
                <aside
                    v-if="isMenuOpen"
                    class="fixed left-0 top-0 z-50 h-full w-full bg-primary-500 px-6 pb-8 pt-6 text-white shadow-xl md:hidden"
                >
                    <div class="flex items-center justify-between">
                        <span class="text-2xl font-bold uppercase">Menu</span>
                        <button
                            type="button"
                            class="text-2xl"
                            aria-label="Fermer le menu"
                            @click="closeMenu"
                        >
                            <Icon name="mdi:close" size="44"/>
                        </button>
                    </div>

                    <nav class="mt-8 flex flex-col gap-6 text-xl font-bold uppercase">
                        <NuxtLink to="/admin/dashboard" @click="closeMenu">Accueil</NuxtLink>
                        <NuxtLink v-if="auth.isAdmin" to="/admin/supplier/supplier-list" @click="closeMenu">
                            Fournisseurs
                        </NuxtLink>
                        <NuxtLink v-if="auth.isAdmin" to="/admin/carrier/carrier-list" @click="closeMenu">
                            Transporteurs
                        </NuxtLink>
                        <NuxtLink v-if="auth.isAdmin" to="/admin/user/list" @click="closeMenu">
                            Utilisateurs
                        </NuxtLink>
                        <NuxtLink v-if="auth.isAdmin" to="/admin/customer/customer-list" @click="closeMenu">
                            Clients
                        </NuxtLink>
                        <NuxtLink v-if="auth.isAdmin" to="/admin/bovin/bovin-list" @click="closeMenu">
                            Bovins
                        </NuxtLink>
                    </nav>

                    <button
                        v-if="auth.isAuthenticated"
                        type="button"
                        class="mt-6 text-xl font-bold uppercase"
                        @click="handleLogout"
                    >
                        Déconnexion
                    </button>
                </aside>
            </transition>
        </header>
        <main class="mx-auto w-full max-w-[1280px] mt-16">
            <slot/>
        </main>
        <footer class="w-full mt-auto bg-primary-500 px-6 py-3">
            <p class="font-bold text-white text-right">v{{ version }}</p>
        </footer>
    </div>
</template>

<script setup lang="ts">
import {useAuthStore} from '~/stores/auth'

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

const isMenuOpen = ref(false)

const userDisplayName = computed(() => auth.user?.username ?? 'Utilisateur')

const closeMenu = () => {
    isMenuOpen.value = false
}

const toggleMenu = () => {
    isMenuOpen.value = !isMenuOpen.value
}

const handleLogout = async () => {
    try {
        await auth.logout()
    } finally {
        closeMenu()
        await navigateTo('/login')
    }
}
</script>
