$(document).ready(function () {
    /*-------------------------
  heroheader
  -------------------------*/
    $(".hamburger").click(function () {
        $(".navbox").addClass("show");
    });
    $(".close_hamburger").click(function () {
        $(".navbox").removeClass("show");
    });

    $(".dropBt").on("click", function (e) {
        e.preventDefault();

        $(this).siblings(".haveDrop").toggleClass("open");

        $(this).closest(".toggleIcon").toggleClass("closebt");

        $(this).parent().siblings().find(".dropBt").removeClass("active");

        $(this).parent().siblings().find(".haveDrop").removeClass("open");

        $(this).parent().siblings().find(".toggleIcon").removeClass("closebt");
    });
    $(".navbox").on("mouseleave", function () {
        // 移除之前添加的类
        $(".haveDrop").removeClass("open");
        $(".toggleIcon").removeClass("closebt");
        $(".dropBt").removeClass("active");
    });
    $(".mod-language").click(function () {
        $(".language-content").toggle(200);
    });
    $(".mod-language").on("mouseleave", function () {
        $(".language-content").hide(200);
    });
    $(".mod-message").click(function () {
        $(".message-content").toggle(200);
    });
    $(".mod-message").on("mouseleave", function () {
        $(".message-content").hide(200);
    });
    $(".lineshare").click(function () {
        $(".lineshare-content").toggle(200);
    });
    $(".lineshare").on("mouseleave", function () {
        $(".lineshare-content").hide(200);
    });
    $(".membernav").click(function () {
        $(".lists").toggle(200);
    });
    // $(".membernav").on('mouseleave', function() {
    //   $(".lists").hide(200);
    // });

    $(".moreopen").click(function () {
        $(this).find(".more-inner").toggle(200);
    });

    $(".ic_more").click(function () {
        $(".sidenav").toggle(200);
    });
    $(".ringopen").click(function () {
        $(this).closest(".items").find(".drop").toggle(200);
        $(this).parent().parent().siblings().find(".drop").hide(200);
        $(this).closest(".items").find(".ringopen").toggleClass("show");
        $(this).parent().parent().siblings().find(".ringopen").removeClass("show");
    });
    $(".titleopen").click(function () {
        $(this).parent().find(".drop").toggle(200);
        $(this).parent().parent().siblings().find(".drop").hide(200);
        $(this).parent().parent().siblings().find(".ringopen").removeClass("show");
    });
    // 當 .entity-item 被點擊時
    $(".entity-item").click(function () {
        if ($(this).find(".havedrop").length > 0) {
            $(".havedrop").hide();
            $(".close-bg").show();
            $(this).children(".havedrop").show();
        } else {
            $(this).children(".havedrop").hide();
            $(".havedrop").hide();
            $(".close-bg").hide();
        }
    });
    $(".close-bg").click(function () {
        // 隱藏所有的 .havedrop
        $(".havedrop").hide();
        $(".close-bg").hide();
    });
    /*-------------------------
   字級大小
   -------------------------*/

    var fontSizeIndex = 0;
    var maxFontSizeIndex = 3;

    $(".fsizebt").on("click", function () {
        if (fontSizeIndex < maxFontSizeIndex) {
            fontSizeIndex++;
            $(".chat-container").css("font-size", "+=1");
        } else {
            // Reset font size to the original size or take another action as needed
            fontSizeIndex = 0;
            $(".chat-container").css("font-size", "16px");
        }
    });

    /*-------------------------
   model開啟
   -------------------------*/
    $(".modelbt").click(function () {
        $(".drop").slideToggle(); // 切換顯示 .drop
        $(this).find("i").toggleClass("rotate"); // 切換 i 樣式
    });

    // 點擊外部時隱藏下拉選單
    $(document).click(function (event) {
        if (!$(event.target).closest(".model").length) {
            $(".drop").slideUp();
            $(".modelbt i").removeClass("rotate");
        }
    });
    /*-------------------------
  lightbox
  -------------------------*/
    $(".lightbox-close").click(function () {
        $(".lightbox-target").removeClass("lightboxopen");
    });
    $(".lightboxbg").click(function () {
        $(".lightbox-target").removeClass("lightboxopen");
    });
    $(".lightbox-ex-open").click(function () {
        $(".lightbox-ex").addClass("lightboxopen");
    });
    $(".lightbox-unthumb-open").click(function () {
        $(".lightbox-unthumb").addClass("lightboxopen");
    });
    /*-------------------------
  lightbox-置底型
  -------------------------*/
    $(".lightbox-close").click(function () {
        $(".lightbox-target-bottom").removeClass("lightboxopen");
    });
    $(".lightboxbg").click(function () {
        $(".lightbox-target-bottom").removeClass("lightboxopen");
    });
    $(".lightbox-search-open").click(function () {
        $(".lightbox-search").addClass("lightboxopen");
    });
    /*-------------------------
  tabs
  -------------------------*/
    // 預設顯示 inner_1，隱藏其他內容
    $(".inner_1").show();
    $(".inner_2, .inner_3, .inner_4").hide();

    $(".tab-btn").click(function () {
        // 移除所有按鈕的 active 類別
        $(".tab-btn").removeClass("active");
        // 為當前點擊的按鈕添加 active 類別
        $(this).addClass("active");

        // 取得按鈕的索引值
        let index = $(this).index();

        // 隱藏所有內容，然後顯示對應的內容
        $(".inner_1, .inner_2, .inner_3, .inner_4").hide();
        $(".inner_" + (index + 1)).show();
        if (window.ScrollTrigger) {
            ScrollTrigger.refresh();
        }
    });

    /*-------------------------
    計算畫面區塊高度分配
   -------------------------*/
    function setVH() {
        // 取得目前的 innerHeight
        let vh = window.innerHeight * 0.01;
        document.documentElement.style.setProperty("--vh", `${vh}px`);
    }

    // 初始執行一次
    setVH();

    // 視窗大小變化時更新
    window.addEventListener("resize", setVH);

    // iOS Safari 常見 bug：旋轉螢幕或上下滑動工具列時也要偵測
    window.addEventListener("orientationchange", setVH);

    $(".sendbt").on("click", function () {
        $(".chat-layout").show();
        $(".stararea").hide();
        $(".form-group").addClass("fixed-bottom");
    });
    /*-------------------------
    side側邊攔
   -------------------------*/
    $(document).on("click", ".sidemore", function (e) {
        e.stopPropagation();

        if ($(this).hasClass("active")) {
            $(".sidedrop").remove();
            $(".sidemore").removeClass("active");
            return;
        }

        $(".sidedrop").remove();
        $(".sidemore").removeClass("active");
        $(this).addClass("active");

        const rect = this.getBoundingClientRect();

        // 建立 dropdown（先隱藏才能準確取得尺寸）
        const $dropdown = $(`
    <div class="sidedrop" style="position: absolute; visibility: hidden; display: block;">
      <div class="option" id="sidemoreEdit"><img src="/images/ic_edit2.svg" class="icon" alt="edit"> 重新命名</div>
      <div class="option" id="sidemoreDelete"><img src="/images/ic_del2.svg" class="icon" alt="delete"> 刪除</div>
      <!-- 更多選項... -->
    </div>
  `);
        $("body").append($dropdown);

        const dropdownWidth = $dropdown.outerWidth();
        const dropdownHeight = $dropdown.outerHeight();
        const padding = 8;

        const windowWidth = $(window).width();
        const windowHeight = window.innerHeight;
        const scrollTop = window.scrollY;

        // 計算可用空間
        const availableSpaceBelow =
            windowHeight - (rect.bottom - scrollTop) - padding;
        const availableSpaceAbove = rect.top - scrollTop - padding;

        // 決定顯示位置和最大高度
        let maxHeight;
        let showAbove = false;

        if (dropdownHeight > availableSpaceBelow) {
            if (
                availableSpaceAbove > availableSpaceBelow &&
                availableSpaceAbove >= 100
            ) {
                // 上方空間更大且足夠，顯示在上方
                maxHeight = Math.min(dropdownHeight, availableSpaceAbove);
                showAbove = true;
            } else {
                // 下方顯示，限制高度
                maxHeight = Math.max(availableSpaceBelow, 100); // 最少100px高度
                showAbove = false;
            }
        } else {
            maxHeight = dropdownHeight;
        }

        // 設置最大高度和滾動
        $dropdown.css({
            "max-height": maxHeight + "px",
            "overflow-y": maxHeight < dropdownHeight ? "auto" : "visible",
            "overflow-x": "hidden",
        });

        // 初始位置估算
        let left = rect.left + window.scrollX - dropdownWidth + 64;
        let top;

        if (showAbove) {
            top = rect.top + window.scrollY - Math.min(dropdownHeight, maxHeight) - 8;
        } else {
            top = rect.top + window.scrollY - 44;
        }

        // 左右邊界修正
        if (left < padding) {
            left = padding;
        } else if (left + dropdownWidth > windowWidth - padding) {
            left = windowWidth - dropdownWidth - padding;
        }

        // 確保不超出視窗範圍
        if (top < scrollTop + padding) {
            top = scrollTop + padding;
        }

        $dropdown.css({
            top: top,
            left: left,
            zIndex: 9999,
            visibility: "visible",
        });
    });

    // 點擊其他地方關閉
    $(document).on("click", function () {
        $(".sidedrop").remove();
        $(".sidemore").removeClass("active");
    });

    // 視窗變動關閉
    $(window).on("resize scroll", function () {
        $(".sidedrop").remove();
        $(".sidemore").removeClass("active");
    });

    // sidemenu 滾動關閉
    $(".sidemenu").on("scroll", function () {
        $(".sidedrop").remove();
        $(".sidemore").removeClass("active");
    });
});
/*-------------------------
  searchbar控制
 -------------------------*/
