$(function() {
    // 1. Pastikan #top_menu ada di lokasi yang kamu mau
    if ($(".ol-sidebar-content").length && $("#top_menu").length === 0) {
        $(".ol-sidebar-content").prepend('<div id="top_menu"></div>');
    }

    // 2. Ambil nav sidebar asli
    const $origNav = $(".ol-sidebar .sidebar-nav").first();
    const $clone = $origNav.clone(true, true);

    // 3. Bersihkan & ubah class utk versi topnav
    $clone
        .removeClass() // hapus "sidebar-nav"
        .attr("id", "topnav-nav")
        .addClass("topnav-nav");

    // ubah UL root
    $clone.find("> ul, > .px-14px, ul.px-14px").each(function() {
        $(this).removeClass().addClass("topnav-root");
    });

    // ===== LEVEL 1 (sidebar-first-li) -> .topnav-item
    $clone.find("li.sidebar-first-li").each(function() {
        const $li = $(this);

        const hasSub = $li.find("ul.first-sub-menu").length > 0;
        const isActive = $li.hasClass("active"); // <== gunakan langsung class active asli

        $li
            .removeClass("sidebar-first-li first-li-have-sub active showMenu")
            .addClass("topnav-item")
            .toggleClass("has-sub", hasSub)
            .toggleClass("is-active", isActive);

        // Ambil <a> asli supaya kita bisa buat struktur icon + label
        const $a = $li.children("a").first();
        if ($a.length) {
            const $icon = $a.find(".icon").first();
            const $textNode = $a.find(".text span").first(); // <div class="text"><span>Course</span></div>

            const labelText = $textNode.length ?
                $textNode.text().trim() :
                $a.text().trim();

            // rebuild isi <a>
            $a.empty();

            if ($icon.length) {
                $icon.addClass("topnav-icon");
                $a.append($icon);
            }

            // Label utama kita bungkus dengan span.topnav-mainlabel
            const $labelSpan = $('<span class="topnav-mainlabel"></span>').text(
                labelText
            );
            $a.append($labelSpan);
        }
    });

    // ===== LEVEL 2 WRAPPER UL (first-sub-menu) -> .topnav-dropdown
    $clone.find("ul.first-sub-menu").each(function() {
        $(this).removeClass("first-sub-menu").addClass("topnav-dropdown");
    });

    // ===== LEVEL 2 LI (sidebar-second-li) -> .topnav-subitem
    $clone.find("li.sidebar-second-li").each(function() {
        const $li2 = $(this);

        const hasSub2 = $li2.find("ul.second-sub-menu").length > 0;
        const isActive2 = $li2.hasClass("active"); // <== gunakan langsung class active asli

        $li2
            .removeClass("sidebar-second-li second-li-have-sub active")
            .addClass("topnav-subitem")
            .toggleClass("has-sub2", hasSub2)
            .toggleClass("is-active", isActive2); // <-- ini yg akan bikin highlight Manage Courses
    });

    // ===== LEVEL 3 WRAPPER UL (second-sub-menu) -> .topnav-subdropdown
    $clone.find("ul.second-sub-menu").each(function() {
        $(this).removeClass("second-sub-menu").addClass("topnav-subdropdown");
    });

    // ===== LEVEL 3 LI (sidebar-third-li) -> .topnav-subsubitem
    $clone.find("li.sidebar-third-li").each(function() {
        const $li3 = $(this);
        const isActive3 = $li3.hasClass("active");

        $li3
            .removeClass("sidebar-third-li active")
            .addClass("topnav-subsubitem")
            .toggleClass("is-active", isActive3);
    });

    // group title
    $clone.find(".first-sub-menu-title").each(function() {
        $(this)
            .removeClass("first-sub-menu-title fs-14px mb-18px")
            .addClass("topnav-group-title");
    });

    // just in case
    $clone.find("div.text").addClass("topnav-text");
    $clone.find("span.icon").addClass("topnav-icon");

    // 4. Masukkan clone ke #top_menu
    $("#top_menu").empty().append($clone);

    // 5. Dropdown hover behavior
    // level 1 hover → show .topnav-dropdown
    $("#top_menu .topnav-item").each(function() {
        const $li = $(this);
        const $dd = $li.children(".topnav-dropdown");
        if ($dd.length) {
            $li.css("position", "relative");
            $li
                .on("mouseenter", function() {
                    $dd.stop(true, true).fadeIn(120);
                })
                .on("mouseleave", function() {
                    $dd.stop(true, true).fadeOut(120);
                });
        }
    });

    // level 2 hover → show .topnav-subdropdown
    $("#top_menu .topnav-subitem").each(function() {
        const $li2 = $(this);
        const $dd2 = $li2.children(".topnav-subdropdown");
        if ($dd2.length) {
            $li2.css("position", "relative");
            $li2
                .on("mouseenter", function() {
                    $dd2.stop(true, true).fadeIn(120);
                })
                .on("mouseleave", function() {
                    $dd2.stop(true, true).fadeOut(120);
                });
        }
    });
});