{% extends "dashboard_base.html" %}

{% block title %}Country Comparison — {{ config.APP_NAME }}{% endblock %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<style>
/* ── Country Comparison: Commodity Intelligence Terminal ── */

.cc-masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1.5px solid var(--color-parchment);
}
.cc-page-title {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-espresso);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
}
.cc-page-subtitle {
  font-size: 0.875rem;
  color: var(--color-stone);
  margin-top: 0.375rem;
}
.cc-masthead-right { text-align: right; flex-shrink: 0; }
.cc-stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-copper);
  line-height: 1;
}
.cc-stat-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-stone);
  margin-top: 0.25rem;
}

/* Metric segment */
.cc-metric-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.cc-metrics {
  display: flex;
  background: var(--color-latte);
  border: 1px solid var(--color-parchment);
  border-radius: 0.875rem;
  padding: 3px;
}
.cc-metric-btn {
  padding: 0.375rem 1.125rem;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-stone-dark);
  border: none;
  background: none;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.cc-metric-btn:hover:not(.active) { background: white; color: var(--color-espresso); }
.cc-metric-btn.active {
  background: var(--color-copper);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(180,83,9,0.3);
}
.cc-selection-status { font-size: 0.75rem; color: var(--color-stone); }
.cc-selection-status strong { color: var(--color-espresso); }

/* Layout */
.cc-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .cc-body { grid-template-columns: 300px 1fr; }
}

/* ── Dark selector panel ── */
.cc-panel {
  background: var(--color-espresso);
  border-radius: 1.25rem;
  overflow: hidden;
  position: sticky;
  top: calc(56px + 1.25rem);
}
.cc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.875rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.cc-panel-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
}
.cc-count-badge {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-copper);
  background: rgba(180,83,9,0.15);
  padding: 2px 7px;
  border-radius: 100px;
  transition: color 0.2s, background 0.2s;
}
.cc-search-wrap {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cc-search {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 0.5rem;
  padding: 0.4rem 0.75rem;
  color: rgba(255,255,255,0.85);
  font-size: 0.8125rem;
  outline: none;
  transition: border-color 0.15s;
  font-family: var(--font-sans);
}
.cc-search::placeholder { color: rgba(255,255,255,0.25); }
.cc-search:focus { border-color: var(--color-copper); }

.cc-list {
  padding: 0.375rem 0.5rem;
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.cc-row {
  display: flex;
  align-items: center;
  padding: 0.4375rem 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
}
.cc-row:hover { background: rgba(255,255,255,0.05); }
.cc-row.selected { background: rgba(180,83,9,0.18); }
.cc-row-rank {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(255,255,255,0.2);
  width: 1.5rem;
  text-align: right;
  flex-shrink: 0;
  padding-right: 0.5rem;
}
.cc-row-name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-row.selected .cc-row-name { color: rgba(255,255,255,0.95); }
.cc-row-val {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(255,255,255,0.25);
  flex-shrink: 0;
  padding-right: 0.5rem;
}
.cc-row.selected .cc-row-val { color: var(--color-copper); }
.cc-checkbox {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1.5px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.cc-row.selected .cc-checkbox { background: var(--color-copper); border-color: var(--color-copper); }
.cc-check { display: none; }
.cc-row.selected .cc-check { display: block; }

.cc-panel-foot {
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.cc-clear {
  width: 100%;
  padding: 0.5rem;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-sans);
}
.cc-clear:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.7); }

/* ── Canvas ── */
.cc-canvas {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  transition: opacity 0.15s;
}
.cc-canvas.cc-loading { opacity: 0.45; pointer-events: none; }

/* Chips */
.cc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  min-height: 30px;
  align-items: center;
}
.cc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem 0.2rem 0.625rem;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: opacity 0.15s;
  line-height: 1.4;
}
.cc-chip:hover { opacity: 0.75; }
.cc-chip-x { font-size: 0.875rem; opacity: 0.65; line-height: 1; }
.cc-chips-empty { font-size: 0.75rem; color: var(--color-stone); font-style: italic; }

