const $ = (sel) => document.querySelector(sel);
const $$ = (sel) => Array.from(document.querySelectorAll(sel));

const playerInput = $('#player');
const resultsEl = $('#results');
const searchBtn = $('#searchBtn');

async function fetchJSON(url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`Request failed ${res.status}`);
  return res.json();
}


async function search() {
  resultsEl.innerHTML = '';
  const player = playerInput.value.trim();
  if (!player) {
    resultsEl.innerHTML = `<div class="empty">Enter a player name to search.</div>`;
    return;
  }

  const params = new URLSearchParams();
  params.set('player', player);

  try {
    const data = await fetchJSON(`/api/ebay/search?${params.toString()}`);
    renderResults(data.results || []);
  } catch (e) {
    console.error(e);
    resultsEl.innerHTML = `<div class="empty">Something went wrong. Try again.</div>`;
  }
}

function renderResults(items) {
  if (!items.length) {
    resultsEl.innerHTML = `<div class="empty">No cards found. Try adjusting filters or the name.</div>`;
    return;
  }

  const tpl = document.getElementById('card-template');
  items.forEach(c => {
    const node = tpl.content.firstElementChild.cloneNode(true);
    const img = node.querySelector('.card-img');
    img.src = c.image || '';
    img.alt = c.title || 'Listing image';
    const title = node.querySelector('.player');
    title.textContent = c.title || 'Sold listing';
    const price = (c.price ? `${c.currency || ''} ${Number(c.price).toFixed(2)}` : '');
    const ended = (c.ended ? new Date(c.ended).toLocaleString() : '');
    node.querySelector('.secondary').textContent = [price, ended].filter(Boolean).join(' • ');
    // Wrap card with link to eBay
    node.addEventListener('click', () => {
      if (c.url) window.open(c.url, '_blank');
    });
    resultsEl.appendChild(node);
  });
}

searchBtn.addEventListener('click', () => {
  search();
});

// Press Enter to search
playerInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();
    search();
  }
});