// Configuração do mapa
let map;
let markers = [];
let veiculosData = [];
let markersLayer;

// Inicializar mapa
function initMap() {
  // Criar mapa centrado no Brasil
  map = L.map("map").setView([-14.235, -51.925], 5);

  // Adicionar camada de tiles (OpenStreetMap)
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "© OpenStreetMap contributors",
    maxZoom: 19,
  }).addTo(map);

  // Criar layer group para os marcadores
  markersLayer = L.layerGroup().addTo(map);
}

// Função para determinar a cor do marcador baseado no tempo
function getMarkerColor(dataHora) {
  if (!dataHora) {
    return "red";
  }

  let dataVeiculo;

  // Verificar se é data ISO (formato do banco) ou formato brasileiro
  if (dataHora.includes("T") || dataHora.includes("-")) {
    // Formato ISO: 2026-02-20T15:17:38.000Z
    dataVeiculo = new Date(dataHora);
  } else {
    // Formato brasileiro: 20/02/2026 12:17:06
    const [datePart, timePart] = dataHora.split(" ");
    const [dia, mes, ano] = datePart.split("/");
    const [hora, minuto, segundo] = timePart.split(":");
    dataVeiculo = new Date(ano, mes - 1, dia, hora, minuto, segundo);
  }

  const agora = new Date();
  const diferencaMinutos = (agora - dataVeiculo) / 1000 / 60;

  if (diferencaMinutos <= 5) {
    return "green";
  } else if (diferencaMinutos <= 15) {
    return "yellow";
  } else if (diferencaMinutos <= 30) {
    return "orange";
  } else {
    return "red";
  }
}

// Criar ícone colorido para o marcador
function createColorIcon(color) {
  const colors = {
    green: "#27ae60",
    yellow: "#f1c40f",
    orange: "#f39c12",
    red: "#e74c3c",
  };

  const svgIcon = `
        <svg width="32" height="42" viewBox="0 0 32 42" xmlns="http://www.w3.org/2000/svg">
            <path d="M16 0C7.163 0 0 7.163 0 16c0 13 16 26 16 26s16-13 16-26C32 7.163 24.837 0 16 0z" 
                  fill="${colors[color]}" 
                  stroke="#fff" 
                  stroke-width="2"/>
            <circle cx="16" cy="16" r="6" fill="#fff"/>
        </svg>
    `;

  return L.divIcon({
    html: svgIcon,
    className: "custom-marker",
    iconSize: [32, 42],
    iconAnchor: [16, 42],
    popupAnchor: [0, -42],
  });
}

// Criar popup para o marcador
function createPopupContent(veiculo) {
  const color = getMarkerColor(veiculo.data_hora);
  const colorNames = {
    green: "Online",
    yellow: "Recente",
    orange: "Inativo",
    red: "Offline",
  };

  // Formatar data para exibição
  let dataFormatada = veiculo.data_hora;
  if (veiculo.data_hora) {
    try {
      const data = new Date(veiculo.data_hora);
      dataFormatada = data.toLocaleString("pt-BR");
    } catch (e) {
      // Manter formato original se houver erro
    }
  }

  return `
        <div class="popup-content">
            <div class="popup-header" style="background: ${
              color === "green"
                ? "#27ae60"
                : color === "yellow"
                  ? "#f1c40f"
                  : color === "orange"
                    ? "#f39c12"
                    : "#e74c3c"
            }">
                ${veiculo.placa}
            </div>
            <div class="popup-body">
                <div class="popup-row">
                    <span class="popup-label">Status:</span>
                    <span class="popup-value">${colorNames[color]}</span>
                </div>
                <div class="popup-row">
                    <span class="popup-label">Identificação:</span>
                    <span class="popup-value">${veiculo.identificacao_completa || "-"}</span>
                </div>
                <div class="popup-row">
                    <span class="popup-label">Última atualização:</span>
                    <span class="popup-value">${dataFormatada}</span>
                </div>
                <div class="popup-row">
                    <span class="popup-label">Velocidade:</span>
                    <span class="popup-value">${veiculo.velocidade} km/h</span>
                </div>
                <div class="popup-row">
                    <span class="popup-label">Local:</span>
                    <span class="popup-value">${veiculo.endereco || "-"}</span>
                </div>
                <div class="popup-row">
                    <span class="popup-label">Modelo:</span>
                    <span class="popup-value">${veiculo.modelo_rastreador || "-"}</span>
                </div>
                <div class="popup-row">
                    <span class="popup-label">Operadora:</span>
                    <span class="popup-value">${veiculo.operadora || "-"}</span>
                </div>
            </div>
        </div>
    `;
}

// Adicionar marcadores ao mapa
function addMarkers(veiculos) {
  // Limpar marcadores existentes
  markersLayer.clearLayers();
  markers = [];

  veiculos.forEach((veiculo) => {
    const color = getMarkerColor(veiculo.data_hora);
    const icon = createColorIcon(color);

    const marker = L.marker([veiculo.latitude, veiculo.longitude], {
      icon: icon,
    }).bindPopup(createPopupContent(veiculo));

    // Adicionar dados do veículo ao marcador
    marker.veiculoData = veiculo;
    marker.color = color;

    markersLayer.addLayer(marker);
    markers.push(marker);
  });

  // Ajustar zoom para mostrar todos os marcadores
  if (markers.length > 0) {
    const group = L.featureGroup(markers);
    map.fitBounds(group.getBounds().pad(0.1));
  }
}