/* Chart card */
.cc-chart-card {
  background: white;
  border: 1px solid var(--color-parchment);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(44,24,16,0.05), 0 4px 20px rgba(44,24,16,0.03);
}
.cc-chart-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 0;
  gap: 1rem;
}
.cc-chart-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-espresso);
  line-height: 1.2;
}
.cc-chart-meta { font-size: 0.6875rem; color: var(--color-stone); margin-top: 3px; }
.cc-chart-unit {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-stone);
  background: var(--color-latte);
  border: 1px solid var(--color-parchment);
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 4px;
}
.cc-chart-body { padding: 1rem 1.5rem 1.5rem; }
.cc-chart-body canvas { max-height: 340px !important; }

/* Rankings table */
.cc-table-card {
  background: white;
  border: 1px solid var(--color-parchment);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(44,24,16,0.05);
}
.cc-table-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.5rem;
  border-bottom: 1px solid var(--color-parchment);
}
.cc-table-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-stone);
  font-weight: 700;
}
.cc-table-year {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-stone);
  background: var(--color-latte);
  border: 1px solid var(--color-parchment);
  padding: 2px 7px;
  border-radius: 100px;
}
.cc-trow {
  display: grid;
  grid-template-columns: 2rem 1fr 72px 5.5rem;
  align-items: center;
  padding: 0.5625rem 1.5rem;
  border-bottom: 1px solid rgba(232,223,213,0.5);
  transition: background 0.1s;
  gap: 0.5rem;
}
.cc-trow:last-child { border-bottom: none; }
.cc-trow:hover { background: var(--color-latte); }
.cc-t-rank { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-stone); text-align: right; }
.cc-t-country { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.cc-t-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cc-t-name { font-size: 0.8125rem; font-weight: 500; color: var(--color-espresso); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-t-bar-wrap { height: 4px; background: var(--color-parchment); border-radius: 2px; overflow: hidden; }
.cc-t-bar { height: 100%; border-radius: 2px; transition: width 0.5s ease; }
.cc-t-value { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; color: var(--color-espresso); text-align: right; }
.cc-trow-head { padding-top: 0.375rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--color-parchment); }
.cc-trow-head:hover { background: none; }
.cc-t-head { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-stone); font-weight: 600; }

/* Empty state */
.cc-empty {
  background: white;
  border: 1px solid var(--color-parchment);
  border-radius: 1.25rem;
  padding: 4.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cc-empty-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-latte);
  border: 2px solid var(--color-parchment);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.cc-empty-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--color-espresso); margin-bottom: 0.5rem; }
.cc-empty-body { font-size: 0.875rem; color: var(--color-stone); line-height: 1.65; max-width: 300px; }

@keyframes cc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.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="cc-masthead">
  <div>
    <h1 class="cc-page-title">Origin Intelligence</h1>
    <p class="cc-page-subtitle">Compare coffee metrics across {{ all_countries|length }} producing &amp; consuming nations</p>
  </div>
  <div class="cc-masthead-right">
    <div class="cc-stat-value">{{ all_countries|length }}</div>
    <div class="cc-stat-label">Countries tracked</div>
  </div>
</div>

<!-- Metric selector + status -->
<div class="cc-metric-row">
  <div class="cc-metrics" id="metric-tabs">
    {% for m in ["production", "exports", "imports", "ending_stocks"] %}
    <button class="cc-metric-btn {{ 'active' if metric == m }}"
            onclick="setMetric('{{ m }}')" type="button">
      {{ m.replace("_", " ").title() }}
    </button>
    {% endfor %}
  </div>
  <span class="cc-selection-status" id="selection-status">
    {% if selected_codes %}
      Showing <strong>{{ selected_codes|length }}</strong>
      {{ "country" if selected_codes|length == 1 else "countries" }}
    {% else %}
      Select countries to compare
    {% endif %}
  </span>
</div>

