<!-- 
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@@@@@@@@@@@@@@@@@@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@@@@@@@@@@@@/,,,,,,,,,,,,,,*@@@@@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&@@@@@@@@*,/@&@@@@@@@%%%@@@@%@@@@@@&@@@@#,,@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&@@@@@@@,*@&&&@@@@@@@@@@@,.@@@@@@@@@@,,,*@@@#@@@@@#,@@@@@@&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&@@@@@@,@@&&@@(/@@@(*@..%..@@ . ..@@@@@@@@@@@. @@@@@@@@@@@,@@@@@@&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&@@@@@,@@@@#/@,@@@@@ @@   @@@ ..@@@.  .@.(&.@@/   .@@@@@#/#@@@@,/@@@@&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&@@@@@,@&@@@@*.  # #. @@@@ *     (..@@@@@,.@. /  @@@@. @@@@@@@/,(@@@@,@@@@@&&&&&&&&&&&&
&&&&&&&&&&&&@@@@#/@@%@@@@, @@@* . &.@@@@ @@. @@@@. @@ *@@@@@@.  .@@@@, %@@@@@@,*@@@@@,@@@@&&&&&&&&&&
&&&&&&&&&&&@@@/&@@%@@@@. @@@@.@@@@&  @.*  @@@& @@@@@@@@@@@@@@@@@ @@@@@@@#..@@@@@,,@@@@@,@@@@&&&&&&&&
&&&&&&&&&@@@@,@@@(@@@,.@@@  @@@@@@@@@@& @@@@@@ @@@ @@@@/ %@@@@@@@@@@@@@@@@@*.@@@@@@@@@@@&#@@@&&&&&&&
&&&&&&&&@@@,@@@@/@@@.%@@@@@@@@.@@@@@@@# @@@@@@@@@,.(@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@,@@@@&&&&&
&&&&&&@@@@,@@@&*@@@ @@@@@@@@@@  @@@@@@@ @@@@@@@@/,@@@@@@@@@@@@@@@@@@@@@@ .@@@@@@@@@  @@@@@@/@@@@&&&&
&&&&&@@@@/@@@//@@( @@@@@@@@@@@ . @@@@@@@@@@@@  @@@@@@@@@@@@@@@@@@@@@@@@  .@@@@@@@@@@@@@@@@@@@#@@@&&&
&&&&@@@@/@@@/#@@# @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ /@@@@ @@@&@@@@@@@@&#@@@@@@@@@@ @@@@@@@@@@&@@@&&
&&&&@@@,@@@/@@@@.&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@/ @@  @@@@@@@@@@@@@@@@@@ @@@@@@@@(@@*@@@@&
&&&@@@,@@@/*@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@..@@@@@@@@ @@@@@@@@@@@@@@@ @@@@ @  @@@@@@@*(@@,@@@&
&&&@@@*@@@*@@@/@@@@@@@@@@@@@@  @ @@@@@@@@@@@@@@@@@ @@@@@@@ &@ # @@@@@  @@/ @@ @@@@@@@@@@@@@@/%@@@@@@
&&@@@,@@@(@@@@@@@@@@@@@@@@@@  @% @@@@@@@@@@@@@@@@@@&       @@@ @@@&@@  %@@@@@@@@@@@@@@@@@@@@@(@@,@@@
&&&@@,@@&#@@@@@@@   % *@@@@  @@ @@@@@@@@@@@@@@@@@@@@@@@ @ @@@   #@@@@@@@@@@@@@@@@@@@@@@@..@@@(&@,@@@
&&@@@,@@#@@@@@@@ @@@@. @@@@  @ @@@@@@@@@@@@@@@@@ @@@@ @@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@/.@@@(#@,@@@
&&&@@,@@#@@@@@@@@@@@@ &@@@.  .@@@@@@@@@@@@@  @@# @ @ @ /@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@&.@@@(#@,@@@
&&@@@,@@%/@@@@@@@@@@@ @@@@  @@@@@@@@  @ @@@ @@%%@@@@@@@@@@@@@@@@@@@@@@@@  @@ @@@@*.@@@@@,.@@@(@@,@@@
&&&@@@%@@(@@@@@@@@@@,    @ @@@@@@@  @@&&@@@#.@@@@@@@@@@@@@@@@@@@*       ,@& @@@@@.@@@@@@.@@@@#@@(@@@
&&&@@@,@@@@@@@@@  (@ @@@@ @@@@@@@( @@ @@@@@@@@@@@@@@@@@@@@@%.@@@@  ,@@@@@ (@@@@%.@@@@@@.@@@@(@@,@@@@
&&&@@@@,@@@@@@@ @@@  @@@@ @@@@@@@@&@@@@@@@@@@@@@@@@@@@@@@@@@@@. .@@@,.  @@@@@@..@@@@@@.(@@@/%@@@@@@&
&&&&@@@&@@@@@@@ &@@ @@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@(..@@@@@@@@.(@@@/&@@,@@@&&
&&&&&@@@/@@@@@@@   @@@@@@ @@@@@@@@@@@@@@@@@@@@  @@@@  @@@@@@@@@@@@@@@@..,@@@@@@@@@@@.@@@@/@@@,@@@&&&
&&&&&&@@@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@@@@   @@@@    @@@@@@@@@@@@@@@@@@@@@@@@@@..@@@*/@@@,@@@&&&&
&&&&&&&@@@@,@@@@@@@@@@@@  @@@@@@@@#@@@@@@@@.  @ @@@@      @@@@@@@@@@@@@@@@@@@@@@..@@@@*@@@*@@@@&&&&&
&&&&&&&&@@@@,@@@@@@@@@@@@ @@@@@@@@& @@@@@@.  %.*@@@@.     @@@@@@@@.      @@@@@*.@@@#*%@@@,@@@@&&&&&&
&&&&&&&&&&@@@@,@@@@@@@@@@@ &@@@@@@@@@@. &@@@@@@@@&@@@.. @@@@@@#.  %,  . @@@@. @@@,*@@@@,@@@@&&&&&&&&
&&&&&&&&&&&@@@@@,@@@@@@@@@@@@@@@@@@@@@@@@    @@&   @@@@@%   %@@@@@@%  @@@ .@@@@,/@@@@,@@@@@&&&&&&&&&
&&&&&&&&&&&&&@@@@@,%@@@@@@@@@@@@@@(@.  ,@@@@@@@@@@@@@@@@@@@@   #@@. @@%.@@@@,*@@@@@,@@@@@&&&&&&&&&&&
&&&&&&&&&&&&&&&&@@@@@,@@@@@@@@@@( @@.@@@@@.    .......... .@@@.@@. ,@.(@@,*@@@@@,@@@@@&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&@@@@@@,/@@@%@@*#@@.@@@@..@@@@.#@@@@ @@@@.@@@.@@  @@*@@#%@@@,@@@@@@&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&@@@@@@@,,@@@@@@(@@@@,#@@@@.#@@@@,@@@,@@@**@@/#@%&@@#,@@@@@@@&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&@@@@@@@@,,@@&&&%%@@@@@(@@@@(#@%((@@@%@@@@@,,@@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@@@@@@@@@@@&,,,,%@@@@@@&@@@&*,,,%@@@@@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
................................................................................
................................................................................
............................                         ...........................
......................       %%      .,,  .  .     %%      .....................
..................     %% .. ,       %/        %#(  *    %(     ................
...............    #/ .,  .  %&&&  &@&#/&@  (     .@    **   #*    .............
.............   %    /# (@.(@@@@.&@   &, . & &/@@@@@@@,    #(    %   ...........
..........    % .    @&  @@@@   @  &   #&  #@,   @     &&     #,   %   .........
.........   ( .,   @   &    @@.@@@   %             @      &&    %(   %   .......
.......   %  *   &   @         @     ,  @,  & @              &         %   .....
......  .   /  .&       @,     @       (#                         .@        ....
....   %   #  &&        @@.         &@.                  &@        .      %  ...
....  %   #  %&                           @   @.         @        #        %  ..
...  .   #  ,&                          @      @  @              ,%      ,     .
..   %  (   @           @@&             @      @  .        @@     @      (* %   
..  *  ,(              @ ,,              @    @@  @   @ @@ (              (  .  
..  %  (      @@@@    @. @                  @.%  @&@   @               &   * %  
..  %  /     @   @   #@ @             @.  @ &#                   %     &   * %  
..  %  (         @   @@        #  #@  @@  @@                 &   %@    &   * %  
..  *  /         # *@@      @% @  &@@               .@@ @@@ &    &    /&  /     
..   % ,     #@&@   @      @  &                *@   @@@#   &    &     &   * %   
...  .      @  #@   @                             @&@ @&@     %@     &   /     .
...   %     @. @    @                                     /&#       &   /  #   .
....   %            @                @%   @@                      %@  %/  %   ..
.....               @              @@,@   @@@@                  /&   #       ...
.......   %         @       @#    @@ &    @@@@&      @@@@@     &   #   %   .....
........    %        @         &@/     @        .@@   (@&*  &&  %#   %    ......
..........    %              *     #@@@@@@@@&@   #@  @@  @&   %    %    ........
............    (         @  @   &@@       ,%&&.  &  @ *&  %*   ,,    ..........
...............     %  ,  %  &   %    &   (/  &  #% &% #  ,  %     .............
..................     ,%    *   #    %   %   %  (  , .. %      ................
......................       %%* .   ..   ,,,,..  (%#       ....................
...........................                            .........................
................................................................................
................................................................................
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hedera nft explorer</title>
    <link rel="stylesheet" type="text/css" href="../src/styles.css">
    <link rel="stylesheet" type="text/css" href="../src/glitch.css">
       <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap">
      <style>
        body {
            background-color: #222222;
            font-family: 'Inconsolata', sans-serif;
            font-size: 14px;
             font-weight: 600;
        }
      /* NFT Container styling */
.nft-container {
    margin: 50px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    text-align: center;
    width: 100%;
}

/* NFT Item styling */
.nft-item {
    border: 0.5px solid #ccc;
    margin: 0.5px;
    padding: 0;
    font-size: 14px;
    flex-basis: 150px;
    height: 150px;
    text-align: center;
    cursor: pointer;
    position: relative; /* Enable positioning for child elements */
    overflow: hidden; /* Ensure child elements stay within boundaries */
}

.nft-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #333333;
    transition: transform 0.3s ease; /* Smooth scale on hover */
}

/* Scale only the image on hover, not the .like-count */
.nft-item:hover img {
    transform: scale(1.065);
}

/* Wrapper to contain overlay elements */
.nft-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

/* Like counter positioned in the upper left */
.like-count {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 12px;
    color: white; /* Red color for the heart */
    background-color: rgba(0, 0, 0, 0.7);
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 10; /* Ensure it stays on top */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.like-count:hover {
    color: white; /* Keep the heart color red */
    background-color: rgba(0, 0, 0, 1); /* Subtle background change */
}

/* Styling for serial number and rarity rank */
.serial-number, .rarity-rank {
    position: absolute;
    bottom: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 3px;
    transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition */
}

.serial-number {
    left: 5px;
}

.rarity-rank {
    right: 5px;
}

/* Hover effect for both serial-number and rarity-rank */
.serial-number:hover, .rarity-rank:hover {
    color: #222222;
    background-color: rgba(255, 255, 255, 0.7);
}


        /* Modal styling */
        .modal {
            display: none;
            position: fixed;
            font-weight: 600;
            z-index: 1;
            left: 0;
            top: 5%;
            width: 100%;
            height: 95%;
            overflow: auto;
             z-index: 20; /* Ensure it stays on top */
            background-color: rgba(22,22,22,0.8);
        }
        .modal-content {
    background-color: rgba(22,22,22,0.8);
    font-weight: 600;
    font-size: 14px;
    display: flex;
    flex-direction: column; /* Change to column for better vertical stacking */
    margin: 5% auto;
    padding: 5% ;
    border: 1px solid #888;
    width: 60%;
    max-width: 500px;
    border-radius: 20px;
    overflow-y: auto; /* Enable vertical scrolling if content overflows */
    max-height: 80vh; /* Limit the height of the modal */
}

#nftProperties, #nftTraits {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

#nftProperties li, #nftTraits li {
    word-wrap: break-word; /* Enable word wrapping */
    margin-bottom: 5px; /* Add some spacing between list items */
}

        .close {
            color: #aaa;
            float: right;
            font-size: 22px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        /* Pagination styles */
        .pagination {
            margin: 5px 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 100%;
            border-radius: 10px;
        }
        .pagination button {
            margin: 0 5px;
            padding: 5px 5px;
            cursor: pointer;
        }
       #spinner {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

.rarity-text {
    font-size: 0.8em;  /* Smaller text size */
    color: #666;       /* Gray color for rarity text */
}


#spinner img {
    width: 222px; /* Adjust the size of the spinner */
    height: 222px; /* Make the spinner a square */
    border-radius: 60px; /* Apply rounded corners to the image */
}

 /* General hover animation for images */
        img {
            transition: transform 0.3s ease;
        }

        img:hover {
            transform: scale(1.065);
        }


        /* Slide in animation */
        @keyframes slideIn {
            0% {
                transform: translateY(50px);
                opacity: 0;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* Modal content slide up animation */
        @keyframes slideUp {
            0% {
                transform: translateY(50px);
                opacity: 0;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* Fade-in effect */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
       

.input-field {
    width: 75px; /* Set the desired width */
    padding: 5px; /* Add some padding for better aesthetics */
    font-size: 14px; /* Adjust font size if necessary */
    border: 1px solid #ccc; /* Add a border for visibility */
    border-radius: 4px; /* Slightly rounded corners */
}
/* CSS for modal like counter */
.like-count-modal {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 16px;
    color: #ff4d4d; /* Red color for the heart */
    background-color: rgba(255, 255, 255, 0.8);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
        z-index: 21; /* Ensure it stays on top */
    transition: color 0.3s ease, background-color 0.3s ease;
}

.like-count-modal:hover {
    color: #222222;
    background-color: rgba(255, 99, 71, 0.9);
}


    </style>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap">
     <script src="../src/snapshotcsv.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <script src="../src/access2.js"></script>
      <script src="../../../pds/likes.js"></script>
</head>
<body>
<!-- Replace the existing header section with this -->
<header>
    <input type="text" id="tokenIdInput" class="input-field" placeholder="Enter Token ID"  />
    <button onclick="fetchNFTs()">Search</button>
    
    <button onclick="takeSnapshot()">Snapshot</button>
    <input type="text" id="serialNumberInput" class="input-field" placeholder="Filter serial" oninput="applyFiltersDebounced()" hidden/>
    
    <!-- Sorting & Info -->
    <button onclick="sortNFTsBySerial()">Sort #</button>
    
   <div style="margin-top: 4px;">
        <span id="floorPriceDisplay" style="margin-right: 20px;"></span> <!-- Display floor price here -->
        <span id="ownerCountDisplay" style="margin-right: 20px;"></span> <!-- Display owner count here -->
        <span id="nftCountDisplay"></span> <!-- Display NFT count here -->
    </div>
    <div style="margin-top: 2px; margin-bottom: 4px;">        
<span id="collectionInfoDisplay"></span>
    </div>
     
</header>


  <div> &nbsp; </div>
  <div> &nbsp; </div>
  <div id="spinner" style="display: none;">
    <img src="../../img/load.gif" alt="Loading..." />
  </div>
  <div class="nft-container" id="nftContainer"></div>
  <div class="pagination" id="pagination"></div>
  
  <div id="nftModal" class="modal">
    <div class="modal-content">
      <span class="close" style="cursor: pointer; font-size: 24px; color: #aaa;">&times;</span>
      <h2 id="nftName" style="margin: 0; padding: 10px 0; border-bottom: 2px solid #4CAF50;" hidden></h2>
      <div style="text-align: center; margin: 10px 0;">
        <img id="nftImage" src="" alt="NFT Image" style="max-width: 100%; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
        <button id="toggleImage" hidden>Switch Image</button>
      </div>
   

      <div>
        <p id="nftDescription"></p>
        <p><strong>Creator:</strong> <span id="nftCreator"></span></p>
        <p id="tokenId" style="font-weight: bold;"></p> <!-- Token ID -->
        <p id="nftOwner" style="font-weight: bold;"></p> <!-- Owner Wallet ID -->
        <p id="serialNumber" style="font-weight: bold;"></p> <!-- Serial Number --> 
        <p id="nftRarity" style="font-weight: bold;" hidden></p> <!-- Rarity -->
      </div>
  	<div id="likeCountModal" class="like-count-modal">💜 <span id="likeCountModalValue">0</span></div>
      <h3 style="margin-top: 5px; border-bottom: 1px solid #000;">Properties:</h3>
      <ul id="nftProperties" style="padding-left: 10px;"></ul>

      <h3 style="border-bottom: 1px solid #000;">Attributes:</h3>
      <ul id="nftTraits" style="padding-left: 10px;"></ul>
    </div>
  </div>

</body>


 <script>
    const baseUrls = [
        "https://dweb.link/ipfs/",
        "https://w3s.link/ipfs/"
    ];

    let currentUrlIndex = 0;
    const itemsPerPage = 24; // Number of NFTs per page
    let currentPage = 1;
    let allNFTs = []; // Store all fetched NFTs

    // Default token ID
    const defaultTokenId = "0.0.1408516";

    let useRandomBaseUrl = false;  // Flag for random URL selection
    
      function openRarityPage() {
      window.open('./pds/rare.html', '_blank');
    }
    
    function openRoyaltyPage() {
      window.open('./app/tools/pdst/index.html', '_blank');
    }


function getNextBaseUrl() {
    if (useRandomBaseUrl) {
        return baseUrls[Math.floor(Math.random() * baseUrls.length)];
    }
    const url = baseUrls[currentUrlIndex];
    currentUrlIndex = (currentUrlIndex + 1) % baseUrls.length;
    return url;
}

// Add this function at the top of your <script> section
function decodeBase64ToUtf8(base64) {
    const text = atob(base64);
    const bytes = new Uint8Array(text.split('').map(char => char.charCodeAt(0)));
    return new TextDecoder().decode(bytes);
}

  async function fetchNFTsFromTokenId(tokenId) {
    const nftData = [];
    let url = `https://mainnet.mirrornode.hedera.com/api/v1/tokens/${tokenId}/nfts`;

    while (url) {
        try {
            const response = await fetch(url);
            const data = await response.json();

            if (data && Array.isArray(data.nfts)) {
                // Loop through each NFT and push it with account_id
                for (const nft of data.nfts) {
                    const nftWithOwner = {
                        ...nft,
                        account_id: nft.account_id // Make sure to access account_id
                    };
                    nftData.push(nftWithOwner);
                }
            } else {
                console.error("Invalid data format received from the API");
                break;
            }

            url = data.links && data.links.next ? `https://mainnet.mirrornode.hedera.com${data.links.next}` : null;
        } catch (error) {
            console.error("Failed to fetch NFT data", error);
            break;
        }
    }

    return nftData;
}

async function fetchTokenInfo() {
    const tokenId = document.getElementById('tokenIdInput').value.trim();
    const apiUrl = `https://mainnet.mirrornode.hedera.com/api/v1/tokens/${tokenId}`;

    try {
        const response = await fetch(apiUrl);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        const collectionInfo = `${data.name}`;
        
        document.getElementById("collectionInfoDisplay").innerText = collectionInfo;
    } catch (error) {
        console.error('Error fetching token info:', error);
        document.getElementById("collectionInfoDisplay").innerText = 'Collection info unavailable';
    }
}


    async function fetchNFTs() {
    const tokenId = document.getElementById('tokenIdInput').value.trim();

    if (!tokenId) {
        alert("Please enter a valid Token ID");
        return;
    }

    document.getElementById('spinner').style.display = 'block';
    document.getElementById('nftContainer').innerHTML = '';  
    document.getElementById('pagination').innerHTML = '';

    try {
        allNFTs = await fetchNFTsFromTokenId(tokenId);
        currentPage = 1;
        renderNFTs();
        renderPagination();
        fetchFloorPrice();  // Refresh market data
        fetchOwnerAndNFTCounts();
        fetchTokenInfo(); // New function call
    } catch (error) {
        console.error("Failed to fetch NFTs:", error);
        alert("Failed to fetch NFTs. Please check the Token ID and try again.");
    } finally {
        document.getElementById('spinner').style.display = 'none';
    }
}

// Update window.onload to remove the automatic fetch
window.onload = async function() {
    try {
        rarityData = await loadRarityData();
        rarityDataLoaded = true;
    } catch (error) {
        console.error('Failed to load rarity data:', error);
    }
};

function renderPagination(filteredNFTs = allNFTs) {
    const paginationContainer = document.getElementById('pagination');
    paginationContainer.innerHTML = '';

    const totalPages = Math.ceil(filteredNFTs.length / itemsPerPage);

    if (totalPages <= 1) return;

    for (let i = 1; i <= totalPages; i++) {
        const button = document.createElement('button');
        button.textContent = i;
        button.disabled = i === currentPage;
        button.addEventListener('click', () => {
            currentPage = i;
            renderNFTs(filteredNFTs);
            renderPagination(filteredNFTs);
        });
        paginationContainer.appendChild(button);
    }
}


   async function fetchMetadataWithRetry(metadataUrl, retries = 3) {
    let delay = 1000;
    for (let i = 0; i < retries; i++) {
        try {
            const response = await fetch(metadataUrl);
            if (response.ok) return await response.json();
            if (response.status === 429) {
                console.warn(`429 Error. Retrying in ${delay / 1000} seconds...`);
                await new Promise(resolve => setTimeout(resolve, delay));
                delay *= 2;  // Exponential backoff
            }
        } catch (error) {
            console.error(`Fetch failed: ${error}`);
        }
    }
    throw new Error("Exceeded max retries");
}

// Sort NFTs by serial number
function sortNFTsBySerial() {
    allNFTs.sort((a, b) => a.serial_number - b.serial_number);
    renderNFTs();
    renderPagination();
}

let rarityData = []; // Declare globally
let rarityDataLoaded = false; // Flag to track if rarityData is loaded

// Load rarity data once at page load
async function loadRarityDataOnce() {
    if (!rarityDataLoaded) {
        try {
            rarityData = await loadRarityData();
            rarityDataLoaded = true;
            console.log('Rarity data loaded:', rarityData);
        } catch (error) {
            console.error('Failed to load rarity data:', error);
        }
    }
}

// Sort NFTs by rarity with async check for rarity data
async function sortNFTsByRarity() {
    // Ensure rarity data is loaded
    await loadRarityDataOnce();

    // Sort NFTs by rarity if rarityData is available
    if (rarityDataLoaded) {
        allNFTs.sort((a, b) => {
            const rarityA = rarityData.find(item => item.Serial == a.serial_number)?.Rank || Infinity;
            const rarityB = rarityData.find(item => item.Serial == b.serial_number)?.Rank || Infinity;
            return rarityA - rarityB;
        });
        renderNFTs();
        renderPagination();
    }
}


 // Updated renderNFTs function to sort by serial number and fetch global like counts reliably
async function renderNFTs(nftData = allNFTs) {
    // Sort nftData by serial number in ascending order
    nftData.sort((a, b) => a.serial_number - b.serial_number);

    const nftContainer = document.getElementById('nftContainer');
    nftContainer.innerHTML = '';

    const start = (currentPage - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    const nftDataToDisplay = nftData.slice(start, end);

    if (nftDataToDisplay.length === 0) {
        nftContainer.innerHTML = '<p>No NFTs found for this search.</p>';
        return;
    }

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;  // Lazy load the image
                observer.unobserve(img);  // Stop observing once loaded
            }
        });
    }, { threshold: 0.1 });

    // Fetch rarity data
    const rarityData = await loadRarityData();

    const fetchMetadataPromises = nftDataToDisplay.map(async (nft) => {
        const tokenID = nft.token_id;
        const serialNumber = nft.serial_number;
        const nftName = `NFT_${tokenID}_SERIAL_${serialNumber}`;
        const nftKey = `${tokenID}-${serialNumber}`;

        let metadataUri;
        try {
            metadataUri = decodeBase64ToUtf8(nft.metadata);
        } catch (error) {
            console.error(`Failed to decode metadata for NFT ${nftName}:`, error);
            return;
        }

        if (!metadataUri.startsWith('ipfs://')) {
            console.error(`Invalid metadata URL for NFT ${nftName}:`, metadataUri);
            return;
        }

        let formattedUri = metadataUri.replace('ipfs://', getNextBaseUrl());

        if (!formattedUri.endsWith('metadata.json')) {
            formattedUri += formattedUri.endsWith('/') ? 'metadata.json' : '/metadata.json';
        }

        const tryFetchMetadata = async (uri) => {
            try {
                return await fetchMetadataWithRetry(uri);
            } catch (error) {
                console.error(`Failed to fetch metadata from ${uri}:`, error);
                return null; 
            }
        };

        let metadata = await tryFetchMetadata(formattedUri);
        if (!metadata) {
            formattedUri = formattedUri.replace('metadata.json', '');
            metadata = await tryFetchMetadata(formattedUri);
        }

        if (metadata) {
            const imageUrl = metadata.image.replace('ipfs://', getNextBaseUrl()) + '?w=111&h=111';
            const nftItem = document.createElement('div');
            nftItem.classList.add('nft-item');

            // Get the rarity rank from the loaded rarity data
            const rarityInfo = rarityData.find(item => item.Serial == serialNumber);
            const rarityRank = rarityInfo ? rarityInfo.Rank : 'N/A';

            // Fetch initial like count from Cloudflare Worker
            let likes = 0;
            try {
                const likeResponse = await fetch(`https://nft-likes-counter.houdinigfx8806.workers.dev?nftKey=${nftKey}`);
                if (likeResponse.ok) {
                    const likeData = await likeResponse.json();
                    likes = likeData.likes ?? 0; // Default to 0 if likes data is missing
                } else {
                    console.warn(`Failed to fetch global like count for ${nftKey}`);
                }
            } catch (error) {
                console.error(`Error fetching global like count for ${nftKey}:`, error);
            }

            nftItem.innerHTML = `
                <div class="nft-wrapper">
                    <div class="like-count" data-nft-key="${nftKey}">💜 ${likes}</div>
                    <img data-src="${imageUrl}" alt="NFT Image">
                    <div class="serial-number">#${serialNumber}</div>
                    <div class="rarity-rank" hidden>♛${rarityRank}</div>
                </div>
            `;

            nftContainer.appendChild(nftItem);
            observer.observe(nftItem.querySelector('img'));

            // Add event listener for like button
            nftItem.querySelector('.like-count').addEventListener('click', async (event) => {
                event.stopPropagation(); // Prevent modal from opening

                const likeElement = event.target;
                const nftKey = likeElement.dataset.nftKey;

                // Increment like count on Cloudflare
                try {
                    const response = await fetch(`https://nft-likes-counter.houdinigfx8806.workers.dev?nftKey=${nftKey}`, {
                        method: 'POST'
                    });
                    if (response.ok) {
                        const data = await response.json();
                        likeElement.innerHTML = `💜 ${data.likes}`;
                    } else {
                        console.error(`Failed to increment like count for ${nftKey}`);
                    }
                } catch (error) {
                    console.error(`Error incrementing like count for ${nftKey}:`, error);
                }
            });

            nftItem.querySelector('.nft-wrapper').addEventListener('click', () => {
                showModal(metadata, imageUrl, nftName, nft.account_id);
            });
        } else {
            console.warn(`No valid metadata found for NFT ${nftName}.`);
        }
    });

    await Promise.all(fetchMetadataPromises);
    console.log('All metadata fetched and rendered.');
}


// Ensure rarity data is loaded once when the page loads
window.onload = async function() {
    try {
        rarityData = await loadRarityData(); // Load rarity data at page load
        rarityDataLoaded = true; // Set the flag to true once data is loaded
        console.log('Rarity data loaded:', rarityData);

        // Render NFTs sorted by serial number on page load
        renderNFTs();
    } catch (error) {
        console.error('Failed to load rarity data:', error);
    }
};


// Disable right-click on images
document.addEventListener('contextmenu', (e) => {
    if (e.target.tagName === 'IMG') {
        e.preventDefault(); // Prevent the context menu for images
    }
});
   async function fetchMetadataWithRetry(metadataUrl, retries = 3) {
    let delay = 1000;
    for (let i = 0; i < retries; i++) {
        try {
            const response = await fetch(metadataUrl);
            if (response.ok) return await response.json();
            if (response.status === 429) {
                console.warn(`429 Error. Retrying in ${delay / 1000} seconds...`);
                await new Promise(resolve => setTimeout(resolve, delay));
                delay *= 2;  // Exponential backoff
            }
        } catch (error) {
            console.error(`Fetch failed: ${error}`);
        }
    }
    throw new Error("Exceeded max retries");
}

async function handleRequest(request) {
    const { searchParams } = new URL(request.url);
    const nftKey = searchParams.get('nftKey');

    // Fetch or manipulate likes data here (this part will depend on your specific logic)
    const likes = await getLikes(nftKey); // Replace with your actual logic

    // Create the response
    const response = new Response(JSON.stringify({ likes }), {
        headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*', // Allow all origins or specify your domain
            'Access-Control-Allow-Methods': 'GET, POST, OPTIONS', // Include OPTIONS for preflight requests
            'Access-Control-Allow-Headers': 'Content-Type', // Specify allowed headers
        }
    });

    return response;
}

addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request));
});


let currentImageIndex = 0; // To keep track of which image is currently displayed

async function loadRarityData() {
    const response = await fetch('https://pleasedontstare.xyz/pds/pdsnftrare.json'); // Replace with the actual path to your .json file
    return await response.json();
}

async function loadTraitRarityData() {
    const response = await fetch('https://pleasedontstare.xyz/pds/pdstraitsrare.json'); // Replace with the actual path to your .json file
    return await response.json();
}

async function showModal(metadata, imageUrl, nftName, ownerId) {
    const modal = document.getElementById('nftModal');
    modal.style.display = 'block';
    document.getElementById('nftName').textContent = nftName;

    // Extract Token ID and Serial Number from the NFT name
    const parts = nftName.split('_');
    const tokenId = parts[1];
    const serialNumber = parts[3];

    document.getElementById('tokenId').textContent = `Token ID: ${tokenId}`;
    document.getElementById('serialNumber').textContent = `Serial: ${serialNumber}`;
    document.getElementById('nftOwner').textContent = `Owner ID: ${ownerId}`;

    const imageUrls = [
        metadata.image.replace('ipfs://', getNextBaseUrl()) + '?w=720&h=720'
       
    ];

    document.getElementById('nftImage').src = imageUrls[currentImageIndex];
    document.getElementById('nftDescription').textContent = metadata.description || 'No description provided';
    document.getElementById('nftCreator').textContent = metadata.creator || 'Unknown creator';

    // Display properties
    const propertiesList = document.getElementById('nftProperties');
    propertiesList.innerHTML = '';
    for (const [key, value] of Object.entries(metadata.properties || {})) {
        const li = document.createElement('li');
        li.textContent = `${key}: ${value}`;
        propertiesList.appendChild(li);
    }

   // Display attributes with ranks
    const traitsList = document.getElementById('nftTraits');
    traitsList.innerHTML = '';

    const traitRarityData = await loadTraitRarityData();

    // Collect all attributes and handle empty fields
    const attributes = metadata.attributes || [];
    for (const trait of attributes) {
        const li = document.createElement('li');

        const traitType = trait.trait_type;
        const traitValue = trait.value || 'none';

        // Check if the trait exists in the rarity data
        const rarityInfo = traitRarityData[`Attributes: ${traitType}`]?.[traitValue];
        if (rarityInfo) {
            const rarityPercentage = (parseFloat(rarityInfo.rarity) * 100).toFixed(2);
            li.innerHTML = `${traitType}: ${traitValue} <span class="rarity-text">(Rank: ${rarityInfo.rank}, Rarity: ${rarityPercentage}%)</span>`;
        } else {
            li.innerHTML = `${traitType}: ${traitValue} <span class="rarity-text"></span>`;
        }
        traitsList.appendChild(li);
    }

    // Load general rarity data from pdsnftrare.json
    const rarityData = await loadRarityData();
    const rarityInfo = rarityData.find(item => item.Serial == serialNumber);

    if (rarityInfo) {
        document.getElementById('nftRarity').textContent = `PDS Rarity Rank: ${rarityInfo.Rank} (Score: ${rarityInfo.RarityScore})`;
    } else {
        document.getElementById('nftRarity').textContent = 'PDS Rarity Rank: Not available';
    }

    // Load like count for modal
    const likeCount = await fetchLikeCount(tokenId, serialNumber); // Implement this function to get count from your database
    document.getElementById('likeCountModalValue').textContent = likeCount;

    // Like button handler in modal
    document.getElementById('likeCountModal').onclick = async () => {
        const newLikeCount = await incrementLikeCount(tokenId, serialNumber); // Implement this function for your database
        document.getElementById('likeCountModalValue').textContent = newLikeCount;
    };

    // Add event listener for toggling images
    document.getElementById('toggleImage').onclick = () => toggleImage(imageUrls);
}

// Updated Helper function to fetch like count from Cloudflare Worker with cache busting
async function fetchLikeCount(tokenId, serialNumber) {
    const nftKey = `${tokenId}-${serialNumber}`;
    const response = await fetch(`https://nft-likes-counter.houdinigfx8806.workers.dev?nftKey=${nftKey}&_=${new Date().getTime()}`);
    const data = await response.json();
    return data.likes || 0;
}

// Updated Helper function to increment like count via Cloudflare Worker with cache busting
async function incrementLikeCount(tokenId, serialNumber) {
    const nftKey = `${tokenId}-${serialNumber}`;
    const response = await fetch(`https://nft-likes-counter.houdinigfx8806.workers.dev?nftKey=${nftKey}&_=${new Date().getTime()}`, {
        method: 'POST'
    });
    const data = await response.json();
    return data.likes;
}


function toggleImage(imageUrls) {
    const spinner = document.getElementById('spinner');
    const nftImage = document.getElementById('nftImage');

    // Show the spinner before loading the new image
    spinner.style.display = 'block';

    // Toggle the image between the two URLs
    currentImageIndex = (currentImageIndex + 1) % imageUrls.length;

    // Create a new Image object to preload the image
    const newImage = new Image();
    newImage.src = imageUrls[currentImageIndex];

    // When the new image is loaded, update the src and hide the spinner
    newImage.onload = function() {
        nftImage.src = newImage.src;
        spinner.style.display = 'none';
    };
}

    function hideModal() {
        const modal = document.getElementById('nftModal');
        modal.style.display = 'none';
    }

    window.onload = fetchNFTs;

    document.querySelector('.close').addEventListener('click', hideModal);
    window.onclick = function (event) {
        const modal = document.getElementById('nftModal');
        if (event.target === modal) {
            hideModal();
        }
    };

    // New function to fetch metadata for all NFTs and store it with each NFT
async function fetchAllMetadata() {
    for (let nft of allNFTs) {
        try {
            const metadataUri = decodeBase64ToUtf8(nft.metadata);
            if (metadataUri.startsWith('ipfs://')) {
                const formattedUri = metadataUri.replace('ipfs://', getNextBaseUrl());
                nft.fullMetadata = await fetchMetadataWithRetry(formattedUri);
            }
        } catch (error) {
            console.error(`Failed to fetch metadata for NFT ${nft.serial_number}:`, error);
        }
    }
}

// Function to fetch the floor price
// Function to fetch the floor price
async function fetchFloorPrice() {
    const tokenId = document.getElementById('tokenIdInput').value.trim();
    const apiUrl = `https://api.sentx.io/v1/public/market/floor?apikey=5c7976c6-c76d-4648-a68d-6f8203f3b210&token=${tokenId}`;

    try {
        const response = await fetch(apiUrl);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        const floorPrice = data.floor;

        if (floorPrice !== undefined) {
            document.getElementById("floorPriceDisplay").innerText = `Floor(sX): ${floorPrice} HBAR`;
        } else {
            document.getElementById("floorPriceDisplay").innerText = 'SentX Floor Price not available';
        }
    } catch (error) {
        console.error('Error fetching floor price:', error);
        document.getElementById("floorPriceDisplay").innerText = 'Failed to fetch floor price';
    }
}


// Function to fetch owner count and NFT count
async function fetchOwnerAndNFTCounts() {
    const tokenId = document.getElementById('tokenIdInput').value.trim();
    const apiUrl = `https://api.sentx.io/v1/public/token/owners?apikey=5c7976c6-c76d-4648-a68d-6f8203f3b210&token=${tokenId}&amount=100`;

    try {
        const response = await fetch(apiUrl);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        const ownerCount = data.ownerCount;
        const nftCount = data.nftCount;

        if (ownerCount !== undefined && nftCount !== undefined) {
            document.getElementById("ownerCountDisplay").innerText = `Owners: ${ownerCount}`;
            document.getElementById("nftCountDisplay").innerText = `NFT: ${nftCount}`;
        } else {
            document.getElementById("ownerCountDisplay").innerText = 'Owner Count not available';
            document.getElementById("nftCountDisplay").innerText = 'NFT Count not available';
        }
    } catch (error) {
        console.error('Error fetching owner and NFT counts:', error);
        document.getElementById("ownerCountDisplay").innerText = 'Failed to fetch owner count';
        document.getElementById("nftCountDisplay").innerText = 'Failed to fetch NFT count';
    }
}

// Call the function when the page loads or after fetching the floor price
document.addEventListener("DOMContentLoaded", () => {
    fetchFloorPrice(); // Fetch floor price on page load
    fetchOwnerAndNFTCounts(); // Fetch owner and NFT counts
});


// Call the function when the page loads or when the button is clicked
document.addEventListener("DOMContentLoaded", fetchFloorPrice); // Fetch on page load
	

  function takeSnapshot() {
    const tokenId = document.getElementById('tokenIdInput').value.trim();

    if (tokenId === "") {
        console.log("ERROR: Please enter a Token ID in the search field.");
        return;
    }

    getNftOwners(null, null, tokenId);
}

// Update the DOMContentLoaded event listener
document.addEventListener("DOMContentLoaded", () => {
    // No automatic fetch on load now - wait for user input
    document.getElementById('tokenIdInput').value = '0.0.1408516'; // Set default value
});

// Debounce function to limit the frequency of filtering calls
function debounce(func, delay) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), delay);
    };
}

// Optimized applyFilters function
const applyFiltersDebounced = debounce(async function applyFilters() {
    const serialNumberInput = document.getElementById('serialNumberInput').value.trim();
    const attributeInput = document.getElementById('attributeInput').value.trim().toLowerCase();
    
    // Show spinner while filtering
    document.getElementById('spinner').style.display = 'block';

    let filteredNFTs = allNFTs;

    // Ensure all metadata is loaded before filtering
    if (!allNFTs[0]?.fullMetadata) {
        await fetchAllMetadata(); // Fetch metadata if not loaded
    }

    // Filter by serial number
    if (serialNumberInput) {
        filteredNFTs = filteredNFTs.filter(nft => nft.serial_number.toString() === serialNumberInput);
    }

    // Filter by attributes or properties
    if (attributeInput) {
        filteredNFTs = filteredNFTs.filter(nft => {
            const metadata = nft.fullMetadata || {};

            // Check properties for matching attribute
            const propertyMatches = Object.values(metadata.properties || {}).some(value =>
                value.toString().toLowerCase().includes(attributeInput)
            );

            // Check traits for matching attribute
            const attributeMatches = (metadata.attributes || []).some(attribute =>
                (attribute.trait_type && attribute.trait_type.toLowerCase().includes(attributeInput)) ||
                (attribute.value && attribute.value.toString().toLowerCase().includes(attributeInput))
            );

            return propertyMatches || attributeMatches;
        });
    }

    // Render the filtered NFTs or display a message if no results are found
    if (filteredNFTs.length > 0) {
        renderNFTs(filteredNFTs);
        renderPagination(filteredNFTs); // Update pagination based on filtered results
    } else {
        document.getElementById('nftContainer').innerHTML = '<p>No NFTs found matching the criteria.</p>';
    }

    // Hide spinner after filtering
    document.getElementById('spinner').style.display = 'none';
}, 300);  // Debounced delay of 300ms

// Add event listener to the serial number input field
document.getElementById('serialNumberInput').addEventListener('input', applyFiltersDebounced);


const nftItem = document.createElement('div');
nftItem.classList.add('nft-item');

nftContainer.appendChild(nftItem);

// Add the event listener here, after the element is created
nftItem.addEventListener('click', () => showModal(metadata, imageUrl, nftName, nft.account_id));


// Define the color scale
const colorScale = [
    '#00FFFF', '#FFC0CB', '#ADD8E6', '#FF00FF', '#E6E6FA', '#008080', '#4B0082', '#DA70D6', '#87CEEB', '#EE82EE',
    '#FA8072', '#00FFFF', '#FF00FF', '#DDA0DD', '#40E0D0', '#8A2BE2', '#9932CC', '#00CED1', '#9370DB', '#DB7093',
    '#5F9EA0', '#6495ED'
];

// Function to generate a random color from the color scale
function getRandomColor() {
    return colorScale[Math.floor(Math.random() * colorScale.length)];
}

// Apply random color on mouseover for buttons, links, table cells, and DataTable cells
document.querySelectorAll('button, a, td, th, .tab-link').forEach(element => {
    element.addEventListener('mouseover', () => {
        const randomColor = getRandomColor();
        element.style.backgroundColor = randomColor;
        element.style.color = '#fff'; // Change text color to white for better contrast
    });

    // Reset the color on mouseout
    element.addEventListener('mouseout', () => {
        element.style.backgroundColor = '';
        element.style.color = '';
    });
});

</script>


</body>
</html>