// src/components/Navigation.tsx
import { menu } from '@/const/menu';
import { NavItem } from '@/types';
import { useEffect, useRef, useState } from 'react';
import { Link } from 'react-router'; // Gunakan 'react-router-dom'

export default function Navigation() {
    const menuRef = useRef<HTMLUListElement>(null);
    const [openMenus, setOpenMenus] = useState<Record<string, boolean>>({});

    // Fungsi untuk menutup semua menu saat mengklik di luar
    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
                setOpenMenus({}); // Tutup semua menu
            }
        };

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

    // Fungsi untuk membuka/menutup menu
    const handleToggleMenu = (title: string) => {
        setOpenMenus((prevOpenMenus) => {
            const isOpen = !!prevOpenMenus[title];

            // Logika baru: Saat membuka menu, tutup semua menu lain di level yang sama dan di bawahnya
            // Untuk horizontal menu, biasanya lebih baik menutup semua menu lainnya
            // kecuali parent dari menu yang sedang dibuka.
            // Versi simpel: tutup semua, lalu buka yang diklik.

            const newOpenMenus: Record<string, boolean> = {};

            // Jika menu yang diklik belum terbuka, buka menu itu.
            if (!isOpen) {
                newOpenMenus[title] = true;

                // Cari parent dari item yang diklik dan jaga agar tetap terbuka
                const findAndKeepParentsOpen = (items: NavItem[], targetTitle: string, currentPath: string[]): boolean => {
                    for (const item of items) {
                        // Only add item.title if it's defined
                        const newPath = item.title !== undefined ? [...currentPath, item.title] : [...currentPath];
                        if (item.title === targetTitle) {
                            newPath.forEach((p) => (newOpenMenus[p] = true));
                            return true;
                        }
                        if (item.children) {
                            if (findAndKeepParentsOpen(item.children, targetTitle, newPath)) {
                                return true;
                            }
                        }
                    }
                    return false;
                };
                findAndKeepParentsOpen(menu, title, []);
            }
            // Jika menu sudah terbuka (dan diklik lagi), maka semua akan tertutup (newOpenMenus kosong)

            return newOpenMenus;
        });
    };

    return (
        <aside id="layout-menu" className="layout-menu-horizontal menu-horizontal menu bg-menu-theme flex-grow-0">
            <div className="container-xxl d-flex h-100">
                <ul className="menu-inner" ref={menuRef}>
                    {menu.map((item) => (
                        <RecursiveMenuItem key={item.title} item={item} openMenus={openMenus} onToggle={handleToggleMenu} />
                    ))}
                </ul>
            </div>
        </aside>
    );
}

// src/components/RecursiveMenuItem.tsx

interface RecursiveMenuItemProps {
    item: NavItem;
    openMenus: Record<string, boolean>;
    onToggle: (title: string) => void;
}

const RecursiveMenuItem = ({ item, openMenus, onToggle }: RecursiveMenuItemProps) => {
    const hasChildren = item.children && item.children.length > 0;
    const isOpen = openMenus[item.title!] || false;

    const handleToggle = (e: React.MouseEvent) => {
        e.preventDefault();
        e.stopPropagation();
        onToggle(item.title!);
    };

    if (!hasChildren) {
        return (
            <li className="menu-item">
                <Link to={item.href ?? '#'} className="menu-link">
                    {item.icon && <i className={`menu-icon tf-icons ${item.icon}`} />}
                    <div data-i18n={item.title}>{item.title}</div>
                </Link>
            </li>
        );
    }

    return (
        <li className={`menu-item ${isOpen ? 'open' : ''}`} onClick={handleToggle}>
            <a href="#" className="menu-link menu-toggle">
                {item.icon && <i className={`menu-icon tf-icons ${item.icon}`} />}
                <div data-i18n={item.title}>{item.title}</div>
            </a>
            <ul className="menu-sub bg-white">
                {item.children?.map((child) => <RecursiveMenuItem key={child.title} item={child} openMenus={openMenus} onToggle={onToggle} />)}
            </ul>
        </li>
    );
};