<!-- Body -->
<div class="cc-body">

  <!-- ── Dark selector panel (static, never swapped) ── -->
  <div class="cc-panel">
    <div class="cc-panel-head">
      <span class="cc-panel-label">Origins</span>
      <span class="cc-count-badge" id="sel-count">{{ selected_codes|length }}/10</span>
    </div>
    <div class="cc-search-wrap">
      <input class="cc-search" type="text" placeholder="Search…"
             oninput="filterList(this.value)" autocomplete="off">
    </div>
    <div class="cc-list" id="cc-list">
      {% for c in all_countries %}
      <div class="cc-row {{ 'selected' if c.country_code in selected_codes }}"
           data-code="{{ c.country_code }}"
           data-name="{{ c.country_name }}"
           onclick="toggleCountry('{{ c.country_code }}')">
        <span class="cc-row-rank">{{ loop.index }}</span>
        <span class="cc-row-name">{{ c.country_name }}</span>
        <span class="cc-row-val">{{ "{:,.0f}".format(c.production) if c.production else "" }}</span>
        <div class="cc-checkbox">
          <svg class="cc-check" width="8" height="6" viewBox="0 0 8 6" fill="none">
            <path d="M1 3L3 5L7 1" stroke="white" stroke-width="1.5"
                  stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
      </div>
      {% endfor %}
    </div>
    <div class="cc-panel-foot">
      <button class="cc-clear" onclick="clearAll()" type="button">Clear selection</button>
    </div>
  </div>

  <!-- ── Canvas: HTMX target ── -->
  <div class="cc-canvas" id="cc-canvas">
    <!-- Chips -->
    <div class="cc-chips" id="cc-chips">
      {% for code in selected_codes %}
        {% set c = all_countries | selectattr("country_code", "equalto", code) | first %}
        {% if c %}
        <span class="cc-chip" data-code="{{ code }}" onclick="toggleCountry('{{ code }}')">
          {{ c.country_name }}
          <span class="cc-chip-x">×</span>
        </span>
        {% endif %}
      {% endfor %}
      {% if not selected_codes %}
      <span class="cc-chips-empty">No countries selected</span>
      {% endif %}
    </div>

    <!-- Initial chart or empty state -->
    {% if comparison_data %}
    <div class="cc-chart-card">
      <div class="cc-chart-top">
        <div>
          <div class="cc-chart-title">{{ metric.replace("_"," ").title() }} Over Time</div>
          <div class="cc-chart-meta">USDA WASDE · 1000 60-kg bags · click legend to toggle</div>
        </div>
        <span class="cc-chart-unit">1k bags</span>
      </div>
      <div class="cc-chart-body">
        <canvas id="comparisonChart"></canvas>
      </div>
    </div>
    <div class="cc-table-card" id="cc-rankings"></div>
    {% else %}
    <div class="cc-empty">
      <div class="cc-empty-ring">
        <svg width="22" height="22" fill="none" stroke="var(--color-copper)"
             stroke-width="1.75" stroke-linecap="round" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="9"/>
          <path d="M3 12h18"/>
          <path d="M12 3c-3.5 4.5-3.5 13.5 0 18"/>
          <path d="M12 3c3.5 4.5 3.5 13.5 0 18"/>
        </svg>
      </div>
      <div class="cc-empty-title">Select Origins to Compare</div>
      <p class="cc-empty-body">Choose up to 10 coffee-producing countries from the panel on the left to visualize production, trade flows, and inventory trends.</p>
    </div>
    {% endif %}
  </div>

</div>
{% endblock %}

{% block scripts %}
<script>
// ── Palette (shared with partial's inline script) ──────────────────────────
const PALETTE = [
  '#B45309', '#15803D', '#7C3AED', '#0284C7', '#BE185D',
  '#0F766E', '#C2410C', '#1D4ED8', '#92400E', '#047857',
];

// ── Mutable state (updated by partial after every swap) ───────────────────
window.orderedSel    = {{ selected_codes | tojson }}.slice();
window.selectedSet   = new Set(window.orderedSel);
window.currentMetric = {{ metric | tojson }};

const COUNTRIES_URL = '{{ url_for("dashboard.countries") }}';

// ── URL builder ──────────────────────────────────────────────────────────
function buildUrl() {
  var p = new URLSearchParams();
  p.set('metric', window.currentMetric);
  window.orderedSel.forEach(function (c) {
    if (window.selectedSet.has(c)) p.append('country', c);
  });
  return COUNTRIES_URL + '?' + p.toString();
}

// ── Fetch canvas partial ─────────────────────────────────────────────────
function fetchCanvas() {
  var url = buildUrl();
  window.history.pushState({}, '', url);
  document.getElementById('cc-canvas').classList.add('cc-loading');
  htmx.ajax('GET', url, { target: '#cc-canvas', swap: 'innerHTML' });
}

