import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuItem } from "@/components/ui/sidebar";
import { cn } from "@/lib/utils";

/*
 * The sidebar while the role's menus load (loading spec §8: skeleton shaped like the content, never a partial menu
 * that fills in). Group labels and items in the sidebar's own foreground tint, so it reads on the light and the teal
 * tone. Drawn from the menus themselves (their groups, and a bar as long as each label), so it is the shape of the
 * menu that replaces it; widths come from the text, so the server and the first client render match. Pulses; static
 * under reduced motion.
 */

/** About one character of 14px text in the sidebar, in rem. */
const ch = 0.5;

const tint = "bg-sidebar-foreground/10 motion-reduce:animate-none animate-pulse";

export function SidebarSkeleton({ groups }: { groups: { label: string; items: string[] }[] }) {
  return (
    <div role="status" aria-busy="true" aria-label="Loading menu">
      {groups.map((group) => (
        <SidebarGroup key={group.label} className="py-1">
          <div className="flex h-8 items-center px-2 group-data-[collapsible=icon]:hidden">
            <div aria-hidden className={cn("h-2.5 rounded-[var(--radius-xs,0.25rem)]", tint)} style={{ width: `${group.label.length * 0.45}rem` }} />
          </div>
          <SidebarGroupContent>
            <SidebarMenu>
              {group.items.map((title) => (
                <SidebarMenuItem key={title}>
                  <div className="flex h-8 items-center gap-2 px-2">
                    <div aria-hidden className={cn("size-4 shrink-0 rounded-[var(--radius-xs,0.25rem)]", tint)} />
                    <div aria-hidden className={cn("h-3 rounded-[var(--radius-xs,0.25rem)] group-data-[collapsible=icon]:hidden", tint)} style={{ width: `${Math.min(title.length * ch, 11)}rem` }} />
                  </div>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      ))}
    </div>
  );
}

/** The profile block at the foot of the sidebar until the signed-in user is known: avatar, name and role lines. */
export function SidebarProfileSkeleton() {
  return (
    <div role="status" aria-busy="true" aria-label="Loading profile" className="flex h-10 items-center gap-2 px-2">
      <div aria-hidden className={cn("size-7 shrink-0 rounded-full", tint)} />
      <div className="grid flex-1 gap-1.5 group-data-[collapsible=icon]:hidden">
        <div aria-hidden className={cn("h-3 w-24 rounded-[var(--radius-xs,0.25rem)]", tint)} />
        <div aria-hidden className={cn("h-2.5 w-14 rounded-[var(--radius-xs,0.25rem)]", tint)} />
      </div>
    </div>
  );
}