<template>
    <nav
        class="sticky top-0 z-50 w-full border-b border-slate-200/80 dark:border-slate-800/80 bg-white/80 dark:bg-slate-900 backdrop-blur-xl transition-colors duration-300">
        <div class="w-full px-6 md:px-8">
            <div class="flex items-center justify-between h-16">

                <nuxt-link to="/" class="flex items-center gap-3 group flex-shrink-0">
                    <div class="relative">
                        <div
                            class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg blur opacity-25 group-hover:opacity-40 transition duration-300" />
                        <div
                            class="relative w-10 h-10 rounded-lg bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center text-white font-bold text-lg shadow-lg shadow-blue-500/30">
                            A
                        </div>
                    </div>
                    <span class="text-xl font-bold text-slate-900 dark:text-white tracking-tight hidden md:block">
                        Academic<span
                            class="bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">Sys</span>
                    </span>
                </nuxt-link>

                <div class="flex items-center gap-4 md:gap-8">
                    <div class="flex items-center gap-3">

                        <button
                            class="p-2.5 rounded-full text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-700 dark:hover:text-slate-300 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500/50"
                            @click="toggleDark">
                            <svg v-if="!isDark" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                            </svg>
                            <svg v-else class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                            </svg>
                        </button>

                        <div v-if="authStore?.token" ref="userMenuRef" class="relative">
                            <button
                                class="flex items-center gap-3 pl-3 pr-2 py-1.5 rounded-full border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500/50"
                                :class="{ 'bg-slate-50 dark:bg-slate-800 border-slate-300 dark:border-slate-600': isUserMenuOpen }"
                                @click.stop="isUserMenuOpen = !isUserMenuOpen">
                                <span class="text-sm font-semibold text-slate-700 dark:text-slate-200 hidden sm:block">
                                    {{ authStore.user.name.split(' ')[0] }}
                                </span>
                                <div class="relative">
                                    <div
                                        class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full blur opacity-30" />
                                    <img :src="authStore.user.avatarUrl || `https://ui-avatars.com/api/?name=${authStore.user.name}&background=0D8ABC&color=fff`"
                                        alt="Avatar"
                                        class="relative w-9 h-9 rounded-full border-2 border-white dark:border-slate-800 object-cover shadow-md">
                                </div>
                            </button>

                            <transition enter-active-class="transition ease-out duration-100"
                                enter-from-class="transform opacity-0 scale-95"
                                enter-to-class="transform opacity-100 scale-100"
                                leave-active-class="transition ease-in duration-75"
                                leave-from-class="transform opacity-100 scale-100"
                                leave-to-class="transform opacity-0 scale-95">
                                <div v-if="isUserMenuOpen"
                                    class="absolute right-0 mt-2 w-64 bg-white dark:bg-slate-900 rounded-xl shadow-xl border border-slate-200 dark:border-slate-800 py-2 focus:outline-none z-50 ring-1 ring-black/5 dark:ring-white/5">
                                    <div class="px-4 py-3 border-b border-slate-100 dark:border-slate-800 mb-1">
                                        <p
                                            class="text-xs text-slate-500 dark:text-slate-400 font-semibold uppercase tracking-wide">
                                            Signed in as
                                        </p>
                                        <p class="text-sm font-bold text-slate-900 dark:text-white truncate mt-1">{{
                                            authStore.user.email }}</p>
                                    </div>
                                    <button
                                        class="w-full text-left px-4 py-2.5 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 flex items-center gap-3 transition-colors"
                                        @click="navigateTo('/profile')">
                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                                        </svg>
                                        Your Profile
                                    </button>
                                    <div v-if="authStore.user.role == 'ADMINISTRATOR'">
                                        <button
                                            class="w-full text-left px-4 py-2.5 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 flex items-center gap-3 transition-colors"
                                            @click="navigateTo('/admin/users')">
                                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-10c1.657 0 3 .895 3 2s-1.343 2-3 2-3 .895-3 2 1.343 2 3 2m0-10v10m0 0l3-3m-3 3l-3-3" />
                                            </svg>
                                            Admin Dashboard
                                        </button>
                                    </div>
                                    <div class="border-t border-slate-100 dark:border-slate-800 mt-1 pt-1">
                                        <button
                                            class="w-full text-left px-4 py-2.5 text-sm font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center gap-3 transition-colors"
                                            @click="handleLogout">
                                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                                            </svg>
                                            Sign out
                                        </button>
                                    </div>
                                </div>
                            </transition>
                        </div>

                        <template v-else>
                            <nuxt-link to="/auth/login"
                                class="hidden sm:inline-flex items-center justify-center px-6 py-2.5 text-sm font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 rounded-lg shadow-lg shadow-blue-500/30 hover:shadow-blue-500/40 transition-all duration-200 transform hover:-translate-y-0.5 active:translate-y-0">
                                Sign In
                            </nuxt-link>
                        </template>

                        <button
                            class="md:hidden p-2 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
                            @click="isMobileMenuOpen = !isMobileMenuOpen">
                            <svg v-if="!isMobileMenuOpen" class="w-7 h-7" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 6h16M4 12h16M4 18h16" />
                            </svg>
                            <svg v-else class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                </div>

                <transition enter-active-class="transition duration-200 ease-out"
                    enter-from-class="transform -translate-y-4 opacity-0"
                    enter-to-class="transform translate-y-0 opacity-100"
                    leave-active-class="transition duration-150 ease-in"
                    leave-from-class="transform translate-y-0 opacity-100"
                    leave-to-class="transform -translate-y-4 opacity-0">
                    <div v-if="isMobileMenuOpen"
                        class="md:hidden absolute left-0 right-0 top-16 border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-xl">
                        <div class="px-4 pt-2 pb-6 space-y-2">
                            <nuxt-link v-for="link in navLinks" :key="link.path" :to="link.path"
                                class="block px-4 py-3 rounded-lg text-base font-semibold text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
                                active-class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/30 dark:to-indigo-900/30 text-blue-600 dark:text-blue-400"
                                @click="isMobileMenuOpen = false">
                                {{ link.name }}
                            </nuxt-link>
                            <template v-if="!authStore?.token">
                                <nuxt-link to="/auth/login"
                                    class="block w-full text-center mt-6 px-5 py-3 text-base font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg shadow-lg shadow-blue-500/30">
                                    Sign In
                                </nuxt-link>
                            </template>
                        </div>
                    </div>
                </transition>
            </div>
        </div>
    </nav>

    <main class="w-full min-h-screen bg-slate-50 dark:bg-slate-950">
        <slot />
    </main>
