(() => {
  if (!document.getElementById("timetics-styles")) {
    const style = document.createElement("style");
    style.id = "timetics-styles";
    style.textContent = `
      @keyframes timetics-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      .timetics-container {
        position: relative;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        min-height: 0;
      }
      .timetics-iframe {
        width: 100%;
        height: 100%;
        border: none;
        opacity: 0;
        transition: opacity 0.3s ease;
        display: block;
        overflow: hidden;
      }
      .timetics-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;
      }
      .timetics-loader {
        width: 50px;
        height: 50px; 
        border-radius: 50%;
        border-top: 4px solid #067FFF;
        animation: timetics-spin 1s linear infinite;
      }
        .timetics-inline-embed{
          width: 100%;
          height: auto;
          overflow: hidden;
        }
    `;
    document.head.appendChild(style);
  }

  document
    .querySelectorAll(".timetics-inline-embed:not([data-init])")
    .forEach((embed) => {
      embed.setAttribute("data-init", "true");

      const container = document.createElement("div");
      container.className = "timetics-container";

      const defaultHeight = embed.getAttribute("defulatHeight") || "400px";
      container.style.height = defaultHeight;

      const placeholder = document.createElement("div");
      placeholder.className = "timetics-placeholder";

      const loader = document.createElement("div");
      loader.className = "timetics-loader";
      placeholder.appendChild(loader);
      container.appendChild(placeholder);
      const iframe = document.createElement("iframe");
      iframe.className = "timetics-iframe";
      iframe.src = embed.getAttribute("data-url");
      iframe.loading = "eager";
      iframe.fetchpriority = "high";
      iframe.referrerPolicy = "strict-origin-when-cross-origin";
      iframe.frameBorder = "0";
      iframe.scrolling = "no";
      iframe.allow =
        "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
      iframe.allowFullscreen = true;

      let showPlaceholder = setTimeout(() => {
        placeholder.style.opacity = "1";
      }, 200);

      iframe.onload = () => {
        clearTimeout(showPlaceholder);
        iframe.style.opacity = "1";
        placeholder.style.opacity = "0";
        setTimeout(() => {
          placeholder.style.display = "none";
        }, 200);
      };

      const resizeHandler = (e) => {
        try {
          if (e.origin !== new URL(iframe.src).origin) return;
          if (e.data?.type === "iframeResize" && e.data?.height) {
            requestAnimationFrame(() => {
              const newHeight = `${e.data.height}px`;
              container.style.height = newHeight;
              iframe.style.height = newHeight;
            });
          }
        } catch (error) {
          console.error("Resize error:", error);
        }
      };

      window.addEventListener("message", resizeHandler);
      embed._resizeHandler = resizeHandler;

      container.appendChild(iframe);
      embed.innerHTML = "";
      embed.appendChild(container);
    });
})();