import { Link, useRouterState } from "@tanstack/react-router";
import {
  LayoutDashboard,
  CalendarDays,
  PlusCircle,
  UserCircle,
  ShieldCheck,
  Landmark,
  GraduationCap,
  Building2,
  Search,
} from "lucide-react";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from "@/components/ui/sidebar";
import { useAuth } from "@/hooks/use-auth";
import logo from "@/assets/skillkonnect-logo.png.asset.json";

type NavItem = { title: string; url: string; icon: typeof LayoutDashboard };

export function AppSidebar() {
  const { state } = useSidebar();
  const collapsed = state === "collapsed";
  const { hasRole, roles } = useAuth();
  const currentPath = useRouterState({
    select: (router) => router.location.pathname,
  });

  const primaryRole = roles[0] ?? "school";
  const roleMeta: Record<string, { label: string; icon: typeof LayoutDashboard }> = {
    school: { label: "School", icon: Building2 },
    trainer: { label: "Skill Professional", icon: GraduationCap },
    government: { label: "Ministry", icon: Landmark },
    admin: { label: "Administrator", icon: ShieldCheck },
  };
  const RoleIcon = roleMeta[primaryRole]?.icon ?? Building2;

  const mainItems: NavItem[] = [
    { title: "Dashboard", url: "/dashboard", icon: LayoutDashboard },
    { title: "Bookings", url: "/bookings", icon: CalendarDays },
  ];
  if (hasRole("school")) {
    mainItems.push({ title: "Find trainers", url: "/trainers", icon: Search });
    mainItems.push({ title: "New booking", url: "/bookings/new", icon: PlusCircle });
  }
  if (hasRole("admin")) {
    mainItems.push({ title: "Verifications", url: "/admin/verifications", icon: ShieldCheck });
  }

  const accountItems: NavItem[] = [
    { title: "Profile", url: "/profile", icon: UserCircle },
  ];

  const isActive = (path: string) => currentPath === path;

  return (
    <Sidebar collapsible="icon">
      <SidebarHeader className="border-b border-sidebar-border">
        <Link to="/dashboard" className="flex items-center gap-2 px-2 py-2">
          <img src={logo.url} alt="SkillKonnect" className="h-7 w-7 shrink-0" />
          {!collapsed && (
            <div className="flex flex-col min-w-0">
              <span className="text-sm font-semibold truncate">SkillKonnect</span>
              <span className="text-[11px] text-muted-foreground inline-flex items-center gap-1">
                <RoleIcon className="h-3 w-3" />
                {roleMeta[primaryRole]?.label ?? primaryRole}
              </span>
            </div>
          )}
        </Link>
      </SidebarHeader>

      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Workspace</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {mainItems.map((item) => (
                <SidebarMenuItem key={item.url}>
                  <SidebarMenuButton asChild isActive={isActive(item.url)}>
                    <Link to={item.url} className="flex items-center gap-2">
                      <item.icon className="h-4 w-4" />
                      <span>{item.title}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarGroup>
          <SidebarGroupLabel>Account</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {accountItems.map((item) => (
                <SidebarMenuItem key={item.url}>
                  <SidebarMenuButton asChild isActive={isActive(item.url)}>
                    <Link to={item.url} className="flex items-center gap-2">
                      <item.icon className="h-4 w-4" />
                      <span>{item.title}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  );
}