// retoor <retoor@molodetz.nl>

export class MobileNav {
    constructor() {
        this.initMobileNav();
        this.initProfileDropdown();
        this.initToolsDropdown();
    }

    initMobileNav() {
        const btn = document.getElementById("hamburger-btn");
        const panel = document.getElementById("mobile-panel");
        const overlay = document.getElementById("mobile-overlay");
        if (!btn || !panel || !overlay) return;

        const close = () => {
            panel.classList.remove("open");
            overlay.style.display = "none";
            btn.innerHTML = "☰";
            btn.setAttribute("aria-expanded", "false");
            panel.setAttribute("inert", "");
        };

        const open = () => {
            panel.classList.add("open");
            overlay.style.display = "block";
            btn.innerHTML = "✕";
            btn.setAttribute("aria-expanded", "true");
            panel.removeAttribute("inert");
            const first = panel.querySelector("a, button");
            if (first) first.focus();
        };

        btn.addEventListener("click", () => {
            if (panel.classList.contains("open")) {
                close();
            } else {
                open();
            }
        });

        overlay.addEventListener("click", close);

        panel.querySelectorAll("a").forEach((link) => {
            link.addEventListener("click", close);
        });

        document.addEventListener("keydown", (e) => {
            if (e.key === "Escape" && panel.classList.contains("open")) {
                close();
                btn.focus();
            }
        });
    }

    initProfileDropdown() {
        const dropdown = document.querySelector(".topnav-user-dropdown");
        if (!dropdown) return;
        const btn = dropdown.querySelector(".topnav-user");
        if (!btn) return;

        btn.addEventListener("click", (e) => {
            e.stopPropagation();
            const open = dropdown.classList.toggle("open");
            btn.setAttribute("aria-expanded", open ? "true" : "false");
        });

        document.addEventListener("click", (e) => {
            if (!dropdown.contains(e.target)) {
                dropdown.classList.remove("open");
                btn.setAttribute("aria-expanded", "false");
            }
        });

        document.addEventListener("keydown", (e) => {
            if (e.key === "Escape" && dropdown.classList.contains("open")) {
                dropdown.classList.remove("open");
                btn.setAttribute("aria-expanded", "false");
                btn.focus();
            }
        });
    }

    initToolsDropdown() {
        const dropdown = document.querySelector(".topnav-tools-dropdown");
        if (!dropdown) return;
        const btn = dropdown.querySelector(".topnav-tools-toggle");
        if (!btn) return;

        btn.addEventListener("click", (e) => {
            e.stopPropagation();
            const open = dropdown.classList.toggle("open");
            btn.setAttribute("aria-expanded", open ? "true" : "false");
        });

        document.addEventListener("click", (e) => {
            if (!dropdown.contains(e.target)) {
                dropdown.classList.remove("open");
                btn.setAttribute("aria-expanded", "false");
            }
        });

        document.addEventListener("keydown", (e) => {
            if (e.key === "Escape") {
                dropdown.classList.remove("open");
                btn.setAttribute("aria-expanded", "false");
            }
        });
    }
}
