document.addEventListener("DOMContentLoaded", async function () {
    document.documentElement.style.margin = "0";
    document.documentElement.style.padding = "0";
    document.documentElement.style.width = "100%";
    document.documentElement.style.height = "100%";
    document.documentElement.style.imageRendering = "auto";
  
    document.body.style.margin = "0";
    document.body.style.padding = "0";
    document.body.style.width = "100%";
    document.body.style.height = "100%";
    document.body.style.imageRendering = "auto";
  
    const scriptElement = document.currentScript;
    const tokenId = scriptElement.getAttribute("t");
  
    const metadataUrl = "/content/9504ba4be2f0decdb8b0f9461c039f126a3f7c19df68699d39c1eda075fef104i0";
    const traitsUrl   = "/content/e575a82d585d719f32e306cf773dff1efd60e13434f18ca44e9c2d4ef54f4792i0>";
  
    try {
      const metadataResponse = await fetch(metadataUrl);
      if (!metadataResponse.ok) {
        throw new Error(`Failed to fetch metadata: ${metadataResponse.statusText}`);
      }
      const compressedMetadata = await metadataResponse.blob();
      const dsMetadata = new DecompressionStream("gzip");
      const decompressedMetadataStream = compressedMetadata
        .stream()
        .pipeThrough(dsMetadata);
      const decompressedMetadataData = await new Response(decompressedMetadataStream).arrayBuffer();
      const metadataString = new TextDecoder("utf-8").decode(decompressedMetadataData);
      const metadata = JSON.parse(metadataString);
  
      const traitsResponse = await fetch(traitsUrl);
      if (!traitsResponse.ok) {
        throw new Error(`Failed to fetch traits: ${traitsResponse.statusText}`);
      }
      const compressedTraits = await traitsResponse.blob();
      const dsTraits = new DecompressionStream("gzip");
      const decompressedTraitsStream = compressedTraits
        .stream()
        .pipeThrough(dsTraits);
      const decompressedTraitsData = await new Response(decompressedTraitsStream).arrayBuffer();
      const traitsString = new TextDecoder("utf-8").decode(decompressedTraitsData);
      const traits = JSON.parse(traitsString);
  
      const tokenData = metadata.find((item) => item.e === parseInt(tokenId));
      if (!tokenData) {
        throw new Error(`Token ID ${tokenId} not found in metadata`);
      }
  
      const container = document.createElement("div");
      container.style.position = "relative";
      container.style.width = "100%";
      container.style.height = "100%";
  
      const normalizedTraits = {};
      for (const key of Object.keys(traits)) {
        normalizedTraits[key.toLowerCase()] = traits[key];
      }
  
      tokenData.a.forEach(({ t, v }) => {
        const traitType = t.toLowerCase();
        const traitValue = v;
  
        if (!normalizedTraits[traitType]) {
          console.warn(`Trait type not found: ${traitType}`);
          return;
        }
        if (!normalizedTraits[traitType][traitValue]) {
          console.warn(`Trait value not found: ${traitValue} for traitType: ${traitType}`);
          return;
        }
        const imageId = normalizedTraits[traitType][traitValue];
        if (!imageId) {
          return;
        }
  
        const img = document.createElement("img");
        img.src = `/content/${imageId}`;
        img.style.position = "absolute";
        img.style.width = "100%";
        img.style.height = "100%";
        img.style.objectFit = "contain";
  
        container.appendChild(img);
      });
  
      document.body.appendChild(container);
  
    } catch (error) {
      console.error("Error loading Tier 3 NFT:", error);
    }
  });