import { LayoutDashboard, Settings, Activity } from "lucide-react";
import { Link, useLocation } from "react-router-dom";
import {
    Sidebar,
    SidebarContent,
    SidebarGroup,
    SidebarGroupContent,
    SidebarGroupLabel,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarFooter,
    SidebarRail,
} from "@/components/ui/sidebar";
import { useDashboardStats } from "@/hooks/use-dashboard-stats";

// Menu items.
const items = [
    {
        title: "Dashboard",
        url: "/",
        icon: LayoutDashboard,
    },
    {
        title: "Activity",
        url: "/activity",
        icon: Activity,
    },
    {
        title: "Settings",
        url: "/settings",
        icon: Settings,
    },
];

export function AppSidebar() {
    const location = useLocation();
    const { stats } = useDashboardStats();

    const botName = stats?.bot?.name || "Aurora";
    const botAvatar = stats?.bot?.avatarUrl;

    return (
        <Sidebar className="glass-sidebar border-r border-white/5">
            <SidebarHeader className="p-4">
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton size="lg" asChild className="hover:bg-white/5 transition-all duration-300 rounded-xl">
                            <Link to="/" className="flex items-center gap-3">
                                <div className="flex aspect-square size-10 items-center justify-center rounded-xl bg-gradient-to-br from-primary to-purple-600 text-primary-foreground shadow-lg shadow-primary/20 overflow-hidden border border-white/10">
                                    {botAvatar ? (
                                        <img src={botAvatar} alt={botName} className="size-full object-cover" />
                                    ) : (
                                        <div className="size-full flex items-center justify-center font-bold text-lg italic">A</div>
                                    )}
                                </div>
                                <div className="flex flex-col gap-0 leading-none">
                                    <span className="text-lg font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-white/70">{botName}</span>
                                    <span className="text-[10px] uppercase tracking-widest text-primary font-bold">Admin Portal</span>
                                </div>
                            </Link>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarHeader>
            <SidebarContent className="px-2">
                <SidebarGroup>
                    <SidebarGroupLabel className="px-4 text-[10px] font-bold uppercase tracking-[0.2em] text-white/30 mb-2">Main Navigation</SidebarGroupLabel>
                    <SidebarGroupContent>
                        <SidebarMenu className="gap-1">
                            {items.map((item) => (
                                <SidebarMenuItem key={item.title}>
                                    <SidebarMenuButton
                                        asChild
                                        isActive={location.pathname === item.url}
                                        className={`transition-all duration-200 rounded-lg px-4 py-6 ${location.pathname === item.url
                                            ? "bg-primary/10 text-primary border border-primary/20 shadow-lg shadow-primary/5"
                                            : "hover:bg-white/5 text-white/60 hover:text-white"
                                            }`}
                                    >
                                        <Link to={item.url} className="flex items-center gap-3">
                                            <item.icon className={`size-5 ${location.pathname === item.url ? "text-primary" : ""}`} />
                                            <span className="font-medium">{item.title}</span>
                                        </Link>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                            ))}
                        </SidebarMenu>
                    </SidebarGroupContent>
                </SidebarGroup>
            </SidebarContent>
            <SidebarFooter className="p-4 border-t border-white/5">
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton size="lg" className="hover:bg-white/5 rounded-xl transition-colors">
                            <div className="bg-primary/20 border border-primary/20 flex aspect-square size-10 items-center justify-center rounded-full overflow-hidden">
                                <span className="text-sm font-bold text-primary italic">A</span>
                            </div>
                            <div className="flex flex-col gap-0.5 leading-none ml-2">
                                <span className="font-bold text-sm text-white/90">Administrator</span>
                                <span className="text-[10px] text-white/40 font-medium">Session Active</span>
                            </div>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarFooter>
            <SidebarRail />
        </Sidebar>
    );
}