<script setup lang="ts">
import { Link, usePage } from '@inertiajs/vue3';
import { Banknote, CalendarDays, Clock, FolderTree, Layers, LayoutDashboard, Package, Receipt, Settings2, User, UserCheck, Users, Wallet, WalletCards } from '@lucide/vue';
import { computed } from 'vue';
import {
    Sidebar,
    SidebarContent,
    SidebarGroup,
    SidebarGroupContent,
    SidebarGroupLabel,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarRail,
} from '@/components/ui/sidebar';
import { useCan } from '@/composables/useCan';

const page = usePage();
const { can } = useCan();

const isDashboardActive = computed(() => page.url.startsWith('/admin/dashboard'));
const isEmployeesActive = computed(() => page.url.startsWith('/admin/hr/employees'));
const isAttendancesActive = computed(() => page.url.startsWith('/admin/hr/attendances'));
const isLeaveRequestsActive = computed(() => page.url.startsWith('/admin/hr/leave-requests'));
const showHrMenu = computed(() => can('employees.view') || can('attendances.view') || can('leave-requests.view'));
const isCategoriesActive = computed(() => page.url.startsWith('/admin/master/categories'));
const isProductsActive = computed(() => page.url.startsWith('/admin/master/products'));
const isRawMaterialsActive = computed(() => page.url.startsWith('/admin/master/raw-materials'));
const isSuppliersActive = computed(() => page.url.startsWith('/admin/master/suppliers'));
const isCustomersActive = computed(() => page.url.startsWith('/admin/master/customers'));
const isCashActive = computed(() => page.url.startsWith('/admin/finance/cash'));
const isExpensesActive = computed(() => page.url.startsWith('/admin/finance/expenses'));
const isEmployeeAdvancesActive = computed(() => page.url.startsWith('/admin/finance/employee-advances'));
const isPayrollActive = computed(() => page.url.startsWith('/admin/finance/payroll'));
const showFinanceMenu = computed(() => (
    can('cash.view') || can('expenses.view') || can('employee-advances.view') || can('payroll.view')
));
const showMasterMenu = computed(() => (
    can('categories.view') || can('products.view') || can('raw-materials.view')
    || can('suppliers.view') || can('customers.view')
));
const isSettingActive = computed(() => page.url.startsWith('/admin/system/setting'));
const showSystemMenu = computed(() => can('settings.view'));
</script>

