import type { ComponentProps } from 'react'
import { Separator } from '@admin/components/ui/separator'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuItem
} from '@admin/components/ui/sidebar'
import { adminNavigation } from '@admin/data/navigation'
import { groupAdminNavigationItems } from '@admin/utils/navigation/sidebar'
import { Settings, Users } from 'lucide-react'
import { Fragment, Suspense } from 'react'
import { AdminSidebarBranding } from './admin-sidebar-branding'
import { BrandingSkeleton } from './admin-sidebar-branding-skeleton'
import { SidebarNavLink } from './admin-sidebar-nav-link'
import { SidebarUserMenu } from './admin-sidebar-user-menu'
import { UserMenuSkeleton } from './admin-sidebar-user-menu-skeleton'

export function AdminSidebar(props: ComponentProps<typeof Sidebar>) {
  const groups = groupAdminNavigationItems(adminNavigation)

  return (
    <Sidebar collapsible="icon" {...props}>
      <SidebarHeader className="flex h-14 w-full items-center border-t border-b border-border/80">
        <Suspense fallback={<BrandingSkeleton />}>
          <AdminSidebarBranding />
        </Suspense>
      </SidebarHeader>
      <SidebarContent className="pt-4 pb-1">
        {groups.map((group) => (
          <Fragment key={group.label ?? '_ungrouped'}>
            <SidebarGroup className="py-0">
              {group.label && <SidebarGroupLabel>{group.label}</SidebarGroupLabel>}
              <SidebarMenu className="gap-px">
                {group.items.map((item) => (
                  <SidebarMenuItem key={item.href}>
                    <SidebarNavLink href={item.href}>
                      {item.icon && <item.icon strokeWidth={2} />}
                      <span>{item.label}</span>
                    </SidebarNavLink>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroup>
          </Fragment>
        ))}

        <SidebarGroup className="mt-auto gap-2 px-0">
          <Separator />
          <SidebarMenu className="gap-0.5 px-2">
            <SidebarMenuItem>
              <SidebarNavLink href="/admin/users">
                <Users strokeWidth={2} />
                <span>Users</span>
              </SidebarNavLink>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarNavLink href="/admin/settings">
                <Settings strokeWidth={2} />
                <span>Settings</span>
              </SidebarNavLink>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter className="h-(--admin-shell-bottom-bar-height) shrink-0 border-t border-border bg-background p-0 [--admin-shell-bottom-bar-height:53px]">
        <Suspense fallback={<UserMenuSkeleton />}>
          <SidebarUserMenu />
        </Suspense>
      </SidebarFooter>
    </Sidebar>
  )
}