(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");
            var $images = $benefitGroup.find("img");

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

            function calculatePanelHeight(panel, img) {
                var contentHeight = panel.prop("scrollHeight"); // panel 內容高度
                var imgHeight = img.prop("naturalHeight") || img.height(); // 圖片的實際高度
                return contentHeight + imgHeight + 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").removeClass("active");
                $accordionGroup.find(".panel").css("max-height", "0");

                button.addClass("active");

                var index = $accordions.index(button);
                var img = $images.eq(index);

                if ($(window).width() <= settings.mobileBreakpoint) {
                    // 確保所有 `panel` 內部不會有多餘的 `panel-img`
                    panel.find(".panel-img").remove();

                    var imgClone = img.clone().addClass("panel-img"); // 複製對應圖片
                    panel.append(imgClone); // 插入 panel

                    // 確保圖片載入後再計算 panel 高度
                    imgClone.on("load", function () {
                        var totalHeight = calculatePanelHeight(panel, imgClone);
                        panel.css("max-height", totalHeight + "px"); // 設定完整高度
                    });

                    // 立即設置初始 panel 高度，防止 max-height: 0 問題
                    panel.css("max-height", calculatePanelHeight(panel, imgClone) + "px");
                } else {
                    panel.css("max-height", panel.prop("scrollHeight") + "px");
                }

                $images.removeClass("benefit-active");
                $images.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").first();
                        if (firstButton.length > 0) {
                            toggleAccordion(firstButton);
                        }
                    });
                }, settings.delay);
            });

            // 監聽視窗大小變化
            $(window).on("resize", function () {
                if ($(window).width() > settings.mobileBreakpoint) {
                    $(".panel img.panel-img").remove(); // 桌機模式時移除 `panel-img`
                    $(".panel").css("max-height", ""); // 讓 panel 高度回歸自適應
                } else {
                    $accordionGroup.each(function () {
                        var activeIndex = $(this).find(".accordion-1.active, .accordion-2.active, .accordion-3.active").index();
                        $(this).find(".panel img.panel-img").remove();
                        if (activeIndex !== -1) {
                            var activePanel = $(this).find(".accordion-1, .accordion-2, .accordion-3").eq(activeIndex).next(".panel");
                            var imgClone = $images.eq(activeIndex).clone().addClass("panel-img");
                            activePanel.append(imgClone);

                            // 確保圖片載入後再計算 panel 高度
                            imgClone.on("load", function () {
                                var totalHeight = calculatePanelHeight(activePanel, imgClone);
                                activePanel.css("max-height", totalHeight + "px");
                            });

                            // 立即設定初始 panel 高度，防止 max-height: 0 問題
                            activePanel.css("max-height", calculatePanelHeight(activePanel, imgClone) + "px");
                        }
                    });
                }
            });

        });
    };
})(jQuery);