<script setup lang="ts">
import { Link, usePage } from '@inertiajs/vue3';
import { LayoutGrid, Gift, Settings, LogOut, Menu, X, Bell, CheckCircle, AlertCircle, Info } from 'lucide-vue-next';
import { ref, watch, onMounted } from 'vue';

const isSidebarOpen = ref(true);
const page = usePage();

const navItems = [
    { title: 'Dashboard', href: '/dashboard', icon: LayoutGrid },
    { title: 'Bonuses', href: '/admin/bonuses', icon: Gift },
    { title: 'Settings', href: '/admin/settings', icon: Settings },
];

const notification = ref<{ message: string; type: 'success' | 'error' | 'info' } | null>(null);

const showNotification = (message: string, type: 'success' | 'error' | 'info' = 'success') => {
    notification.value = { message, type };
    setTimeout(() => {
        notification.value = null;
    }, 5000);
};

// Safely watch for flash messages from Inertia
watch(() => page.props.flash, (flash: any) => {
    if (flash?.success) showNotification(flash.success, 'success');
    if (flash?.error) showNotification(flash.error, 'error');
}, { deep: true });

onMounted(() => {
    // Initial check for flash messages
    const flash = page.props.flash as any;
    if (flash?.success) showNotification(flash.success, 'success');
    if (flash?.error) showNotification(flash.error, 'error');
});
</script>

<template>
    <div class="min-h-screen bg-[#020617] text-white font-sans selection:bg-purple-500/30">
        <!-- Notifications -->
        <div class="fixed top-6 right-6 z-[100] space-y-4 max-w-md w-full">
            <TransitionGroup
                enter-active-class="transform transition duration-300 ease-out"
                enter-from-class="translate-y-[-20px] opacity-0"
                enter-to-class="translate-y-0 opacity-100"
                leave-active-class="transition duration-200 ease-in"
                leave-from-class="opacity-100"
                leave-to-class="opacity-0"
            >
                <div
                    v-if="notification"
                    :key="notification.message"
                    :class="[
                        'p-4 rounded-2xl border backdrop-blur-xl shadow-2xl flex items-center gap-4',
                        notification.type === 'success' ? 'bg-green-500/10 border-green-500/20 text-green-400' :
                        notification.type === 'error' ? 'bg-red-500/10 border-red-500/20 text-red-400' :
                        'bg-blue-500/10 border-blue-500/20 text-blue-400'
                    ]"
                >
                    <CheckCircle v-if="notification.type === 'success'" :size="20" />
                    <AlertCircle v-else-if="notification.type === 'error'" :size="20" />
                    <Info v-else :size="20" />
                    <span class="text-sm font-bold tracking-tight">{{ notification.message }}</span>
                    <button @click="notification = null" class="ml-auto hover:opacity-70 transition">
                        <X :size="16" />
                    </button>
                </div>
            </TransitionGroup>
        </div>

        <!-- Sidebar -->
        <aside
            :class="[
                'fixed left-0 top-0 h-full bg-[#0f172a] border-r border-white/5 z-50 transition-all duration-300 shadow-2xl shadow-black',
                isSidebarOpen ? 'w-64' : 'w-20'
            ]"
        >
            <div class="p-6 flex items-center justify-between">
                <div v-if="isSidebarOpen" class="text-xl font-black italic tracking-tighter text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-500">
                    BRATAN ADMIN
                </div>
                <button @click="isSidebarOpen = !isSidebarOpen" class="text-gray-400 hover:text-white transition p-1 rounded-lg hover:bg-white/5">
                    <Menu v-if="!isSidebarOpen" :size="20" />
                    <X v-else :size="20" />
                </button>
            </div>

            <nav class="mt-10 px-4 space-y-2">
                <Link
                    v-for="item in navItems"
                    :key="item.href"
                    :href="item.href"
                    :class="[
                        'flex items-center gap-4 px-4 py-3 rounded-xl transition-all duration-200 group',
                        $page.url.startsWith(item.href)
                            ? 'bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-lg shadow-purple-500/20'
                            : 'text-gray-400 hover:bg-white/5 hover:text-white'
                    ]"
                >
                    <component :is="item.icon" :size="20" :class="$page.url.startsWith(item.href) ? 'text-white' : 'group-hover:text-purple-400'" />
                    <span v-if="isSidebarOpen" class="font-bold text-sm tracking-wide uppercase">{{ item.title }}</span>
                </Link>
            </nav>

            <div class="absolute bottom-8 left-0 w-full px-4">
                <Link
                    href="/logout"
                    method="post"
                    as="button"
                    class="w-full flex items-center gap-4 px-4 py-3 text-gray-400 hover:bg-red-500/10 hover:text-red-400 rounded-xl transition-all duration-200 group"
                >
                    <LogOut :size="20" />
                    <span v-if="isSidebarOpen" class="font-bold text-sm tracking-wide uppercase">Logout</span>
                </Link>
            </div>
        </aside>

        <!-- Main Content -->
        <main
            :class="[
                'transition-all duration-300 min-h-screen pb-20',
                isSidebarOpen ? 'ml-64' : 'ml-20'
            ]"
        >
            <!-- Top Header -->
            <header class="h-20 border-b border-white/5 bg-[#020617]/50 backdrop-blur-md sticky top-0 z-40 px-8 flex items-center justify-between">
                <div>
                    <h2 class="text-xs font-black text-gray-500 uppercase tracking-[0.2em]">Admin Management</h2>
                    <div class="flex items-center gap-2 text-sm">
                        <span class="text-white font-medium capitalize">{{ $page.url.split('/')[2] || 'Dashboard' }}</span>
                    </div>
                </div>

                <div class="flex items-center gap-6">
                    <div class="flex items-center gap-3">
                        <div class="text-right">
                            <div class="text-sm font-bold">{{ page.props.auth.user.name }}</div>
                            <div class="text-[10px] text-purple-400 font-black uppercase tracking-widest">Administrator</div>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 p-[2px]">
                            <div class="w-full h-full rounded-full bg-[#0f172a] flex items-center justify-center font-bold text-xs">
                                {{ page.props.auth.user.name.charAt(0) }}
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <div class="p-8">
                <slot />
            </div>
        </main>
    </div>
</template>

<style>
@reference "../../css/app.css";

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #020617;
}
::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #334155;
}
</style>
