'use strict';

// ---------------------------------------------------------------------------
// Radio sidebar (compact player)
// ---------------------------------------------------------------------------

function openRadioSidebar() {
  const stationName = currentStation ? escapeHtml(currentStation.name) : '— kein Sender —';
  const track = currentTrack ? escapeHtml(currentTrack) : '';
  const vol = document.getElementById('volume')?.value ?? 204;

  const rows = [...document.querySelectorAll('#saved-tbody tr[data-id]')];
  const stationsHtml = rows.length
    ? rows.map(r => `<li><button class="btn btn-sm rsb-play-btn" data-url="${escapeHtml(r.dataset.url || '')}" data-name="${escapeHtml(r.dataset.name || '')}">${escapeHtml(r.dataset.name || '')}</button></li>`).join('')
    : `<li class="muted">Keine gespeicherten Sender.</li>`;

  const html = `
    <div class="rsb-nowplaying">
      <div class="rsb-station-name">${stationName}</div>
      ${track ? `<div class="rsb-track muted">${track}</div>` : ''}
    </div>
    <div class="rsb-controls">
      <button class="btn ${isPlaying ? 'playing' : ''}" id="rsb-playstop">${isPlaying ? '⏹ Stopp' : '▶ Abspielen'}</button>
      <label class="rsb-vol">Lautst. <input type="range" id="rsb-volume" min="0" max="255" value="${vol}"></label>
    </div>
    <ul class="rsb-station-list">${stationsHtml}</ul>
  `;

  openSidebar('Radio', html);

  const body = $('sidebar-body');
  body.querySelector('#rsb-playstop').addEventListener('click', togglePlayStop);
  body.querySelector('#rsb-volume').addEventListener('input', function () {
    const v = this.value;
    const mainSlider = document.getElementById('volume');
    const mainNum = document.getElementById('volume-num');
    if (mainSlider) mainSlider.value = v;
    if (mainNum) mainNum.value = v;
    audio.volume = v / 255;
  });
  body.querySelectorAll('.rsb-play-btn').forEach(btn => {
    btn.addEventListener('click', () => playStation(btn.dataset.url, btn.dataset.name, null));
  });
}