<script setup lang="ts">
import Heading from '@/components/Heading.vue'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { type NavItem } from '@/types'
import { Link, usePage } from '@inertiajs/vue3'
import { computed } from "vue"

const page = usePage()

const role = computed(() => page.props.auth?.user?.role || '')

/**
 * ВСЕ пункты (с ролями)
 */
const allItems: NavItem[] = [
    { title: 'Профиль', href: '/settings/profile' },
    { title: 'Пароль', href: '/settings/password' },
    { title: 'Оформление', href: '/settings/appearance' },

    { title: 'Регионы', href: '/settings/cities', roles: ['admin'] },
    { title: 'Типы заявок', href: '/settings/types', roles: ['admin'] },
    { title: 'Приоритеты', href: '/settings/priorities', roles: ['admin'] },
    { title: 'Объекты', href: '/settings/objects', roles: ['admin'] },
    { title: 'Типы систем', href: '/settings/types-systems', roles: ['admin'] },
]

/**
 * ФИЛЬТРАЦИЯ ПО РОЛИ (ВАЖНО: ОДНА РОЛЬ)
 */
const sidebarNavItems = computed(() =>
    allItems.filter(item =>
        !item.roles || item.roles.includes(role.value)
    )
)

/**
 * текущий путь
 */
const currentPath = page.props.ziggy?.location
    ? new URL(page.props.ziggy.location).pathname
    : ''
</script>

<template>
    <div class="px-4 py-6">
        <Heading
            title="Настройки"
            description="Управляйте своим профилем и настройками учетной записи"
        />

        <div class="flex flex-col space-y-8 lg:flex-row lg:space-x-12">
            <aside class="w-full max-w-xl lg:w-48">
                <nav class="flex flex-col space-y-1">

                    <Button
                        v-for="item in sidebarNavItems"
                        :key="item.href"
                        variant="ghost"
                        :class="[
                            'w-full justify-start',
                            { 'bg-muted': currentPath === item.href }
                        ]"
                        as-child
                    >
                        <Link :href="item.href">
                            {{ item.title }}
                        </Link>
                    </Button>

                </nav>
            </aside>

            <Separator class="my-6 md:hidden" />

            <div class="flex-1 md:max-w-2xl">
                <section class="max-w-xl space-y-12">
                    <slot />
                </section>
            </div>
        </div>
    </div>
</template>
