'use client';

import * as React from 'react';
import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';

import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { NavList } from '@/components/layout/nav-list';
import type { NavItem } from '@/lib/layout/nav-items';

interface SidebarProps {
  brand: React.ReactNode;
  brandCollapsed: React.ReactNode;
  items: NavItem[];
  footer: React.ReactNode;
  footerCollapsed: React.ReactNode;
  collapsed: boolean;
  onToggleCollapsed: () => void;
}

/**
 * Sidebar fixa (desktop, `md+`). Itens de menu e rodapé de usuário chegam
 * via props — sem nada hardcoded — para ser reaproveitada entre o shell do
 * master e o do tenant com conteúdo diferente (Etapa 14).
 */
export function Sidebar({
  brand,
  brandCollapsed,
  items,
  footer,
  footerCollapsed,
  collapsed,
  onToggleCollapsed,
}: SidebarProps) {
  return (
    <aside
      className={cn(
        'fixed inset-y-0 left-0 z-30 hidden flex-col border-r border-border bg-surface transition-[width] duration-150 md:flex',
        collapsed ? 'w-16' : 'w-60',
      )}
    >
      <div className={cn('flex h-16 shrink-0 items-center gap-2 overflow-hidden px-4', collapsed && 'justify-center px-2')}>
        {collapsed ? brandCollapsed : brand}
      </div>
      <Separator />
      <div className="min-h-0 flex-1 overflow-y-auto px-3 py-4">
        <NavList items={items} collapsed={collapsed} />
      </div>
      <Separator />
      <div className={cn('flex flex-col gap-2 p-3', collapsed && 'items-center')}>
        {collapsed ? footerCollapsed : footer}
        <Button
          type="button"
          variant="ghost"
          size="icon-sm"
          onClick={onToggleCollapsed}
          aria-label={collapsed ? 'Expandir menu' : 'Recolher menu'}
          className={collapsed ? 'self-center' : 'self-end'}
        >
          {collapsed ? <PanelLeftOpen className="size-4" /> : <PanelLeftClose className="size-4" />}
        </Button>
      </div>
    </aside>
  );
}