(() => {
    const initMobileSheet = () => {
        const sheet = document.querySelector("[data-mobile-sheet]");
        const backdrop = document.querySelector("[data-mobile-sheet-backdrop]");
        const openButtons = document.querySelectorAll("[data-mobile-sheet-open]");
        const closeButtons = document.querySelectorAll("[data-mobile-sheet-close]");
        if (!sheet || !backdrop || !openButtons.length) return;

        const closeSheet = () => {
            sheet.hidden = true;
            backdrop.hidden = true;
            document.body.classList.remove("sheet-open");
            openButtons.forEach((button) => button.classList.remove("is-open"));
        };

        const openSheet = () => {
            sheet.hidden = false;
            backdrop.hidden = false;
            document.body.classList.add("sheet-open");
            openButtons.forEach((button) => button.classList.add("is-open"));
        };

        openButtons.forEach((button) => {
            button.addEventListener("click", openSheet);
        });
        closeButtons.forEach((button) => {
            button.addEventListener("click", closeSheet);
        });
        backdrop.addEventListener("click", closeSheet);

        document.addEventListener("keydown", (event) => {
            if (event.key === "Escape") {
                closeSheet();
            }
        });

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

    const initFilterInputs = () => {
        document.querySelectorAll("[data-filter-input]").forEach((input) => {
            const listSelector = input.getAttribute("data-filter-target");
            if (!listSelector) return;
            const container = document.querySelector(listSelector);
            if (!container) return;

            const items = Array.from(container.querySelectorAll("[data-filter-label]"));
            const applyFilter = () => {
                const term = input.value.trim().toLowerCase();
                items.forEach((item) => {
                    const haystack = (item.getAttribute("data-filter-label") || "").toLowerCase();
                    item.hidden = Boolean(term) && !haystack.includes(term);
                });
            };

            input.addEventListener("input", applyFilter);
            applyFilter();
        });
    };

    document.addEventListener("DOMContentLoaded", () => {
        initMobileSheet();
        initFilterInputs();
    });
})();