(function ($) {
    $.fn.initAccordionWithImages = function (options) {
        var settings = $.extend({
            groups: [],
            delay: 1000,
            mobileBreakpoint: 840 // 手機模式最大寬度
        }, options);

        if (settings.groups.length === 0) {
            console.error("No accordion groups provided.");
            return;
        }

        settings.groups.forEach(function (group) {
            var $accordionGroup = $(group.accordionGroupId);
            var $benefitGroup = $(group.benefitGroupId);
            var $accordions = $accordionGroup.find(".accordion-1, .accordion-2, .accordion-3, .accordion-4");
            var $media = $benefitGroup.find("img, video"); // 確保包含 <img> 和 <video>

            if ($accordions.length !== $media.length) {
                console.error("Accordion count and image/video count do not match in group:", group.accordionGroupId);
                return;
            }

            function calculatePanelHeight(panel) {
                return panel.prop("scrollHeight") + 20; // 取得 `panel` 內容的總高度，加上 padding
            }

            function insertMediaToPanel(panel, media) {
                if (panel.find(".panel-media").length === 0) {
                    var mediaClone;
                    if (media.is("video")) {
                        mediaClone = media.clone().addClass("panel-media").attr({
                            autoplay: true,
                            muted: true,
                            playsinline: true
                        });
                    } else {
                        mediaClone = media.clone().addClass("panel-media");
                    }
                    panel.append(mediaClone); // 插入 `panel`

                    mediaClone.on("loadedmetadata load", function () {
                        var totalHeight = calculatePanelHeight(panel);
                        panel.css("max-height", totalHeight + "px");
                    });
                }
            }

            function toggleAccordion(button) {
                var panel = button.next(".panel");

                if (button.hasClass("active")) {
                    button.removeClass("active");
                    panel.css("max-height", "0");
                    return;
                }

                // 先關閉當前 `accordion-group` 內的所有 `panel`
                $accordionGroup.find(".accordion-1, .accordion-2, .accordion-3, .accordion-4").removeClass("active");
                $accordionGroup.find(".panel").css("max-height", "0");

                button.addClass("active");

                var index = $accordions.index(button);
                var media = $media.eq(index);

                if ($(window).width() <= settings.mobileBreakpoint) {
                    insertMediaToPanel(panel, media);
                }

                // 計算並設定 `max-height`
                var totalHeight = calculatePanelHeight(panel);
                panel.css("max-height", totalHeight + "px");

                $media.removeClass("benefit-active");
                $media.eq(index).addClass("benefit-active");
            }

            // 綁定點擊事件
            $accordions.click(function () {
                toggleAccordion($(this));
            });

            // **在 window load 之後展開第一個 panel**
            $(window).on("load", function () {
                setTimeout(function () {
                    $accordionGroup.each(function () {
                        var firstButton = $(this).find(".accordion-1, .accordion-2, .accordion-3, .accordion-4").first();
                        if (firstButton.length > 0) {
                            toggleAccordion(firstButton);
                        }
                    });
                }, settings.delay);
            });

            let isMobile = $(window).width() <= settings.mobileBreakpoint;

            // **監聽 `resize` 事件，確保 `panel` 內的 `media` 會隨視窗變化**
            function handleResize() {
                let newIsMobile = $(window).width() <= settings.mobileBreakpoint;

                if (!isMobile && newIsMobile) {
                    // **從桌機切換到手機時，插入 `media` 並確保 `max-height`**
                    $accordionGroup.each(function () {
                        var activeButton = $(this).find(".accordion-1.active, .accordion-2.active, .accordion-3.active, .accordion-4.active");
                        if (activeButton.length > 0) {
                            var panel = activeButton.next(".panel");
                            var index = $accordions.index(activeButton);
                            var media = $media.eq(index);

                            insertMediaToPanel(panel, media);

                            // **確保 `panel` max-height 設置為 `totalHeight`**
                            setTimeout(() => {
                                var totalHeight = calculatePanelHeight(panel);
                                panel.css("max-height", totalHeight + "px");
                            }, 100);
                        }
                    });
                } else if (isMobile && !newIsMobile) {
                    // **從手機回到桌機時，僅對 `active` 的 `panel` 設置 `max-height`**
                    $(".panel .panel-media").remove();

                    $accordionGroup.each(function () {
                        var activeButton = $(this).find(".accordion-1.active, .accordion-2.active, .accordion-3.active, .accordion-4.active");
                        if (activeButton.length > 0) {
                            var panel = activeButton.next(".panel");
                            var totalHeight = calculatePanelHeight(panel);
                            panel.css("max-height", totalHeight + "px"); // **只對 `active` 的 `panel` 設定 max-height**
                        } else {
                            $(this).find(".panel").css("max-height", "0"); // **非 `active` 的 `panel` 設定為 0**
                        }
                    });
                }

                isMobile = newIsMobile;
            }

            // **監聽 `resize`，確保 `panel` 內的 `img/video` 會隨視窗變化**
            $(window).on("resize", function () {
                handleResize();
            });

            // **確保當進入手機模式時，`panel` 內的 `img/video` 會自動插入**
            if ($(window).width() <= settings.mobileBreakpoint) {
                setTimeout(handleResize, 500);
            }
        });
    };
})(jQuery);