'use client';

import { confirmDialog } from '@/lib/feedback/confirmDialog';
import { queryKeys } from '@/lib/cache/queryKeys';
import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { Drawer } from 'antd';
import { message } from '@/lib/feedback/message';
import apiClient from '@/lib/api/client';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { useIsMobile } from '@/hooks/useIsMobile';
import { getMenuByTipo } from './projetoMenuConfig';
import { getProjetoMobileEssenciais } from './projetoMobileEssenciais';
import { splitMenuGroupsForSecondaryNav } from './projetoSecondaryNavSplit';
import { useProjetoSecondaryNavCapacity } from './useProjetoSecondaryNavCapacity';
import type { MenuGroupConfig, MenuItemConfig } from './projetoMenuConfig';
import { resolverFaseProjeto } from './projetoMenuFase';
import styles from './ProjetoLayout.module.scss';
import { ProjetoMenuFaIcon } from './ProjetoMenuFaIcon';
import { ProjetoMenuBadge } from './ProjetoMenuBadge';
import { ProjetoMenuDrawerNav } from './ProjetoMenuDrawerNav';
import { ProjetoMenuAside } from './ProjetoMenuAside';
import {
    PROJETO_MENU_ORIENTACAO_PADRAO,
    type ProjetoMenuOrientacao,
} from './projetoMenuOrientacao';
import { SidebarMenuIcon } from '../Sidebar/SidebarMenuIcon';
import { useAddons } from '@/hooks/useAddons';
import { useQueryCache } from '@/hooks/useQueryCache';
import {
    ADDON_SLUG_DESENVOLVIMENTO_SOFTWARE,
    resolverAddonSlugCategoriaProjeto,
} from '@/lib/projetos/categoriaProjetoAddon';
import type { LogsSummary } from '@/features/suporte/logs/types';
import {
    formatLogsBadgeLabel,
    resolveLogsPendentesBadgeCount,
} from './resolveLogsPendentesBadgeCount';

function menuItemReactKey(item: MenuItemConfig): string {
    return item.route !== '#' ? item.route : `action:${item.label}`;
}

function menuItemTreeActive(
    item: MenuItemConfig,
    isActive: (route: string) => boolean,
): boolean {
    if (item.route !== '#' && isActive(item.route)) {
        return true;
    }
    return (item.children ?? []).some((child) => menuItemTreeActive(child, isActive));
}

type CloseDropdownFn = () => void;

function SecondaryNavDropdownLeaf({
    item,
    label,
    iconClass,
    itemActive,
    onNavigate,
    onDelete,
}: {
    item: MenuItemConfig;
    label?: string;
    iconClass?: string;
    itemActive: boolean;
    onNavigate: CloseDropdownFn;
    onDelete: () => void;
}) {
    const isDanger = Boolean(item.danger);
    const displayLabel = label ?? item.label;
    const displayIcon = iconClass ?? item.icon;

    if (item.action === 'excluir-projeto') {
        return (
            <button
                type="button"
                role="menuitem"
                className={`${styles.secondaryNavDropdownLink} ${styles.secondaryNavDropdownButton} ${isDanger ? styles.textDanger : ''}`}
                onClick={() => {
                    onNavigate();
                    onDelete();
                }}
            >
                <ProjetoMenuFaIcon
                    iconClass={displayIcon}
                    className={styles.secondaryNavDropdownIcon}
                />
                <span className={styles.secondaryNavDropdownLabel}>{displayLabel}</span>
            </button>
        );
    }

    // `pruneEmptyMenuItems` garante que folhas sem página e sem ação não chegam aqui.
    if (item.route === '#') {
        return null;
    }

    return (
        <Link
            href={item.route}
            prefetch={false}
            role="menuitem"
            className={`${styles.secondaryNavDropdownLink} ${itemActive ? styles.active : ''} ${isDanger ? styles.textDanger : ''}`}
            onClick={onNavigate}
            aria-current={itemActive ? ('page' as const) : undefined}
        >
            <ProjetoMenuFaIcon
                iconClass={displayIcon}
                className={styles.secondaryNavDropdownIcon}
            />
            <span className={styles.secondaryNavDropdownLabel}>{displayLabel}</span>
            {item.new ? (
                <ProjetoMenuBadge variant="new" className={styles.secondaryNavDropdownBadge} />
            ) : null}
            {item.emBreve ? (
                <ProjetoMenuBadge variant="emBreve" className={styles.secondaryNavDropdownBadge} />
            ) : null}
        </Link>
    );
}

