import { Link, usePage } from '@inertiajs/react';
import {
    BadgeCheck,
    FileText,
    Hash,
    LayoutGrid,
    Newspaper,
    Package,
    Settings,
    ShieldCheck,
    Store,
    Tags,
    Users,
} from 'lucide-react';
import AppLogo from '@/components/app-logo';
import { NavFooter } from '@/components/nav-footer';
import { NavMain } from '@/components/nav-main';
import { NavUser } from '@/components/nav-user';
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from '@/components/ui/sidebar';
import { dashboard } from '@/routes';
import type { Auth, NavItem } from '@/types';

type PageProps = {
    auth: Auth;
};

const footerNavItems: NavItem[] = [];

export function AppSidebar() {
    const { auth } = usePage<PageProps>().props;
    const can = (permission: string) => auth.permissions.includes(permission);

    const settingsNavItems: NavItem[] = [
        ...(can('settings.view')
            ? [
                  {
                      title: 'General Settings',
                      href: '/settings/general',
                      icon: Settings,
                  },
              ]
            : []),
        ...(can('users.view')
            ? [
                  {
                      title: 'Users',
                      href: '/users',
                      icon: Users,
                  },
              ]
            : []),
        ...(can('roles.view')
            ? [
                  {
                      title: 'Roles',
                      href: '/roles',
                      icon: ShieldCheck,
                  },
              ]
            : []),
    ];

    const productNavItems: NavItem[] = [
        ...(can('products.view')
            ? [
                  {
                      title: 'All Products',
                      href: '/products',
                      icon: Package,
                  },
              ]
            : []),
        ...(can('categories.view')
            ? [
                  {
                      title: 'Categories',
                      href: '/categories',
                      icon: Tags,
                  },
              ]
            : []),
        ...(can('brands.view')
            ? [
                  {
                      title: 'Brands',
                      href: '/brands',
                      icon: BadgeCheck,
                  },
              ]
            : []),
    ];

    const postNavItems: NavItem[] = [
        ...(can('posts.view')
            ? [
                  {
                      title: 'All Posts',
                      href: '/posts',
                      icon: Newspaper,
                  },
              ]
            : []),
        ...(can('post-categories.view')
            ? [
                  {
                      title: 'Post Categories',
                      href: '/post-categories',
                      icon: Tags,
                  },
              ]
            : []),
        ...(can('tags.view')
            ? [
                  {
                      title: 'Tags',
                      href: '/tags',
                      icon: Hash,
                  },
              ]
            : []),
    ];

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

        ...(can('stores.view')
            ? [
                  {
                      title: 'Stores',
                      href: '/stores',
                      icon: Store,
                  },
              ]
            : []),
        ...(productNavItems.length > 0
            ? [
                  {
                      title: 'Products',
                      href: productNavItems[0].href,
                      icon: Package,
                      items: productNavItems,
                  },
              ]
            : []),
        ...(can('pages.view')
            ? [
                  {
                      title: 'Pages',
                      href: '/pages',
                      icon: FileText,
                  },
              ]
            : []),
        ...(postNavItems.length > 0
            ? [
                  {
                      title: 'Posts',
                      href: postNavItems[0].href,
                      icon: Newspaper,
                      items: postNavItems,
                  },
              ]
            : []),
        ...(settingsNavItems.length > 0
            ? [
                  {
                      title: 'Settings',
                      href: settingsNavItems[0].href,
                      icon: Settings,
                      items: settingsNavItems,
                  },
              ]
            : []),
    ];

    return (
        <Sidebar collapsible="icon" variant="inset">
            <SidebarHeader>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton size="lg" asChild>
                            <Link href={dashboard()} prefetch>
                                <AppLogo />
                            </Link>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarHeader>

            <SidebarContent>
                <NavMain items={mainNavItems} />
            </SidebarContent>

            <SidebarFooter>
                <NavFooter items={footerNavItems} className="mt-auto" />
                <NavUser />
            </SidebarFooter>
        </Sidebar>
    );
}