Revisión de identificación

Resumen de la última pasada de identificación de películas.

html`${(() => {
  const linkData = JSON.parse(
    document.getElementById("link-results-data").textContent
  );
  const identified_movies = linkData.identified_movies;
  const unidentified_movies = linkData.unidentified_movies;
  const match_summary = linkData.match_summary;

  const idSearchWrapper = Inputs.text({ label: "Buscar identificadas", placeholder: "título, director, género..." });
  const unSearchWrapper = Inputs.text({ label: "Buscar sin identificar", placeholder: "título, director, notas..." });
  const idSearchInput = idSearchWrapper.querySelector("input");
  const unSearchInput = unSearchWrapper.querySelector("input");

  const idTableBody = document.createElement("tbody");
  const unTableBody = document.createElement("tbody");
  const idCount = document.createElement("span");
  idCount.textContent = identified_movies.length;
  idCount.className = "catalog-shown-count";
  const unCount = document.createElement("span");
  unCount.textContent = unidentified_movies.length;
  unCount.className = "catalog-shown-count";

  function renderIdentified() {
    const q = (idSearchInput.value || "").toLowerCase();
    const filtered = identified_movies.filter(d =>
      (d.titulo_disponible + " " + d.titulo_videoclub + " " + d.director + " " + d.genre + " " + d.match_source).toLowerCase().includes(q)
    );
    idCount.textContent = filtered.length;
    idTableBody.innerHTML = "";
    const fragment = document.createDocumentFragment();
    for (const d of filtered) {
      const tr = document.createElement("tr");
      tr.innerHTML = `
        <td>${d.titulo_disponible}</td>
        <td>${d.titulo_videoclub}</td>
        <td>${d.year}</td>
        <td>${d.director}</td>
        <td>${d.genre}</td>
        <td>${d.match_source}</td>
        <td>${d.confidence}</td>
        <td>${d.imdb_url ? `<a href="${d.imdb_url}" target="_blank">IMDb</a>` : ""}</td>
        <td>${d.poster && d.poster !== "noposter.png" ? `<img src="${d.poster}" width="60" alt="poster">` : ""}</td>
      `;
      fragment.appendChild(tr);
    }
    idTableBody.appendChild(fragment);
  }

  function renderUnidentified() {
    const q = (unSearchInput.value || "").toLowerCase();
    const filtered = unidentified_movies.filter(d =>
      (d.titulo_disponible + " " + d.titulo_videoclub + " " + d.nombre_director + " " + d.notes).toLowerCase().includes(q)
    );
    unCount.textContent = filtered.length;
    unTableBody.innerHTML = "";
    const fragment = document.createDocumentFragment();
    for (const d of filtered) {
      const tr = document.createElement("tr");
      tr.innerHTML = `
        <td>${d.titulo_disponible}</td>
        <td>${d.titulo_videoclub}</td>
        <td>${d.nombre_director}</td>
        <td>${d.notes}</td>
      `;
      fragment.appendChild(tr);
    }
    unTableBody.appendChild(fragment);
  }

  idSearchInput.addEventListener("input", renderIdentified);
  unSearchInput.addEventListener("input", renderUnidentified);
  renderIdentified();
  renderUnidentified();

  return html`<div class="summary-cards">
    <div class="card">
      <h3>${match_summary.total}</h3>
      <p>Total de títulos</p>
    </div>
    <div class="card">
      <h3>${match_summary.identified}</h3>
      <p>Identificados (${match_summary.identified_rate}%)</p>
    </div>
    <div class="card">
      <h3>${match_summary.unidentified}</h3>
      <p>Por identificar</p>
    </div>
    <div class="card">
      <h3>${match_summary.pending_lookup}</h3>
      <p>Pendientes de búsqueda</p>
    </div>
  </div>

  <h3>Películas identificadas</h3>
  ${idSearchWrapper}
  <table class="table table-striped table-hover catalog-table">
    <thead>
      <tr>
        <th>Título disponible</th>
        <th>Título videoclub</th>
        <th>Año</th>
        <th>Director</th>
        <th>Género</th>
        <th>Fuente</th>
        <th>Confianza</th>
        <th>IMDb</th>
        <th>Poster</th>
      </tr>
    </thead>
    ${idTableBody}
  </table>
  <p><strong>${idCount} identificadas mostradas.</strong></p>

  <h3>Películas sin identificar</h3>
  ${unSearchWrapper}
  <table class="table table-striped table-hover catalog-table">
    <thead>
      <tr>
        <th>Título disponible</th>
        <th>Título videoclub</th>
        <th>Director</th>
        <th>Notas</th>
      </tr>
    </thead>
    ${unTableBody}
  </table>
  <p><strong>${unCount} sin identificar mostradas.</strong></p>`;
})()}`