<script setup>
import { ref, computed, onMounted } from 'vue';
import { Link, usePage, router } from '@inertiajs/vue3';
import NotificationDropdown from '@/Components/NotificationDropdown.vue';
import DarkModeToggle from '@/Components/DarkModeToggle.vue';
import ImpersonationBanner from '@/Components/ImpersonationBanner.vue';
import RealTimeNotifications from '@/Components/RealTimeNotifications.vue';
import UserAvatar from '@/Components/UserAvatar.vue';
import BottomSheet from '@/Components/Mobile/BottomSheet.vue';
import MobileNavigationDrawer from '@/Components/Mobile/MobileNavigationDrawer.vue';
import { useDarkMode } from '@/Composables/useDarkMode';

const page = usePage();
const user = computed(() => page.props.auth.user);
const appName = computed(() => page.props.appName || 'CoachPro');
const appLogo = computed(() => page.props.appLogo || null);
const impersonating = computed(() => page.props.impersonating?.active ?? false);
const unreadMessages = computed(() => page.props.unreadMessages || 0);
const unreadChatMessages = computed(() => page.props.unreadChatMessages || 0);
const chatNotifications = computed(() => page.props.chatNotifications || []);
const systemNotifications = computed(() => page.props.systemNotifications || []);

// Initialize dark mode
const { isDark, initDarkMode } = useDarkMode();
onMounted(() => {
    initDarkMode();
});

// Sidebar state (desktop + tablet)
const sidebarCollapsed = ref(false);

// BottomSheet state
const showMoreSheet = ref(false);

// Mobile drawer state
const showMobileDrawer = ref(false);

// Expanded menus state
const expandedMenus = ref({});
const toggleMenu = (menuName) => {
    expandedMenus.value[menuName] = !expandedMenus.value[menuName];
};

// Persist sidebar state y auto-colapsar en tablets
onMounted(() => {
    const saved = localStorage.getItem('adminSidebarCollapsed');
    if (saved !== null) {
        sidebarCollapsed.value = saved === 'true';
    } else {
        // Auto-colapsar en tablets (768-1023px) por defecto
        const isTablet = window.innerWidth >= 768 && window.innerWidth < 1024;
        if (isTablet) {
            sidebarCollapsed.value = true;
        }
    }
});

const toggleSidebar = () => {
    sidebarCollapsed.value = !sidebarCollapsed.value;
    localStorage.setItem('adminSidebarCollapsed', sidebarCollapsed.value.toString());
};

const navigationItems = [
    {
        name: 'Dashboard',
        href: 'admin.dashboard',
        icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'
    },
    {
        name: 'Usuarios',
        icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z',
        children: [
            { name: 'Todos los Usuarios', href: 'admin.users.index' },
            { name: 'Moderadores', href: 'admin.moderators.index' },
        ]
    },
    {
        name: 'Planes',
        href: 'admin.plans.index',
        icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01'
    },
    {
        name: 'Suscripciones',
        href: 'admin.subscriptions.index',
        icon: 'M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z'
    },
    {
        name: 'Alimentos',
        href: 'admin.foods.index',
        icon: 'M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z'
    },
    {
        name: 'Blog',
        href: 'admin.posts.index',
        icon: 'M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z'
    },
    {
        name: 'Tienda',
        icon: 'M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z',
        highlight: true,
        children: [
            { name: 'Productos', href: 'admin.store.products.index' },
            { name: 'Categorias', href: 'admin.store.categories.index' },
            { name: 'Cupones', href: 'admin.store.coupons.index' },
            { name: 'Pedidos', href: 'admin.store.orders.index' },
            { name: 'Ajustes', href: 'admin.store.settings.index' },
        ]
    },
    {
        name: 'Bancos',
        icon: 'M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z',
        children: [
            { name: 'Cuentas Bancarias', href: 'admin.banks.index' },
            { name: 'Billeteras', href: 'admin.wallets.index' },
        ]
    },
    {
        name: 'Facturas/Pagos',
        href: 'admin.invoices.index',
        icon: 'M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2zM10 8.5a.5.5 0 11-1 0 .5.5 0 011 0zm5 5a.5.5 0 11-1 0 .5.5 0 011 0z'
    },
    {
        name: 'Plantillas Email',
        href: 'admin.email-templates.index',
        icon: 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'
    },
    {
        name: 'Paginas',
        href: 'admin.pages.index',
        icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
    },
    {
        name: 'Editor Landing',
        href: 'admin.landing.index',
        icon: 'M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z'
    },
    {
        name: 'Soporte',
        icon: 'M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z',
        children: [
            { name: 'Chat con Coaches', href: 'admin.chat.index' },
            { name: 'Difusion', href: 'admin.broadcast.index' },
        ]
    },
    {
        name: 'Referidos',
        href: 'admin.referrals.index',
        icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m9 5.197v-1a6 6 0 00-3-5.197'
    },
    {
        name: 'Configuracion',
        href: 'admin.settings.index',
        icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z'
    },
];

