const player = document.getElementById('radioPlayer');
const button = document.getElementById('radioButton');
const infoEl = document.getElementById('info');

button.addEventListener('click', () => {
  if (player.paused) {
    player.play();
    button.textContent = 'stop';
  } else {
    player.pause();
    player.currentTime = 0;
    button.textContent = 'play';
  }
});

let spinnerInterval;

function startSpinner() {
  const spinnerChars = ['|', '/', '-', '\\'];
  let i = 0;
  spinnerInterval = setInterval(() => {
    infoEl.textContent = `${spinnerChars[i++ % spinnerChars.length]}`;
  }, 100);
}

function stopSpinner() {
  clearInterval(spinnerInterval);
}

let spinnerHasRun = false;

async function fetchCurrentTrack() {
  if (!spinnerHasRun) {
    startSpinner();
    await new Promise(resolve => setTimeout(resolve, 3000));
  }

  try {
    const response = await fetch('/info');
    if (!response.ok) throw new Error('Network response was not ok');

    const data = await response.json();
    const source = data.icestats.source;

    const title = source.title || 'unknown';
    const listeners = source.listeners || 0;
    const listenerLabel = listeners === 1 ? 'listener' : 'listeners';

    stopSpinner();
    infoEl.textContent = `${title} | ${listeners} ${listenerLabel}`;

    spinnerHasRun = true;

  } catch (error) {
    stopSpinner();
    infoEl.textContent = 'Error loading track info';
    console.error(error);
  }
}

fetchCurrentTrack();
setInterval(fetchCurrentTrack, 10000);