// Buscar veículos da API
async function fetchVeiculos() {
  const loadingEl = document.getElementById("loading");
  loadingEl.classList.remove("hidden");

  try {
    console.log("Buscando veículos da API...");
    const response = await fetch("/api/veiculos");

    console.log("Status da resposta:", response.status);

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    console.log("Dados recebidos:", data);

    if (data.sucesso) {
      veiculosData = data.veiculos;
      console.log(`Total de veículos carregados: ${veiculosData.length}`);

      addMarkers(veiculosData);
      updateStats(data);
      updateSearchResults(veiculosData);

      // Atualizar data de última atualização
      const updateEl = document.getElementById("lastUpdate");
      const timestamp = new Date(data.timestamp);
      updateEl.textContent = `Última atualização: ${timestamp.toLocaleString("pt-BR")}`;
    } else {
      console.error("Erro ao buscar veículos:", data.mensagem);
      alert("Erro ao carregar veículos. Verifique o console.");
    }
  } catch (error) {
    console.error("Erro detalhado na requisição:", error);
    console.error("Tipo do erro:", error.name);
    console.error("Mensagem:", error.message);

    // Não mostrar alert, apenas logar o erro
    // O sistema tentará novamente automaticamente na próxima atualização
  } finally {
    loadingEl.classList.add("hidden");
  }
}

// Atualizar estatísticas
function updateStats(data) {
  const totalEl = document.getElementById("totalVehicles");
  const activeEl = document.getElementById("activeVehicles");

  totalEl.textContent = data.total_veiculos || 0;

  // Contar veículos ativos (últimos 5 minutos)
  const ativos = data.veiculos.filter((v) => {
    const color = getMarkerColor(v.data_hora);
    return color === "green";
  }).length;

  activeEl.textContent = ativos;
}

// Atualizar resultados de busca
function updateSearchResults(veiculos) {
  const resultsEl = document.getElementById("searchResults");

  if (veiculos.length === 0) {
    resultsEl.innerHTML =
      '<p style="text-align: center; color: #7f8c8d; padding: 1rem;">Nenhum veículo encontrado</p>';
    return;
  }

  resultsEl.innerHTML = veiculos
    .map((veiculo) => {
      const color = getMarkerColor(veiculo.data_hora);

      // Formatar data para exibição
      let dataFormatada = veiculo.data_hora;
      if (veiculo.data_hora) {
        try {
          const data = new Date(veiculo.data_hora);
          dataFormatada = data.toLocaleString("pt-BR");
        } catch (e) {
          // Manter formato original se houver erro
        }
      }

      return `
            <div class="vehicle-item ${color}" data-placa="${veiculo.placa}">
                <div class="vehicle-placa">${veiculo.placa}</div>
                <div class="vehicle-info">${veiculo.identificacao_completa || "-"}</div>
                <div class="vehicle-time">${dataFormatada}</div>
            </div>
        `;
    })
    .join("");

  // Adicionar eventos de clique nos itens
  resultsEl.querySelectorAll(".vehicle-item").forEach((item) => {
    item.addEventListener("click", () => {
      const placa = item.dataset.placa;
      focusOnVehicle(placa);
    });
  });
}

// Focar em um veículo específico
function focusOnVehicle(placa) {
  const marker = markers.find((m) => m.veiculoData.placa === placa);

  if (marker) {
    map.setView(marker.getLatLng(), 15);
    marker.openPopup();
  }
}

// Filtrar veículos por placa
function filterVehicles(searchTerm) {
  if (!searchTerm) {
    updateSearchResults(veiculosData);
    addMarkers(veiculosData);
    return;
  }

  const filtered = veiculosData.filter(
    (v) =>
      v.placa.toLowerCase().includes(searchTerm.toLowerCase()) ||
      (v.identificacao_completa &&
        v.identificacao_completa
          .toLowerCase()
          .includes(searchTerm.toLowerCase())),
  );

  updateSearchResults(filtered);
  addMarkers(filtered);
}

// Event listeners
document.addEventListener("DOMContentLoaded", () => {
  // Inicializar mapa
  initMap();

  // Carregar veículos
  fetchVeiculos();

  // Busca
  const searchInput = document.getElementById("searchInput");
  searchInput.addEventListener("input", (e) => {
    filterVehicles(e.target.value);
  });

  // Limpar busca
  const clearBtn = document.getElementById("clearSearch");
  clearBtn.addEventListener("click", () => {
    searchInput.value = "";
    filterVehicles("");
  });

  // Atualizar dados
  const refreshBtn = document.getElementById("refreshBtn");
  refreshBtn.addEventListener("click", () => {
    fetchVeiculos();
  });

  // Atualização automática a cada 1 minuto
  setInterval(() => {
    fetchVeiculos();
  }, 60000);
});
