jQuery(function($){
  let map = L.map('cgt-map').setView([51.0447,-114.0719],11);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ attribution:'&copy; OpenStreetMap' }).addTo(map);
  let markers = {};

  function getPriceHtml(st) {
    let html = [];
    ['regular','diesel','premium','propane'].forEach(type=>{
      if(st[type]) html.push(`<div>
        <span class="station-price">${st[type]}¢/L</span>
        <span style="color:#4b4f55;font-size:.96em;">${type.charAt(0).toUpperCase()+type.slice(1)}</span>
        &nbsp;<small>${new Date(st.updated_at).toLocaleTimeString()}</small>
        (${st.flags||0}<button title="Flag as fake" class="flag-btn" onclick="window.cgtFlag(${st.id})">🚩</button>)
      </div>`);
    });
    return html.join('');
  }

  function loadStations() {
    $.post(cgt_ajax.ajax_url,{action:'cgt_get_stations'}, function(list){
      let allPrices = [];
      $('#gasList').html(list.map(st=>
        `<div class="station-item">
           <div class="station-name">${st.name}</div>
           ${getPriceHtml(st)}
        </div>`
      ).join('') || "<i>No stations yet. Be the first to add one!</i>");
      Object.values(markers).forEach(m=>map.removeLayer(m)); markers = {};
      list.forEach(st=>{
        let prices = ['regular','premium','diesel','propane'].map(t=>parseFloat(st[t])||null).filter(p=>p);
        if(prices.length) allPrices.push(...prices);
      });
      let min = Math.min(...allPrices), max = Math.max(...allPrices);
      list.forEach(st=>{
        let prices = ['regular','premium','diesel','propane'].map(t=>parseFloat(st[t])||null).filter(p=>p);
        if(!st.lat||!st.lng||!prices.length) return;
        let markerColor = "#ffc600";
        let best = Math.min(...prices);
        if(best <= min+3) markerColor="#4c8c2b";
        else if(best >= max-3) markerColor="#c8102e";
        let marker = L.circleMarker([st.lat, st.lng],{
          radius:14, fill:true, fillOpacity:.93, weight:2,
          fillColor: markerColor, color: "#222"
        }).addTo(map);
        marker.bindPopup(`<b>${st.name}</b><br>${getPriceHtml(st)}`);
        markers[st.id]=marker;
      });
    });
  }

  loadStations();
  setInterval(loadStations, 60000);

  $('#cgt-userForm').on('submit',function(e){
    e.preventDefault();
    let vals = $(this).serializeArray(), data = {action:'cgt_add_station',nonce:cgt_ajax.nonce};
    for(let v of vals) data[v.name]=v.value;
    $.post(cgt_ajax.ajax_url, data, function(resp){
      if(resp.success){
        let txt = "Submitted! ";
        if(!resp.lat) txt += "<br><span style='color:#c8102e'>Location not found—please try a more precise name or address.</span>";
        $('#cgt-msg').html(txt);
        $('#cgt-userForm')[0].reset();
        loadStations();
      }
    });
  });

  window.cgtFlag = function(id){
    $.post(cgt_ajax.ajax_url,{id:id,action:'cgt_flag_price',nonce:cgt_ajax.nonce}, function(resp){
      if(resp.success) loadStations();
    });
  };
});
