(function(){
  const list = document.getElementById('list');
  const filter = document.getElementById('filter');

  function render(data){
    const q = (filter.value||'').toLowerCase();
    list.innerHTML = '';
    data.items
      .filter(it => !q || it.name.toLowerCase().includes(q))
      .forEach(it => {
        const a = document.createElement('a');
        a.href = '/' + encodeURIComponent(it.name);
        a.className = 'card';
        a.innerHTML = `
          <div class="row space-between">
            <div>
              <div class="title-strong">${it.name}</div>
              <div class="muted">Zuschauer: ${it.viewers ?? 0}</div>
            </div>
            <div class="pill ${it.live ? 'live':'off'}">${it.live ? 'LIVE' : 'Offline'}</div>
          </div>`;
        list.appendChild(a);
      });
  }

  filter.addEventListener('input', ()=>{/* re-render mit letztem snapshot */}
  );

  let last = {items:[]};
  const es = new EventSource('/api/streams/events', { withCredentials: false });
  es.addEventListener('update', (ev)=>{
    try {
      last = JSON.parse(ev.data);
      render(last);
    } catch(e) { console.warn('sse parse', e); }
  });
  es.onerror = (e)=>console.warn('sse error', e);

  // Optionaler Reload-Button:
  const btn = document.getElementById('reload');
  if (btn) btn.addEventListener('click', ()=>render(last));
})();