<script setup>
import { Link } from '@inertiajs/vue3';
import { ref } from 'vue';

const props = defineProps({
    userRole: String,
});

const isOpen = ref(false);

const coachLinks = [
    { name: 'Dashboard', route: 'coach.dashboard', icon: '🏠' },
    { name: 'Mensajes', route: 'coach.chat.index', icon: '💬' },
    { name: 'Clientes', route: 'coach.clients.index', icon: '👥' },
    { name: 'Billetera', route: 'coach.wallet.index', icon: '💰' },
    { name: 'Suscripción', route: 'coach.subscription.index', icon: '💳' },
];

const adminLinks = [
    { name: 'Dashboard', route: 'admin.dashboard', icon: '📊' },
    { name: 'Usuarios', route: 'admin.users.index', icon: '👥' },
    { name: 'Planes', route: 'admin.plans.index', icon: '📋' },
    { name: 'Alimentos', route: 'admin.foods.index', icon: '🍎' },
    { name: 'Bancos', route: 'admin.banks.index', icon: '🏦' },
    { name: 'Broadcast', route: 'admin.broadcast.index', icon: '📢' },
    { name: 'Plantillas', route: 'admin.email-templates.index', icon: '✉️' },
    { name: 'Páginas', route: 'admin.pages.index', icon: '📄' },
    { name: 'Soporte', route: 'admin.chat.index', icon: '🎧' },
    { name: 'Configuración', route: 'admin.settings.index', icon: '⚙️' },
];

const clientLinks = [
    { name: 'Mi Plan', route: 'client.dashboard', icon: '📅' },
    { name: 'Mensajes', route: 'client.chat.index', icon: '💬' },
    { name: 'Perfil', route: 'profile.edit', icon: '👤' },
];

const links = props.userRole === 'admin' ? adminLinks : (props.userRole === 'client' ? clientLinks : coachLinks);
</script>

<template>
    <!-- Mobile bottom navigation -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 md:hidden z-50 safe-area-inset-bottom">
        <div class="flex justify-around items-center h-16">
            <Link
                v-for="link in links.slice(0, 5)"
                :key="link.route"
                :href="route(link.route)"
                :class="[
                    'flex flex-col items-center justify-center flex-1 h-full',
                    route().current(link.route) 
                        ? 'text-blue-600 bg-blue-50' 
                        : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
                ]"
            >
                <span class="text-xl">{{ link.icon }}</span>
                <span class="text-xs mt-1">{{ link.name }}</span>
            </Link>
        </div>
    </nav>

    <!-- Desktop sidebar trigger for mobile -->
    <button
        @click="isOpen = !isOpen"
        class="md:hidden fixed top-4 left-4 z-50 p-2 bg-white rounded-lg shadow-lg"
    >
        <span class="text-2xl">☰</span>
    </button>

    <!-- Mobile sidebar overlay -->
    <div
        v-if="isOpen"
        class="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"
        @click="isOpen = false"
    ></div>

    <!-- Mobile sidebar -->
    <aside
        :class="[
            'fixed top-0 left-0 h-full w-64 bg-white shadow-xl z-50 transform transition-transform duration-300 md:hidden',
            isOpen ? 'translate-x-0' : '-translate-x-full'
        ]"
    >
        <div class="p-4 border-b">
            <h2 class="text-xl font-bold text-blue-600">CoachPro</h2>
        </div>
        <nav class="p-4 space-y-2">
            <Link
                v-for="link in links"
                :key="link.route"
                :href="route(link.route)"
                @click="isOpen = false"
                :class="[
                    'flex items-center px-4 py-3 rounded-lg',
                    route().current(link.route)
                        ? 'bg-blue-50 text-blue-600'
                        : 'text-gray-700 hover:bg-gray-50'
                ]"
            >
                <span class="text-xl mr-3">{{ link.icon }}</span>
                <span>{{ link.name }}</span>
            </Link>
        </nav>
    </aside>
</template>

<style scoped>
.safe-area-inset-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}
</style>
