<template>
    <aside class="app-sidebar d-flex flex-column bg-white border-end p-3" style="width: 220px; flex-shrink: 0;">
        <figure class="mx-auto mb-4" style="width: 10rem; height: 10rem;">
            <img src="@/assets/eira-avatar.png" alt="Eira Avatar" class="rounded-circle border border-4" :style="{ borderColor: '#6b46c1' }" style="width: 100%; height: 100%; object-fit: cover;" />
        </figure>
        <p class="text-center fs-5 fw-semibold text-purple mb-4">
            Eira Personal AI Assistant
        </p>
        <ul class="nav nav-pills flex-column mb-auto">
            <li v-for="route in sidebarRoutes" :key="route.path" class="nav-item">
                <router-link :to="route.path" class="nav-link d-flex align-items-center gap-2" :class="{ active: isActiveRoute(route.path) }" style="color: #6b46c1;" aria-current="page">
                    <span class="d-flex align-items-center justify-content-center">
                        <component :is="getIcon(route.meta.icon)" />
                    </span>
                    {{ route.name }}
                </router-link>
            </li>
        </ul>
        <div class="sidebar-footer mt-auto text-white rounded-3 p-3 shadow" :style="{
        backgroundColor: '#6b46c1',
        fontStyle: 'italic',
        position: 'relative',
      }">
            <p class="mb-0">💬 Fun fact: Eira loves purple, naturally!</p>
            <span class="sidebar-footer-tail position-absolute" style="
          bottom: -10px;
          left: 30px;
          width: 0;
          height: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-top: 10px solid #6b46c1;
        "></span>
        </div>
    </aside>
</template>
<script>
import { useRoute } from "vue-router";
import { defineComponent, computed } from "vue";
import Icons from "@/components/icons";
import router from "@/router";

export default defineComponent({
    name: "AppSidebar",
    setup() {
        const route = useRoute();
        const allRoutes = router.options.routes;

        const sidebarRoutes = computed(() =>
            allRoutes.filter((r) => r.meta && r.meta.sidebar)
        );

        const isActiveRoute = (path) => route.path === path;

        const getIcon = (iconName) => Icons[iconName] || Icons["dashboard"];

        return {
            sidebarRoutes,
            isActiveRoute,
            getIcon,
        };
    },
});
</script>
<style scoped>
.text-purple {
    color: #6b46c1;
}

/* Override Bootstrap nav-link active background & text */
.nav-link.active {
    background-color: #e2d8fb !important;
    color: #5a3e99 !important;
    border-radius: 0.375rem;
}

/* Hover effect for nav-link */
.nav-link:hover {
    background-color: #f5f0ff;
    color: #5a3e99 !important;
    border-radius: 0.375rem;
}
</style>