document.addEventListener("DOMContentLoaded", async function () {
  const scriptElement = document.getElementById("tier3-script");
  if (!scriptElement) {
    console.error("Non trovato <script> con id='tier3-script'.");
    return;
  }

  const tokenId = scriptElement.getAttribute("t");
  console.log("tokenId =", tokenId);


  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 "${traitType}" non trovato nei traits.`);
        return;
      }
      if (!normalizedTraits[traitType][traitValue]) {
        console.warn(`Trait value "${traitValue}" non trovato per type "${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("Errore nel caricamento del Tier 3:", error);
  }
});