watchparty/client/js/views/home.js

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

export function renderHome(root) {
  root.innerHTML = `
    <div class="pageHeader">
      <h1>Accueil</h1>
      <div class="joinInline">
        <input id="joinCode" maxlength="6" placeholder="Code de party" style="text-transform:uppercase" />
        <button id="joinBtn">Rejoindre</button>
      </div>
    </div>
    <p id="joinError" class="error"></p>

    <section class="section" id="partiesSection" hidden>
      <h2>Watch parties en cours</h2>
      <div id="partiesCarousel" class="carousel"></div>
    </section>

    <div id="recentSections"></div>`;

  root.querySelector('#joinBtn').addEventListener('click', async () => {
    const code = root.querySelector('#joinCode').value.trim();
    if (!code) return;
    try {
      const party = await joinParty(code);
      navigate(`/party/${party.partyId}`);
    } catch (err) {
      root.querySelector('#joinError').textContent = err.message;
    }
  });

  loadParties(root);
  loadRecentSections(root);
}

async function loadParties(root) {
  let parties;
  try {
    parties = await listActiveParties();
  } catch (err) {
    return; // non-critical - the rest of the home page still works
  }
  if (!parties.length) return;

  root.querySelector('#partiesSection').hidden = false;
  root.querySelector('#partiesCarousel').innerHTML = parties.map((p) => `
    <div class="partyCard">
      <img src="${p.itemImageUrl || ''}" alt="" onerror="this.classList.add('noImage')" />
      <div class="partyCardInfo">
        <strong>${escapeHtml(p.itemName || '')}</strong>
        <span class="hint">${escapeHtml(p.hostUserName || '')} · ${p.memberCount} participant${p.memberCount > 1 ? 's' : ''}</span>
      </div>
      <button class="joinPartyBtn" data-party-id="${p.partyId}">Rejoindre</button>
    </div>
  `).join('');

  root.querySelectorAll('.joinPartyBtn').forEach((btn) => {
    btn.addEventListener('click', () => navigate(`/party/${btn.dataset.partyId}`));
  });
}

async function loadRecentSections(root) {
  const container = root.querySelector('#recentSections');
  let libraries;
  try {
    libraries = await getLibraries();
  } catch (err) {
    container.innerHTML = '<p class="error">Impossible de charger les bibliothèques Emby.</p>';
    return;
  }

  for (const lib of libraries) {
    if (lib.collectionType === 'music') continue; // music gets its own experience later, not a poster row

    const section = document.createElement('section');
    section.className = 'section';
    section.innerHTML = `<h2>Ajouts récents - ${escapeHtml(lib.name)}</h2><div class="carousel"><p class="hint">Chargement...</p></div>`;
    container.appendChild(section);

    getRecentItems(lib.id)
      .then((items) => {
        if (!items.length) {
          section.remove();
          return;
        }
        const carousel = section.querySelector('.carousel');
        carousel.innerHTML = items.map(tileHtml).join('');
        wireTileButtons(carousel, async (itemId) => {
          const party = await createParty(itemId);
          navigate(`/party/${party.partyId}`);
        });
      })
      .catch(() => section.remove());
  }
}