<script setup lang="ts">
import NavFooter from '@/components/NavFooter.vue';
import NavMain from '@/components/NavMain.vue';
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import { dashboard, crm, offers, invoices, timesheets, customers, leads, achievements } from '@/routes';
import { edit } from '@/routes/profile';
import { type NavItem, type NavGroup } from '@/types';
import { Link } from '@inertiajs/vue3';
import { Kanban, Euro, Contact, Trophy, Calculator, Settings, Target, BookUser, Timer, Headset, IdCard } from 'lucide-vue-next';
import AppLogo from './AppLogo.vue';

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-yellow-500',
            },
        ],
    },
    {
        title: 'Finanzvorgänge',
        items: [
            {
                title: 'Angebote',
                href: offers(),
                icon: Calculator,
                color: 'text-cyan-500',
            },
            {
                title: 'Rechnungen',
                href: invoices(),
                icon: Euro,
                color: 'text-pink-700',
            },
            {
                title: 'Zeiterfassung',
                href: timesheets(),
                icon: Timer,
                color: 'text-green-500',
            },
        ],
    }
];

const footerNavItems: NavItem[] = [
    {
        title: 'Einstellungen',
        href: edit(),
        icon: Settings,
        color: 'text-gray-400',
    }
];
</script>

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

        <SidebarHeader>
            <Link :href="dashboard()" class="flex row items-center gap-1 h-12 mb-4">
            <AppLogo />
            </Link>
        </SidebarHeader>

        <SidebarContent>
            <NavMain :groups="mainNavGroups" />
        </SidebarContent>

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