// ── Toggle country: optimistic UI then fetch ─────────────────────────────
function toggleCountry(code) {
  if (window.selectedSet.has(code)) {
    window.selectedSet.delete(code);
    var idx = window.orderedSel.indexOf(code);
    if (idx > -1) window.orderedSel.splice(idx, 1);
  } else {
    if (window.selectedSet.size >= 10) { flashCount(); return; }
    window.selectedSet.add(code);
    window.orderedSel.push(code);
  }
  // Optimistic: update row + badge immediately
  var row = document.querySelector('.cc-row[data-code="' + code + '"]');
  if (row) row.classList.toggle('selected', window.selectedSet.has(code));
  document.getElementById('sel-count').textContent = window.selectedSet.size + '/10';
  fetchCanvas();
}

// ── Metric change ────────────────────────────────────────────────────────
function setMetric(m) {
  window.currentMetric = m;
  document.querySelectorAll('.cc-metric-btn').forEach(function (btn) {
    btn.classList.toggle('active',
      btn.textContent.trim().toLowerCase().replace(/ /g, '_') === m);
  });
  fetchCanvas();
}

// ── Clear all ────────────────────────────────────────────────────────────
function clearAll() {
  window.selectedSet.clear();
  window.orderedSel.length = 0;
  document.querySelectorAll('.cc-row.selected').forEach(function (r) {
    r.classList.remove('selected');
  });
  document.getElementById('sel-count').textContent = '0/10';
  fetchCanvas();
}

// ── Search / filter panel list ───────────────────────────────────────────
function filterList(query) {
  var q = query.toLowerCase().trim();
  document.querySelectorAll('.cc-row').forEach(function (row) {
    row.style.display = (!q || row.dataset.name.toLowerCase().includes(q)) ? '' : 'none';
  });
}

// ── Flash badge on 10-country limit ─────────────────────────────────────
function flashCount() {
  var el = document.getElementById('sel-count');
  el.style.color = '#EF4444';
  el.style.background = 'rgba(239,68,68,0.12)';
  setTimeout(function () { el.style.color = ''; el.style.background = ''; }, 700);
}

// ── HTMX lifecycle ──────────────────────────────────────────────────────
document.addEventListener('htmx:afterSwap', function (e) {
  if (e.detail.target.id === 'cc-canvas') {
    document.getElementById('cc-canvas').classList.remove('cc-loading');
  }
});

// ── Rankings table (called from page load + partial script) ─────────────
function buildRankings(data, metric, orderedCodes) {
  var rankEl = document.getElementById('cc-rankings');
  if (!rankEl) return;

  var maxYear = Math.max.apply(null, data.map(function (r) { return r.market_year; }));
  var latest  = data.filter(function (r) { return r.market_year === maxYear; });
  latest.sort(function (a, b) { return (b[metric] || 0) - (a[metric] || 0); });
  var maxVal = latest[0] ? (latest[0][metric] || 1) : 1;

  var rows = latest.map(function (row, i) {
    var pct   = maxVal > 0 ? Math.round((row[metric] || 0) / maxVal * 100) : 0;
    var pi    = orderedCodes.indexOf(row.country_code);
    var color = PALETTE[(pi >= 0 ? pi : i) % PALETTE.length];
    var val   = row[metric] != null ? Number(row[metric]).toLocaleString() : '—';
    return '<div class="cc-trow">'
      + '<span class="cc-t-rank">' + (i + 1) + '</span>'
      + '<div class="cc-t-country">'
      +   '<div class="cc-t-dot" style="background:' + color + '"></div>'
      +   '<span class="cc-t-name">' + row.country_name + '</span>'
      + '</div>'
      + '<div class="cc-t-bar-wrap"><div class="cc-t-bar" style="width:' + pct + '%;background:' + color + '"></div></div>'
      + '<span class="cc-t-value">' + val + '</span>'
      + '</div>';
  }).join('');

  var metricLabel = metric.replace(/_/g, ' ');
  var colHead = '<div class="cc-trow cc-trow-head">'
    + '<span></span>'
    + '<span class="cc-t-head">Country</span>'
    + '<span></span>'
    + '<span class="cc-t-head" style="text-align:right">' + metricLabel + ' (1k bags)</span>'
    + '</div>';

  rankEl.innerHTML = '<div class="cc-table-top">'
    + '<span class="cc-table-label">Latest snapshot · ' + metricLabel + '</span>'
    + '<span class="cc-table-year">' + maxYear + '</span>'
    + '</div>' + colHead + rows;
}

