<script setup lang="ts">
import NavFooter from '@/components/NavFooter.vue';
import NavMain from '@/components/NavMain.vue';
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarTrigger } from '@/components/ui/sidebar';
import { dashboard, crm, offers, invoices, newInvoice, products, timesheets, customers, leads, achievements } from '@/routes';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { Kbd, KbdGroup } from '@/components/ui/kbd'
import { type NavGroup } from '@/types';
import { Link, usePage } from '@inertiajs/vue3';
import { Kanban, Euro, Trophy, Calculator, BookUser, Timer, ShoppingBasket, Headset, Plus } from 'lucide-vue-next';
import AppLogo from './AppLogo.vue';
import { computed } from 'vue';

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

const mainNavGroups: NavGroup[] = [
    {
        title: 'CRM',
        items: [
            {
                title: 'Pipeline',
                href: crm(),
                icon: Kanban,
                color: 'text-pink-500',
            },
            {
                title: 'Akquise',
                href: leads(),
                icon: Headset,
                color: 'text-blue-500',
            },
            {
                title: 'Kunden',
                href: customers(),
                icon: BookUser,
                color: 'text-lime-500',
            },
            {
                title: 'Erfolge',
                href: achievements(),
                icon: Trophy,
                color: 'text-amber-500',
            },
        ],
    },
    {
        title: 'Rechnungswesen',
        items: [
            {
                title: 'Angebote',
                href: offers(),
                icon: Calculator,
                color: 'text-cyan-600',
            },
            {
                title: 'Produkte',
                href: products(),
                icon: ShoppingBasket,
                color: 'text-yellow-400',
            },
            {
                title: 'Rechnungen',
                href: invoices(),
                icon: Euro,
                color: 'text-pink-700',
                action: {
                    title: "Neue Rechnung",
                    icon: Plus,
                    color: 'text-foreground',
                    href: newInvoice()
                }
            },
            {
                title: 'Zeiterfassung',
                href: timesheets(),
                icon: Timer,
                color: 'text-lime-600',
            },
        ],
    }
];

</script>

<template>
    <Sidebar collapsible="icon" variant="sidebar">

        <SidebarHeader>
            <Link :href="dashboard()" prefetch class="flex row items-center mt-3">
            <AppLogo />
            </Link>

            <TooltipProvider>
                <Tooltip>
                    <TooltipTrigger class="w-fit absolute top-9 right-[.666rem]">
                        <SidebarTrigger class="hidden md:flex text-primary-foreground" />
                    </TooltipTrigger>
                    <TooltipContent>
                        <span>Seitenleiste schließen</span>
                        <KbdGroup class="ml-2">
                            <Kbd class="visible-mac">⌘</Kbd>
                            <Kbd class="visible-pc">Ctrl</Kbd>
                            <Kbd>B</Kbd>
                        </KbdGroup>
                    </TooltipContent>
                </Tooltip>
            </TooltipProvider>
        </SidebarHeader>

        <SidebarContent class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden">
            <NavMain :groups="mainNavGroups" />
        </SidebarContent>

        <SidebarFooter>
            <NavFooter :user="auth.user" />
        </SidebarFooter>
    </Sidebar>
    <slot />
</template>