import { getItem, getAlbumTracks } from '../embyApi.js';
import { createParty } from '../party.js';
import { navigate } from '../router.js';
import { escapeHtml, formatDuration } from '../tiles.js';

const TICKS_PER_SECOND = 10000000; // Emby/.NET convention: 1 tick = 100ns, same as everywhere else this app touches durations/positions

/** Route `/album/:id` - the last level of the music hierarchy: one album's
 *  tracks, each startable as its own listen party (mirrors series.js's
 *  episode list, but flat - an album has no further sub-level the way a
 *  series' seasons do). */
export async function renderAlbum(root, params) {
  const albumId = params.id;
  root.innerHTML = '<p class="hint">Chargement...</p>';

  let album;
  let tracks;
  try {
    [album, tracks] = await Promise.all([getItem(albumId), getAlbumTracks(albumId)]);
  } catch (err) {
    root.innerHTML = '<p class="error">Impossible de charger cet album.</p>';
    return;
  }

  root.innerHTML = `
    <button class="linklike" id="back">&larr; Retour</button>
    <div class="albumHeader">
      <img class="albumCover" src="${album.imageUrl}" alt="" loading="lazy" onerror="this.classList.add('noImage')" />
      <div class="seriesInfo">
        <h1>${escapeHtml(album.name)}${album.year ? ` <span class="seriesYear">(${album.year})</span>` : ''}</h1>
        ${album.artistName ? `<p class="hint">${escapeHtml(album.artistName)}</p>` : ''}
        <a class="linklike" href="${album.embyUrl}" target="_blank" rel="noopener">Voir sur Emby</a>
      </div>
    </div>
    <div id="trackList" class="trackList"></div>`;

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

  const listEl = root.querySelector('#trackList');
  if (!tracks.length) {
    listEl.innerHTML = '<p class="hint">Aucun morceau dans cet album.</p>';
    return;
  }

  listEl.innerHTML = tracks.map((t) => `
    <div class="trackRow">
      <span class="trackIndex">${t.indexNumber != null ? t.indexNumber : ''}</span>
      <span class="trackName">${escapeHtml(t.name)}</span>
      <span class="trackDuration">${t.durationTicks ? formatDuration(t.durationTicks / TICKS_PER_SECOND) : ''}</span>
      <button class="startPartyBtn" data-item-id="${t.id}">Écouter ensemble</button>
    </div>
  `).join('');

  listEl.querySelectorAll('.startPartyBtn').forEach((btn) => {
    btn.addEventListener('click', async () => {
      btn.disabled = true;
      btn.textContent = 'Démarrage...';
      try {
        const party = await createParty(btn.dataset.itemId);
        navigate(`/party/${party.partyId}`);
      } catch (err) {
        alert(err.message);
        btn.disabled = false;
        btn.textContent = 'Écouter ensemble';
      }
    });
  });
}