import { auth, logout, getLibraries, getLibraryItems } from '../embyApi.js';
import { listActiveParties, createParty, joinParty } from '../party.js';
import { navigate } from '../router.js';

export function renderBrowse(root) {
  root.innerHTML = `
    <main class="home">
      <div class="topbar">
        <h1>Watch Party</h1>
        <button class="linklike" id="logout">Se déconnecter (${escapeHtml(auth.userName || '')})</button>
      </div>

      <section id="partiesSection" class="section hide">
        <h2>Watch parties en cours</h2>
        <div id="partiesList" class="partiesList"></div>
      </section>

      <section class="section joinSection">
        <label>Rejoindre avec un code
          <input id="joinCode" maxlength="6" style="text-transform:uppercase" />
        </label>
        <button id="joinBtn">Rejoindre</button>
        <p id="joinError" class="error"></p>
      </section>

      <nav id="tabs" class="tabs"></nav>
      <div id="tabContent" class="grid"><p class="hint">Chargement...</p></div>
    </main>`;

  root.querySelector('#logout').addEventListener('click', async () => {
    await logout();
    navigate('/login');
  });

  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);
  loadLibraries(root);
}

async function loadParties(root) {
  let parties;
  try {
    parties = await listActiveParties();
  } catch (err) {
    return; // non-critical for the page as a whole - just skip the section
  }
  if (!parties.length) return;

  const section = root.querySelector('#partiesSection');
  section.classList.remove('hide');
  root.querySelector('#partiesList').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 loadLibraries(root) {
  const tabsEl = root.querySelector('#tabs');
  const contentEl = root.querySelector('#tabContent');

  let libraries;
  try {
    libraries = await getLibraries();
  } catch (err) {
    contentEl.innerHTML = '<p class="error">Impossible de charger les bibliothèques Emby.</p>';
    return;
  }
  if (!libraries.length) {
    contentEl.innerHTML = '<p class="hint">Aucune bibliothèque disponible sur ce compte.</p>';
    return;
  }

  tabsEl.innerHTML = libraries
    .map((lib, i) => `<button class="tab${i === 0 ? ' active' : ''}" data-library-id="${lib.id}">${escapeHtml(lib.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');
      loadLibraryItems(contentEl, tab.dataset.libraryId);
    });
  });

  loadLibraryItems(contentEl, libraries[0].id);
}

async function loadLibraryItems(contentEl, libraryId) {
  contentEl.innerHTML = '<p class="hint">Chargement...</p>';
  let items;
  try {
    items = await getLibraryItems(libraryId);
  } catch (err) {
    contentEl.innerHTML = '<p class="error">Impossible de charger cette bibliothèque.</p>';
    return;
  }
  if (!items.length) {
    contentEl.innerHTML = '<p class="hint">Bibliothèque vide.</p>';
    return;
  }

  contentEl.innerHTML = items.map((item) => `
    <div class="tile">
      <img src="${item.imageUrl}" alt="" loading="lazy" onerror="this.classList.add('noImage')" />
      <div class="tileOverlay">
        ${item.canWatchParty ? `<button class="tileBtn startPartyBtn" data-item-id="${item.id}">Lancer une watch party</button>` : ''}
        <a class="tileBtn tileBtnLink" href="${item.embyUrl}" target="_blank" rel="noopener">Voir sur Emby</a>
      </div>
      <span class="tileLabel">${escapeHtml(item.name)}${item.year ? ` (${item.year})` : ''}</span>
    </div>
  `).join('');

  contentEl.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 = 'Lancer une watch party';
      }
    });
  });
}

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