/* reports.js — Seção "Relatórios" do dashboard: listagem de comparações
   salvas e página de detalhe. A renderização de tabelas/gráficos vive em
   comparison-view.js (componente compartilhado com a pré-visualização da
   página Benchmarks); este arquivo só busca dados e monta a página.
   Exposto como ReportsPage.render(container); app.js chama em Pages.reports. */

const ReportsPage = (() => {
  const esc = UI.escapeHtml;

  function handleErr(ex) {
    if (ex && ex.status === 401) { location.reload(); return; }
    UI.toast("Erro: " + (ex && ex.message ? ex.message : ex), "bad");
  }

  let detailId = null;

  async function render(container) {
    if (detailId) return renderDetail(container, detailId);
    return renderList(container);
  }

  // ======================================================================= LISTA
  async function renderList(container) {
    container.innerHTML = `<div class="loading-line">Carregando relatórios…</div>`;
    let items;
    try {
      const data = await API.reports();
      items = data.items || [];
    } catch (ex) { handleErr(ex); return; }

    let html = `<div class="row" style="margin-bottom:16px">
      <div><h2 style="font-size:17px">Relatórios <span class="faint">(${items.length})</span></h2>
        <div class="faint" style="font-size:12.5px">Comparativos salvos a partir de benchmarks concluídos.</div></div>
      <div class="spacer" style="flex:1"></div>
      <button class="btn sm" id="rp-reload">Atualizar</button>
    </div>`;

    if (!items.length) {
      html += `<div class="card"><div class="empty">Nenhum relatório ainda. Vá em "Benchmarks", selecione ao menos 2 concluídos e clique em "Comparar".</div></div>`;
    } else {
      html += `<div class="card"><table class="tbl">
        <thead><tr><th>Título</th><th>Data</th><th>Benchmarks</th><th>Perfis</th><th>Resumo</th><th></th></tr></thead>
        <tbody>${items.map(reportRow).join("")}</tbody></table></div>`;
    }

    container.innerHTML = html;
    document.getElementById("rp-reload").onclick = () => renderList(container);
    container.querySelectorAll("[data-rp-view]").forEach((b) =>
      (b.onclick = () => { detailId = b.dataset.rpView; renderDetail(container, detailId); }));
    container.querySelectorAll("[data-rp-pdf]").forEach((b) =>
      (b.onclick = () => window.open(API.reportPdfUrl(b.dataset.rpPdf), "_blank", "noopener")));
    container.querySelectorAll("[data-rp-del]").forEach((b) =>
      (b.onclick = () => onDelete(container, b.dataset.rpDel, b.dataset.name)));
  }

  function reportRow(r) {
    return `<tr>
      <td><b>${esc(r.title)}</b></td>
      <td class="mono" style="font-size:12px">${esc(UI.dt(r.createdAt))}</td>
      <td>${r.benchmarkCount}</td>
      <td style="max-width:240px">${(r.profiles || []).map((p) => `<span class="tag">${esc(p)}</span>`).join(" ")}</td>
      <td style="font-size:12.5px; max-width:280px">${esc(r.summary || "—")}</td>
      <td style="white-space:nowrap">
        <button class="btn sm" data-rp-view="${esc(r.id)}">Ver relatório</button>
        <button class="btn sm" data-rp-pdf="${esc(r.id)}">Baixar PDF</button>
        <button class="btn danger sm" data-rp-del="${esc(r.id)}" data-name="${esc(r.title)}">Remover</button>
      </td>
    </tr>`;
  }

  async function onDelete(container, id, name) {
    const ok = await UI.confirm({
      title: `Remover o relatório "${name}"?`,
      text: "O relatório e os dados salvos dele são removidos. Os benchmarks que deram origem a ele NÃO são afetados.",
      confirmLabel: "Remover relatório", danger: true,
    });
    if (!ok) return;
    try {
      await API.reportDelete(id);
      UI.toast("Relatório removido.", "ok");
      renderList(container);
    } catch (ex) { handleErr(ex); }
  }

  // ====================================================================== DETALHE
  async function renderDetail(container, id) {
    container.innerHTML = `<div class="loading-line">Carregando relatório…</div>`;
    let r;
    try {
      r = await API.report(id);
    } catch (ex) {
      detailId = null;
      handleErr(ex);
      renderList(container);
      return;
    }

    let html = `<div class="row" style="margin-bottom:16px">
      <button class="btn sm" id="rp-back">${UI.icon("back", 14)} Voltar</button>
      <div class="spacer" style="flex:1"></div>
      <button class="btn sm" id="rp-pdf-btn">Baixar PDF</button>
    </div>
    <div class="card"><div class="card-head"><h2>${esc(r.title)}</h2></div>
      <div style="padding:0 16px 14px" class="faint">
        Gerado em ${esc(UI.dt(r.createdAt))} · ${r.benchmarkCount} benchmarks comparados
      </div>
    </div>`;
    html += ComparisonView.render(r);

    container.innerHTML = html;
    document.getElementById("rp-back").onclick = () => { detailId = null; renderList(container); };
    document.getElementById("rp-pdf-btn").onclick = () =>
      window.open(API.reportPdfUrl(r.id), "_blank", "noopener");
  }

  return { render };
})();