import Link from "next/link"

type MenuItem = {
    menu_item_id: string
    menu_title: string
    parent_menu_item_id: string
    custom_url: string
    actual_post_title: string
    slug: string
}

type Props = {
    items: MenuItem[]
}

export function MegaMenu({ items }: Props) {
    // Build children map: parentId -> MenuItem[]
    const childrenMap: Record<string, MenuItem[]> = {}
    items.forEach(item => {
        const parent = item.parent_menu_item_id
        if (!childrenMap[parent]) childrenMap[parent] = []
        childrenMap[parent].push(item)
    })

    // First level
    const level1 = childrenMap["0"] || []

    function getPathFromUrl(url: string): string {
        console.log(url)
        try {
            const urlObj = new URL(url);
            return urlObj.pathname;
        } catch (error) {
            // Handle invalid URLs
            //console.error('Invalid URL:', error);
            return url;
        }
    }

    return (
        <>
            {level1.map((l1, l1index) => {
                const level2 = childrenMap[l1.menu_item_id] || []
                const hasChildren = level2.length > 0

                return (
                    <ul tabIndex={0} key={l1.menu_item_id} className="menu dropdown dropdown-hover">
                        {/* Level 1 link */}
                        <Link
                            //tabIndex={0}
                            href={l1.custom_url ? getPathFromUrl(l1.custom_url) : l1.slug}
                            className="btn m-1"
                        >
                            {l1.menu_title || l1.actual_post_title}
                        </Link>

                        {/* Mega menu */}


                        {hasChildren && (
                            <div tabIndex={0} className="dropdown-content card card-sm bg-base-100 z-1 w-full max-w-5xl shadow-md max-h-svh overflow-y-auto">
                                <div className="flex flex-row">
                                    <li tabIndex={-1} className="col-start-1 col-end-1 col-span-1 bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
                                        {level2.map(l2 => (
                                            <div key={l2.menu_item_id} className="dropdown dropdown-right group/l2">
                                                <span className="">
                                                    {l2.menu_title || l2.actual_post_title}
                                                </span>

                                                {/* Right pane (level 3) */}
                                                {/* <div className="right-0 col-start-2 col-end-2 row-start-1 row-end-1 top-0 hidden h-full w-2/3 bg-white p-6 group-hover/l2:block">
                                                <ul className="grid grid-cols-2 gap-4">
                                                    {(childrenMap[l2.menu_item_id] || []).map(l3 => (
                                                        <li key={l3.menu_item_id}>
                                                            <a
                                                                href={l3.custom_url}
                                                                className="hover:text-blue-600"
                                                            >
                                                                {l3.menu_title || l3.actual_post_title}
                                                            </a>
                                                        </li>
                                                    ))}
                                                </ul>
                                            </div> */}
                                            </div>
                                        ))}
                                    </li>

                                    <div className="col-start-2 col-end-2">
                                        {level2.map(l2 => (
                                            <div className="right-0 col-start-2 col-end-2 row-start-1 row-end-1 top-0 h-full w-2/3 bg-white p-6 group-hover/l2:block">
                                                <ul className="grid grid-cols-2 gap-4">
                                                    {(childrenMap[l2.menu_item_id] || []).map(l3 => (
                                                        <li key={l3.menu_item_id}>
                                                            <a
                                                                href={l3.custom_url}
                                                                className="hover:text-blue-600"
                                                            >
                                                                {l3.menu_title || l3.actual_post_title}
                                                            </a>
                                                        </li>
                                                    ))}
                                                </ul>
                                            </div>
                                        ))}
                                    </div>
                                </div>

                            </div>

                        )}
                    </ul>
                )
            })}
        </>
    )
}
