import { getItem } from '../embyApi.js';
import { createParty, joinParty } from '../party.js';
import { navigate } from '../router.js';

export function renderItemDetail(root, params) {
  root.innerHTML = '<main class="wrap"><p class="hint">Chargement...</p></main>';

  getItem(params.id).then((item) => {
    root.innerHTML = `
      <main class="wrap">
        <button class="linklike" id="back">&larr; Retour</button>
        <div class="detail">
          <img src="${item.imageUrl}" alt="" />
          <div>
            <h1>${escapeHtml(item.name)}</h1>
            <p>${escapeHtml(item.overview || '')}</p>

            <button id="createBtn">Démarrer une watch party</button>
            <div class="or">ou</div>
            <label>Code de la party
              <input id="joinCode" maxlength="6" style="text-transform:uppercase" />
            </label>
            <button id="joinBtn">Rejoindre</button>
            <p id="error" class="error"></p>
          </div>
        </div>
      </main>`;

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

    root.querySelector('#createBtn').addEventListener('click', async () => {
      try {
        const party = await createParty(item.id);
        navigate(`/party/${party.partyId}`);
      } catch (err) {
        root.querySelector('#error').textContent = err.message;
      }
    });

    root.querySelector('#joinBtn').addEventListener('click', async () => {
      const code = root.querySelector('#joinCode').value.trim();
      try {
        const party = await joinParty(code);
        navigate(`/party/${party.partyId}`);
      } catch (err) {
        root.querySelector('#error').textContent = err.message;
      }
    });
  }).catch(() => {
    root.innerHTML = '<main class="wrap"><p class="error">Titre introuvable.</p></main>';
  });
}

function escapeHtml(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}