function SecondaryNavDropdownItem({
    item,
    isItemActive,
    onNavigate,
    onDelete,
    label,
    iconClass,
}: {
    item: MenuItemConfig;
    isItemActive: (route: string) => boolean;
    onNavigate: CloseDropdownFn;
    onDelete: () => void;
    label?: string;
    iconClass?: string;
}) {
    const children = item.children ?? [];
    const itemActive = menuItemTreeActive(item, isItemActive);
    const isDanger = Boolean(item.danger);
    const displayLabel = label ?? item.label;
    const displayIcon = iconClass ?? item.icon;

    if (children.length === 0) {
        return (
            <SecondaryNavDropdownLeaf
                item={item}
                label={displayLabel}
                iconClass={displayIcon}
                itemActive={item.route !== '#' && isItemActive(item.route)}
                onNavigate={onNavigate}
                onDelete={onDelete}
            />
        );
    }

    const parentIsLink = item.route !== '#';

    return (
        <div
            className={styles.secondaryNavDropdownBranch}
            role="none"
        >
            {parentIsLink ? (
                <Link
                    href={item.route}
                    prefetch={false}
                    role="menuitem"
                    aria-haspopup="menu"
                    className={`${styles.secondaryNavDropdownLink} ${itemActive ? styles.active : ''} ${isDanger ? styles.textDanger : ''}`}
                    onClick={onNavigate}
                    aria-current={
                        item.route !== '#' && isItemActive(item.route)
                            ? ('page' as const)
                            : undefined
                    }
                >
                    <ProjetoMenuFaIcon
                        iconClass={displayIcon}
                        className={styles.secondaryNavDropdownIcon}
                    />
                    <span className={styles.secondaryNavDropdownLabel}>{displayLabel}</span>
                    <SidebarMenuIcon icon="chevronDown" className={styles.secondaryNavDropdownChevron} />
                </Link>
            ) : (
                <button
                    type="button"
                    role="menuitem"
                    aria-haspopup="menu"
                    className={`${styles.secondaryNavDropdownLink} ${styles.secondaryNavDropdownButton} ${itemActive ? styles.active : ''} ${isDanger ? styles.textDanger : ''}`}
                >
                    <ProjetoMenuFaIcon
                        iconClass={displayIcon}
                        className={styles.secondaryNavDropdownIcon}
                    />
                    <span className={styles.secondaryNavDropdownLabel}>{displayLabel}</span>
                    <SidebarMenuIcon icon="chevronDown" className={styles.secondaryNavDropdownChevron} />
                </button>
            )}
            <div className={styles.secondaryNavDropdownFlyout} role="menu" aria-label={displayLabel}>
                {children.map((child) => (
                    <SecondaryNavDropdownItem
                        key={menuItemReactKey(child)}
                        item={child}
                        isItemActive={isItemActive}
                        onNavigate={onNavigate}
                        onDelete={onDelete}
                    />
                ))}
            </div>
        </div>
    );
}

