<template>
    <aside
        class="relative z-20 hidden h-screen flex-col border-r border-slate-200 bg-white md:flex"
        :class="collapsed ? 'w-20' : 'w-72'"
    >
        <div class="flex items-center justify-between px-4 py-5">
            <Logo :showName="!collapsed" />
            <button
                type="button"
                class="rounded-lg border border-slate-200 px-2 py-1 text-xs text-slate-500 hover:bg-slate-50"
                @click="$emit('toggleCollapse')"
            >
                {{ collapsed ? '→' : '←' }}
            </button>
        </div>
        <div class="flex-1 overflow-y-auto px-3 pb-6">
            <div
                v-for="section in filteredNavigation"
                :key="section.id"
                class="mb-6"
            >
                <div class="space-y-1">
                    <SidenavItem
                        v-for="item in section.items"
                        :key="item.label"
                        :item="item"
                        :collapsed="collapsed"
                    />
                </div>
            </div>
        </div>
    </aside>

    <div v-if="mobileOpen" class="fixed inset-0 z-30 md:hidden">
        <div
            class="absolute inset-0 bg-slate-900/50"
            @click="$emit('toggleMobile')"
        ></div>
        <aside class="absolute left-0 top-0 h-full w-72 bg-white shadow-xl">
            <div class="flex items-center justify-between px-4 py-5">
                <Logo />
                <button
                    type="button"
                    class="rounded-lg border border-slate-200 px-2 py-1 text-xs text-slate-500"
                    @click="$emit('toggleMobile')"
                >
                    Close
                </button>
            </div>
            <div class="flex-1 overflow-y-auto px-3 pb-6">
                <div
                    v-for="section in filteredNavigation"
                    :key="section.id"
                    class="mb-6"
                >
                    <div class="space-y-1">
                        <SidenavItem
                            v-for="item in section.items"
                            :key="item.label"
                            :item="item"
                        />
                    </div>
                </div>
            </div>
        </aside>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { usePage } from '@inertiajs/vue3';
import { navigation, resolveRoleBucket } from '../data/aurora';
import Logo from './Logo.vue';
import SidenavItem from './SidenavItem.vue';

defineProps({
    collapsed: {
        type: Boolean,
        default: false,
    },
    mobileOpen: {
        type: Boolean,
        default: false,
    },
});

defineEmits(['toggleCollapse', 'toggleMobile']);

const page = usePage();
const roleBucket = computed(() =>
    resolveRoleBucket(page.props.auth?.user?.role)
);

const filterItems = (items) =>
    items
        .map((item) => {
            const children = item.children ? filterItems(item.children) : [];
            const roles = item.roles ?? [];
            const isVisible =
                roles.length === 0 || roles.includes(roleBucket.value);
            const hasLink =
                !!item.href && !item.href.startsWith('#') && !item.external;

            if (!isVisible && children.length === 0) {
                return null;
            }

            if (!hasLink && children.length === 0) {
                return null;
            }

            return {
                ...item,
                children,
            };
        })
        .filter(Boolean);

const filteredNavigation = computed(() =>
    navigation
        .map((section) => {
            const items = filterItems(section.items);
            if (items.length === 0) {
                return null;
            }
            return { ...section, items };
        })
        .filter(Boolean)
);
</script>
