Sidebar

"use client";

import { Avatar } from "@/registry/ds/avatar";
import { BarChart, Bell, BookOpen, Calendar, HelpCircle, Home, LogOut, Settings } from "@/registry/ds/icons";
import { Menu, MenuItem, MenuSeparator } from "@/registry/ds/menu";
import { Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarNav, useSidebar } from "@/registry/ds/sidebar";

const Logo = () => (
  <svg viewBox="0 0 24 24" aria-hidden>
    <rect width="24" height="24" rx="6" fill="var(--primary)" />
    <path d="M7 12.5l3.5 3.5L17 9" stroke="var(--primary-fg)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
  </svg>
);

/** El footer se adapta: plegado queda solo el avatar */
function UserMenu() {
  const { collapsed } = useSidebar();
  return (
    <Menu
      side="top"
      align="start"
      trigger={
        <button
          type="button"
          aria-label="Cuenta de Julia Arce"
          className={`flex w-full items-center gap-3 rounded-md p-1.5 text-left transition-colors hover:bg-bg-subtle focus-visible:shadow-[inset_0_0_0_2px_var(--focus-ring)] focus-visible:outline-none ${collapsed ? "justify-center" : ""}`}
        >
          <Avatar name="Julia Arce" size="sm" />
          {!collapsed && (
            <span className="min-w-0 flex-1">
              <span className="block truncate text-sm font-medium text-fg">Julia Arce</span>
              <span className="block truncate text-xs text-fg-muted">julia@campus.edu</span>
            </span>
          )}
        </button>
      }
    >
      <MenuItem icon={<Settings />}>Configuración</MenuItem>
      <MenuSeparator />
      <MenuItem icon={<LogOut />}>Cerrar sesión</MenuItem>
    </Menu>
  );
}

export default function SidebarBasic() {
  return (
    <div className="flex h-120 w-full overflow-hidden rounded-lg bg-bg-subtle">
      <Sidebar collapsible>
        <SidebarHeader logo={<Logo />} href="#">
          Campus
        </SidebarHeader>
        <SidebarNav>
          <SidebarItem href="#" icon={<Home />} active>
            Inicio
          </SidebarItem>
          <SidebarItem href="#" icon={<Bell />} badge="3">
            Notificaciones
          </SidebarItem>
          <SidebarGroup label="Académico">
            <SidebarItem
              icon={<BookOpen />}
              items={[
                { label: "Plan de estudios", href: "#" },
                { label: "Correlativas", href: "#" },
                { label: "Inscripción", href: "#" },
              ]}
            >
              Materias
            </SidebarItem>
            <SidebarItem href="#" icon={<Calendar />}>
              Calendario
            </SidebarItem>
            <SidebarItem href="#" icon={<BarChart />}>
              Notas
            </SidebarItem>
          </SidebarGroup>
          <SidebarGroup label="Cuenta">
            <SidebarItem href="#" icon={<Settings />}>
              Configuración
            </SidebarItem>
            <SidebarItem href="#" icon={<HelpCircle />}>
              Ayuda
            </SidebarItem>
          </SidebarGroup>
        </SidebarNav>
        <SidebarFooter>
          <UserMenu />
        </SidebarFooter>
      </Sidebar>
      <div className="flex-1 space-y-4 p-6" aria-hidden>
        <div className="h-6 w-40 rounded-md bg-surface" />
        <div className="grid gap-4 sm:grid-cols-3">
          {[0, 1, 2].map((i) => (
            <div key={i} className="h-24 rounded-lg border border-border bg-bg-elevated" />
          ))}
        </div>
        <div className="h-48 rounded-lg border border-border bg-bg-elevated" />
      </div>
    </div>
  );
}