/** Réplica estática de um grupo na barra — só para medir largura no probe oculto. */
function SecondaryNavGroupMeasure({
    group,
    groupIndex,
}: {
    group: MenuGroupConfig;
    groupIndex: number;
}) {
    const groupKey = `${group.label}::${groupIndex}`;
    const singleItem = group.items.length === 1 && group.items[0].route !== '#';
    const item = singleItem ? group.items[0] : null;

    return (
        <ul key={groupKey} className={styles.navGroup} data-secondary-nav-group="">
            <li className={styles.secondaryNavItem}>
                <span className={styles.secondaryNavLink} aria-hidden="true">
                    <ProjetoMenuFaIcon iconClass={group.icon} /> {group.label}
                    {!singleItem ? <SidebarMenuIcon icon="chevronDown" className="ml-1" /> : null}
                    {item?.emBreve ? (
                        <span className={`${styles.badge} ${styles.secondaryNavInlineBadge}`}>Em breve</span>
                    ) : null}
                    {item?.badgeCount != null && item.badgeCount > 0 ? (
                        <span className={`${styles.badge} ${styles.secondaryNavInlineBadge}`}>
                            {item.badgeCount > 99 ? '99+' : item.badgeCount}
                        </span>
                    ) : null}
                </span>
            </li>
        </ul>
    );
}

interface ProjetoMenuNavProps {
    projetoId: string;
    currentPath: string;
    /** Tipo do projeto (codigo da categoria) para menu condicionado: website, sistema, cms, app_mobile, api */
    categoriaProjeto?: { id: number; nome: string; codigo: string } | null;
    /**
     * True enquanto o layout ainda carrega o projeto (categoria pode estar ausente).
     * Evita fallback tipológico incompleto no first paint / soft-nav.
     */
    categoriaLoading?: boolean;
    /** Código de status_projeto (ex.: ativo) — política de fase do menu. */
    statusCodigo?: string | null;
    /**
     * Cursor Pack já sincronizou (`cursor_pack.conectado` do detalhe do projeto).
     * Omite «Conectar projeto» no menu tipológico.
     */
    cursorPackConectado?: boolean;
    /** Controla abertura do drawer no mobile */
    drawerOpen?: boolean;
    onDrawerClose?: () => void;
    /** Ref ao `<nav>` da barra secundária (ex.: medir altura com várias linhas de menu) */
    secondaryNavRef?: React.Ref<HTMLElement | null>;
    /** Eixo do menu no desktop: barra horizontal (padrão) ou aside vertical. */
    orientacao?: ProjetoMenuOrientacao;
    /** Aside vertical em rail: a rota já tem coluna própria à esquerda. */
    asideRail?: boolean;
    /** Alterna o eixo do menu a partir do próprio aside. */
    onAlternarOrientacao?: () => void;
}

/**
 * Componente de navegação secundária do projeto.
 * Menu condicionado ao tipo do projeto (Website, API, App Mobile, Sistema, CMS).
 */
function assignNavRefs(
    menuRef: React.MutableRefObject<HTMLElement | null>,
    secondaryNavRef: React.Ref<HTMLElement | null> | undefined,
    el: HTMLElement | null
) {
    menuRef.current = el;
    if (!secondaryNavRef) return;
    if (typeof secondaryNavRef === 'function') {
        secondaryNavRef(el);
    } else {
        (secondaryNavRef as React.MutableRefObject<HTMLElement | null>).current = el;
    }
}

/**
 * Posição do dropdown do menu, renderizado em portal (`position: fixed`).
 *
 * Os dois dropdowns têm ancoragens diferentes: o de cada grupo abre sob o
 * próprio link, enquanto o de «Mais» é uma faixa que ocupa a largura da nav.
 * Guardar as duas referências evita alinhar tudo à esquerda da barra.
 */
interface DropdownPosition {
    top: number;
    /** Esquerda do link que abriu o dropdown, contida na viewport. */
    left: number;
    /** Esquerda da barra de navegação (dropdown «Mais»). */
    navLeft: number;
    /** Largura da barra de navegação (dropdown «Mais»). */
    navWidth: number;
}

/** Limite superior de `max-width` de `.secondaryNavDropdown`, para conter na viewport. */
const DROPDOWN_LARGURA_MAX = 360;
const DROPDOWN_MARGEM_VIEWPORT = 8;

