import { Link, usePage } from '@inertiajs/react';
import {
    BookOpen,
    Coins,
    FolderGit2,
    Landmark,
    LayoutGrid,
    ListOrdered,
    PieChart,
    Share2,
    Shield,
    ShieldCheck,
    Wallet,
} from 'lucide-react';
import AppLogo from '@/components/app-logo';
import { Badge } from '@/components/ui/badge';
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 { NavItem, NavGroup } from '@/types';

const footerNavItems: NavItem[] = [
    
];

export function AppSidebar() {
    const page = usePage();
    const isAdmin = page.props.auth?.user?.is_admin === true;
    const referralProgramEnabled = page.props.auth?.user?.referral_program_enabled === true;
    const jabesWomenEnabled = page.props.auth?.user?.jabes_women_enabled === true;

    const inversionNavItems: NavItem[] = [
        {
            title: 'Dashboard',
            href: dashboard(),
            icon: LayoutGrid,
        },
        {
            title: 'Mis inversiones',
            href: '/mis-inversiones',
            icon: PieChart,
        },
        {
            title: 'Invertir',
            href: '/invertir',
            icon: Coins,
        },
    ];

    const userBalancesNav: NavItem[] = [
        {
            title: 'Mis balances',
            href: '/balances',
            icon: Landmark,
        },
        {
            title: 'Movimientos',
            href: '/balances/movimientos',
            icon: ListOrdered,
        },
        {
            title: 'Mis billeteras',
            href: '/balances/billeteras',
            icon: Wallet,
        },
    ];

    const accountItems: NavItem[] = [
        {
            title: 'Verificación de identidad',
            href: '/verificacion-kyc',
            icon: ShieldCheck,
        },
    ];
    if (referralProgramEnabled) {
        accountItems.push({
            title: 'Referidos',
            href: '/referidos',
            icon: Share2,
        });
    }

    const navGroups: NavGroup[] = [
        {
            label: 'Cuenta',
            items: accountItems,
        },
        {
            label: 'Inversiones',
            items: inversionNavItems,
        },
        {
            label: 'Mi cuenta financiera',
            items: userBalancesNav,
        },
        ...(isAdmin
            ? [
                  {
                      label: 'Administración',
                      items: [
                          {
                              title: 'Panel administración',
                              href: '/admin',
                              icon: Shield,
                              activeMatchesAdminPrefix: true,
                          },
                      ],
                  },
              ]
            : []),
    ];

    return (
        <Sidebar collapsible="icon" variant="inset">
            <SidebarHeader>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton size="lg" asChild>
                            <Link className="flex flex-col items-start gap-1" href={dashboard()} prefetch>
                                <AppLogo />
                                {jabesWomenEnabled ? (
                                    <Badge
                                        className="bg-primary/15 text-primary border-primary/30 px-1.5 py-0 text-[10px] font-semibold uppercase tracking-wide"
                                        variant="outline"
                                    >
                                        JabesWomen
                                    </Badge>
                                ) : null}
                            </Link>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarHeader>

            <SidebarContent>
                <NavMain groups={navGroups} />
            </SidebarContent>

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