</template>

<script setup>
import { useAuthStore } from "~/stores/auth-store.js";

const authStore = useAuthStore();
const router = useRouter();

// State
const isDark = ref(false);
const isUserMenuOpen = ref(false);
const isMobileMenuOpen = ref(false);
const userMenuRef = ref(null);

// Toggle Dark Mode
function toggleDark() {
    isDark.value = !isDark.value;
    if (isDark.value) {
        document.documentElement.classList.add('dark');
        localStorage.theme = 'dark';
    } else {
        document.documentElement.classList.remove('dark');
        localStorage.theme = 'light';
    }
}

// Navigation Links
const navLinks = [
    { name: 'Profile', path: '/profile' },
];

function handleLogout() {
    isUserMenuOpen.value = false;
    isMobileMenuOpen.value = false;
    authStore.logout();
    router.push("/auth/login");
}

function navigateTo(path) {
    isUserMenuOpen.value = false;
    isMobileMenuOpen.value = false;
    router.push(path);
}

function closeDropdowns(event) {
    if (userMenuRef.value && !userMenuRef.value.contains(event.target)) {
        isUserMenuOpen.value = false;
    }
}

onMounted(() => {
    // Initialize Theme
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        isDark.value = true;
        document.documentElement.classList.add('dark');
    }

    // Click listener for closing dropdowns
    window.addEventListener('click', closeDropdowns);
});

onUnmounted(() => {
    window.removeEventListener('click', closeDropdowns);
});
</script>
