const tbody = document.getElementById("tbody");
const status = document.getElementById("status");
const search = document.getElementById("search");
const refresh = document.getElementById("refresh");
let coins = [];

async function load() {
  status.textContent = "Loading...";
  try {
    const res = await fetch("https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=25&page=1");
    if (!res.ok) throw new Error("Failed to fetch");
    coins = await res.json();
    render(coins);
    status.textContent = "";
  } catch (e) { status.textContent = e.message; }
}

function render(list) {
  tbody.innerHTML = list.map((c, i) => `
    <tr>
      <td>${i+1}</td>
      <td><div class="coin"><img src="${c.image}" alt=""><span>${c.name} <small>(${c.symbol.toUpperCase()})</small></span></div></td>
      <td>$${c.current_price.toLocaleString()}</td>
      <td class="${c.price_change_percentage_24h >= 0 ? 'up' : 'down'}">${c.price_change_percentage_24h?.toFixed(2)}%</td>
      <td>$${c.market_cap.toLocaleString()}</td>
    </tr>`).join("");
}

search.addEventListener("input", () => {
  const q = search.value.toLowerCase();
  render(coins.filter(c => c.name.toLowerCase().includes(q) || c.symbol.toLowerCase().includes(q)));
});
refresh.onclick = load;
load();