(() => {
  // ป้องกันโหลดซ้ำหลายครั้ง
  const ns = "__NU_GRAY__";
  if (window[ns]) return;
  window[ns] = true;

  // อ่าน query param (gray, icon) จาก src ของ <script>
  const currentScript = document.currentScript;
  const src = currentScript ? currentScript.src : "";
  const url = new URL(src, window.location.href);
  const enableGray = url.searchParams.get("gray") === "true";
  const enableIcon = url.searchParams.get("icon") === "true";

  // ฟังก์ชันหลักเมื่อ DOM พร้อม
  const apply = () => {
    if (!document.body) return;

    /* =========================
       1) Overlay ขาวดำทั้งหน้า
       ========================= */
    if (enableGray) {
      const ov = document.createElement("div");
      ov.className = "nu-gray-overlay";
      Object.assign(ov.style, {
        position: "fixed",
        inset: "0",
        pointerEvents: "none",
        zIndex: "2147483646",
        backdropFilter: "grayscale(.75)",
        WebkitBackdropFilter: "grayscale(.75)"
      });
      document.documentElement.appendChild(ov);
    }

    /* =========================
       2) Ribbon มุมขวาล่าง
          - มีลิงก์เปิดหน้า rdir
          - มีปุ่มปิดจำสถานะด้วย localStorage
       ========================= */
    if (enableIcon) {
      const hideKey = "nuGrayRibbonClosed";

      if (!localStorage.getItem(hideKey)) {
        const ns_blackRibbonURL = "https://api.grad.nu.ac.th/gateway/app/static/black_ribbon.png";
        const ns_rdir = "https://api.grad.nu.ac.th/gateway/fn/commemorate";
        const ns_title = "น้อมรำลึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์ พระบรมราชินีนาถ พระบรมราชชนนีพันปีหลวง";

        const rb = document.createElement("div");
        rb.className = "nu-gray-ribbon";
        rb.innerHTML = `
          <a class="nu-gray-link" href="${ns_rdir}" target="_blank" title="${ns_title}">
            <img class="nu-gray-ribbon-img" src="${ns_blackRibbonURL}" alt="Mourning Ribbon">
          </a>
          <button class="nu-gray-close" aria-label="Close">&times;</button>
        `;

        // ฟังก์ชัน sync ขนาด/สไตล์ตามหน้าจอ (desktop / mobile)
        const syncSize = () => {
          const isMobile = window.innerWidth < 768;
          const frameSize = isMobile ? 50 : 100; // ขนาดกรอบดำกลม
          const imgSize   = isMobile ? 40 : 80;  // ขนาดรูปริบบิ้นด้านใน

          // style กรอบหลัก (rb)
          Object.assign(rb.style, {
            position: "fixed",
            bottom: "70px",
            right: "40px",
            zIndex: "2147483647",
            background: "#000",
            color: "#fff",
            borderRadius: "50%",
            width: frameSize + "px",
            height: frameSize + "px",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            fontSize: "30px",
            boxShadow: "0 4px 12px rgba(0,0,0,.3)",
            cursor: "pointer",
            transition: "transform .3s,opacity .3s"
          });

          // <a> ครอบรูป → ทำให้เต็มพื้นที่วงกลม / เป็นปุ่มคลิกไปยัง rdir
          const linkEl = rb.querySelector(".nu-gray-link");
          Object.assign(linkEl.style, {
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            width: "100%",
            height: "100%",
            textDecoration: "none",
            cursor: "pointer"
          });

          // รูปริบบิ้นด้านใน
          const imgEl = rb.querySelector(".nu-gray-ribbon-img");
          Object.assign(imgEl.style, {
            width: imgSize + "px",
            height: imgSize + "px",
            borderRadius: imgSize / 2 + "px",
            objectFit: "cover",
            pointerEvents: "none" // ให้คลิกทั้งวงกลมได้ง่ายขึ้น
          });

          // ปุ่มปิดมุมขวาบน
          const btn = rb.querySelector(".nu-gray-close");
          Object.assign(btn.style, {
            position: "absolute",
            top: "-6px",
            right: "-6px",
            background: "#fff",
            color: "#000",
            border: "none",
            borderRadius: "50%",
            width: "20px",
            height: "20px",
            cursor: "pointer",
            fontSize: "14px",
            fontWeight: "bold",
            lineHeight: "20px",
            boxShadow: "0 0 4px rgba(0,0,0,.2)"
          });
        };

        // ตั้งครั้งแรก
        syncSize();

        // รีไซส์แล้วอัปเดต
        window.addEventListener("resize", syncSize);

        // ปิดปุ่ม (จำไว้ว่าเคยปิด)
        const btn = rb.querySelector(".nu-gray-close");
        btn.addEventListener("click", (e) => {
          e.stopPropagation();
          rb.style.opacity = "0";
          rb.style.transform = "scale(.5)";
          setTimeout(() => rb.remove(), 300);
          localStorage.setItem(hideKey, "1");
        });

        // ใส่กรอบลงหน้า
        document.body.appendChild(rb);
      }
    }

    /* =========================
       3) helper classes สำหรับ dev ฝั่งเว็บ
          (เรา inject <style> ที่ผูกกับคลาสเราเองเท่านั้น)
       ========================= */
    const st = document.createElement("style");
    st.textContent = `
      /* มนโค้งนิ่ม */
      .nu-gray-rounded {
        border-radius: 40px !important;
        overflow: hidden;
      }

      /* วงกลม (เช่น avatar) */
      .nu-gray-circle {
        border-radius: 50% !important;
        object-fit: cover;
        overflow: hidden;
      }
    `;
    document.head.appendChild(st);

    // กันไม่ให้เว็บต้นทางมี filter ซ้อนบน <html> / <body>
    document.documentElement.style.filter = "none";
    document.body.style.filter = "none";
  };

  // เรียกเมื่อ DOM พร้อม
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", apply);
  } else {
    apply();
  }
})();