{% extends "dashboard_base.html" %}

{% block title %}Weather — {{ config.APP_NAME }}{% endblock %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<!-- Leaflet for the overview map (only loaded on this page) -->
<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>
<style>
/* ── Weather page ── */
.weather-map {
  height: 340px;
  border-radius: 1.25rem;
  border: 1px solid var(--color-parchment);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .weather-map { display: none; }
}

/* Location card grid */
.location-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
  .location-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .location-grid { grid-template-columns: repeat(4, 1fr); }
}

.loc-card {
  background: white;
  border: 1px solid var(--color-parchment);
  border-radius: 1rem;
  padding: 0.875rem 1rem;
  cursor: pointer;
  text-decoration: none;
  display: block;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 3px rgba(44,24,16,0.04);
}
.loc-card:hover {
  border-color: var(--color-copper);
  box-shadow: 0 2px 8px rgba(180,83,9,0.12);
}
.loc-card-name {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-espresso);
  margin-bottom: 0.125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loc-card-meta {
  font-size: 0.6875rem;
  color: var(--color-stone);
  margin-bottom: 0.5rem;
}
.loc-card-stress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.stress-bar-track {
  flex: 1;
  height: 5px;
  background: var(--color-parchment);
  border-radius: 999px;
  overflow: hidden;
}
.stress-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s;
}
.stress-bar-fill.low    { background: #15803D; }
.stress-bar-fill.medium { background: #B45309; }
.stress-bar-fill.high   { background: #DC2626; }
.stress-value {
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.stress-value.low    { color: #15803D; }
.stress-value.medium { color: #B45309; }
.stress-value.high   { color: #DC2626; }

/* Alert table */
.cc-trow {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.7fr 0.7fr 0.7fr 0.5fr 0.7fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--color-parchment);
  font-size: 0.8125rem;
}
.cc-trow:last-child { border-bottom: none; }
.cc-trow:hover { background: rgba(232,223,213,0.25); }
.cc-thead {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-stone);
  background: rgba(232,223,213,0.35);
  border-radius: 0.625rem 0.625rem 0 0;
}
.flag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.flag-dot.on  { background: #DC2626; }
.flag-dot.off { background: var(--color-parchment); }

@keyframes cc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cc-in   { animation: cc-in 0.25s ease both; }
.cc-in-2 { animation: cc-in 0.25s 0.07s ease both; }
</style>
{% endblock %}

{% block content %}

<!-- Masthead -->
<div class="page-masthead cc-in">
  <div>
    <h1>Weather &amp; Crop Stress</h1>
    <p class="page-masthead-sub">12 coffee-growing origins · Open-Meteo ERA5 reanalysis</p>
  </div>
  {% if stress_latest %}
  <a href="{{ url_for('public.methodology') }}" class="freshness-badge">
    <strong>Weather</strong> {{ stress_latest.observation_date }}
  </a>
  {% endif %}
</div>

<!-- Filter bar -->
<div class="filter-bar" id="wx-filter-bar">
  <div class="filter-pills" id="range-pills">
    {% for r, label in [("3m","3M"),("6m","6M"),("1y","1Y"),("2y","2Y"),("5y","5Y")] %}
    <button type="button"
            class="filter-pill {{ 'active' if range_key == r }}"
            onclick="setFilter('range','{{ r }}')">{{ label }}</button>
    {% endfor %}
  </div>

  {% if location_id %}
  <a href="{{ url_for('dashboard.weather') }}?range={{ range_key }}"
     class="filter-pill"
     style="text-decoration:none;">← All Locations</a>
  {% endif %}
</div>

<!-- HTMX canvas -->
<div id="weather-canvas">
  {% include "weather_canvas.html" %}
</div>

{% endblock %}

{% block scripts %}
<script>
var WEATHER_URL = '{{ url_for("dashboard.weather") }}';
var currentRange    = {{ range_key | tojson }};
var currentLocation = {{ location_id | tojson }};

function setFilter(key, val) {
  if (key === 'range') currentRange = val;
  else if (key === 'location') currentLocation = val;
  var url = WEATHER_URL + '?range=' + currentRange;
  if (currentLocation) url += '&location=' + encodeURIComponent(currentLocation);
  window.history.pushState({}, '', url);
  document.getElementById('weather-canvas').classList.add('canvas-loading');
  htmx.ajax('GET', url, { target: '#weather-canvas', swap: 'innerHTML' });
}

document.addEventListener('htmx:afterSwap', function (e) {
  if (e.detail.target.id === 'weather-canvas') {
    document.getElementById('weather-canvas').classList.remove('canvas-loading');
    requestAnimationFrame(function() {
      ['globalStressChart', 'locStressChart', 'locTempChart'].forEach(function(id) {
        var c = Chart.getChart(id);
        if (c) c.resize();
      });
    });
  }
});

window.addEventListener('popstate', function () {
  var p = new URLSearchParams(window.location.search);
  currentRange    = p.get('range') || '1y';
  currentLocation = p.get('location') || '';
  var url = WEATHER_URL + '?range=' + currentRange;
  if (currentLocation) url += '&location=' + encodeURIComponent(currentLocation);
  document.getElementById('weather-canvas').classList.add('canvas-loading');
  htmx.ajax('GET', url, { target: '#weather-canvas', swap: 'innerHTML' });
});
</script>
{% endblock %}
