import React, { useEffect, useCallback } from 'react';
import { Collapse } from 'react-bootstrap';
// Import Data
import navdata from "../Eneon/LayoutMenuData";
//import navdata from "../../Layouts/LayoutMenuData.tsx";
//i18n
import { withTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import { createSelector } from 'reselect';
import { router } from '@inertiajs/react';
import { useLoading } from '../../LoadingContext';
import MenuBadgeNuevo from '../Shared/MenuBadgeNuevo';

// ── Selectores Redux a nivel de módulo (T022) ────────────────────────────────
const selectVerticalLayoutState = (state: any) => state.Layout;
const selecVerticaltLayoutProperties = createSelector(
    selectVerticalLayoutState,
    (layout: any) => ({
        leftsidbarSizeType: layout.leftsidbarSizeType,
        sidebarVisibilitytype: layout.sidebarVisibilitytype,
        layoutType: layout.layoutType,
    })
);
// ─────────────────────────────────────────────────────────────────────

function manejarTeclaAccionMenu(
    evento: React.KeyboardEvent<HTMLAnchorElement>,
    accion?: (evento: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>) => void,
): void {
    if (!accion) {
        return;
    }

    if (evento.key === 'Enter' || evento.key === ' ') {
        evento.preventDefault();
        accion(evento);
    }
}

const VerticalLayout = (props: any) => {
    const navData = navdata().props.children;
    const path = window.location.pathname;
    const { showLoading, hideLoading } = useLoading();

    // Función para manejar navegación con loading
    const handleNavigation = (href: string, e?: React.MouseEvent) => {
        // Solo aplicar loading si es una URL real (no "#" o "/#")
        if (href && href !== "#" && href !== "/#" && !href.startsWith("#")) {
            if (e) {
                e.preventDefault();
            }
            try {
                showLoading();
                router.visit(href, {
                    onFinish: () => hideLoading(),
                    onError: () => hideLoading()
                });
            } catch (error) {
                hideLoading();
                console.error('Error en navegación:', error);
            }
        }
    };

    // Inside your component — selector instanciado a nivel de módulo (T022)
    const {
        leftsidbarSizeType, sidebarVisibilitytype, layoutType
    }:any = useSelector(selecVerticaltLayoutProperties);

    //vertical and semibox resize events
    const resizeSidebarMenu = useCallback(() => {
        var windowSize = document.documentElement.clientWidth;
        const humberIcon = document.querySelector(".hamburger-icon") as HTMLElement;
        var hamburgerIcon = document.querySelector(".hamburger-icon");
        if (windowSize >= 1025) {
            if (document.documentElement.getAttribute("data-layout") === "vertical") {
                document.documentElement.setAttribute("data-sidebar-size", leftsidbarSizeType);
            }
            if (document.documentElement.getAttribute("data-layout") === "semibox") {
                document.documentElement.setAttribute("data-sidebar-size", leftsidbarSizeType);
            }
            if ((sidebarVisibilitytype === "show" || layoutType === "vertical" || layoutType === "twocolumn") && document.querySelector(".hamburger-icon")) {
                if (hamburgerIcon !== null) {
                    hamburgerIcon.classList.remove("open");
                }
            } else {
                if (hamburgerIcon !== null) {
                    hamburgerIcon.classList.add("open");
                }
            }

        } else if (windowSize < 1025 && windowSize > 767) {
            document.body.classList.remove("twocolumn-panel");
            if (document.documentElement.getAttribute("data-layout") === "vertical") {
                document.documentElement.setAttribute("data-sidebar-size", "sm");
            }
            if (document.documentElement.getAttribute("data-layout") === "semibox") {
                document.documentElement.setAttribute("data-sidebar-size", "sm");
            }
            if (humberIcon) {
                humberIcon.classList.add("open");
            }
        } else if (windowSize <= 767) {
            document.body.classList.remove("vertical-sidebar-enable");
            if (document.documentElement.getAttribute("data-layout") !== "horizontal") {
                document.documentElement.setAttribute("data-sidebar-size", "lg");
            }
            if (humberIcon) {
                humberIcon.classList.add("open");
            }
        }
    }, [leftsidbarSizeType, sidebarVisibilitytype, layoutType]);

    useEffect(() => {
        // T003 — Fix: sin cleanup los listeners de resize se acumulaban
        // en cada cambio de resizeSidebarMenu (que depende de 3 estados de layout).
        window.addEventListener("resize", resizeSidebarMenu, true);
        return () => window.removeEventListener("resize", resizeSidebarMenu, true);
    }, [resizeSidebarMenu]);

    useEffect(() => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
        const initMenu = () => {
            const pathName = path;
            // const pathName= window.location.pathname + path;
            const ul = document.getElementById("navbar-nav") as HTMLElement;
            const items : any = ul.getElementsByTagName("a");
            let itemsArray = [...items]; // converts NodeList to Array
            removeActivation(itemsArray);
            let matchingMenuItem = itemsArray.find((x) => {
                return x.pathname === pathName;
            });
            if (matchingMenuItem) {
                activateParentDropdown(matchingMenuItem);
            }
        };
        initMenu();
    }, [path, props.layoutType]);

    function activateParentDropdown(item: any) {
        item.classList.add("active");
        let parentCollapseDiv = item.closest(".collapse.menu-dropdown");

        if (parentCollapseDiv) {
            // to set aria expand true remaining
            parentCollapseDiv.classList.add("show");
            parentCollapseDiv.parentElement.children[0].classList.add("active");
            parentCollapseDiv.parentElement.children[0].setAttribute("aria-expanded", "true");
            if (parentCollapseDiv.parentElement.closest(".collapse.menu-dropdown")) {
                parentCollapseDiv.parentElement.closest(".collapse").classList.add("show");
                if (parentCollapseDiv.parentElement.closest(".collapse").previousElementSibling)
                    parentCollapseDiv.parentElement.closest(".collapse").previousElementSibling.classList.add("active");
                if (parentCollapseDiv.parentElement.closest(".collapse").previousElementSibling.closest(".collapse")) {
                    parentCollapseDiv.parentElement.closest(".collapse").previousElementSibling.closest(".collapse").classList.add("show");
                    parentCollapseDiv.parentElement.closest(".collapse").previousElementSibling.closest(".collapse").previousElementSibling.classList.add("active");
                }
            }
            return false;
        }
        return false;
    }

    const removeActivation = (items: any) => {
        let actiItems = items.filter((x: any) => x.classList.contains("active"));

        actiItems.forEach((item: any) => {
            if (item.classList.contains("menu-link")) {
                if (!item.classList.contains("active")) {
                    item.setAttribute("aria-expanded", false);
                }
                if (item.nextElementSibling) {
                    item.nextElementSibling.classList.remove("show");
                }
            }
            if (item.classList.contains("nav-link")) {
                if (item.nextElementSibling) {
                    item.nextElementSibling.classList.remove("show");
                }
                item.setAttribute("aria-expanded", false);
            }
            item.classList.remove("active");
        });
    };

    return (
        <React.Fragment>
            {/* menu Items */}
            {(navData || []).map((item: any, key: number) => {
                return (
                    <React.Fragment key={key}>
                        {/* Main Header */}
                        {item['isHeader'] ?
                            <li className="menu-title"><span data-key="t-menu">{props.t(item.label)} </span></li>
                            : (
                                (item.subItems ? (
                                    <li className="nav-item">
                                        <a
                                            onClick={item.click}
                                            onKeyDown={(evento) => manejarTeclaAccionMenu(evento, item.click)}
                                            className="nav-link menu-link"
                                            href="#"
                                            data-bs-toggle="collapse"
                                            aria-expanded={item.stateVariables ? 'true' : 'false'}
                                        >
                                            <i className={item.icon}></i>
                                            <span data-key="t-apps">{props.t(item.label)}</span>
                                            {item.badgeName ?
                                                <MenuBadgeNuevo label={item.badgeName} />
                                                : null}
                                        </a>
                                        <Collapse
                                            className="menu-dropdown"
                                            in={item.stateVariables}
                                        >
                                            <div>
                                                <ul className="nav nav-sm flex-column test">
                                                    {/* subItms  */}
                                                    {item.subItems && ((item.subItems || []).map((subItem: any, key: number) => (
                                                        <React.Fragment key={key}>
                                                            {!subItem.isChildItem ? (
                                                                <li className="nav-item">
                                                                    <a
                                                                        href="#"
                                                                        className="nav-link"
                                                                        onClick={(e) => {
                                                                            e.preventDefault();
                                                                            if (subItem.link && subItem.link !== "/#") {
                                                                                handleNavigation(subItem.link, e);
                                                                            }
                                                                        }}
                                                                        onKeyDown={(evento) => {
                                                                            if (subItem.link && subItem.link !== "/#") {
                                                                                manejarTeclaAccionMenu(evento, (e) => {
                                                                                    handleNavigation(subItem.link, e as React.MouseEvent);
                                                                                });
                                                                            }
                                                                        }}
                                                                    >
                                                                        {props.t(subItem.label)}
                                                                        {subItem.badgeName ?
                                                                            <MenuBadgeNuevo label={subItem.badgeName} />
                                                                            : null}
                                                                    </a>
                                                                </li>
                                                            ) : (
                                                                <li className="nav-item">
                                                                    <a
                                                                        onClick={subItem.click}
                                                                        onKeyDown={(evento) => manejarTeclaAccionMenu(evento, subItem.click)}
                                                                        className="nav-link"
                                                                        href="#"
                                                                        data-bs-toggle="collapse"
                                                                        aria-expanded={subItem.stateVariables ? 'true' : 'false'}
                                                                    >
                                                                        {props.t(subItem.label)}
                                                                        {subItem.badgeName ?
                                                                            <MenuBadgeNuevo label={subItem.badgeName} />
                                                                            : null}
                                                                    </a>
                                                                    <Collapse className="menu-dropdown" in={subItem.stateVariables}>
                                                                        <div>
                                                                            <ul className="nav nav-sm flex-column">
                                                                                {/* child subItms  */}
                                                                                {subItem.childItems && (
                                                                                    (subItem.childItems || []).map((childItem: any, key: number) => (
                                                                                        <React.Fragment key={key}>
                                                                                            {!childItem.childItems ?
                                                                                                <li className="nav-item">
                                                                                                    <a
                                                                                                        href="#"
                                                                                                        className="nav-link"
                                                                                                        onClick={(e) => {
                                                                                                            e.preventDefault();
                                                                                                            if (childItem.link && childItem.link !== "/#") {
                                                                                                                handleNavigation(childItem.link, e);
                                                                                                            }
                                                                                                        }}
                                                                                                        onKeyDown={(evento) => {
                                                                                                            if (childItem.link && childItem.link !== "/#") {
                                                                                                                manejarTeclaAccionMenu(evento, (e) => {
                                                                                                                    handleNavigation(childItem.link, e as React.MouseEvent);
                                                                                                                });
                                                                                                            }
                                                                                                        }}
                                                                                                    >
                                                                                                        {props.t(childItem.label)}
                                                                                                    </a>
                                                                                                </li>
                                                                                                : <li className="nav-item">
                                                                                                    <a
                                                                                                        href="#"
                                                                                                        className="nav-link"
                                                                                                        onClick={childItem.click}
                                                                                                        onKeyDown={(evento) => manejarTeclaAccionMenu(evento, childItem.click)}
                                                                                                        data-bs-toggle="collapse"
                                                                                                        aria-expanded={childItem.stateVariables ? 'true' : 'false'}
                                                                                                    >
                                                                                                        {props.t(childItem.label)}
                                                                                                    </a>
                                                                                                    <Collapse className="menu-dropdown" in={childItem.stateVariables} >
                                                                                                        <div>
                                                                                                            <ul className="nav nav-sm flex-column">
                                                                                                                {childItem.childItems.map((subChildItem: any, key: number) => (
                                                                                                                    <li className="nav-item" key={key}>
                                                                                                                        <a
                                                                                                                            href="#"
                                                                                                                            className="nav-link"
                                                                                                                            data-key="t-basic-action"
                                                                                                                            onClick={(e) => {
                                                                                                                                e.preventDefault();
                                                                                                                                if (subChildItem.link && subChildItem.link !== "/#") {
                                                                                                                                    handleNavigation(subChildItem.link, e);
                                                                                                                                }
                                                                                                                            }}
                                                                                                                            onKeyDown={(evento) => {
                                                                                                                                if (subChildItem.link && subChildItem.link !== "/#") {
                                                                                                                                    manejarTeclaAccionMenu(evento, (e) => {
                                                                                                                                        handleNavigation(subChildItem.link, e as React.MouseEvent);
                                                                                                                                    });
                                                                                                                                }
                                                                                                                            }}
                                                                                                                        >
                                                                                                                            {props.t(subChildItem.label)}
                                                                                                                        </a>
                                                                                                                    </li>
                                                                                                                ))}
                                                                                                            </ul>
                                                                                                        </div>
                                                                                                    </Collapse>
                                                                                                </li>
                                                                                            }
                                                                                        </React.Fragment>
                                                                                    ))
                                                                                )}
                                                                            </ul>
                                                                        </div>
                                                                    </Collapse>
                                                                </li>
                                                            )}
                                                        </React.Fragment>
                                                    ))
                                                    )}
                                                </ul>
                                            </div>

                                        </Collapse>
                                    </li>
                                ) : (
                                    <li className="nav-item">
                                        <a
                                            className="nav-link menu-link"
                                            href="#"
                                            onClick={(e) => {
                                                e.preventDefault();
                                                if (item.link && item.link !== "/#") {
                                                    handleNavigation(item.link, e);
                                                }
                                            }}
                                            onKeyDown={(evento) => {
                                                if (item.link && item.link !== "/#") {
                                                    manejarTeclaAccionMenu(evento, (e) => {
                                                        handleNavigation(item.link, e as React.MouseEvent);
                                                    });
                                                }
                                            }}
                                        >
                                            <i className={item.icon}></i> <span>{props.t(item.label)}</span>
                                            {item.badgeName ?
                                                <MenuBadgeNuevo label={item.badgeName} />
                                                : null}
                                        </a>
                                    </li>
                                ))
                            )
                        }
                    </React.Fragment>
                );
            })}
        </React.Fragment>
    );
};


export default withTranslation()(VerticalLayout);