function calcularDropdownPosition(
    trigger: HTMLElement,
    nav: HTMLElement | null,
): DropdownPosition {
    const triggerRect = trigger.getBoundingClientRect();
    const navRect = nav?.getBoundingClientRect();
    const limiteDireito =
        window.innerWidth - DROPDOWN_LARGURA_MAX - DROPDOWN_MARGEM_VIEWPORT;
    return {
        top: triggerRect.bottom + 4,
        left: Math.max(
            DROPDOWN_MARGEM_VIEWPORT,
            Math.min(triggerRect.left, Math.max(DROPDOWN_MARGEM_VIEWPORT, limiteDireito)),
        ),
        navLeft: navRect?.left ?? 0,
        navWidth: navRect?.width ?? window.innerWidth,
    };
}

export default function ProjetoMenuNav({
    projetoId,
    currentPath,
    categoriaProjeto,
    categoriaLoading = false,
    statusCodigo = null,
    cursorPackConectado = false,
    drawerOpen = false,
    onDrawerClose,
    secondaryNavRef,
    orientacao = PROJETO_MENU_ORIENTACAO_PADRAO,
    asideRail = false,
    onAlternarOrientacao,
}: ProjetoMenuNavProps) {
    const router = useRouter();
    const isMobile = useIsMobile();
    const { hasAddon, isLoading: addonsLoading } = useAddons();
    const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
    const [dropdownPosition, setDropdownPosition] = useState<DropdownPosition | null>(null);
    const menuRef = useRef<HTMLElement | null>(null);
    const linksRef = useRef<HTMLDivElement | null>(null);
    const measureRef = useRef<HTMLDivElement | null>(null);
    const dropdownTriggerRef = useRef<HTMLAnchorElement | null>(null);

    const categoriaCodigo = categoriaProjeto?.codigo;
    /** Menu tipológico pendente: loading sem codigo → não usar fallback completo (flash UX). */
    const menuTipoPendente = categoriaLoading && !categoriaCodigo;
    const addonSlugCategoria = resolverAddonSlugCategoriaProjeto(categoriaCodigo);
    const menuAddonDsPendente =
        addonSlugCategoria === ADDON_SLUG_DESENVOLVIMENTO_SOFTWARE && addonsLoading;
    const menuPendente = menuTipoPendente || menuAddonDsPendente;
    const desenvolvimentoSoftwareAtivo = hasAddon(ADDON_SLUG_DESENVOLVIMENTO_SOFTWARE);
    const faseMenu = resolverFaseProjeto(statusCodigo);
    const fetchLogsBadge = !menuPendente && (faseMenu === 'operacao' || faseMenu === 'arquivo');

    const { data: logsSummary } = useQueryCache<LogsSummary>({
        queryKey: queryKeys.projetos.logs.summaryMenuBadge(projetoId),
        endpoint: API_ENDPOINTS.projetos.logs.summary,
        params: {
            projeto_id: projetoId,
            resolved: 'no',
        },
        staleTime: 60 * 1000,
        enabled: fetchLogsBadge && hasAddon('projeto_logs'),
    });

    const logsBadgeCount = useMemo(
        () => resolveLogsPendentesBadgeCount(logsSummary),
        [logsSummary],
    );

    const handleDeletarProjeto = () => {
        confirmDialog({
            title: 'Deletar projeto?',
            content:
                'Esta ação é irreversível. Todos os dados do projeto (tarefas, requisitos, documentos, etc.) serão perdidos. Deseja continuar?',
            okText: 'Sim, deletar',
            okType: 'danger',
            cancelText: 'Cancelar',
            onOk: async () => {
                try {
                    await apiClient.delete(API_ENDPOINTS.projetos.destroy(projetoId));
                    message.success('Projeto excluído com sucesso.');
                    onDrawerClose?.();
                    router.push('/projetos');
                } catch (err) {
                    message.error(
                        err instanceof Error ? err.message : 'Não foi possível excluir o projeto.'
                    );
                    throw err;
                }
            },
        });
    };

    const menuGroups: MenuGroupConfig[] = useMemo(() => {
        if (menuPendente) return [];
        return getMenuByTipo(projetoId, categoriaCodigo, {
            desenvolvimentoSoftwareAtivo,
            statusCodigo,
            logsBadgeCount,
            cursorPackConectado,
            // Enquanto addons carregam, não ocultar itens gated (evita flash).
            hasAddon: addonsLoading ? undefined : hasAddon,
        });
    }, [
        projetoId,
        categoriaCodigo,
        menuPendente,
        desenvolvimentoSoftwareAtivo,
        statusCodigo,
        logsBadgeCount,
        cursorPackConectado,
        addonsLoading,
        hasAddon,
    ]);

    const essenciaisItems = useMemo(() => {
        if (menuPendente) return [];
        return getProjetoMobileEssenciais(projetoId, categoriaCodigo, {
            desenvolvimentoSoftwareAtivo,
            statusCodigo,
            logsBadgeCount,
            cursorPackConectado,
            hasAddon: addonsLoading ? undefined : hasAddon,
        });
    }, [
        projetoId,
        categoriaCodigo,
        menuPendente,
        desenvolvimentoSoftwareAtivo,
        statusCodigo,
        logsBadgeCount,
        cursorPackConectado,
        addonsLoading,
        hasAddon,
    ]);

    // Verificar se um item está ativo
    const isItemActive = useCallback(
        (route: string) => {
            if (route === '#') return false;
            const basePath = `/projetos/${projetoId}`;
            if (route === basePath) return currentPath === route;
            return currentPath === route || currentPath.startsWith(route + '/');
        },
        [projetoId, currentPath]
    );

    // Verificar se um grupo está ativo
    const isGroupActive = useCallback(
        (group: MenuGroupConfig) =>
            group.items.some((item) => menuItemTreeActive(item, isItemActive)),
        [isItemActive],
    );

    const closeDropdown = useCallback(() => {
        setActiveDropdown(null);
        setDropdownPosition(null);
        dropdownTriggerRef.current = null;
    }, []);

    const measuredFitCount = useProjetoSecondaryNavCapacity({
        groupCount: menuGroups.length,
        linksRef,
        measureRef,
    });

    const { visible: visibleMenuGroups, overflow: overflowMenuGroups, showMais } = useMemo(
        () =>
            splitMenuGroupsForSecondaryNav(menuGroups, isGroupActive, {
                maxVisibleGroupCount:
                    measuredFitCount === null
                        ? Number.POSITIVE_INFINITY
                        : measuredFitCount,
            }),
        [menuGroups, isGroupActive, measuredFitCount],
    );

    const maisGroupActive = useMemo(
        () => overflowMenuGroups.some(isGroupActive),
        [overflowMenuGroups, isGroupActive],
    );

    // Toggle dropdown e salvar ref do trigger para posicionar o portal
    const toggleDropdown = (groupKey: string, triggerEl: HTMLAnchorElement | null) => {
        if (activeDropdown === groupKey) {
            setActiveDropdown(null);
            setDropdownPosition(null);
            dropdownTriggerRef.current = null;
        } else {
            dropdownTriggerRef.current = triggerEl;
            if (triggerEl) {
                setDropdownPosition(calcularDropdownPosition(triggerEl, menuRef.current));
            }
            setActiveDropdown(groupKey);
        }
    };

    const updateDropdownPosition = useCallback(() => {
        const trigger = dropdownTriggerRef.current;
        if (!trigger) return;
        setDropdownPosition(calcularDropdownPosition(trigger, menuRef.current));
    }, []);

    // Posicionar dropdown quando abre
    useEffect(() => {
        if (!activeDropdown) {
            setDropdownPosition(null);
            return;
        }
        updateDropdownPosition();
        const raf = window.requestAnimationFrame(() => updateDropdownPosition());
        return () => window.cancelAnimationFrame(raf);
    }, [activeDropdown, updateDropdownPosition]);

    // Atualizar posição ao scroll/resize (dropdown aberto)
    useEffect(() => {
        if (!activeDropdown) return;
        window.addEventListener('scroll', updateDropdownPosition, true);
        window.addEventListener('resize', updateDropdownPosition);
        return () => {
            window.removeEventListener('scroll', updateDropdownPosition, true);
            window.removeEventListener('resize', updateDropdownPosition);
        };
    }, [activeDropdown, updateDropdownPosition]);

    // Fechar dropdown ao clicar fora do menu e fora do próprio dropdown (portal)
    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            const target = event.target as Node;
            const insideNav = menuRef.current?.contains(target);
            const portalRoot = document.getElementById('projeto-nav-dropdown-portal');
            const insidePortal = portalRoot?.contains(target);
            const scrim = document.getElementById('projeto-nav-dropdown-scrim');
            const onScrim = scrim != null && (target === scrim || scrim.contains(target));
            if (onScrim || (!insideNav && !insidePortal)) {
                closeDropdown();
            }
        };

        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [closeDropdown]);

    useEffect(() => {
        if (!activeDropdown) return;
        const onKeyDown = (event: KeyboardEvent) => {
            if (event.key === 'Escape') {
                closeDropdown();
            }
        };
        document.addEventListener('keydown', onKeyDown);
        return () => document.removeEventListener('keydown', onKeyDown);
    }, [activeDropdown, closeDropdown]);

    const dropdownScrim =
        activeDropdown && typeof document !== 'undefined'
            ? createPortal(
                  <button
                      type="button"
                      id="projeto-nav-dropdown-scrim"
                      className={styles.secondaryNavDropdownScrim}
                      aria-label="Fechar menu"
                      tabIndex={-1}
                      onClick={closeDropdown}
                  />,
                  document.body,
              )
            : null;

    /** Drawer do hambúrguer: idêntico nos dois eixos, por isso fica fora do ramo. */
    const drawerEl = (
        <Drawer
            title="Menu do projeto"
            placement="left"
            onClose={onDrawerClose}
            open={drawerOpen}
            width={isMobile ? '86%' : 280}
            rootClassName={isMobile ? styles.drawerMenuRootMobile : undefined}
            className={styles.drawerMenu}
            styles={{ body: { padding: 0, display: 'flex', flexDirection: 'column' } }}
            closeIcon={<SidebarMenuIcon icon="times" />}
        >
            <ProjetoMenuDrawerNav
                projetoId={projetoId}
                currentPath={currentPath}
                menuGroups={menuGroups}
                essenciaisItems={essenciaisItems}
                categoriaCodigo={categoriaCodigo}
                open={drawerOpen}
                onClose={onDrawerClose}
                onDeleteProjeto={handleDeletarProjeto}
            />
        </Drawer>
    );

    /** Mobile mantém sempre hambúrguer + drawer; o eixo só decide o desktop. */
    const menuVertical = orientacao === 'vertical' && !isMobile;

    if (menuVertical) {
        return (
            <>
                <ProjetoMenuAside
                    projetoId={projetoId}
                    currentPath={currentPath}
                    menuGroups={menuGroups}
                    rail={asideRail}
                    carregando={menuPendente}
                    onDeleteProjeto={handleDeletarProjeto}
                    onAlternarOrientacao={onAlternarOrientacao}
                />
                {drawerEl}
            </>
        );
    }

    return (
        <>
            {dropdownScrim}
            <nav
                className={`${styles.secondaryNav}${activeDropdown ? ` ${styles.dropdownOpen}` : ''}`}
                ref={(el) => assignNavRefs(menuRef, secondaryNavRef, el)}
                aria-busy={menuPendente || undefined}
                aria-label={menuPendente ? 'Menu do projeto carregando' : 'Menu do projeto'}
                data-fit-count={measuredFitCount === null ? 'all' : String(measuredFitCount)}
            >
                <div
                    className={styles.secondaryNavLinks}
                    data-testid="projeto-menu-nav-links"
                    ref={linksRef}
                >
                {visibleMenuGroups.map((group, groupIndex) => {
                    const groupActive = isGroupActive(group);
                    const groupKey = `${group.label}::${groupIndex}`;
                    const isDropdownOpen = activeDropdown === groupKey;
                    const singleItem = group.items.length === 1 && group.items[0].route !== '#';

                    if (singleItem) {
                        const item = group.items[0];
                        const itemActive = isItemActive(item.route);
                        return (
                            <ul
                                key={groupKey}
                                className={styles.navGroup}
                                data-secondary-nav-group=""
                            >
                                <li className={`${styles.secondaryNavItem} ${itemActive ? styles.active : ''}`}>
                                    <Link
                                        href={item.route}
                                        prefetch={false}
                                        className={`${styles.secondaryNavLink} ${itemActive ? styles.active : ''}`}
                                        aria-current={itemActive ? ('page' as const) : undefined}
                                    >
                                        <ProjetoMenuFaIcon iconClass={group.icon} /> {group.label}
                                        {item.emBreve && (
                                            <span className={`${styles.badge} ${styles.secondaryNavInlineBadge}`}>
                                                Em breve
                                            </span>
                                        )}
                                        {item.badgeCount != null && item.badgeCount > 0 && (
                                            <span
                                                className={`${styles.badge} ${styles.secondaryNavInlineBadge}`}
                                                data-testid="projeto-menu-logs-badge"
                                            >
                                                {formatLogsBadgeLabel(item.badgeCount)}
                                            </span>
                                        )}
                                    </Link>
                                </li>
                            </ul>
                        );
                    }

                    return (
                        <ul
                            key={groupKey}
                            className={styles.navGroup}
                            data-secondary-nav-group=""
                        >                            <li
                                className={`${styles.secondaryNavItem} ${groupActive || isDropdownOpen ? styles.active : ''}`}
                            >
                                    <a
                                        href="#"
                                        className={`${styles.secondaryNavLink} ${groupActive ? styles.active : ''}`}
                                        onClick={(e) => {
                                            e.preventDefault();
                                            e.stopPropagation();
                                            toggleDropdown(groupKey, e.currentTarget);
                                        }}
                                        aria-haspopup="menu"
                                        aria-expanded={isDropdownOpen}
                                    >
                                        <ProjetoMenuFaIcon iconClass={group.icon} /> {group.label}
                                        <SidebarMenuIcon icon="chevronDown" className="ml-1" />
                                    </a>
                                {/* Dropdown renderizado em portal para não ser cortado por overflow da nav */}
                                {isDropdownOpen && dropdownPosition && typeof document !== 'undefined' && createPortal(
                                    <div
                                        id="projeto-nav-dropdown-portal"
                                        className={`${styles.secondaryNavDropdown} ${styles.open}`}
                                        style={{
                                            position: 'fixed',
                                            top: dropdownPosition.top,
                                            left: dropdownPosition.left,
                                        }}
                                        role="menu"
                                    >
                                        {group.items.map((item) => (
                                            <SecondaryNavDropdownItem
                                                key={menuItemReactKey(item)}
                                                item={item}
                                                isItemActive={isItemActive}
                                                onNavigate={closeDropdown}
                                                onDelete={handleDeletarProjeto}
                                            />
                                        ))}
                                    </div>,
                                    document.body
                                )}
                            </li>
                        </ul>
                    );
                })}
                {showMais ? (
                    <ul
                        key="__overflow_mais__"
                        className={styles.navGroup}
                        data-secondary-nav-mais=""
                    >
                        <li
                            className={`${styles.secondaryNavItem} ${
                                maisGroupActive || activeDropdown === '__overflow_mais__' ? styles.active : ''
                            }`}
                        >
                            <a
                                href="#"
                                className={`${styles.secondaryNavLink} ${maisGroupActive ? styles.active : ''}`}
                                onClick={(e) => {
                                    e.preventDefault();
                                    e.stopPropagation();
                                    toggleDropdown('__overflow_mais__', e.currentTarget);
                                }}
                                aria-haspopup="menu"
                                aria-expanded={activeDropdown === '__overflow_mais__'}
                                data-testid="projeto-menu-nav-mais"
                            >
                                <ProjetoMenuFaIcon iconClass="fa-ellipsis-h" /> Mais
                                <SidebarMenuIcon icon="chevronDown" className="ml-1" />
                            </a>
                            {activeDropdown === '__overflow_mais__' &&
                                dropdownPosition &&
                                typeof document !== 'undefined' &&
                                createPortal(
                                    <div
                                        id="projeto-nav-dropdown-portal"
                                        className={`${styles.secondaryNavDropdown} ${styles.open} ${styles.mega}`}
                                        style={{
                                            position: 'fixed',
                                            top: dropdownPosition.top,
                                            left: dropdownPosition.navLeft,
                                            width: dropdownPosition.navWidth,
                                        }}
                                        role="menu"
                                        aria-label="Mais seções do menu"
                                    >
                                        {overflowMenuGroups.map((group, overflowIndex) => {
                                            const singleOverflowItem =
                                                group.items.length === 1 && group.items[0].route !== '#';

                                            return (
                                                <React.Fragment key={`mais-${group.label}::${overflowIndex}`}>
                                                    {overflowIndex > 0 ? (
                                                        <div
                                                            className={styles.secondaryNavDropdownDivider}
                                                            role="separator"
                                                        />
                                                    ) : null}
                                                    <div className={styles.secondaryNavDropdownColumn}>
                                                        {!singleOverflowItem ? (
                                                            <div className={styles.secondaryNavDropdownColumnTitle}>
                                                                {group.label}
                                                            </div>
                                                        ) : null}
                                                        <div className={styles.secondaryNavDropdownColumnItems}>
                                                            {group.items.map((item) => (
                                                                <SecondaryNavDropdownItem
                                                                    key={menuItemReactKey(item)}
                                                                    item={item}
                                                                    label={
                                                                        singleOverflowItem
                                                                            ? group.label
                                                                            : undefined
                                                                    }
                                                                    iconClass={
                                                                        singleOverflowItem
                                                                            ? group.icon
                                                                            : undefined
                                                                    }
                                                                    isItemActive={isItemActive}
                                                                    onNavigate={closeDropdown}
                                                                    onDelete={handleDeletarProjeto}
                                                                />
                                                            ))}
                                                        </div>
                                                    </div>
                                                </React.Fragment>
                                            );
                                        })}
                                    </div>,
                                    document.body,
                                )}
                        </li>
                    </ul>
                ) : null}
            </div>
            {menuGroups.length > 0 ? (
                <div
                    className={styles.secondaryNavMeasure}
                    ref={measureRef}
                    aria-hidden="true"
                    data-testid="projeto-secondary-nav-measure"
                >
                    {menuGroups.map((group, groupIndex) => (
                        <SecondaryNavGroupMeasure
                            key={`measure-${group.label}::${groupIndex}`}
                            group={group}
                            groupIndex={groupIndex}
                        />
                    ))}
                    <ul className={styles.navGroup} data-secondary-nav-mais="">
                        <li className={styles.secondaryNavItem}>
                            <span className={styles.secondaryNavLink}>
                                <ProjetoMenuFaIcon iconClass="fa-ellipsis-h" /> Mais
                                <SidebarMenuIcon icon="chevronDown" className="ml-1" />
                            </span>
                        </li>
                    </ul>
                </div>
            ) : null}
            </nav>

            {drawerEl}
        </>
    );
}