// Bottom nav tabs (mobile) â€” 4 + "Mas"
const bottomNavItems = [
    { name: 'Panel', route: 'admin.dashboard', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' },
    { name: 'Usuarios', route: 'admin.users.index', icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z' },
    { name: 'Tienda', route: 'admin.store.products.index', icon: 'M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z' },
    { name: 'Soporte', route: 'admin.chat.index', icon: 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z' },
];

// "Mas" sheet items - everything not in bottom tabs
const moreSheetItems = [
    { name: 'Planes', href: 'admin.plans.index', icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2', color: 'text-blue-500 bg-blue-100 dark:bg-blue-900/50', desc: 'Gestionar planes' },
    { name: 'Suscripciones', href: 'admin.subscriptions.index', icon: 'M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z', color: 'text-yellow-500 bg-yellow-100 dark:bg-yellow-900/50', desc: 'Gestionar suscripciones' },
    { name: 'Alimentos', href: 'admin.foods.index', icon: 'M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z', color: 'text-green-500 bg-green-100 dark:bg-green-900/50', desc: 'Base de datos' },
    { name: 'Blog', href: 'admin.posts.index', icon: 'M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z', color: 'text-purple-500 bg-purple-100 dark:bg-purple-900/50', desc: 'Publicaciones' },
    { name: 'Facturas/Pagos', href: 'admin.invoices.index', icon: 'M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z', color: 'text-emerald-500 bg-emerald-100 dark:bg-emerald-900/50', desc: 'Facturacion' },
    { name: 'Bancos', href: 'admin.banks.index', icon: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4', color: 'text-gray-500 bg-gray-100 dark:bg-gray-800', desc: 'Cuentas bancarias' },
    { name: 'Billeteras', href: 'admin.wallets.index', icon: 'M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z', color: 'text-indigo-500 bg-indigo-100 dark:bg-indigo-900/50', desc: 'Billeteras de coaches' },
    { name: 'Plantillas Email', href: 'admin.email-templates.index', icon: 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z', color: 'text-cyan-500 bg-cyan-100 dark:bg-cyan-900/50', desc: 'Plantillas de correo' },
    { name: 'Paginas', href: 'admin.pages.index', icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', color: 'text-orange-500 bg-orange-100 dark:bg-orange-900/50', desc: 'Paginas estaticas' },
    { name: 'Editor Landing', href: 'admin.landing.index', icon: 'M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z', color: 'text-pink-500 bg-pink-100 dark:bg-pink-900/50', desc: 'Personalizar landing' },
    { name: 'Difusion', href: 'admin.broadcast.index', icon: 'M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z', color: 'text-red-500 bg-red-100 dark:bg-red-900/50', desc: 'Mensajes masivos' },
    { name: 'Referidos', href: 'admin.referrals.index', icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m9 5.197v-1a6 6 0 00-3-5.197', color: 'text-teal-500 bg-teal-100 dark:bg-teal-900/50', desc: 'Programa de referidos' },
    { name: 'Configuracion', href: 'admin.settings.index', icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z', color: 'text-gray-600 bg-gray-200 dark:bg-gray-700', desc: 'Ajustes del sistema' },
];

const isActive = (routeName) => {
    return route().current(routeName) || route().current(routeName + '.*');
};

const isMoreActive = computed(() => {
    return moreSheetItems.some(item => isActive(item.href));
});

const logout = () => {
    router.post(route('logout'));
};

const navigateFromSheet = (href) => {
    showMoreSheet.value = false;
    router.visit(route(href));
};
</script>

<template>
    <div class="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
        <!-- Impersonation Banner -->
        <ImpersonationBanner />
        <!-- Real-time notifications toast -->
        <RealTimeNotifications />

        <!-- ============================================ -->
        <!-- DESKTOP SIDEBAR (hidden on mobile, lg:flex) -->
        <!-- ============================================ -->
        <div
            :class="[
                'hidden lg:fixed lg:inset-y-0 lg:flex lg:flex-col bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 transition-all duration-300',
                sidebarCollapsed ? 'lg:w-20' : 'lg:w-64'
            ]"
        >
            <!-- Logo -->
            <div class="flex items-center justify-between h-16 px-4 border-b border-gray-200 dark:border-gray-700">
                <Link :href="route('admin.dashboard')" class="flex items-center space-x-2 overflow-hidden">
                    <img v-if="appLogo" :src="appLogo" :alt="appName" class="h-10 max-w-[160px] object-contain flex-shrink-0 dark:brightness-0 dark:invert" />
                    <template v-else>
                        <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                        </div>
                        <span
                            v-if="!sidebarCollapsed"
                            class="text-lg font-bold text-gray-900 dark:text-white whitespace-nowrap"
                        >
                            {{ appName }}
                        </span>
                    </template>
                </Link>
            </div>

            <!-- Navigation -->
            <nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
                <template v-for="item in navigationItems" :key="item.name">
                    <div v-if="item.children">
                        <button
                            @click="toggleMenu(item.name)"
                            :class="[
                                item.highlight && !(expandedMenus[item.name] || item.children.some(c => isActive(c.href)))
                                    ? 'bg-gradient-to-r from-orange-500/10 to-amber-500/10 dark:from-orange-500/15 dark:to-amber-500/15 text-orange-700 dark:text-orange-300 ring-1 ring-orange-500/20 dark:ring-orange-400/20 hover:from-orange-500/20 hover:to-amber-500/20'
                                    : expandedMenus[item.name] || item.children.some(c => isActive(c.href))
                                        ? 'bg-gray-50 dark:bg-gray-700/50 text-gray-900 dark:text-white'
                                        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700',
                                'w-full group flex items-center justify-between px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200'
                            ]"
                            :title="sidebarCollapsed ? item.name : ''"
                        >
                            <div class="flex items-center">
                                <svg
                                    :class="[
                                        item.highlight ? 'text-orange-500 dark:text-orange-400' : item.children.some(c => isActive(c.href)) ? 'text-indigo-500 dark:text-indigo-400' : 'text-gray-400',
                                        'h-5 w-5 flex-shrink-0 transition-colors',
                                        sidebarCollapsed ? '' : 'mr-3'
                                    ]"
                                    fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                >
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
                                </svg>
                                <span v-if="!sidebarCollapsed" class="truncate">{{ item.name }}</span>
                            </div>
                            <svg v-if="!sidebarCollapsed" :class="['w-4 h-4 transition-transform', expandedMenus[item.name] ? 'rotate-180' : '']" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div v-if="!sidebarCollapsed && (expandedMenus[item.name] || item.children.some(c => isActive(c.href)))" class="mt-1 ml-4 pl-4 border-l-2 border-gray-200 dark:border-gray-700 space-y-1">
                            <Link
                                v-for="child in item.children"
                                :key="child.name"
                                :href="route(child.href)"
                                :class="[
                                    isActive(child.href)
                                        ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400'
                                        : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700',
                                    'block px-3 py-2 text-sm rounded-lg transition-colors'
                                ]"
                            >
                                {{ child.name }}
                            </Link>
                        </div>
                    </div>
                    <Link
                        v-else
                        :href="route(item.href)"
                        :class="[
                            isActive(item.href)
                                ? 'bg-gradient-to-r from-indigo-500/10 to-purple-500/10 dark:from-indigo-900/30 dark:to-purple-900/30 text-indigo-600 dark:text-indigo-400 border-l-4 border-indigo-500'
                                : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white border-l-4 border-transparent',
                            'group flex items-center px-3 py-2.5 text-sm font-medium rounded-r-lg transition-all duration-200'
                        ]"
                        :title="sidebarCollapsed ? item.name : ''"
                    >
                        <svg
                            :class="[
                                isActive(item.href) ? 'text-indigo-500 dark:text-indigo-400' : 'text-gray-400 dark:text-gray-500 group-hover:text-gray-500 dark:group-hover:text-gray-300',
                                'h-5 w-5 flex-shrink-0 transition-colors',
                                sidebarCollapsed ? '' : 'mr-3'
                            ]"
                            fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        >
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
                        </svg>
                        <span v-if="!sidebarCollapsed" class="truncate">{{ item.name }}</span>
                    </Link>
                </template>
            </nav>

            <!-- Toggle button -->
            <div class="border-t border-gray-200 dark:border-gray-700 p-3">
                <button
                    @click="toggleSidebar"
                    class="w-full flex items-center justify-center py-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                    :title="sidebarCollapsed ? 'Expandir menu' : 'Contraer menu'"
                >
                    <svg :class="['w-5 h-5 transition-transform duration-300', sidebarCollapsed ? 'rotate-180' : '']" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
                    </svg>
                </button>
            </div>

            <!-- User section -->
            <div class="border-t border-gray-200 dark:border-gray-700 p-3">
                <div :class="['flex items-center', sidebarCollapsed ? 'justify-center' : 'space-x-3']">
                    <UserAvatar :src="user.avatar_url" :name="user.name" :size="40" border="border-2 border-indigo-200 dark:border-indigo-800" />
                    <div v-if="!sidebarCollapsed" class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-gray-900 dark:text-white truncate">{{ user.name }}</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ user.email }}</p>
                    </div>
                    <button
                        v-if="!sidebarCollapsed"
                        @click="logout"
                        class="p-1.5 text-gray-400 dark:text-gray-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors"
                        title="Cerrar sesion"
                    >
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <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>
                    </button>
                </div>
            </div>
        </div>

        <!-- ============================================ -->
        <!-- MAIN CONTENT AREA                           -->
        <!-- ============================================ -->
        <div :class="['transition-all duration-300', sidebarCollapsed ? 'lg:pl-20' : 'lg:pl-64', impersonating ? 'pt-11' : '']">

            <!-- ======================================== -->
            <!-- MOBILE HEADER (lg:hidden) â€” Fixed 56px  -->
            <!-- ======================================== -->
            <header class="lg:hidden sticky top-0 z-30 mobile-header" :class="impersonating ? 'top-11' : ''">
                <div class="flex items-center justify-between h-14 px-3">
                    <!-- Left: Hamburger + Logo -->
                    <div class="flex items-center gap-2">
                        <button
                            @click="showMobileDrawer = true"
                            class="w-11 h-11 flex items-center justify-center rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-700 transition-colors touch-manipulation"
                            aria-label="Abrir menu de navegacion"
                        >
                            <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                            </svg>
                        </button>
                        <Link :href="route('admin.dashboard')" class="flex items-center gap-2">
                            <img v-if="appLogo" :src="appLogo" :alt="appName" class="h-8 max-w-[100px] object-contain dark:brightness-0 dark:invert" />
                            <template v-else>
                                <div class="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center">
                                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                                    </svg>
                                </div>
                                <span class="text-base font-bold text-gray-900 dark:text-white">Admin</span>
                            </template>
                        </Link>
                    </div>

                    <!-- Right: Actions -->
                    <div class="flex items-center gap-0.5">
                        <DarkModeToggle />

                        <Link
                            :href="route('admin.chat.index')"
                            class="relative w-11 h-11 flex items-center justify-center text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-xl transition-colors touch-manipulation"
                        >
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                            </svg>
                            <span
                                v-if="unreadChatMessages > 0"
                                class="absolute top-1 right-1 min-w-[18px] h-[18px] flex items-center justify-center px-1 text-[10px] font-bold text-white bg-red-500 rounded-full"
                            >
                                {{ unreadChatMessages > 9 ? '9+' : unreadChatMessages }}
                            </span>
                        </Link>

                        <NotificationDropdown />
                    </div>
                </div>
            </header>

            <!-- ======================================== -->
            <!-- DESKTOP TOP BAR (hidden on mobile)      -->
            <!-- ======================================== -->
            <header :class="['hidden lg:block sticky z-30 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 transition-colors duration-200', impersonating ? 'top-11' : 'top-0']">
                <div class="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                    <div class="flex-1 lg:ml-0">
                        <slot name="header" />
                    </div>

                    <div class="flex items-center space-x-2 sm:space-x-4">
                        <DarkModeToggle />

                        <Link
                            :href="route('admin.chat.index')"
                            class="relative p-2 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                            title="Chat / Mensajes"
                        >
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                            </svg>
                            <span
                                v-if="unreadChatMessages > 0"
                                class="absolute -top-1 -right-1 flex items-center justify-center min-w-5 h-5 px-1.5 text-xs font-bold text-white bg-blue-500 rounded-full animate-pulse"
                            >
                                {{ unreadChatMessages > 99 ? '99+' : unreadChatMessages }}
                            </span>
                        </Link>

                        <NotificationDropdown />

                        <div class="flex items-center space-x-3">
                            <Link :href="route('profile.edit')" class="text-sm text-gray-700 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors">
                                Mi Perfil
                            </Link>
                            <button
                                @click="logout"
                                class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-indigo-500 to-purple-600 rounded-lg hover:from-indigo-600 hover:to-purple-700 transition-all shadow-sm"
                            >
                                Cerrar sesion
                            </button>
                        </div>
                    </div>
                </div>
            </header>

            <!-- Flash messages -->
            <div class="px-4 sm:px-6 lg:px-8 mt-4" v-if="$page.props.flash?.success || $page.props.flash?.error">
                <div
                    v-if="$page.props.flash?.success"
                    class="flex items-center p-4 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-200 rounded-xl"
                >
                    <svg class="w-5 h-5 mr-3 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span class="font-medium">{{ $page.props.flash.success }}</span>
                </div>
                <div
                    v-if="$page.props.flash?.error"
                    class="flex items-center p-4 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 rounded-xl"
                >
                    <svg class="w-5 h-5 mr-3 text-red-500 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span class="font-medium">{{ $page.props.flash.error }}</span>
                </div>
            </div>

            <!-- Page content -->
            <main class="p-4 sm:p-6 lg:p-8 pb-24 lg:pb-8 mobile-content-area">
                <slot />
            </main>
        </div>

        <!-- ============================================ -->
        <!-- MOBILE NAVIGATION DRAWER (lg:hidden)        -->
        <!-- ============================================ -->
        <MobileNavigationDrawer
            v-model="showMobileDrawer"
            :navigation-items="navigationItems"
            :user="user"
            title="Admin"
            accent-color="indigo"
            :logo-img="appLogo"
        />

        <!-- ============================================ -->
        <!-- MOBILE BOTTOM NAVIGATION (lg:hidden)        -->
        <!-- ============================================ -->
        <nav class="lg:hidden fixed bottom-0 left-0 right-0 z-40 mobile-bottom-nav">
            <div class="flex items-center justify-around h-16 px-1">
                <Link
                    v-for="item in bottomNavItems"
                    :key="item.route"
                    :href="route(item.route)"
                    class="bottom-tab-item"
                    :class="{ 'active': isActive(item.route) }"
                >
                    <div class="tab-icon-wrapper" :class="{ 'active': isActive(item.route) }">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
                        </svg>
                    </div>
                    <span class="tab-label">{{ item.name }}</span>
                </Link>

                <button
                    @click="showMoreSheet = true"
                    class="bottom-tab-item"
                    :class="{ 'active': isMoreActive }"
                >
                    <div class="tab-icon-wrapper" :class="{ 'active': isMoreActive }">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
                        </svg>
                    </div>
                    <span class="tab-label">Mas</span>
                </button>
            </div>
        </nav>

        <!-- ============================================ -->
        <!-- MOBILE "MAS" BOTTOM SHEET                   -->
        <!-- ============================================ -->
        <BottomSheet v-model="showMoreSheet" title="Administracion" :snap-points="[0.75]">
            <div class="space-y-1">
                <button
                    v-for="item in moreSheetItems"
                    :key="item.href"
                    @click="navigateFromSheet(item.href)"
                    class="w-full flex items-center gap-4 p-3.5 rounded-2xl transition-all duration-200 active:scale-[0.98] touch-manipulation"
                    :class="isActive(item.href)
                        ? 'bg-indigo-500/10 dark:bg-indigo-900/30'
                        : 'hover:bg-gray-100 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-700'"
                >
                    <div :class="['flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-xl', item.color]">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
                        </svg>
                    </div>
                    <div class="flex-1 text-left min-w-0">
                        <p class="text-sm font-medium text-gray-900 dark:text-white">{{ item.name }}</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">{{ item.desc }}</p>
                    </div>
                    <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </button>
            </div>

            <template #footer>
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <UserAvatar :src="user?.avatar_url" :name="user?.name" :size="36" border="border border-gray-200 dark:border-gray-700" />
                        <div class="min-w-0">
                            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">{{ user?.name }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400 truncate">Administrador</p>
                        </div>
                    </div>
                    <button
                        @click="logout"
                        class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/40 rounded-xl transition-colors touch-manipulation"
                    >
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <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>
                        Salir
                    </button>
                </div>
            </template>
        </BottomSheet>
    </div>
</template>

<style scoped>
.mobile-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
    padding-top: env(safe-area-inset-top, 0px);
    -webkit-user-select: none;
    user-select: none;
}

:root.dark .mobile-header {
    background: rgba(17, 24, 39, 0.88);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 0.5px solid rgba(0, 0, 0, 0.1);
    padding-bottom: env(safe-area-inset-bottom, 8px);
    -webkit-user-select: none;
    user-select: none;
}

:root.dark .mobile-bottom-nav {
    background: rgba(17, 24, 39, 0.92);
    border-top-color: rgba(255, 255, 255, 0.08);
}

.bottom-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    padding: 4px 2px;
    color: #9CA3AF;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}

.bottom-tab-item.active {
    color: #6366F1;
}

:root.dark .bottom-tab-item {
    color: #6B7280;
}

:root.dark .bottom-tab-item.active {
    color: #818CF8;
}

.tab-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tab-icon-wrapper.active {
    background: rgba(99, 102, 241, 0.12);
    transform: scale(1.05);
}

:root.dark .tab-icon-wrapper.active {
    background: rgba(129, 140, 248, 0.15);
}

.tab-label {
    font-size: 11px;
    font-weight: 500;
    margin-top: 2px;
    line-height: 1;
    letter-spacing: 0.01em;
}

/* Mobile content area optimizations */
.mobile-content-area {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    min-height: calc(100vh - 56px - 64px);
    min-height: calc(100dvh - 56px - 64px);
}

.bottom-tab-item.active .tab-label {
    font-weight: 600;
}

.bottom-tab-item:active .tab-icon-wrapper {
    transform: scale(0.92);
}

main {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
</style>
