{% extends "area_base.html" %}

{% block title %}{{ page.title if page else 'The Grand Spine' }} | TheOrganist24{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
{% endblock %}

{% block area_content %}
<h1>{{ page.title if page else 'The Grand Spine' }}</h1>
{% if page and page.body %}
  <p>{{ page.body }}</p>
{% endif %}

<div id="grand-spine-map"></div>

<div class="gs-legend">
  <div class="gs-legend-item gs-legend-total" id="gs-total">
    <span class="gs-legend-label">Total</span>
    <span class="gs-legend-stat" id="gs-total-legs"></span>
    <span class="gs-legend-stat" id="gs-total-miles"></span>
  </div>
  {% for row in summary %}
  <div class="gs-legend-item"
       data-branch="{{ row.branch }}"
       data-track-count="{{ row.track_count }}"
       data-distance="{{ row.distance_miles }}">
    <span class="gs-legend-swatch"
          style="background: {{ row.colour }};"></span>
    <span class="gs-legend-label">{{ row.branch }}</span>
    <span class="gs-legend-stat">{{ row.track_count }} leg{{ 's' if row.track_count != 1 else '' }}</span>
    <span class="gs-legend-stat">{{ row.distance_miles }} mi</span>
  </div>
  {% endfor %}
</div>

<div class="gs-settlement-toggles">
  <button class="gs-toggle gs-toggle--active" id="toggle-significance">
    Significant Places
  </button>
  <button class="gs-toggle" id="toggle-terminus">
    Leg Termini
  </button>
  <button class="gs-toggle" id="toggle-timing">
    Timing Points
  </button>
</div>

<script>
  const tracks = [
    {% for track in tracks %}
    {
      name: {{ track.name | tojson }},
      branch: {{ track.branch | tojson }},
      date: {{ track.date | tojson }},
      colour: {{ track.colour | tojson }},
      geojson: {{ track.geojson | tojson }}
    }{% if not loop.last %},{% endif %}
    {% endfor %}
  ];

  const settlements = [
    {% for s in settlements %}
    {
      location: {{ s.location | tojson }},
      place_of_significance: {{ 'true' if s.place_of_significance else 'false' }},
      leg_terminus: {{ 'true' if s.leg_terminus else 'false' }},
      is_timing_point: {{ 'true' if s.is_timing_point else 'false' }},
      geojson: {{ s.geojson | tojson }}
    }{% if not loop.last %},{% endif %}
    {% endfor %}
  ];

  const map = L.map("grand-spine-map");

  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "&copy; OpenStreetMap contributors"
  }).addTo(map);

  const allLayers = L.featureGroup();
  const branchLayers = {};
  const branchVisible = {};

  tracks.forEach(function(track) {
    if (!track.geojson) { return; }
    const layer = L.geoJSON(JSON.parse(track.geojson), {
      style: {
        color: track.colour || "#888",
        weight: 3,
        opacity: 0.8
      }
    }).bindPopup(
      "<strong>" + (track.name || track.branch) + "</strong>" +
      (track.date ? "<br>" + track.date : "")
    );
    layer.addTo(map);
    allLayers.addLayer(layer);
    if (!branchLayers[track.branch]) { branchLayers[track.branch] = []; }
    branchLayers[track.branch].push(layer);
  });

  if (allLayers.getLayers().length > 0) {
    map.fitBounds(allLayers.getBounds(), { padding: [20, 20] });
  } else {
    map.setView([50.57, -3.9], 10);
  }

  // Settlement marker factories
  function makeSignificanceMarker(latlng, location) {
    return L.circleMarker(latlng, {
      radius: 6,
      fillColor: "#c4a23a",
      color: "#fff",
      weight: 1.5,
      opacity: 1,
      fillOpacity: 0.9
    }).bindPopup("<strong>" + location + "</strong>");
  }

  function makeTerminusMarker(latlng, location) {
    return L.circleMarker(latlng, {
      radius: 5,
      fillColor: "#fff",
      color: "#555",
      weight: 2,
      opacity: 1,
      fillOpacity: 1
    }).bindPopup("<strong>" + location + "</strong><br>Leg terminus");
  }

  function makeTimingMarker(latlng, location) {
    return L.circleMarker(latlng, {
      radius: 4,
      fillColor: "#888",
      color: "#888",
      weight: 1,
      opacity: 0.8,
      fillOpacity: 0.6
    }).bindPopup("<strong>" + location + "</strong><br>Timing point");
  }

  // Build settlement layer groups
  const significanceLayers = L.layerGroup();
  const terminusLayers = L.layerGroup();
  const timingLayers = L.layerGroup();

  settlements.forEach(function(s) {
    if (!s.geojson) { return; }
    const coords = JSON.parse(s.geojson).coordinates;
    const latlng = [coords[1], coords[0]];
    if (s.place_of_significance) {
      makeSignificanceMarker(latlng, s.location).addTo(significanceLayers);
    }
    if (s.leg_terminus) {
      makeTerminusMarker(latlng, s.location).addTo(terminusLayers);
    }
    if (s.is_timing_point) {
      makeTimingMarker(latlng, s.location).addTo(timingLayers);
    }
  });

  // Significant places on by default, others off
  significanceLayers.addTo(map);

  // Branch toggle logic
  document.querySelectorAll(".gs-legend-item[data-branch]").forEach(function(el) {
    branchVisible[el.getAttribute("data-branch")] = true;
  });

  function updateTotal() {
    let totalLegs = 0;
    let totalMiles = 0.0;
    document.querySelectorAll(".gs-legend-item[data-branch]").forEach(function(el) {
      const branch = el.getAttribute("data-branch");
      if (branchVisible[branch]) {
        totalLegs  += parseInt(el.getAttribute("data-track-count"), 10);
        totalMiles += parseFloat(el.getAttribute("data-distance"));
      }
    });
    document.getElementById("gs-total-legs").textContent =
      totalLegs + " leg" + (totalLegs !== 1 ? "s" : "");
    document.getElementById("gs-total-miles").textContent =
      totalMiles.toFixed(1) + " mi";
  }

  updateTotal();

  document.querySelectorAll(".gs-legend-item[data-branch]").forEach(function(el) {
    el.addEventListener("click", function() {
      const branch = el.getAttribute("data-branch");
      branchVisible[branch] = !branchVisible[branch];
      el.classList.toggle("gs-legend-item--hidden", !branchVisible[branch]);
      (branchLayers[branch] || []).forEach(function(layer) {
        if (branchVisible[branch]) {
          map.addLayer(layer);
        } else {
          map.removeLayer(layer);
        }
      });
      updateTotal();
    });
  });

  // Settlement toggle buttons
  function bindToggle(buttonId, layerGroup) {
    const btn = document.getElementById(buttonId);
    let visible = btn.classList.contains("gs-toggle--active");
    if (visible) { layerGroup.addTo(map); }
    btn.addEventListener("click", function() {
      visible = !visible;
      btn.classList.toggle("gs-toggle--active", visible);
      if (visible) {
        layerGroup.addTo(map);
      } else {
        map.removeLayer(layerGroup);
      }
    });
  }

  bindToggle("toggle-significance", significanceLayers);
  bindToggle("toggle-terminus", terminusLayers);
  bindToggle("toggle-timing", timingLayers);
</script>
{% endblock %}