import { Link, usePage, router } from '@inertiajs/react';
import { logout } from '@/routes';
import {
    LayoutGrid,
    FileText,
    RefreshCw,
    Users,
    LogOut,
    User,
    Shield,
} from 'lucide-react';
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from '@/components/ui/sidebar';

const mainNavItems = [
    {
        title: 'Overview',
        href: '/dashboard',
        icon: LayoutGrid,
    },
    {
        title: 'Contracts',
        href: '/contracts',
        icon: FileText,
    },
    {
        title: 'Renewals',
        href: '/renewals',
        icon: RefreshCw,
    },
];

export function AppSidebar() {
    const { url, props } = usePage();
    const { auth } = props as any;

    const footerNavItems = [
        {
            title: 'Profile',
            href: '/settings/profile',
            icon: User,
        },
        ...(auth?.user?.role === 'admin'
            ? [
                  {
                      title: 'Admin Dashboard',
                      href: '/admin/users',
                      icon: Users,
                  },
              ]
            : []),
    ];

    const handleLogout = () => {
        router.post(logout().url);
    };

    return (
        <Sidebar
            collapsible="icon"
            variant="inset"
            className="border-r border-slate-800 bg-slate-900 text-slate-300"
        >
            {/* Header / Logo */}
            <SidebarHeader className="border-b border-slate-800 bg-slate-900 p-4">
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton
                            size="lg"
                            asChild
                            className="transition-colors hover:bg-slate-800/60"
                        >
                            <Link
                                href="/dashboard"
                                prefetch
                                className="flex items-center gap-2"
                            >
                                <div className="rounded-lg bg-orange-600 p-2 text-white shadow-md shadow-blue-900/30">
                                    <Shield className="h-5 w-5 fill-white/10" />
                                </div>
                                <span className="text-lg font-bold tracking-tight text-white">
                                    Scuto Legal
                                </span>
                            </Link>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarHeader>

            {/* Content / Main Menu */}
            <SidebarContent className="bg-slate-900 p-3">
                <div className="mb-2 px-3 text-xs font-semibold tracking-wider text-slate-500 uppercase">
                    Workspace
                </div>
                <SidebarMenu className="space-y-1">
                    {mainNavItems.map((item) => {
                        const Icon = item.icon;
                        const isActive =
                            url === item.href ||
                            url.startsWith(item.href + '/');

                        return (
                            <SidebarMenuItem key={item.title}>
                                <SidebarMenuButton
                                    asChild
                                    className={`w-full justify-between rounded-lg px-3 py-2.5 transition-all duration-200 ${
                                        isActive
                                            ? 'bg-blue-600 text-white shadow-md shadow-blue-900/20'
                                            : 'text-slate-400 hover:bg-slate-800/60 hover:text-slate-100'
                                    }`}
                                >
                                    <Link
                                        href={item.href}
                                        className="flex w-full items-center justify-between"
                                    >
                                        <div className="flex items-center gap-3">
                                            <Icon
                                                className={`h-5 w-5 ${isActive ? 'text-white' : 'text-slate-400 group-hover:text-slate-200'}`}
                                            />
                                            <span className="text-sm font-medium">
                                                {item.title}
                                            </span>
                                        </div>
                                    </Link>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                        );
                    })}
                </SidebarMenu>
            </SidebarContent>

            {/* Footer Menu & Logout */}
            <SidebarFooter className="space-y-1 border-t border-slate-800 bg-slate-900 p-3">
                <SidebarMenu className="space-y-1">
                    {footerNavItems.map((item) => {
                        const Icon = item.icon;
                        const isActive =
                            url === item.href ||
                            url.startsWith(item.href + '/');

                        return (
                            <SidebarMenuItem key={item.title}>
                                <SidebarMenuButton
                                    asChild
                                    className={`w-full rounded-lg px-3 py-2.5 transition-all duration-200 ${
                                        isActive
                                            ? 'bg-blue-600 text-white shadow-md shadow-blue-900/20'
                                            : 'text-slate-400 hover:bg-slate-800/60 hover:text-slate-100'
                                    }`}
                                >
                                    <Link
                                        href={item.href}
                                        className="flex items-center gap-3"
                                    >
                                        <Icon
                                            className={`h-5 w-5 ${isActive ? 'text-white' : 'text-slate-400'}`}
                                        />
                                        <span className="text-sm font-medium">
                                            {item.title}
                                        </span>
                                    </Link>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                        );
                    })}

                    {/* Tombol Logout */}
                    <SidebarMenuItem>
                        <SidebarMenuButton
                            onClick={handleLogout}
                            className="group w-full justify-start rounded-lg px-3 py-2.5 text-sm font-medium text-slate-400 transition-all duration-200 hover:bg-red-950/30 hover:text-red-400"
                        >
                            <LogOut className="h-5 w-5 text-slate-400 transition-colors group-hover:text-red-400" />
                            <span>Logout</span>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarFooter>
        </Sidebar>
    );
}