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

export async function renderSeries(root, params) {
  const seriesId = params.id;
  root.innerHTML = '<p class="hint">Chargement...</p>';

  let series;
  let seasons;
  try {
    [series, seasons] = await Promise.all([getItem(seriesId), getSeriesSeasons(seriesId)]);
  } catch (err) {
    root.innerHTML = '<p class="error">Impossible de charger cette série.</p>';
    return;
  }

  root.innerHTML = `
    <button class="linklike" id="back">&larr; Retour</button>
    <div class="seriesHeader">
      <img class="seriesPoster" src="${series.imageUrl}" alt="" loading="lazy" onerror="this.classList.add('noImage')" />
      <div class="seriesInfo">
        <h1>${escapeHtml(series.name)}${series.year ? ` <span class="seriesYear">(${series.year})</span>` : ''}</h1>
        ${series.overview ? `<p class="seriesOverview">${escapeHtml(series.overview)}</p>` : ''}
        <a class="linklike" href="${series.embyUrl}" target="_blank" rel="noopener">Voir sur Emby</a>
      </div>
    </div>
    <nav id="seasonTabs" class="tabs"></nav>
    <div id="episodeList" class="episodeList"><p class="hint">Chargement...</p></div>`;

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

  if (!seasons.length) {
    root.querySelector('#episodeList').innerHTML = '<p class="hint">Aucune saison trouvée.</p>';
    return;
  }

  const tabsEl = root.querySelector('#seasonTabs');
  tabsEl.innerHTML = seasons
    .map((s, i) => `<button class="tab${i === 0 ? ' active' : ''}" data-season-id="${s.id}">${escapeHtml(s.name)}</button>`)
    .join('');

  tabsEl.querySelectorAll('.tab').forEach((tab) => {
    tab.addEventListener('click', () => {
      if (tab.classList.contains('active')) return;
      tabsEl.querySelectorAll('.tab').forEach((t) => t.classList.remove('active'));
      tab.classList.add('active');
      loadEpisodes(root, seriesId, tab.dataset.seasonId);
    });
  });

  loadEpisodes(root, seriesId, seasons[0].id);
}

async function loadEpisodes(root, seriesId, seasonId) {
  const listEl = root.querySelector('#episodeList');
  listEl.innerHTML = '<p class="hint">Chargement...</p>';

  let episodes;
  try {
    episodes = await getSeriesEpisodes(seriesId, seasonId);
  } catch (err) {
    listEl.innerHTML = '<p class="error">Impossible de charger les épisodes.</p>';
    return;
  }
  if (!episodes.length) {
    listEl.innerHTML = '<p class="hint">Aucun épisode dans cette saison.</p>';
    return;
  }

  // Starting a party from any episode here queues the rest of the series
  // from that point on server-side (see server/src/index.js) - the host can
  // then use "Épisode suivant" in the player instead of restarting per episode.
  listEl.innerHTML = episodes.map((ep) => `
    <div class="episodeRow">
      <img src="${ep.imageUrl}" alt="" loading="lazy" onerror="this.classList.add('noImage')" />
      <div class="episodeInfo">
        <strong>${ep.year ? ep.year + ' · ' : ''}${escapeHtml(ep.name)}</strong>
        <p class="hint">${escapeHtml(ep.overview || '')}</p>
      </div>
      <button class="startEpisodeBtn" data-item-id="${ep.id}">Lancer une watch party</button>
    </div>
  `).join('');

  listEl.querySelectorAll('.startEpisodeBtn').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 = 'Lancer une watch party';
      }
    });
  });
}