import { getItem, getArtistAlbums } from '../embyApi.js';
import { tileHtml, escapeHtml } from '../tiles.js';

/** Route `/artist/:id` - one artist's albums, reached from a music
 *  library's top-level grid (see library.js) via a MusicArtist tile's
 *  "Voir les albums" link (tiles.js's DRILL_DOWN table). Structurally the
 *  same "detail header + grid" shape as series.js, just one level up the
 *  music hierarchy (Artist -> Album, not Series -> Season/Episode) and
 *  with no per-item action beyond drilling further into an album (an
 *  artist has nothing itself to start a party from). */
export async function renderArtist(root, params) {
  const artistId = params.id;
  root.innerHTML = '<p class="hint">Chargement...</p>';

  let artist;
  let albums;
  try {
    [artist, albums] = await Promise.all([getItem(artistId), getArtistAlbums(artistId)]);
  } catch (err) {
    root.innerHTML = '<p class="error">Impossible de charger cet artiste.</p>';
    return;
  }

  root.innerHTML = `
    <button class="linklike" id="back">&larr; Retour</button>
    <div class="pageHeader"><h1>${escapeHtml(artist.name)}</h1></div>
    <div id="grid" class="grid"></div>`;

  root.querySelector('#back').addEventListener('click', () => history.back());

  const grid = root.querySelector('#grid');
  grid.innerHTML = albums.length
    ? albums.map(tileHtml).join('')
    : '<p class="hint">Aucun album trouvé pour cet artiste.</p>';
}