<template>
    <nav class="mobile-menu bg-white border-bottom p-3">
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center gap-2">
                <img src="@/assets/eira-avatar.png" alt="Eira" class="rounded-circle border" style="width: 50px; height: 50px; object-fit: cover; border-color: #6b46c1;" />
                <span class="fw-semibold text-purple fs-5">Eira – {{ currentViewName }}</span>
            </div>
            <button class="btn btn-purple menu-toggle-btn" @click="toggleMenu" aria-label="Toggle menu">
                <Menu size="28" />
            </button>
        </div>
        <div ref="menuRef" class="menu-list mt-4" v-show="visible">
            <ul class="list-unstyled">
                <li v-for="route in sidebarRoutes" :key="route.path" class="mb-2">
                    <router-link :to="route.path" class="link-button text-purple text-decoration-none d-flex align-items-center gap-2" active-class="active-link" exact @click="menuOpen = false">
                        <component :is="getIcon(route.meta.icon)" />
                        {{ route.name }}
                    </router-link>
                </li>
            </ul>
        </div>
    </nav>
</template>
<script>
import { defineComponent, ref, computed, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useMotion } from '@vueuse/motion';
import router from '@/router';
import Icons from '@/components/icons';
import { Menu } from 'lucide-vue-next';

export default defineComponent({
    name: 'AppMobileMenu',
    components: {
        Menu
    },
    setup() {
        const route = useRoute();

        const sidebarRoutes = computed(() =>
            router.options.routes.filter((r) => r.meta && r.meta.sidebar)
        );

        const currentViewName = computed(() => route.name || 'Unknown View');

        const getIcon = (name) => Icons[name] || Icons.dashboard;

        const menuOpen = ref(false);
        const visible = ref(false);
        const menuRef = ref(null);

        const toggleMenu = () => {
            menuOpen.value = !menuOpen.value;
        };

        onMounted(() => {
            useMotion(menuRef, {
                initial: { opacity: 0, y: -20 },
                visible: { opacity: 1, y: 0, transition: { duration: 400 } }
            });
        });

        watch(menuOpen, (isOpen) => {
            visible.value = isOpen;
        });

        return {
            sidebarRoutes,
            currentViewName,
            getIcon,
            menuRef,
            menuOpen,
            visible,
            toggleMenu,
        };
    },
});
</script>
<style scoped>
.text-purple {
    color: #6b46c1;
}

.menu-toggle-btn {
    background-color: #6b46c1;
    color: white;
    border: none;
    border-radius: 6px;
    height: 50px;
}

.link-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #f9f5ff;
    border: 1px solid #e2d8fb;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #6b46c1;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.active-link {
    background-color: #e2d8fb;
    font-weight: 600;
    border: 1px solid #6b46c1;
}
</style>