// ── Chart.js (called from page load + partial script) ───────────────────
function initChart(data, metric, orderedCodes) {
  var existing = Chart.getChart('comparisonChart');
  if (existing) existing.destroy();

  var canvas = document.getElementById('comparisonChart');
  if (!canvas) return;

  var byCode  = {};
  data.forEach(function (row) {
    if (!byCode[row.country_code]) byCode[row.country_code] = { name: row.country_name, rows: [] };
    byCode[row.country_code].rows.push(row);
  });

  var allYears = Array.from(new Set(data.map(function (r) { return r.market_year; }))).sort();

  var datasets = orderedCodes
    .filter(function (code) { return byCode[code]; })
    .map(function (code, i) {
      var entry   = byCode[code];
      var yearMap = {};
      entry.rows.forEach(function (r) { yearMap[r.market_year] = r[metric]; });
      var color   = PALETTE[i % PALETTE.length];
      return {
        label:           entry.name,
        data:            allYears.map(function (y) { return yearMap[y] != null ? yearMap[y] : null; }),
        borderColor:     color,
        backgroundColor: color + '14',
        borderWidth:     2.5,
        pointRadius:     0,
        pointHitRadius:  14,
        tension:         0.35,
        spanGaps:        true,
        fill:            false,
      };
    });

  new Chart(canvas, {
    type: 'line',
    data: { labels: allYears, datasets: datasets },
    options: {
      responsive:  true,
      animation:   { duration: 400, easing: 'easeInOutQuart' },
      interaction: { mode: 'index', intersect: false },
      plugins: {
        legend: {
          position: 'bottom',
          labels: {
            boxWidth: 10, boxHeight: 10,
            borderRadius: 5, useBorderRadius: true,
            padding: 16,
            font: { family: "'DM Sans', sans-serif", size: 11.5 },
            color: '#57534E',
          },
        },
        tooltip: {
          backgroundColor: '#2C1810',
          titleColor:      'rgba(255,255,255,0.5)',
          bodyColor:       'rgba(255,255,255,0.9)',
          borderColor:     'rgba(255,255,255,0.07)',
          borderWidth:     1,
          padding:         12,
          cornerRadius:    10,
          titleFont:       { family: "'DM Sans', sans-serif", size: 11, weight: '600' },
          bodyFont:        { family: "'DM Sans', sans-serif", size: 12 },
          callbacks: {
            label: function (ctx) {
              return ' ' + ctx.dataset.label + ': ' + Number(ctx.raw || 0).toLocaleString();
            },
          },
        },
      },
      scales: {
        x: {
          grid:   { color: 'rgba(232,223,213,0.45)', drawTicks: false },
          ticks:  { font: { family: "'DM Sans', sans-serif", size: 11 }, color: '#78716C', maxTicksLimit: 8 },
          border: { display: false },
        },
        y: {
          title: {
            display: true,
            text:    metric.replace(/_/g, ' ') + '  (1k 60-kg bags)',
            font:    { family: "'DM Sans', sans-serif", size: 10 },
            color:   '#78716C',
          },
          grid:   { color: 'rgba(232,223,213,0.45)', drawTicks: false },
          ticks: {
            font:     { family: "ui-monospace, 'Cascadia Code', monospace", size: 11 },
            color:    '#78716C',
            callback: function (v) {
              return v >= 1000000 ? (v / 1000000).toFixed(1) + 'M'
                   : v >= 1000   ? (v / 1000).toFixed(0) + 'k'
                   : v;
            },
          },
          border:      { display: false },
          beginAtZero: false,
        },
      },
    },
  });
}

// ── Initial page-load: apply palette + init if data present ──────────────
document.querySelectorAll('#cc-chips .cc-chip[data-code]').forEach(function (chip, i) {
  chip.style.background = PALETTE[i % PALETTE.length];
});

var _initData   = {{ comparison_data | tojson }};
var _initMetric = {{ metric | tojson }};
if (_initData.length > 0) {
  buildRankings(_initData, _initMetric, window.orderedSel);
  initChart(_initData, _initMetric, window.orderedSel);
}
</script>
{% endblock %}
