// Dexscreener API - Modified for TON
const chainSelect = document.getElementById("chainSelect");

async function fetchMarketData(chain = "ton") { // Default changed to "ton"
  const marketContainer = document.getElementById("marketData");
  marketContainer.innerHTML = "Loading market data...";

  try {
    const res = await fetch(`https://api.dexscreener.com/latest/dex/search/?q=${chain}`);
    const data = await res.json();
    
    // Filter untuk pairs yang berkaitan dengan TON
    const tonPairs = data.pairs.filter(p => 
      p.chainId.toLowerCase().includes("ton") || 
      p.baseToken.symbol.toLowerCase().includes("ton") ||
      p.quoteToken.symbol.toLowerCase().includes("ton")
    ).slice(0, 10);

    marketContainer.innerHTML = "";
    
    if (tonPairs.length === 0) {
      marketContainer.innerHTML = "<p>No TON market data available</p>";
      return;
    }

    tonPairs.forEach((p) => {
      const price = p.priceUsd ? parseFloat(p.priceUsd).toFixed(4) : "-";
      const change = p.priceChange?.h24 ?? 0;
      const volume = p.volume?.h24 ?? 0;

      const div = document.createElement("div");
      div.innerHTML = `
        <h3>${p.baseToken.symbol}/${p.quoteToken.symbol}</h3>
        <p class="price">$${price}</p>
        <p class="change" style="color:${
          change >= 0 ? "#00ff9d" : "#ff4b4b"
        }">${change.toFixed(2)}% (24h)</p>
        <p style="font-size:0.8rem;color:#9fa8c6;">Vol: $${(
          volume / 1e6
        ).toFixed(2)}M</p>
        <p style="font-size:0.75rem;color:#7280a7;">${p.chainId.toUpperCase()}</p>
      `;
      div.style.animation = "fadeIn 0.6s ease";
      marketContainer.appendChild(div);
    });
  } catch (err) {
    console.error(err);
    marketContainer.innerText = "Failed to load market data.";
  }
}

// Event listener
chainSelect.addEventListener("change", (e) => {
  fetchMarketData(e.target.value);
});

// Initialize with TON
fetchMarketData("ton");
setInterval(() => fetchMarketData(chainSelect.value), 30000);