<template>
    <div class="min-h-screen text-neutral-900 grid grid-rows-[85px,1fr]">
        <!-- HEADER -->
        <header class="w-full border-b border-neutral-200 bg-primary-500 ">
            <div class="flex w-full items-center p-3 ">
                <NuxtLink to="/" class="ml-4 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="flex flex-1 items-center justify-center gap-8 text-xl font-semibold uppercase text-white">
                    <NuxtLink to="/admin/dashboard" custom v-slot="{ href, navigate }">
                        <a
                            :href="href"
                            @click="navigate"
                            :class="route.path === '/admin/dashboard' ? 'opacity-100' : 'opacity-65 hover:opacity-100 transition'"
                        >
                            Accueil
                        </a>
                    </NuxtLink>

                    <NuxtLink 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 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 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 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>
                </nav>

                <!-- User dropdown à droite (desktop) -->
                <div class="ml-auto relative flex items-center text-white">
                    <button
                        type="button"
                        class="inline-flex items-center gap-2 text-xl leading-none transition hover:opacity-80"
                        @click="toggleUserMenu"
                        aria-haspopup="true"
                        :aria-expanded="isUserMenuOpen ? 'true' : 'false'"
                    >
                        <span class="capitalize">{{ userDisplayName }}</span>
                        <span class="inline-flex items-center">
                            <Icon v-if="isUserMenuOpen" name="mdi:chevron-up" size="20"/>
                            <Icon v-else name="mdi:chevron-down" size="20"/>
                        </span>
                    </button>
                    <div
                        v-if="isUserMenuOpen"
                        class="absolute right-0 top-full z-10 mt-2 w-56 rounded-md bg-primary-500 py-2 text-neutral-900 border-neutral-300 border shadow-lg"
                        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>
        </header>

        <main class="mx-auto w-full max-w-[1280px] py-2">
            <slot/>
        </main>

        <footer class="w-full mt-8 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 isUserMenuOpen = ref(false)

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

const toggleUserMenu = () => {
    isUserMenuOpen.value = !isUserMenuOpen.value
}

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