<script setup>
/**
 * AdminBottomNav - Navegación inferior optimizada para Admin móvil
 * Muestra los 5 items más importantes con acceso rápido
 */
import { computed } from 'vue';
import { Link, usePage } from '@inertiajs/vue3';

const page = usePage();
const unreadNotifications = computed(() => page.props.unreadNotifications || 0);

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

// Items principales para la barra inferior
const navItems = [
    { 
        name: 'Inicio', 
        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',
        emoji: '🏠'
    },
    { 
        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',
        emoji: '👥'
    },
    { 
        name: 'Pagos', 
        route: '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 2z',
        emoji: '💰'
    },
    { 
        name: 'Soporte', 
        route: 'admin.chat.index', 
        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',
        emoji: '💬',
        badge: unreadNotifications
    },
    { 
        name: 'Config', 
        route: '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',
        emoji: '⚙️'
    },
];
</script>

<template>
    <nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 z-40 lg:hidden safe-area-bottom">
        <div class="flex items-center justify-around h-16 px-1">
            <Link
                v-for="item in navItems"
                :key="item.name"
                :href="route(item.route)"
                class="flex flex-col items-center justify-center flex-1 h-full px-1 transition-all duration-200 active:scale-95 touch-manipulation"
                :class="[
                    isActive(item.route)
                        ? 'text-indigo-600 dark:text-indigo-400'
                        : 'text-gray-500 dark:text-gray-400'
                ]"
            >
                <!-- Icon with badge -->
                <div class="relative">
                    <div 
                        :class="[
                            'w-10 h-10 flex items-center justify-center rounded-xl transition-all duration-200',
                            isActive(item.route) 
                                ? 'bg-indigo-100 dark:bg-indigo-900/50 scale-110' 
                                : 'hover:bg-gray-100 dark:hover:bg-gray-800'
                        ]"
                    >
                        <span class="text-xl">{{ item.emoji }}</span>
                    </div>
                    
                    <!-- Badge de notificación -->
                    <span 
                        v-if="item.badge?.value > 0"
                        class="absolute -top-1 -right-1 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-xs font-bold text-white bg-red-500 rounded-full animate-pulse"
                    >
                        {{ item.badge.value > 99 ? '99+' : item.badge.value }}
                    </span>
                </div>
                
                <!-- Label -->
                <span 
                    :class="[
                        'mt-0.5 text-[10px] font-medium truncate max-w-full transition-colors',
                        isActive(item.route) ? 'font-semibold' : ''
                    ]"
                >
                    {{ item.name }}
                </span>
            </Link>
        </div>
    </nav>
</template>

<style scoped>
/* Safe area para dispositivos con notch */
.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
</style>
