48:T13312,
"use client"

import { cn } from "cn"
import * as React from "react"

import { Avatar, AvatarFallback } from "@konfront/ui/components/avatar"
import { Button } from "@konfront/ui/components/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@konfront/ui/components/dropdown-menu"
import { Tooltip, TooltipContent, TooltipTrigger } from "@konfront/ui/components/tooltip"
import { Icon } from "@konfront/ui/icons"

export type NavItem = { label: string; href: string; icon?: React.ReactNode; active?: boolean; items?: Omit<NavItem, "icon" | "items">[] }
export type NavGroup = { label: string; items: NavItem[] }

/** Internal shell: sidebar 240 (64 collapsed) + 48 px top bar + content (max 1440, padding 32). */
export function AppShell({ sidebar, topBar, children, className }: { sidebar: React.ReactNode; topBar?: React.ReactNode; children: React.ReactNode; className?: string }) {
  return (
    <div className={cn("flex h-svh bg-background-soft", className)}>
      {sidebar}
      <main className="flex min-w-0 flex-1 flex-col">
        {topBar}
        <div className="flex-1 overflow-y-auto">
          <div className="mx-auto w-full max-w-[1440px] p-4 md:p-8">{children}</div>
        </div>
      </main>
    </div>
  )
}

export function AppSidebar({
  logo,
  space,
  spaces = [],
  onSpaceChange,
  groups,
  user,
  onSignOut,
  defaultCollapsed = false,
}: {
  logo: React.ReactNode
  space: string
  spaces?: string[]
  onSpaceChange?: (space: string) => void
  groups: NavGroup[]
  user: { name: string; role: string; initials: string }
  onSignOut?: () => void
  defaultCollapsed?: boolean
}) {
  const [collapsed, setCollapsed] = React.useState(defaultCollapsed)
  const [closed, setClosed] = React.useState<string[]>([])

  return (
    <aside
      data-collapsed={collapsed || undefined}
      className={cn(
        "group/sidebar flex shrink-0 flex-col border-r border-border bg-background transition-[width] duration-300",
        collapsed ? "w-16" : "w-60"
      )}
    >
      <div className={cn("flex h-14 items-center gap-2 px-3", collapsed && "justify-center px-0")}>
        <span className="grid size-9 shrink-0 place-items-center overflow-hidden rounded-md">{logo}</span>
        {!collapsed && (
          <DropdownMenu>
            <DropdownMenuTrigger render={<Button variant="ghost" size="sm" className="min-w-0 flex-1 justify-between px-2" />}>
              <span className="truncate font-heading font-bold">{space}</span>
              <Icon name="chevronDown" className="size-4 text-muted-foreground" />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              {spaces.map((s) => (
                <DropdownMenuItem key={s} onClick={() => onSpaceChange?.(s)}>
                  {s}
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        )}
        {!collapsed && (
          <Button variant="ghost" size="icon-sm" aria-label="Colapsar menú" onClick={() => setCollapsed(true)}>
            <Icon name="sidebar" />
          </Button>
        )}
      </div>
      {collapsed && (
        <div className="flex justify-center pb-2">
          <Button variant="ghost" size="icon-sm" aria-label="Expandir menú" onClick={() => setCollapsed(false)}>
            <Icon name="sidebar" />
          </Button>
        </div>
      )}

      <nav aria-label={space} className="flex flex-1 flex-col gap-4 overflow-y-auto px-3 py-2">
        {groups.map((g) => {
          const open = !closed.includes(g.label)
          return (
            <div key={g.label} className="flex flex-col gap-0.5">
              {!collapsed && (
                <button
                  type="button"
                  aria-expanded={open}
                  onClick={() => setClosed((c) => (open ? [...c, g.label] : c.filter((x) => x !== g.label)))}
                  className="flex h-7 items-center justify-between rounded-md px-2.5 text-[11px] font-medium tracking-[0.06em] text-muted-foreground uppercase outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
                >
                  {g.label}
                  <Icon name="chevronDown" className={cn("size-3.5 transition-transform", !open && "-rotate-90")} />
                </button>
              )}
              {(open || collapsed) &&
                g.items.map((item) => (
                  <React.Fragment key={item.href}>
                    <NavLink item={item} collapsed={collapsed} />
                    {!collapsed &&
                      item.items?.map((sub) => (
                        <a
                          key={sub.href}
                          href={sub.href}
                          aria-current={sub.active ? "page" : undefined}
                          className={cn(
                            "flex h-7 items-center rounded-md pr-2.5 pl-9 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
                            sub.active && "bg-muted text-foreground"
                          )}
                        >
                          {sub.label}
                        </a>
                      ))}
                  </React.Fragment>
                ))}
            </div>
          )
        })}
      </nav>

      <div className={cn("mt-auto flex items-center gap-2.5 border-t border-border p-3", collapsed && "justify-center")}>
        <Avatar>
          <AvatarFallback>{user.initials}</AvatarFallback>
        </Avatar>
        {!collapsed && (
          <>
            <div className="flex min-w-0 flex-1 flex-col">
              <span className="truncate text-sm font-medium">{user.name}</span>
              <span className="truncate text-xs text-muted-foreground">{user.role}</span>
            </div>
            <Button variant="ghost" size="icon-sm" aria-label="Cerrar sesión" onClick={onSignOut}>
              <Icon name="signOut" />
            </Button>
          </>
        )}
      </div>
    </aside>
  )
}

function NavLink({ item, collapsed }: { item: NavItem; collapsed: boolean }) {
  const link = (
    <a
      href={item.href}
      aria-current={item.active ? "page" : undefined}
      aria-label={collapsed ? item.label : undefined}
      className={cn(
        "flex h-8 items-center gap-2 rounded-md px-2.5 text-sm font-medium text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&_svg]:size-4 [&_svg]:shrink-0",
        item.active && "bg-muted text-foreground",
        collapsed && "justify-center px-0"
      )}
    >
      {item.icon}
      {!collapsed && <span className="truncate">{item.label}</span>}
    </a>
  )
  if (!collapsed) return link
  return (
    <Tooltip>
      <TooltipTrigger render={link} />
      <TooltipContent side="right">{item.label}</TooltipContent>
    </Tooltip>
  )
}

/** 48 px top bar: context on the left (status dot + text), global actions on the right. The user lives in the sidebar. */
export function TopBar({
  status,
  actions,
}: {
  status?: { label: string; tone: "success" | "warning" | "danger" | "info" }
  actions?: React.ReactNode
}) {
  const dot = { success: "bg-success", warning: "bg-warning", danger: "bg-danger", info: "bg-info" }
  return (
    <header className="flex h-12 shrink-0 items-center justify-between border-b border-border bg-background px-4">
      {status ? (
        <span className="inline-flex items-center gap-2 text-sm">
          <span aria-hidden className={cn("size-2 rounded-full", dot[status.tone])} />
          {status.label}
        </span>
      ) : (
        <span />
      )}
      <div className="flex items-center gap-1">{actions}</div>
    </header>
  )
}
47:["$","div",null,{"className":"overflow-auto px-4 py-3.5 font-mono text-[13px] leading-6 [&_pre]:!bg-transparent [&_span]:text-(--shiki-light) dark:[&_span]:text-(--shiki-dark)","style":{"maxHeight":560},"dangerouslySetInnerHTML":{"__html":"$48"}}]
Reglas Konfront
