import { Link, usePage } from '@inertiajs/react';
import {
    Award,
    BadgePercent,
    BookOpen,
    Bookmark,
    CalendarDays,
    ClipboardList,
    CreditCard,
    GraduationCap,
    LayoutGrid,
    Link2,
    ListTodo,
    Map,
    Megaphone,
    Radio,
    Settings,
    ShoppingBag,
    Tag,
    TrendingUp,
    Trophy,
    Users,
} from 'lucide-react';
import AppLogo from '@/components/app-logo';
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';

const studentNavItems: NavItem[] = [
    { title: 'Dashboard', href: dashboard(), icon: LayoutGrid },
    { title: 'Kelas Saya', href: '/courses', icon: BookOpen },
    { title: 'Planner', href: '/planner', icon: CalendarDays },
    { title: 'Bookmark', href: '/bookmarks', icon: Bookmark },
    { title: 'Pengumuman', href: '/announcements', icon: Megaphone },
    { title: 'Paket Belajar', href: '/learning-paths', icon: Map },
    { title: 'Live Class', href: '/live-classes', icon: Radio },
    { title: 'Leaderboard', href: '/leaderboard', icon: Trophy },
    { title: 'Sertifikat', href: '/certificates', icon: Award },
    { title: 'Program Affiliate', href: '/affiliate', icon: Link2 },
];

const instructorNavItems: NavItem[] = [
    { title: 'Dashboard', href: '/instructor/dashboard', icon: LayoutGrid },
    { title: 'Kelas Saya', href: '/instructor/courses', icon: BookOpen },
    { title: 'Live Class', href: '/instructor/live-classes', icon: Radio },
    { title: 'Tugas Masuk', href: '/instructor/assignments', icon: ClipboardList },
    { title: 'To Do List Siswa', href: '/instructor/assigned-tasks', icon: ListTodo },
];

type AdminBadges = {
    courses_review: number;
    payments: number;
    affiliates: number;
};

export function AppSidebar() {
    const { auth, adminBadges } = usePage<{ auth: Auth; adminBadges?: AdminBadges | null }>().props;
    const role = auth.user?.role;

    const adminNavItems: NavItem[] = [
        { title: 'Dashboard', href: '/admin', icon: LayoutGrid },
        { title: 'Kelas', href: '/admin/courses', icon: GraduationCap },
        { title: 'Review Kelas', href: '/admin/courses/review', icon: ClipboardList, badge: adminBadges?.courses_review },
        { title: 'Kategori', href: '/admin/categories', icon: Tag },
        { title: 'Paket Belajar', href: '/admin/learning-paths', icon: Map },
        { title: 'Pembayaran', href: '/admin/payments', icon: CreditCard, badge: adminBadges?.payments },
        { title: 'To Do List Siswa', href: '/admin/assigned-tasks', icon: ListTodo },
        { title: 'Pengumuman', href: '/admin/announcements', icon: Megaphone },
        { title: 'Sertifikat', href: '/admin/certificates', icon: Award },
        { title: 'Kupon Diskon', href: '/admin/coupons', icon: BadgePercent },
        { title: 'Affiliate', href: '/admin/affiliates', icon: Link2, badge: adminBadges?.affiliates },
        { title: 'Pengguna', href: '/admin/users', icon: Users },
        { title: 'Pengaturan', href: '/admin/settings', icon: Settings },
    ];

    const navItems =
        role === 'admin' ? adminNavItems : role === 'instructor' ? instructorNavItems : studentNavItems;

    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={navItems} />
            </SidebarContent>

            <SidebarFooter>
                <NavUser />
            </SidebarFooter>
        </Sidebar>
    );
}