'use client';

import * as React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { ChevronDown } from 'lucide-react';

import { cn } from '@/lib/utils';
import type { NavItem } from '@/lib/layout/nav-items';

function isActive(pathname: string, href: string): boolean {
  return pathname === href || pathname.startsWith(`${href}/`);
}

function isGroupActive(pathname: string, item: NavItem): boolean {
  if (isActive(pathname, item.href)) return true;
  return item.children?.some((child) => isActive(pathname, child.href)) ?? false;
}

interface NavListProps {
  items: NavItem[];
  /** Modo ícones-apenas (sidebar recolhida) — grupos viram link direto pro primeiro filho. */
  collapsed?: boolean;
  /** Disparado ao navegar (o Drawer usa isso para fechar). */
  onNavigate?: () => void;
}

/**
 * Lista de navegação com estado de item/grupo ativo — compartilhada entre
 * `Sidebar` (desktop) e `Drawer` (mobile) para não duplicar essa lógica em
 * dois lugares.
 */
export function NavList({ items, collapsed = false, onNavigate }: NavListProps) {
  const pathname = usePathname();
  const [openHref, setOpenHref] = React.useState<string | null>(null);

  return (
    <nav className="flex flex-col gap-1">
      {items.map((item) => {
        const Icon = item.icon;
        const active = isGroupActive(pathname, item);

        if (item.children && !collapsed) {
          const open = openHref === item.href || (openHref === null && active);
          return (
            <div key={item.href}>
              <button
                type="button"
                onClick={() => setOpenHref(open ? '' : item.href)}
                aria-expanded={open}
                className={cn(
                  'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-500 transition-colors hover:bg-muted hover:text-foreground',
                  active && 'bg-primary/10 text-primary-on-light',
                )}
              >
                <Icon className="size-4.5 shrink-0" aria-hidden />
                <span className="flex-1 text-left">{item.label}</span>
                <ChevronDown
                  className={cn('size-4 shrink-0 transition-transform', open && 'rotate-180')}
                  aria-hidden
                />
              </button>
              {open && (
                <div className="ml-4 flex flex-col gap-0.5 border-l border-border py-1 pl-4">
                  {item.children.map((child) => (
                    <Link
                      key={child.href}
                      href={child.href}
                      onClick={onNavigate}
                      aria-current={isActive(pathname, child.href) ? 'page' : undefined}
                      className={cn(
                        'rounded-lg px-3 py-2 text-sm text-neutral-500 transition-colors hover:bg-muted hover:text-foreground',
                        isActive(pathname, child.href) && 'font-medium text-primary-on-light',
                      )}
                    >
                      {child.label}
                    </Link>
                  ))}
                </div>
              )}
            </div>
          );
        }

        return (
          <Link
            key={item.href}
            href={item.href}
            onClick={onNavigate}
            aria-current={active ? 'page' : undefined}
            title={collapsed ? item.label : undefined}
            className={cn(
              'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-500 transition-colors hover:bg-muted hover:text-foreground',
              active && 'bg-primary/10 text-primary-on-light',
              collapsed && 'mx-auto size-11 justify-center px-0 py-0',
            )}
          >
            <Icon className="size-4.5 shrink-0" aria-hidden />
            {!collapsed && <span>{item.label}</span>}
          </Link>
        );
      })}
    </nav>
  );
}