import { Link } from '@inertiajs/react';
import {
    LayoutDashboard,
    HeartHandshake,
    Award,
    Newspaper,
    Mail,
    Globe,
    ExternalLink,
    GraduationCap,
} from 'lucide-react';
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarGroup,
    SidebarGroupLabel,
} from '@/components/ui/sidebar';
import { NavUser } from '@/components/nav-user';
import { useCurrentUrl } from '@/hooks/use-current-url';

const navItems = [
    { title: 'Dashboard', href: '/admin/dashboard', icon: LayoutDashboard },
    { title: 'Program Donasi', href: '/admin/programs', icon: HeartHandshake },
    {
        title: 'Transaksi Donasi',
        href: '/admin/donations',
        icon: HeartHandshake,
    },
    { title: 'Moderasi Kegiatan', href: '/admin/activities', icon: Award },
    { title: 'Kelola Berita', href: '/admin/news', icon: Newspaper },
    { title: 'Pesan Masuk', href: '/admin/messages', icon: Mail },
];

export function AppSidebar() {
    const { isCurrentUrl } = useCurrentUrl();

    return (
        <Sidebar collapsible="icon">
            {/* Logo */}
            <SidebarHeader className="pt-4 pb-3">
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton size="lg" asChild>
                            <Link href="/admin/dashboard" prefetch>
                                <div className="flex aspect-square size-9 shrink-0 items-center justify-center rounded-md bg-white/10 text-[#E8D9A3]">
                                    <GraduationCap className="size-5" />
                                </div>
                                <div className="grid flex-1 text-left leading-none">
                                    <span className="truncate text-sm font-extrabold tracking-tight">
                                        PORTAL ALUMNI
                                    </span>
                                    <span className="mt-0.5 truncate text-[10px] font-semibold tracking-widest text-sidebar-foreground/60 uppercase">
                                        Fakultas Teknik UNMA
                                    </span>
                                </div>
                            </Link>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarHeader>

            {/* Nav */}
            <SidebarContent className="py-2">
                <SidebarGroup className="px-2 py-0">
                    <SidebarGroupLabel className="mb-1 text-[10px] font-bold tracking-[0.15em] text-sidebar-foreground/40 uppercase">
                        Manajemen Portal
                    </SidebarGroupLabel>
                    <SidebarMenu>
                        {navItems.map((item) => {
                            const active = isCurrentUrl(item.href);
                            return (
                                <SidebarMenuItem key={item.title}>
                                    <SidebarMenuButton
                                        asChild
                                        isActive={active}
                                        tooltip={{ children: item.title }}
                                        className={
                                            active
                                                ? 'bg-sidebar-foreground font-semibold text-sidebar hover:bg-sidebar-foreground/90 hover:text-sidebar'
                                                : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-foreground'
                                        }
                                    >
                                        <Link href={item.href} prefetch>
                                            <item.icon className="size-4 shrink-0" />
                                            <span>{item.title}</span>
                                        </Link>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                            );
                        })}
                    </SidebarMenu>
                </SidebarGroup>
            </SidebarContent>

            {/* Footer */}
            <SidebarFooter className="border-t border-sidebar-border/60 pt-3 pb-3">
                <div className="mb-2 px-2">
                    <a
                        href="/"
                        target="_blank"
                        rel="noreferrer"
                        className="flex items-center justify-between gap-2 rounded-xl px-3 py-2 text-xs font-semibold text-sidebar-foreground/60 transition-all hover:bg-sidebar-accent hover:text-sidebar-foreground"
                    >
                        <span className="flex items-center gap-2">
                            <Globe className="size-3.5 text-[#E8D9A3]" />
                            Buka Portal Utama
                        </span>
                        <ExternalLink className="size-3 opacity-60" />
                    </a>
                </div>
                <NavUser />
            </SidebarFooter>
        </Sidebar>
    );
}