(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 $images = $benefitGroup.find("img, video"); // 讓 $images 包含 video

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

            function calculatePanelHeight(panel, media) {
                var contentHeight = panel.prop("scrollHeight"); // panel 內容高度
                var mediaHeight = media.is("video") ? media.height() : (media.prop("naturalHeight") || media.height()); // 取得圖片或影片高度
                return contentHeight + mediaHeight + 20; // 加上 padding
            }

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

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

                // 先關閉當前 `accordion-group` 內的所有 panels
                $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 = $images.eq(index);

                if ($(window).width() <= settings.mobileBreakpoint) {
                    panel.find(".panel-media").remove(); // 移除已存在的圖片/影片

                    var mediaClone;
                    if (media.is("video")) {
                        mediaClone = media.clone().addClass("panel-media").attr("autoplay", true).attr("muted", true).attr("playsinline", true);
                    } else {
                        mediaClone = media.clone().addClass("panel-media");
                    }

                    panel.append(mediaClone); // 插入 panel

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

                    // 預設展開高度，避免 transition 問題
                    panel.css("max-height", calculatePanelHeight(panel, mediaClone) + "px");

                } else {
                    panel.css("max-height", panel.prop("scrollHeight") + "px"); // 桌機模式下，panel 直接展開
                }

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

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

            // **修正初始展開第一個 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);
            });

            // **修正 resize 行為，確保 panel 仍可展開**
            $(window).on("resize", function () {
                if ($(window).width() > settings.mobileBreakpoint) {
                    $(".panel .panel-media").remove(); // 桌機模式時移除 `panel-media`
                    $(".panel").css("max-height", ""); // 讓 panel 高度回歸自適應
                } else {
                    $accordionGroup.each(function () {
                        var activeButton = $(this).find(".accordion-1.active, .accordion-2.active, .accordion-3.active, .accordion-4.active");
                        if (activeButton.length > 0) {
                            toggleAccordion(activeButton); // 重新展開 active 的 panel
                        }
                    });
                }
            });

        });
    };
})(jQuery);