<script setup lang="ts">
import { computed } from 'vue';
import NavFooter from '@/components/NavFooter.vue';
import NavMain from '@/components/NavMain.vue';
import NavUser from '@/components/NavUser.vue';
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from '@/components/ui/sidebar';
import type { NavItem } from '@/types';
import { Link, usePage } from '@inertiajs/vue3';
import {
    BarChart2,
    BookOpen,
    Folder,
    LayoutGrid,
    List,
    Users,
    MessageCircle, Unplug, History, Key
} from 'lucide-vue-next';
import AppLogo from './AppLogo.vue';

const page = usePage();
const user = page.props.auth?.user as { role?: UserRole } | null;
/*
const license = usePage().props.license as {
    valid: boolean
    expires_at?: string | null
}*/
const license = computed(() => usePage().props.license as {
    valid: boolean
    expires_at?: string | null
})

const licenseLabel = computed(() => {
    if (!license.value?.expires_at) return null

    const exp = new Date(license.value.expires_at)
    const now = new Date()

    const days = Math.ceil((exp.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))

    return {
        date: exp.toLocaleDateString(),
        days
    }
})

const allNavItems: NavItem[] = [
    {
        title: 'Панель управления',
        href: '/dashboard',
        icon: LayoutGrid,
        roles: ['admin', 'engineer', 'installer'],
    },
    {
        title: 'Заявки',
        href: '/requests',
        icon: List,
        roles: ['admin', 'engineer', 'installer'],
    },
    {
        title: 'Статистика',
        href: '/installers/stats',
        icon: Users,
        roles: ['admin', 'engineer'],
    },
    {
        title: 'Аналитика',
        href: '/analytics/overview',
        icon: BarChart2,
        roles: ['admin', 'engineer'],
    },
    {
        title: 'Склад',
        href: '/consumables',
        icon: Folder,
        roles: ['admin', 'engineer', 'installer'],
    },
    {
        title: 'Чат',
        href: '/chat',
        icon: MessageCircle,
        roles: ['admin', 'engineer', 'installer'],
    },
    {
        title: 'Пользователи',
        href: '/users',
        icon: Users,
        roles: ['admin'],
    },
    {
        title: '1C Синхронизация',
        href: '/integration',
        icon: Unplug,
        roles: ['admin'],
    },
    {
        title: 'Логи активности',
        href: '/activity-logs',
        icon: History,
        roles: ['admin'],
    },
];

const mainNavItems = computed<NavItem[]>(() => {
    if (!user?.role) return [];

    return allNavItems.filter(item =>
        !item.roles || item.roles.includes(user.role)
    );
});

const footerNavItems = computed<NavItem[]>(() => {
    if (!user?.role) return [];

    const items: NavItem[] = [
        {
            title: 'Документация',
            href: '/documentation',
            icon: BookOpen,
        },
    ];

    // только для admin
    if (user.role === 'admin') {
        items.push({
            title: 'Лицензия',
            href: '/license',
            icon: Key,
            subtitle: licenseLabel.value
                ? {
                    text: `до ${licenseLabel.value.date}`,
                    warning: licenseLabel.value.days <= 15
                }
                : undefined,
        });
    }

    return items;
});
</script>

<template>
    <Sidebar collapsible="icon" variant="inset">
        <SidebarHeader>
            <SidebarMenu>
                <SidebarMenuItem>
                    <SidebarMenuButton size="lg" as-child>
                        <Link :href="route('dashboard')">
                            <AppLogo />
                        </Link>
                    </SidebarMenuButton>
                </SidebarMenuItem>
            </SidebarMenu>
        </SidebarHeader>

        <SidebarContent>
            <NavMain :items="mainNavItems" />
        </SidebarContent>

        <SidebarFooter>
            <NavFooter :items="footerNavItems" />
            <NavUser />
        </SidebarFooter>
    </Sidebar>
    <slot />
</template>