<template>
    <Sidebar collapsible="icon">
        <SidebarHeader>
            <SidebarMenu>
                <SidebarMenuItem>
                    <SidebarMenuButton size="lg" as-child>
                        <Link href="/admin/dashboard">
                            <div class="grid flex-1 text-left text-sm leading-tight">
                                <span class="truncate font-semibold">{{ page.props.name }}</span>
                            </div>
                        </Link>
                    </SidebarMenuButton>
                </SidebarMenuItem>
            </SidebarMenu>
        </SidebarHeader>
        <SidebarContent>
            <SidebarGroup>
                <SidebarGroupLabel>Menu</SidebarGroupLabel>
                <SidebarGroupContent>
                    <SidebarMenu>
                        <SidebarMenuItem>
                            <SidebarMenuButton as-child tooltip="Dashboard" :is-active="isDashboardActive">
                                <Link href="/admin/dashboard">
                                    <LayoutDashboard />
                                    <span>Dashboard</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                    </SidebarMenu>
                </SidebarGroupContent>
            </SidebarGroup>
            <SidebarGroup v-if="showMasterMenu">
                <SidebarGroupLabel>Master</SidebarGroupLabel>
                <SidebarGroupContent>
                    <SidebarMenu>
                        <SidebarMenuItem v-if="can('categories.view')">
                            <SidebarMenuButton as-child tooltip="Kategori" :is-active="isCategoriesActive">
                                <Link href="/admin/master/categories">
                                    <FolderTree />
                                    <span>Kategori</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                        <SidebarMenuItem v-if="can('products.view')">
                            <SidebarMenuButton as-child tooltip="Produk" :is-active="isProductsActive">
                                <Link href="/admin/master/products">
                                    <Package />
                                    <span>Produk</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                        <SidebarMenuItem v-if="can('raw-materials.view')">
                            <SidebarMenuButton as-child tooltip="Bahan Baku" :is-active="isRawMaterialsActive">
                                <Link href="/admin/master/raw-materials">
                                    <Layers />
                                    <span>Bahan Baku</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                        <SidebarMenuItem v-if="can('suppliers.view')">
                            <SidebarMenuButton as-child tooltip="Supplier" :is-active="isSuppliersActive">
                                <Link href="/admin/master/suppliers">
                                    <User />
                                    <span>Supplier</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                        <SidebarMenuItem v-if="can('customers.view')">
                            <SidebarMenuButton as-child tooltip="Customer" :is-active="isCustomersActive">
                                <Link href="/admin/master/customers">
                                    <UserCheck />
                                    <span>Customer</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                    </SidebarMenu>
                </SidebarGroupContent>
            </SidebarGroup>
            <SidebarGroup v-if="showFinanceMenu">
                <SidebarGroupLabel>Keuangan</SidebarGroupLabel>
                <SidebarGroupContent>
                    <SidebarMenu>
                        <SidebarMenuItem v-if="can('cash.view')">
                            <SidebarMenuButton as-child tooltip="Kas Toko" :is-active="isCashActive">
                                <Link href="/admin/finance/cash">
                                    <Wallet />
                                    <span>Kas Toko</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                        <SidebarMenuItem v-if="can('expenses.view')">
                            <SidebarMenuButton as-child tooltip="Pengeluaran" :is-active="isExpensesActive">
                                <Link href="/admin/finance/expenses">
                                    <Receipt />
                                    <span>Pengeluaran</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                        <SidebarMenuItem v-if="can('employee-advances.view')">
                            <SidebarMenuButton as-child tooltip="Kasbon" :is-active="isEmployeeAdvancesActive">
                                <Link href="/admin/finance/employee-advances">
                                    <Banknote />
                                    <span>Kasbon</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                        <SidebarMenuItem v-if="can('payroll.view')">
                            <SidebarMenuButton as-child tooltip="Gaji" :is-active="isPayrollActive">
                                <Link href="/admin/finance/payroll">
                                    <WalletCards />
                                    <span>Gaji</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                    </SidebarMenu>
                </SidebarGroupContent>
            </SidebarGroup>
            <SidebarGroup v-if="showHrMenu">
                <SidebarGroupLabel>HR</SidebarGroupLabel>
                <SidebarGroupContent>
                    <SidebarMenu>
                        <SidebarMenuItem v-if="can('employees.view')">
                            <SidebarMenuButton as-child tooltip="Pegawai" :is-active="isEmployeesActive">
                                <Link href="/admin/hr/employees">
                                    <Users />
                                    <span>Pegawai</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                        <SidebarMenuItem v-if="can('attendances.view')">
                            <SidebarMenuButton as-child tooltip="Presensi" :is-active="isAttendancesActive">
                                <Link href="/admin/hr/attendances">
                                    <Clock />
                                    <span>Presensi</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                        <SidebarMenuItem v-if="can('leave-requests.view')">
                            <SidebarMenuButton as-child tooltip="Cuti" :is-active="isLeaveRequestsActive">
                                <Link href="/admin/hr/leave-requests">
                                    <CalendarDays />
                                    <span>Cuti</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                    </SidebarMenu>
                </SidebarGroupContent>
            </SidebarGroup>
            <SidebarGroup v-if="showSystemMenu">
                <SidebarGroupLabel>Sistem</SidebarGroupLabel>
                <SidebarGroupContent>
                    <SidebarMenu>
                        <SidebarMenuItem v-if="can('settings.view')">
                            <SidebarMenuButton as-child tooltip="Pengaturan" :is-active="isSettingActive">
                                <Link href="/admin/system/setting">
                                    <Settings2 />
                                    <span>Pengaturan</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                    </SidebarMenu>
                </SidebarGroupContent>
            </SidebarGroup>
        </SidebarContent>
        <SidebarRail />
    </Sidebar>
</template>
