/* ============================================================
   File: static/js/inspect_state.js
   Purpose:
     - Receive merged state via state_updater.js
     - Update ONLY the right-side state tables
     - NO polling, NO fetch
   ============================================================ */

console.log("[inspect_state] JS loaded (subscriber mode)");

/* ------------------------------------------------------------
   State subscription
   ------------------------------------------------------------ */

window.addEventListener("state:update", (e) => {
  const entries = e.detail;

  if (!Array.isArray(entries)) {
    console.warn("[inspect_state] state:update payload is not array", entries);
    return;
  }

  console.log("[inspect_state] state:update received entries:", entries.length);
  updateInspectTables(entries);
});

/* ------------------------------------------------------------
   Update tables
   ------------------------------------------------------------ */

function updateInspectTables(entries) {
  console.log("[inspect_state] updating tables");

  entries.forEach((entry) => {
    const bookIdx = entry.book_idx;
    if (bookIdx == null) {
      console.warn("[inspect_state] entry without book_idx", entry);
      return;
    }

    const block = document.querySelector(
      `.state-block[data-book-idx="${bookIdx}"]`
    );
    if (!block) {
      console.warn("[inspect_state] no state-block for book_idx", bookIdx);
      return;
    }

    const table = block.querySelector(".state-table");
    if (!table) {
      console.warn("[inspect_state] no state-table for book_idx", bookIdx);
      return;
    }

    console.log("[inspect_state] updating table for book_idx", bookIdx);

    const sql = entry.sqlite || {};
    const redis = entry.redis || {};
    const merged = entry.would_merge_to || {};

    table.innerHTML = `
      <tr>
        <th>Field</th>
        <th>SQLite</th>
        <th>Redis</th>
        <th>Merged</th>
      </tr>
      ${row("status", sql, redis, merged)}
      ${row("chapters_total", sql, redis, merged)}
      ${row("downloaded", sql, redis, merged)}
      ${row("chapters_download_done", sql, redis, merged)}
      ${row("chapters_download_skipped", sql, redis, merged)}
      ${row("parsed", sql, redis, merged)}
      ${row("chapters_parsed_done", sql, redis, merged)}
      ${row("audio_done", sql, redis, merged)}
      ${row("audio_skipped", sql, redis, merged)}
      ${row("last_update", sql, redis, merged)}
    `;
  });
}

/* ------------------------------------------------------------
   Row helper
   ------------------------------------------------------------ */

function row(field, sql, redis, merged) {
  const s = sql[field] ?? "";
  const r = redis[field] ?? "";
  const m = merged[field] ?? "";

  const cls = String(s) === String(r) ? "same" : "diff";

  return `
    <tr>
      <th>${field}</th>
      <td class="${cls}">${s}</td>
      <td class="${cls}">${r}</td>
      <td>${m}</td>
    </tr>
  `;
}