{% extends "dashboard_base.html" %}

{% block title %}Supply &amp; Demand — {{ config.APP_NAME }}{% endblock %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<style>
.canvas-section { display: flex; flex-direction: column; gap: 1.5rem; }
</style>
{% endblock %}

{% block content %}

<!-- Masthead -->
<div class="page-masthead">
  <div>
    <h1>Global Supply &amp; Demand</h1>
    <p class="page-masthead-sub">USDA WASDE · coffee fundamentals · production, trade &amp; stocks</p>
  </div>
  <a href="{{ url_for('public.methodology') }}" class="freshness-badge">
    <strong>USDA PSD</strong>
    {% if time_series %}{{ time_series[-1].market_year }}{% else %}—{% endif %}
  </a>
</div>

<!-- Filter bar -->
<div class="filter-bar" id="supply-filter-bar">
  <!-- Time range -->
  <div class="filter-pills" id="range-pills">
    {% for r, label in [("5y","5Y"),("10y","10Y"),("max","Max")] %}
    <button type="button"
            class="filter-pill {{ 'active' if range_key == r }}"
            {% if plan == 'free' and r in ('10y','max') %}disabled title="Upgrade for full history"{% endif %}
            onclick="setFilter('range', '{{ r }}')">{{ label }}</button>
    {% endfor %}
  </div>

  <!-- Metric selector -->
  <div class="filter-pills" id="metric-pills">
    {% for m, label in [("production","Production"),("exports","Exports"),("imports","Imports"),("ending_stocks","Stocks")] %}
    <button type="button"
            class="filter-pill {{ 'active' if metric == m }}"
            onclick="setFilter('metric', '{{ m }}')">{{ label }}</button>
    {% endfor %}
  </div>
</div>

<!-- HTMX canvas -->
<div id="supply-canvas" class="canvas-section">
  {% include "supply_canvas.html" %}
</div>

{% endblock %}

{% block scripts %}
<script>
var SUPPLY_URL = '{{ url_for("dashboard.supply") }}';
var currentRange  = {{ range_key | tojson }};
var currentMetric = {{ metric | tojson }};

function setFilter(key, val) {
  if (key === 'range') currentRange = val;
  else currentMetric = val;

  var url = SUPPLY_URL + '?range=' + currentRange + '&metric=' + currentMetric;
  window.history.pushState({}, '', url);
  document.getElementById('supply-canvas').classList.add('canvas-loading');
  htmx.ajax('GET', url, { target: '#supply-canvas', swap: 'innerHTML' });
}

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

// Restore filter state on browser back/forward
window.addEventListener('popstate', function () {
  var p = new URLSearchParams(window.location.search);
  currentRange  = p.get('range')  || '5y';
  currentMetric = p.get('metric') || 'production';
  var url = SUPPLY_URL + '?range=' + currentRange + '&metric=' + currentMetric;
  document.getElementById('supply-canvas').classList.add('canvas-loading');
  htmx.ajax('GET', url, { target: '#supply-canvas', swap: 'innerHTML' });
});
</script>
{% endblock %}
