<script setup lang="ts">
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 {
    BookOpen,
    Folder,
    LayoutGrid,
    Users,
    GraduationCap,
    UserCheck,
    School,
    ClipboardList,
    Trophy,
    UserPlus,
    Settings,
    Calendar,
    BookOpenCheck,
    FileText
} from 'lucide-vue-next';
import AppLogo from './AppLogo.vue';
import { computed } from 'vue';

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

const mainNavItems: NavItem[] = [
    {
        title: 'Dashboard',
        href: route('dashboard'),
        icon: LayoutGrid,
    },
];

// Role-based navigation items
const academicNavItems = computed((): NavItem[] => {
    if (!user.value || (user.value.role !== 'admin' && user.value.role !== 'teacher')) return [];

    const items: NavItem[] = [];

    if (user.value.role === 'admin') {
        items.push(
            {
                title: 'Subjects',
                href: route('subjects.index'),
                icon: BookOpenCheck,
            },
            {
                title: 'Classrooms',
                href: route('classrooms.index'),
                icon: School,
            },
            {
                title: 'Exam Types',
                href: route('exam-types.index'),
                icon: FileText,
            }
        );
    }

    return items;
});

const peopleNavItems = computed((): NavItem[] => {
    if (!user.value || user.value.role === 'student' || user.value.role === 'guardian') return [];

    const items: NavItem[] = [];

    if (user.value.role === 'admin') {
        items.push(
            {
                title: 'Students',
                href: route('students.index'),
                icon: GraduationCap,
            },
            {
                title: 'Teachers',
                href: route('teachers.index'),
                icon: Users,
            },
            {
                title: 'Guardians',
                href: route('guardians.index'),
                icon: UserCheck,
            }
        );
    } else if (user.value.role === 'teacher') {
        items.push({
            title: 'Students',
            href: route('students.index'),
            icon: GraduationCap,
        });
    }

    return items;
});

const managementNavItems = computed((): NavItem[] => {
    if (!user.value || user.value.role === 'student' || user.value.role === 'guardian') return [];

    const items: NavItem[] = [];

    if (user.value.role === 'admin') {
        items.push({
            title: 'Enrollments',
            href: route('enrollment.index'),
            icon: UserPlus,
        });
    }

    // Both admin and teacher can access results
    if (user.value.role === 'admin' || user.value.role === 'teacher') {
        items.push({
            title: 'Results',
            href: route('results.index'),
            icon: Trophy,
        });
    }

    return items;
});

const systemNavItems = computed((): NavItem[] => {
    if (!user.value || user.value.role !== 'admin') return [];

    return [
        {
            title: 'Academic Years',
            href: route('academic-years.index'),
            icon: Calendar,
        },
        {
            title: 'Configuration',
            href: route('configuration.index'),
            icon: Settings,
        },
    ];
});

const footerNavItems: NavItem[] = [
    {
        title: 'Github Repo',
        href: 'https://github.com/laravel/vue-starter-kit',
        icon: Folder,
    },
    {
        title: 'Documentation',
        href: 'https://laravel.com/docs/starter-kits#vue',
        icon: BookOpen,
    },
];
</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" />
            <NavMain v-if="academicNavItems.length > 0" title="Academic" :items="academicNavItems" />
            <NavMain v-if="peopleNavItems.length > 0" title="People" :items="peopleNavItems" />
            <NavMain v-if="managementNavItems.length > 0" title="Management" :items="managementNavItems" />
            <NavMain v-if="systemNavItems.length > 0" title="System" :items="systemNavItems" />
        </SidebarContent>

        <SidebarFooter>
            <NavUser />
        </SidebarFooter>
    </Sidebar>
    <slot />
</template>
