import { searchItems, auth, logout } from '../embyApi.js';
import { navigate } from '../router.js';

export function renderBrowse(root) {
  root.innerHTML = `
    <main class="wrap wide">
      <div class="topbar">
        <h1>Watch Party</h1>
        <button class="linklike" id="logout">Se déconnecter (${escapeHtml(auth.userName || '')})</button>
      </div>
      <input id="search" type="search" placeholder="Cherche un film, une série, un épisode..." autofocus />
      <div id="results" class="grid"></div>
    </main>`;

  root.querySelector('#logout').addEventListener('click', async () => {
    await logout();
    navigate('/login');
  });

  const input = root.querySelector('#search');
  const results = root.querySelector('#results');
  let debounceTimer;

  input.addEventListener('input', () => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(runSearch, 300);
  });

  async function runSearch() {
    const query = input.value;
    if (!query || query.trim().length < 2) {
      results.innerHTML = '';
      return;
    }
    let items;
    try {
      items = await searchItems(query);
    } catch (err) {
      results.innerHTML = '<p class="error">Recherche impossible - le serveur Emby est-il joignable ?</p>';
      return;
    }
    if (!items.length) {
      results.innerHTML = '<p class="hint">Aucun résultat.</p>';
      return;
    }
    results.innerHTML = items.map((item) => `
      <a class="card" href="#/item/${item.id}">
        <img src="${item.imageUrl}" alt="" loading="lazy" />
        <span>${escapeHtml(item.name)}${item.year ? ' (' + item.year + ')' : ''}</span>
      </a>
    `).join('');
  }
}

function escapeHtml(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}