import { getLibraries, getLibraryItems, getArtists } from '../embyApi.js';
import { createParty } from '../party.js';
import { navigate } from '../router.js';
import { tileHtml, wireTileButtons, escapeHtml } from '../tiles.js';

/**
 * Generic "one library" page, reached from the sidebar. What it renders
 * depends entirely on the library's Emby CollectionType:
 *   - movies/tvshows/musicvideos (or anything else playable): a tile grid,
 *     same as the home page's carousels (Series/MusicArtist/MusicAlbum
 *     tiles drill further in instead of starting a party directly - see
 *     tiles.js's DRILL_DOWN table).
 *   - music: a tile grid too, just of artists (Emby's dedicated /Artists
 *     endpoint, not a generic library listing - see
 *     GET /api/catalog/libraries/:id/artists) - Album -> Tracks is one
 *     level further in (artist.js, then album.js).
 */
export async function renderLibrary(root, params) {
  root.innerHTML = '<p class="hint">Chargement...</p>';

  let libraries;
  try {
    libraries = await getLibraries();
  } catch (err) {
    root.innerHTML = '<p class="error">Impossible de charger les bibliothèques.</p>';
    return;
  }

  const library = libraries.find((l) => l.id === params.id);
  if (!library) {
    root.innerHTML = '<p class="error">Bibliothèque introuvable.</p>';
    return;
  }

  root.innerHTML = `
    <div class="pageHeader"><h1>${escapeHtml(library.name)}</h1></div>
    <div id="grid" class="grid"><p class="hint">Chargement...</p></div>`;

  const grid = root.querySelector('#grid');
  let items;
  try {
    items = library.collectionType === 'music'
      ? await getArtists(library.id)
      : await getLibraryItems(library.id);
  } catch (err) {
    grid.innerHTML = '<p class="error">Impossible de charger cette bibliothèque.</p>';
    return;
  }
  if (!items.length) {
    grid.innerHTML = '<p class="hint">Bibliothèque vide.</p>';
    return;
  }

  grid.innerHTML = items.map(tileHtml).join('');
  wireTileButtons(grid, async (itemId) => {
    const party = await createParty(itemId);
    navigate(`/party/${party.partyId}`);
  });
}