$(".searchtoggle").on("click", function () {
    $(".searcharea").show(); // 會自動切換顯示/隱藏
    $(".searchtoggle").hide();
});
// $(".searchclose").on("click", function () {
//   $(".searcharea").hide();
//   $(".searchtoggle").show();
// });
$(".lightbox-search-open").on("click", function () {
    $(".searcharea").show(); // 會自動切換顯示/隱藏
    $(".searchtoggle").hide();
});
/*-------------------------
lightbox-置底型-下拉關閉
-------------------------*/
$(document).ready(function () {
    let startY, offsetY;
    let isDragging = false;

    $("#draggable").on("mousedown touchstart", function (e) {
        isDragging = true;
        startY = e.pageY || e.originalEvent.touches[0].pageY;
        offsetY = 0;
        $(".content").css("transition", "none"); // 取消動畫效果，讓拖動更流暢
    });

    $(document).on("mousemove touchmove", function (e) {
        if (!isDragging) return;

        let currentY = e.pageY || e.originalEvent.touches[0].pageY;
        offsetY = currentY - startY;

        // 只允許 Y 軸拖曳
        $(".content").css("transform", `translate(-50%, ${offsetY}px)`);
    });

    $(document).on("mouseup touchend", function () {
        if (!isDragging) return;
        isDragging = false;

        $(".content").css("transition", "transform 0.3s ease-in-out");

        if (offsetY > 50) {
            // 向下超過 50px，關閉 Lightbox，並移除 `.content` 之前加的 style
            $(".lightbox-target-bottom").removeClass("lightboxopen");
            setTimeout(() => {
                $(".content").removeAttr("style");
            }, 300);
        } else {
            // 向上超過 20px 或向下未達 50px，回彈回原位
            $(".content").css("transform", "translate(-50%, 0)");
        }
    });
});