script.js

// 1. Inicialização do Mapa
const map = L.map("map").setView([0, 0], 2);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: "© OpenStreetMap contributors",
}).addTo(map);

// 2. Variáveis Globais para controle da animação e elementos do mapa
let polyline = L.polyline([], { color: "red", weight: 3 }).addTo(map);
let marker = L.marker([0, 0]).addTo(map);
let animationInterval = null;

const fileInput = document.getElementById("file-upload");

// 3. Listener de Upload
fileInput.addEventListener("change", function (e) {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = function (event) {
    try {
      const dados = JSON.parse(event.target.result);
      const dataArray = Array.isArray(dados) ? dados : [dados];

      // Para a animação anterior se o usuário subir um novo arquivo
      if (animationInterval) clearInterval(animationInterval);

      processarEAnimar(dataArray);
    } catch (err) {
      console.error("Erro ao processar JSON:", err);
      alert("Erro ao ler o arquivo JSON. Verifique o console.");
    }
  };
  reader.readAsText(file);
});

// 4. Função que une o Ajuste de Escala (fitBounds) com a Animação
function processarEAnimar(dados) {
  // Limpa o estado anterior
  polyline.setLatLngs([]);

  // Cria uma trajetória invisível rápida para calcular os limites (Bounds)
  const todasCoords = dados.map((p) => [p.lat, p.lon]);
  const tempPoly = L.polyline(todasCoords);

  // Ajusta o zoom para caber a trajetória inteira antes de começar a animar
  map.fitBounds(tempPoly.getBounds(), { padding: [50, 50] });

  let i = 0;
  animationInterval = setInterval(() => {
    if (i >= dados.length) {
      clearInterval(animationInterval);
      return;
    }

    const ponto = dados[i];
    const coordenadas = [ponto.lat, ponto.lon];

    // Atualiza o mapa visualmente
    polyline.addLatLng(coordenadas);
    marker.setLatLng(coordenadas);

    // Opcional: Centraliza o mapa no ponto atual durante a animação
    // map.panTo(coordenadas);

    // ATUALIZAÇÃO DA TELEMETRIA
    atualizarInterface(ponto);

    i++;
  }, 100); // Velocidade da animação (100ms)
}

// 5. Função de Interface - Verifique os IDs no HTML
function atualizarInterface(d) {
  const latEl = document.getElementById("lat-val");
  const lngEl = document.getElementById("lng-val");
  const altEl = document.getElementById("alt-val");
  const velEl = document.getElementById("vel-val");
  const timeEl = document.getElementById("time-sync");

  if (latEl) latEl.innerText = d.lat.toFixed(4);
  if (lngEl) lngEl.innerText = d.lon.toFixed(4);
  if (altEl) altEl.innerText = (d.alt ?? 0).toFixed(0) + " m";
  if (velEl) velEl.innerText = (d.vel_h ?? 0).toFixed(1) + " m/s";
  if (timeEl)
    timeEl.innerText = d.datetime
      ? d.datetime.split("T")[1].replace("Z", "")
      : "--:--";
}