/* comparison-view.js — Renderização visual (tabelas + gráficos) de uma
   comparação de benchmarks. Não sabe nada sobre como a comparação foi
   montada nem sobre relatórios — recebe só { tables, charts, summary } e
   devolve HTML. Reaproveitado pela pré-visualização (Benchmarks) e pelo
   detalhe de um relatório salvo (Relatórios). */

const ComparisonView = (() => {
  const esc = UI.escapeHtml;
  const dash = (v, suf) => (v === null || v === undefined ? "indisponível" : `${v}${suf || ""}`);

  function renderGeneralTable(rows) {
    return `<table class="tbl"><thead><tr>
      <th>Perfil</th><th>Modelo</th><th>Tipo</th><th>Data</th><th>Status</th><th>Duração total</th>
    </tr></thead><tbody>
      ${rows.map((r) => `<tr>
        <td><b>${esc(r.profile)}</b></td>
        <td class="mono" style="font-size:12px">${esc(r.model)}</td>
        <td><span class="tag">${esc(r.type)}</span></td>
        <td class="mono" style="font-size:12px">${esc(UI.dt(r.date))}</td>
        <td>${UI.benchBadge(r.status)}</td>
        <td>${UI.duration(r.durationS)}</td>
      </tr>`).join("")}
    </tbody></table>`;
  }

  function renderPerformanceTable(rows) {
    return `<table class="tbl"><thead><tr>
      <th>Perfil</th><th>Tokens/s</th><th>Tempo total</th><th>Latência média</th>
      <th>CPU médio</th><th>RAM máx</th><th>GPU médio</th><th>VRAM máx</th>
    </tr></thead><tbody>
      ${rows.map((r) => `<tr>
        <td><b>${esc(r.profile)}</b></td>
        <td class="mono">${dash(r.tokensPerSecond, " tok/s")}</td>
        <td>${UI.duration(r.totalS)}</td>
        <td class="mono">${dash(r.avgLatencyS, " s")}</td>
        <td class="mono">${dash(r.avgCpuPct, "%")}</td>
        <td class="mono">${dash(r.maxRamGb, " GB")}</td>
        <td class="mono">${dash(r.avgGpuPct, "%")}</td>
        <td class="mono">${dash(r.maxVramMib, " MiB")}</td>
      </tr>`).join("")}
    </tbody></table>`;
  }

  function renderConfigTable(rows) {
    return `<table class="tbl"><thead><tr>
      <th>Perfil</th><th>Modelo</th><th>Quantização</th><th>Camadas GPU</th>
      <th>Contexto</th><th>Threads</th><th>Batch size</th><th>Comando</th>
    </tr></thead><tbody>
      ${rows.map((r) => `<tr>
        <td><b>${esc(r.profile)}</b></td>
        <td class="mono" style="font-size:12px">${esc(r.model)}</td>
        <td>${dash(r.quantization)}</td>
        <td class="mono">${dash(r.nGpuLayers)}</td>
        <td class="mono">${dash(r.ctxSize)}</td>
        <td class="mono">${dash(r.threads)}</td>
        <td class="mono">${dash(r.batchSize)}</td>
        <td class="mono" style="font-size:11px; max-width:280px; white-space:normal; word-break:break-all">${esc(r.command)}</td>
      </tr>`).join("")}
    </tbody></table>`;
  }

  function renderTables(tables) {
    return `
      <div class="card mt-2"><div class="card-head"><h2>Tabela geral</h2></div>
        <div style="overflow-x:auto">${renderGeneralTable(tables.general || [])}</div></div>
      <div class="card mt-2"><div class="card-head"><h2>Tabela de desempenho</h2></div>
        <div style="overflow-x:auto">${renderPerformanceTable(tables.performance || [])}</div></div>
      <div class="card mt-2"><div class="card-head"><h2>Tabela de configuração</h2></div>
        <div style="overflow-x:auto">${renderConfigTable(tables.config || [])}</div></div>`;
  }

  // Gráfico de barras simples (sem dependências externas).
  function renderBarChart(title, series, unit) {
    if (!series || !series.available) {
      return `<div class="mt-1"><h3 style="font-size:13px">${esc(title)}</h3>
        <div class="faint" style="font-size:12.5px">Métrica indisponível para os benchmarks selecionados.</div></div>`;
    }
    const points = series.points || [];
    const max = Math.max(1, ...points.map((p) => (p.value != null ? p.value : 0)));
    return `<div class="mt-2"><h3 style="font-size:13px; margin-bottom:8px">${esc(title)}</h3>
      ${points.map((p) => {
        const pct = p.value != null ? Math.round((p.value / max) * 100) : 0;
        const label = p.value != null ? `${p.value}${unit || ""}` : "indisponível";
        return `<div class="row" style="gap:8px; align-items:center; margin:4px 0">
          <span class="faint" style="width:140px; font-size:12px; flex:0 0 auto">${esc(p.label)}</span>
          <div class="bar" style="flex:1; margin-top:0"><span style="width:${pct}%"></span></div>
          <span class="mono" style="width:90px; text-align:right; font-size:12px; flex:0 0 auto">${esc(label)}</span>
        </div>`;
      }).join("") || `<div class="faint" style="font-size:12.5px">Sem dados.</div>`}
    </div>`;
  }

  function renderCharts(charts) {
    if (!charts) return "";
    return `<div class="card mt-2"><div class="card-head"><h2>Gráficos comparativos</h2></div>
      <div style="padding:6px 16px 16px">
        ${renderBarChart("Tokens/s", charts.tokensPerSecond, " tok/s")}
        ${renderBarChart("Tempo total", charts.totalTimeS, " s")}
        ${renderBarChart("RAM máxima", charts.maxRamGb, " GB")}
        ${renderBarChart("VRAM máxima", charts.maxVramMib, " MiB")}
        ${renderBarChart("CPU médio", charts.avgCpuPct, "%")}
        ${renderBarChart("GPU médio", charts.avgGpuPct, "%")}
      </div></div>`;
  }

  function renderSummary(summary) {
    return `<div class="card mt-2"><div class="card-head"><h2>Resumo automático</h2></div>
      <p style="padding:0 16px 16px; font-size:13.5px">${esc(summary || "Sem resumo disponível.")}</p></div>`;
  }

  // Monta a comparação completa (tabelas + gráficos + resumo) em um bloco.
  function render(data) {
    return `${renderSummary(data.summary)}${renderTables(data.tables || {})}${renderCharts(data.charts)}`;
  }

  return { render, renderTables, renderCharts, renderSummary };
})();