import html from './Artist.html';
import { getArtistAlbums, getItem } from '../../api/embyApi';
import type { RouteParams } from '../../router';
import { tileHtml, wireSearchFilter } from '../../tiles';

/** Route `/artist/:id` - one artist's albums, reached from a music
 *  library's top-level grid (see views/library) via a MusicArtist tile's
 *  "Voir les albums" link (tiles.ts's DRILL_DOWN table). Structurally the
 *  same "detail header + grid" shape as views/series, 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: HTMLElement, params: RouteParams): Promise<void> {
  const artistId = params.id as string;
  root.innerHTML = '<p class="hint">Chargement...</p>';

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

  root.innerHTML = html;
  root.querySelector('h1')!.textContent = artist.name;
  root.querySelector('#back')!.addEventListener('click', () => history.back());

  const grid = root.querySelector('#grid')!;
  if (!albums.length) {
    grid.innerHTML = '<p class="hint">Aucun album trouvé pour cet artiste.</p>';
    root.querySelector('#searchInput')!.remove();
    return;
  }
  grid.innerHTML = albums.map(tileHtml).join('');
  wireSearchFilter(root.querySelector('#searchInput') as HTMLInputElement, root, '.tile');
}