const map = L.map("map").setView([40.7608, -111.8910], 12);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);

const API_URL = "http://localhost:7653/api/v0/";

const trainEmojiIcon = L.divIcon({ html: "🔵", className: "", iconSize: [64,64], iconAnchor: [16,32], popupAnchor: [0,-32] });
const stopsEmojiIcon = L.divIcon({ html: "🫃", className: "", iconSize: [64,64], iconAnchor: [16,32], popupAnchor: [0,-32] });

function addMarker(lat, lon, content, icon) {
  if (!isNaN(lat) && !isNaN(lon)) {
    const marker = L.marker([lat, lon], { icon: icon }).addTo(map);
    if (content) marker.bindPopup(content);
  } else {
    console.warn("Invalid coordinates:", latitude, longitude);
  }
}

function getTrainsByRoute(route) {
  fetch(API_URL + 'vehicles')
    .then(res => res.json())
    .then(data => {
      const trains = data.data;
      const filtered = route ? trains.filter(t => t.routeId == route) : trains;
      filtered.forEach(t => {
        addMarker(t.location.latitude, t.location.longitude, t.routeName + ": Vehicle " + t.vehicleId, trainEmojiIcon);
      });
    })
    .catch(err => console.error("Error fetching trains:", err));
}

function getStopsByRoute(route) {
  fetch(API_URL + 'stops/' + route)
    .then(res => res.json())
    .then(data => {
      const stops = data.data;
      stops.forEach(s => {
          const lat = parseFloat(s.stop_lat);
          const lon = parseFloat(s.stop_lon);
        addMarker(lat,lon, s.stop_name + " - " + s.stop_desc, stopsEmojiIcon);
      });
    })
    .catch(err => console.error("Error fetching stops:", err));
}

getStopsByRoute("701");  
getTrainsByRoute();