<template>
    <div class="min-h-screen text-neutral-900 grid grid-rows-[85px,1fr]">
        <!-- HEADER -->
        <header class="bg-primary-500 z-50 h-[85px]">
            <div class="h-full w-full px-6 grid grid-cols-[auto,1fr,auto] items-center gap-8">
                <NuxtLink to="/" class="grid place-items-center">
          <span class="grid place-items-center bg-white text-xl font-bold uppercase text-primary-500 p-4">
            LOGO
          </span>
                </NuxtLink>

                <nav class="text-2xl font-bold uppercase text-white"></nav>

                <NuxtLink
                    to="/"
                    class="text-xl font-bold uppercase text-white transition hover:opacity-80 justify-self-end"
                >
                    Quitter le panel admin
                </NuxtLink>
            </div>
        </header>

        <div class="grid grid-cols-[16rem,1fr] h-[calc(100vh-85px)] min-h-0">
            <aside class="bg-primary-500 text-white min-h-0 flex flex-col justify-between">
                <div class="flex flex-col gap-4 p-4 font-bold text-xl">
                    <!-- Liste des liens à ajouter ci-dessous -->
                    <NuxtLink
                        to="/admin/dashboard"
                        custom v-slot="{ href, navigate, isExactActive }">
                        <a :href="href"
                           @click="navigate"
                           :class="isExactActive ? 'opacity-100' : 'opacity-50'">
                            Tableau de bord
                        </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-50'">
                            Fournisseur
                        </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-50'">
                            Transporteur
                        </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-50'"
                        >
                            Utilisateurs
                        </a>
                    </NuxtLink>
                    <NuxtLink to="/admin/customer/customer-list">
                        Client
                    </NuxtLink>
                </div>

                <div class="p-4">

                    <button
                        @click="handleLogout"
                        class="w-full bg-red-600 hover:bg-red-700 py-2 rounded font-bold"
                    >
                        Déconnexion
                    </button>
                    <p class="font-bold text-white text-center pt-2">
                        v{{ version }}
                    </p>
                </div>
            </aside>

            <main class="min-h-0 overflow-auto px-12 py-12 ">
                <div class="w-full ">
                    <slot/>
                </div>
            </main>
        </div>
    </div>
</template>


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

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

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