<%# locals: metricas (Analytics::OperacaoMetricas) %>
<% heat   = metricas.pontos_mapa %>
<% pontos = metricas.pontos_detalhados %>
<div class="mapa-box bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
  <div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <p class="text-gray-400 text-sm font-medium">Mapa de Entregas</p>
    <div class="flex flex-wrap items-center gap-2">
      <div class="flex items-center gap-2">
        <input type="search" class="mapa-busca w-56 max-w-full bg-[#1a1a1a] border border-white/10 rounded-lg px-3 py-1.5 text-xs text-gray-200 placeholder-gray-500 focus:outline-none focus:border-orange-500"
               placeholder="Buscar NF, paciente ou veículo…" autocomplete="off">
        <span class="mapa-busca-info text-xs text-gray-500"></span>
      </div>
      <div class="map-toggle inline-flex rounded-lg overflow-hidden border border-white/10 text-xs">
        <button type="button" data-view="heat"
                class="px-3 py-1.5 bg-orange-500 text-black font-semibold"><%= icone :calor, cor: nil, tamanho: 'w-4 h-4' %> Calor</button>
        <button type="button" data-view="pontos"
                class="px-3 py-1.5 text-gray-300 hover:text-white"><%= icone :local, cor: nil, tamanho: 'w-4 h-4' %> Pontos (<%= pontos.size %>)</button>
      </div>
      <button type="button" class="map-fullscreen px-3 py-1.5 rounded-lg border border-white/10 text-gray-300 hover:text-white text-xs" title="Ver em tela cheia">
        <%= icone :tela_cheia, cor: nil, tamanho: 'w-4 h-4' %> Tela cheia
      </button>
    </div>
  </div>

  <% if heat.empty? && pontos.empty? %>
    <p class="text-center py-8 text-gray-500 text-sm">Sem coordenadas para exibir no período.</p>
  <% else %>
    <div class="mapa-calor w-full h-[70vh] min-h-[480px] rounded-xl overflow-hidden bg-[#1a1a1a]"
         data-heat="<%= heat.to_json %>"
         data-pontos="<%= pontos.to_json %>"
         data-centro="<%= metricas.centro_mapa.to_json %>"></div>
    <p class="text-xs text-gray-600 mt-2">
      <%= icone :calor %> Calor mostra a densidade · <%= icone :local %> Pontos mostra cada entrega (clique no marcador para detalhes; coordenada de check-out).
    </p>
  <% end %>
</div>
