<%# locals: a, b (Analytics::OperacaoMetricas), label_a, label_b %>
<%
  linhas_cmp = [
    { nome: 'Total de Entregas', a: a.total,          b: b.total,          maior_melhor: true,  suf: '' },
    { nome: 'Sucesso',           a: a.sucesso,        b: b.sucesso,        maior_melhor: true,  suf: '' },
    { nome: 'Recusas',           a: a.recusas,        b: b.recusas,        maior_melhor: false, suf: '' },
    { nome: 'Pendentes',         a: a.pendentes,      b: b.pendentes,      maior_melhor: false, suf: '' },
    { nome: 'Taxa de Sucesso',   a: a.taxa_sucesso,   b: b.taxa_sucesso,   maior_melhor: true,  suf: '%' },
    { nome: 'Taxa de Insucesso', a: a.taxa_insucesso, b: b.taxa_insucesso, maior_melhor: false, suf: '%' }
  ]
%>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6 space-y-6">
  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
    <h2 class="text-lg font-bold text-white">Comparativo</h2>
    <div class="flex flex-wrap items-center gap-4 text-xs">
      <span class="text-orange-400">● A · <%= label_a %> <span class="text-gray-500">(<%= a.total %>)</span></span>
      <span class="text-blue-400">● B · <%= label_b %> <span class="text-gray-500">(<%= b.total %>)</span></span>
    </div>
  </div>

  <%# Tabela comparativa (verde = melhor desempenho na linha) %>
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead>
        <tr class="text-gray-400 text-left border-b border-white/5">
          <th class="pb-2 font-medium pr-3">Métrica</th>
          <th class="pb-2 font-medium pl-4 text-right text-orange-400">A</th>
          <th class="pb-2 font-medium pl-4 text-right text-blue-400">B</th>
          <th class="pb-2 font-medium pl-4 text-right">Δ (A−B)</th>
        </tr>
      </thead>
      <tbody>
        <% linhas_cmp.each do |l| %>
          <% delta = (l[:a] - l[:b]).round(2) %>
          <% melhor_a = l[:maior_melhor] ? l[:a] > l[:b] : l[:a] < l[:b] %>
          <% melhor_b = l[:maior_melhor] ? l[:b] > l[:a] : l[:b] < l[:a] %>
          <tr class="border-b border-white/5">
            <td class="py-2 pr-3 text-gray-300"><%= l[:nome] %></td>
            <td class="py-2 pl-4 text-right whitespace-nowrap font-semibold <%= melhor_a ? 'text-green-400' : 'text-white' %>"><%= l[:a] %><%= l[:suf] %></td>
            <td class="py-2 pl-4 text-right whitespace-nowrap font-semibold <%= melhor_b ? 'text-green-400' : 'text-white' %>"><%= l[:b] %><%= l[:suf] %></td>
            <td class="py-2 pl-4 text-right whitespace-nowrap text-gray-400"><%= delta > 0 ? "+#{delta}" : delta %><%= l[:suf] %></td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>

  <%# Barras agrupadas A x B %>
  <div class="relative h-72">
    <canvas class="cmp-bars"
            data-label-a="<%= label_a %>"
            data-label-b="<%= label_b %>"
            data-a="<%= [a.total, a.sucesso, a.recusas, a.pendentes].to_json %>"
            data-b="<%= [b.total, b.sucesso, b.recusas, b.pendentes].to_json %>"></canvas>
  </div>
</div>
