{% extends "base.html" %}
{% block title %}{{ _('Estrategia Combinada') }} — BTM{% endblock %}

{% block extra_head %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<style>
/* ── Selector ── */
.combinadas-selector {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.combinadas-selector .form-label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bs-secondary-color);
  margin-bottom: .35rem;
}
.combinadas-selector .form-select {
  font-size: .9rem;
  font-weight: 500;
}

/* ── Tabs ── */
#combinadas-tabs .nav-link {
  font-size: .8rem;
  font-weight: 500;
  padding: .5rem 1rem;
}

/* ── KPI cards ── */
.kpi-card {
  border-radius: 10px;
  padding: 1rem 1.1rem;
}
.kpi-card .kpi-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  opacity: .6;
  margin-bottom: .25rem;
}
.kpi-card .kpi-value {
  font-size: 1.35rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
}
.kpi-pos { color: #1D9E75; }
.kpi-neg { color: #E24B4A; }
.kpi-pur { color: #7C3AED; }

/* ── Tabla resultados ── */
.combinadas-table th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.combinadas-table td {
  font-size: .82rem;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
}
.combinadas-table tr.top-row td { font-weight: 600; }

/* ── Hero info ── */
.tab-hero {
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  font-size: .85rem;
  line-height: 1.6;
  border: 1px solid;
}

/* ── Heatmap ── */
.hm-table { border-collapse: separate; border-spacing: 3px; }
.hm-table th {
  font-size: .72rem;
  font-weight: 600;
  text-align: center;
  padding: 3px 6px;
  background: transparent !important;
  border: none !important;
}
.hm-table td {
  padding: 0;
  border: none !important;
  background: transparent !important;
}
.hm-cell {
  border-radius: 5px;
  width: 68px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  box-sizing: border-box;
  border: 2px solid transparent;
  transition: opacity .12s;
  cursor: default;
  margin: 0 auto;
}
.hm-cell.best { border-color: #1D9E75; }
.hm-cell:hover { opacity: .75; }
.hm-row-label {
  font-size: .72rem;
  font-weight: 600;
  text-align: right;
  padding-right: 8px !important;
  white-space: nowrap;
  background: transparent !important;
  border: none !important;
}

/* ── Month grid ── */
.month-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 5px; }
.month-cell {
  border-radius: 6px;
  padding: 7px 5px;
  text-align: center;
}
.month-cell .mlabel {
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .6;
  display: block;
  margin-bottom: 3px;
}
.month-cell .mval {
  font-size: .78rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
}

/* ── Loading spinner ── */
#combinadas-loading {
  display: none;
  text-align: center;
  padding: 3rem;
}

/* ── Dark mode overrides ── */
body.dark-mode .combinadas-selector {
  background: #1a1e25;
  border-color: rgba(255,255,255,.1);
}
body.dark-mode .combinadas-table thead tr {
  background: #22272f !important;
}
body.dark-mode .combinadas-table tbody tr {
  background: #13161b;
  color: #e8eaf0;
}
body.dark-mode .combinadas-table tbody tr:nth-child(even) {
  background: #1a1e25;
}
body.dark-mode .combinadas-table tbody tr:hover {
  background: #22272f;
}
body.dark-mode .hm-table th { color: #8b91a0; }
body.dark-mode .hm-row-label { color: #8b91a0; }
body.dark-mode .tab-hero { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
body.dark-mode .kpi-card { background: #1a1e25; }
body.dark-mode .month-cell .mlabel { color: #8b91a0; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-3 px-lg-4 py-3">

  <!-- Encabezado -->
  <div class="d-flex align-items-center gap-2 mb-3">
    <i class="bi bi-layers fs-5 text-primary"></i>
    <h5 class="mb-0 fw-bold">{{ _('Estrategia Combinada') }}</h5>
    <span class="badge bg-secondary ms-1" style="font-size:.65rem;">Vertical + Iron Condor</span>
  </div>

  <!-- Selector -->
  <div class="combinadas-selector">
    <div class="row g-3 align-items-end">
      <div class="col-sm-5 col-md-4">
        <label class="form-label">{{ _('Índice + Perfil de riesgo') }}</label>
        <select class="form-select" id="sel-combinacion">
          <option value="">— {{ _('Seleccionar') }} —</option>
          {% for c in combinaciones %}
          <option value="{{ c.symbol }}|{{ c.riesgo }}"
                  data-desde="{{ c.desde }}"
                  data-hasta="{{ c.hasta }}">
            {{ c.label }}
          </option>
          {% endfor %}
        </select>
      </div>
      <div class="col-sm-auto">
        <button class="btn btn-primary" id="btn-analizar" disabled>
          <i class="bi bi-bar-chart-line me-1"></i>{{ _('Ver análisis') }}
        </button>
      </div>
      <div class="col-sm-auto ms-sm-auto" id="periodo-label" style="display:none">
        <small class="text-muted">
          <i class="bi bi-calendar3 me-1"></i>
          <span id="periodo-texto"></span>
          &nbsp;·&nbsp;
          <span id="ndias-texto"></span>
        </small>
      </div>
    </div>
  </div>

  <!-- Loading -->
  <div id="combinadas-loading">
    <div class="spinner-border text-primary" role="status"></div>
    <p class="mt-2 text-muted small">{{ _('Analizando') }} 2,304 {{ _('pares') }}...</p>
  </div>

  <!-- Resultados -->
  <div id="combinadas-resultado" style="display:none">

    <!-- KPIs -->
    <div class="row g-2 mb-3" id="kpi-row"></div>

    <!-- Tabs -->
    <ul class="nav nav-tabs mb-3" id="combinadas-tabs">
      <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-podio">🏆 {{ _('Podio') }}</button></li>
      <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-pl">💰 Top P/L</button></li>
      <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-sharpe">📐 Top Sharpe</button></li>
      <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-corr">🔀 {{ _('Baja correlación') }}</button></li>
      <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-heatmap">🗺 Heatmap</button></li>
      <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-estabilidad">📅 {{ _('Estabilidad') }}</button></li>
    </ul>

    <div class="tab-content">

      <!-- PODIO -->
      <div class="tab-pane fade show active" id="tab-podio">
        <div class="tab-hero" style="background:rgba(45,212,191,.06);border-color:rgba(45,212,191,.2)">
          <strong>{{ _('Podio') }}</strong> — {{ _('Los mejores pares (hora Vertical + hora IC) ordenados por P/L total. Una hora para cada estrategia, elegidas independientemente.') }}
        </div>
        <div class="table-responsive">
          <table class="table table-hover combinadas-table" id="tbl-podio">
            <thead class="table-dark">
              <tr>
                <th></th><th>Vertical</th><th>IC</th>
                <th>P/L total</th><th>Media/día</th><th>Win rate</th>
                <th>Corr.</th><th>Peor día</th><th>Sharpe</th><th></th>
              </tr>
            </thead>
            <tbody id="tbody-podio"></tbody>
          </table>
        </div>
        <div class="mt-3">
          <p class="small text-muted mb-2 fw-semibold text-uppercase" style="letter-spacing:.05em">{{ _('P/L acumulado por hora') }}</p>
          <div style="position:relative;height:220px">
            <canvas id="chart-horas" role="img" aria-label="P/L acumulado por hora"></canvas>
          </div>
        </div>
      </div>

      <!-- TOP P/L -->
      <div class="tab-pane fade" id="tab-pl">
        <div class="tab-hero" style="background:rgba(61,214,140,.06);border-color:rgba(61,214,140,.2)">
          <strong>Top P/L</strong> — {{ _('Ranking por ganancia bruta acumulada. Cuánto habría ganado ese par operando todos los días del período. No penaliza la volatilidad.') }}
        </div>
        <div class="table-responsive">
          <table class="table table-hover combinadas-table">
            <thead class="table-dark">
              <tr><th>#</th><th>Vertical</th><th>IC</th><th>P/L total</th><th>Media/día</th><th>Win rate</th><th>Corr.</th><th>Peor día</th><th>Sharpe</th></tr>
            </thead>
            <tbody id="tbody-pl"></tbody>
          </table>
        </div>
      </div>

      <!-- TOP SHARPE -->
      <div class="tab-pane fade" id="tab-sharpe">
        <div class="tab-hero" style="background:rgba(96,165,250,.06);border-color:rgba(96,165,250,.2)">
          <strong>Top Sharpe</strong> — {{ _('Retorno ajustado por riesgo (media / desvío estándar diario). Un Sharpe alto indica ganancias consistentes y equity curve suave — el criterio más robusto.') }}
        </div>
        <div class="table-responsive">
          <table class="table table-hover combinadas-table">
            <thead class="table-dark">
              <tr><th>#</th><th>Vertical</th><th>IC</th><th>Sharpe</th><th>P/L total</th><th>Win rate</th><th>Corr.</th><th>Peor día</th></tr>
            </thead>
            <tbody id="tbody-sharpe"></tbody>
          </table>
        </div>
      </div>

      <!-- BAJA CORRELACIÓN -->
      <div class="tab-pane fade" id="tab-corr">
        <div class="tab-hero" style="background:rgba(167,139,250,.06);border-color:rgba(167,139,250,.2)">
          <strong>{{ _('Baja correlación') }}</strong> — {{ _('Pares donde V e IC se mueven de forma casi independiente (corr < 0.10). Cuando una pierde, la otra no necesariamente pierde. Mayor resiliencia del portfolio.') }}
        </div>
        <div class="table-responsive">
          <table class="table table-hover combinadas-table">
            <thead class="table-dark">
              <tr><th>#</th><th>Vertical</th><th>IC</th><th>Corr.</th><th>P/L total</th><th>Win rate</th><th>Peor día</th><th>Sharpe</th></tr>
            </thead>
            <tbody id="tbody-corr"></tbody>
          </table>
        </div>
      </div>

      <!-- HEATMAP -->
      <div class="tab-pane fade" id="tab-heatmap">
        <div class="tab-hero" style="background:rgba(251,191,36,.06);border-color:rgba(251,191,36,.2)">
          <strong>Heatmap</strong> — {{ _('P/L total combinado para cada par (hora V × hora IC). Verde brillante = mayor ganancia. El borde verde marca la celda ganadora de cada fila.') }}
        </div>
        <div class="overflow-auto">
          <div id="heatmap-container"></div>
        </div>
      </div>

      <!-- ESTABILIDAD -->
      <div class="tab-pane fade" id="tab-estabilidad">
        <div class="tab-hero" style="background:rgba(45,212,191,.06);border-color:rgba(45,212,191,.2)">
          <strong>{{ _('Estabilidad temporal') }} — Rolling Window</strong> — {{ _('¿El par ganador fue consistente mes a mes? Aquí se muestran los pares que más meses positivos tuvieron, y se compara el par más estable contra el de mayor P/L total.') }}
        </div>
        <div id="estabilidad-content"></div>
      </div>

    </div><!-- /tab-content -->
  </div><!-- /resultado -->

</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
(function () {
  const sel    = document.getElementById('sel-combinacion');
  const btnAna = document.getElementById('btn-analizar');
  const loading  = document.getElementById('combinadas-loading');
  const resultado = document.getElementById('combinadas-resultado');
  const isDark = () => document.body.classList.contains('dark-mode');

  // Habilitar botón al seleccionar
  sel.addEventListener('change', () => {
    btnAna.disabled = !sel.value;
  });

  btnAna.addEventListener('click', async () => {
    if (!sel.value) return;
    const [symbol, riesgo] = sel.value.split('|');
    const opt = sel.options[sel.selectedIndex];

    // Mostrar loading
    resultado.style.display = 'none';
    loading.style.display = 'block';
    btnAna.disabled = true;

    try {
      const resp = await fetch(`/combinadas/datos?symbol=${symbol}&riesgo=${riesgo}`);
      if (!resp.ok) throw new Error('Error al cargar datos');
      const d = await resp.json();
      renderAll(d, opt);
    } catch (e) {
      alert('Error al cargar el análisis. Intentá de nuevo.');
    } finally {
      loading.style.display = 'none';
      btnAna.disabled = false;
    }
  });

  function fmt(h) {
    const s = String(h).padStart(4, '0');
    return s.slice(0, 2) + ':' + s.slice(2);
  }
  function fmtMoney(v) {
    return (v < 0 ? '-$' : '$') + Math.abs(Math.round(v)).toLocaleString();
  }
  function colorClass(v) { return v >= 0 ? 'kpi-pos' : 'kpi-neg'; }

  let chartHoras = null;
  let chartEquity = null;

  function renderAll(d, opt) {
    // Período
    document.getElementById('periodo-label').style.display = '';
    document.getElementById('periodo-texto').textContent = `${d.desde} → ${d.hasta}`;
    document.getElementById('ndias-texto').textContent = `${d.n_dias} días de trading`;

    const mejor = d.mejor_par;

    // KPIs
    const kpiRow = document.getElementById('kpi-row');
    kpiRow.innerHTML = '';
    const kpis = [
      { label: 'Mejor par', value: `${fmt(mejor.hora_v)} + ${fmt(mejor.hora_ic)}`, cls: 'kpi-pur' },
      { label: 'P/L total', value: fmtMoney(mejor.total), cls: colorClass(mejor.total) },
      { label: 'Media / día', value: fmtMoney(mejor.mean), cls: colorClass(mejor.mean) },
      { label: 'Win rate', value: (mejor.winrate * 100).toFixed(1) + '%', cls: 'kpi-pos' },
      { label: 'Peor día', value: fmtMoney(mejor.worst), cls: 'kpi-neg' },
    ];
    kpis.forEach(k => {
      kpiRow.innerHTML += `
        <div class="col">
          <div class="kpi-card ${isDark() ? 'bg-dark border border-secondary' : 'bg-light border'}">
            <div class="kpi-label">${k.label}</div>
            <div class="kpi-value ${k.cls}">${k.value}</div>
          </div>
        </div>`;
    });

    // Podio (top 3)
    renderPodio(d.top_pl.slice(0, 3), 'tbody-podio', true);
    renderTablePL(d.top_pl,     'tbody-pl');
    renderTableSH(d.top_sharpe, 'tbody-sharpe');
    renderTableCO(d.top_corr,   'tbody-corr');

    // Chart horas
    renderChartHoras(d.v_hora_stats, d.ic_hora_stats);

    // Heatmap
    renderHeatmap(d.hm_v_horas, d.hm_ic_horas, d.hm_data);

    // Estabilidad
    if (d.stability) renderEstabilidad(d.stability, d.mejor_par);

    resultado.style.display = '';

    // Activar tab Podio
    const tabPodio = document.querySelector('[data-bs-target="#tab-podio"]');
    if (tabPodio) new bootstrap.Tab(tabPodio).show();
  }

  // ── Tablas ──
  const medallas = ['🥇', '🥈', '🥉'];
  const badges = {
    0: '<span class="badge bg-warning text-dark ms-1" style="font-size:.6rem">Mejor P/L</span>',
    1: '<span class="badge bg-primary ms-1" style="font-size:.6rem">Mejor Sharpe</span>',
    2: '<span class="badge bg-success ms-1" style="font-size:.6rem">Menor corr.</span>',
  };

  function renderPodio(rows, tbodyId, withMedal) {
    const tb = document.getElementById(tbodyId);
    tb.innerHTML = '';
    rows.forEach((r, i) => {
      tb.innerHTML += `<tr class="${i === 0 ? 'top-row table-warning' : ''}">
        <td>${withMedal ? medallas[i] || (i + 1) : i + 1}</td>
        <td><strong>${fmt(r.hora_v)}</strong></td>
        <td><strong>${fmt(r.hora_ic)}</strong></td>
        <td class="${r.total >= 0 ? 'text-success' : 'text-danger'} fw-bold">${fmtMoney(r.total)}</td>
        <td class="text-success">${fmtMoney(r.mean)}</td>
        <td>${(r.winrate * 100).toFixed(1)}%</td>
        <td>${r.corr.toFixed(3)}</td>
        <td class="text-danger">${fmtMoney(r.worst)}</td>
        <td>${r.sharpe.toFixed(4)}</td>
        <td>${badges[i] || ''}</td>
      </tr>`;
    });
  }

  function renderTablePL(rows, tbodyId) {
    const tb = document.getElementById(tbodyId);
    tb.innerHTML = '';
    rows.forEach((r, i) => {
      tb.innerHTML += `<tr class="${i === 0 ? 'top-row' : ''}">
        <td>${i + 1}</td>
        <td><strong>${fmt(r.hora_v)}</strong></td>
        <td><strong>${fmt(r.hora_ic)}</strong></td>
        <td class="${r.total >= 0 ? 'text-success' : 'text-danger'} fw-bold">${fmtMoney(r.total)}</td>
        <td class="text-success">${fmtMoney(r.mean)}</td>
        <td>${(r.winrate * 100).toFixed(1)}%</td>
        <td>${r.corr.toFixed(3)}</td>
        <td class="text-danger">${fmtMoney(r.worst)}</td>
        <td>${r.sharpe.toFixed(4)}</td>
      </tr>`;
    });
  }

  function renderTableSH(rows, tbodyId) {
    const tb = document.getElementById(tbodyId);
    tb.innerHTML = '';
    rows.forEach((r, i) => {
      tb.innerHTML += `<tr class="${i === 0 ? 'top-row' : ''}">
        <td>${i + 1}</td>
        <td><strong>${fmt(r.hora_v)}</strong></td>
        <td><strong>${fmt(r.hora_ic)}</strong></td>
        <td class="fw-bold">${r.sharpe.toFixed(4)}</td>
        <td class="${r.total >= 0 ? 'text-success' : 'text-danger'}">${fmtMoney(r.total)}</td>
        <td>${(r.winrate * 100).toFixed(1)}%</td>
        <td>${r.corr.toFixed(3)}</td>
        <td class="text-danger">${fmtMoney(r.worst)}</td>
      </tr>`;
    });
  }

  function renderTableCO(rows, tbodyId) {
    const tb = document.getElementById(tbodyId);
    tb.innerHTML = '';
    rows.forEach((r, i) => {
      tb.innerHTML += `<tr class="${i === 0 ? 'top-row' : ''}">
        <td>${i + 1}</td>
        <td><strong>${fmt(r.hora_v)}</strong></td>
        <td><strong>${fmt(r.hora_ic)}</strong></td>
        <td class="fw-bold">${r.corr.toFixed(3)}</td>
        <td class="${r.total >= 0 ? 'text-success' : 'text-danger'}">${fmtMoney(r.total)}</td>
        <td>${(r.winrate * 100).toFixed(1)}%</td>
        <td class="text-danger">${fmtMoney(r.worst)}</td>
        <td>${r.sharpe.toFixed(4)}</td>
      </tr>`;
    });
  }

  // ── Chart horas ──
  function renderChartHoras(vStats, icStats) {
    const labels = vStats.map(r => fmt(r.hora));
    const vData  = vStats.map(r => r.sum);
    const icData = icStats.map(r => r.sum);
    const dark   = isDark();

    if (chartHoras) chartHoras.destroy();
    chartHoras = new Chart(document.getElementById('chart-horas'), {
      type: 'line',
      data: { labels, datasets: [
        { label: 'Vertical', data: vData,  borderColor: '#a78bfa', backgroundColor: 'transparent', pointRadius: 0, borderWidth: 2, tension: 0.3 },
        { label: 'IC',       data: icData, borderColor: '#3dd68c', backgroundColor: 'transparent', pointRadius: 0, borderWidth: 2, tension: 0.3 },
      ]},
      options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => ' ' + fmtMoney(ctx.parsed.y) }}},
        scales: {
          x: { ticks: { color: dark ? '#8b91a0' : '#6c757d', font: { size: 9 }, autoSkip: true, maxTicksLimit: 14, maxRotation: 45 }, grid: { color: dark ? 'rgba(255,255,255,.05)' : 'rgba(0,0,0,.06)' }},
          y: { ticks: { color: dark ? '#8b91a0' : '#6c757d', font: { size: 9 }, callback: v => { const a = Math.abs(v); return (v < 0 ? '-' : '') + '$' + (a >= 1000 ? (a / 1000).toFixed(0) + 'k' : Math.round(a)); }}, grid: { color: dark ? 'rgba(255,255,255,.05)' : 'rgba(0,0,0,.06)' }},
        }
      }
    });
  }

  // ── Heatmap ──
  function renderHeatmap(hmV, hmIC, hmData) {
    const allVals = hmV.flatMap(hv => hmIC.map(hi => (hmData[hv] || {})[hi] || 0));
    const mn = Math.min(...allVals), mx = Math.max(...allVals);

    function hcol(v) {
      const t = (v - mn) / (mx - mn);
      const stops = [[15,46,50],[16,80,68],[21,128,90],[24,180,100],[30,214,100]];
      const i = Math.min(3, Math.floor(t * 4));
      const f = t * 4 - i;
      const r = Math.round(stops[i][0] + f * (stops[i+1][0] - stops[i][0]));
      const g = Math.round(stops[i][1] + f * (stops[i+1][1] - stops[i][1]));
      const b = Math.round(stops[i][2] + f * (stops[i+1][2] - stops[i][2]));
      return { bg: `rgb(${r},${g},${b})`, text: t > 0.55 ? '#052e16' : t > 0.25 ? '#bbf7d0' : '#4ade80' };
    }

    let html = '<table class="hm-table"><thead><tr><th></th>';
    hmIC.forEach(h => { html += `<th>${fmt(h)}</th>`; });
    html += '</tr></thead><tbody>';
    hmV.forEach(hv => {
      const row = hmData[hv] || {};
      const maxInRow = Math.max(...hmIC.map(hi => row[hi] || 0));
      html += `<tr><td class="hm-row-label">${fmt(hv)}</td>`;
      hmIC.forEach(hic => {
        const v = row[hic] || 0;
        const { bg, text } = hcol(v);
        const best = v === maxInRow;
        const label = '$' + (v >= 1000 ? (v / 1000).toFixed(1) + 'k' : Math.round(v));
        html += `<td><div class="hm-cell${best ? ' best' : ''}" style="background:${bg}"><span style="color:${text}">${label}</span></div></td>`;
      });
      html += '</tr>';
    });
    html += '</tbody></table>';
    document.getElementById('heatmap-container').innerHTML = html;
  }

  // ── Estabilidad ──
  function renderEstabilidad(s, ganador) {
    const dark = isDark();
    const meses_labels = ['May','Jun','Jul','Ago','Sep','Oct','Nov','Dic','Ene','Feb','Mar','Abr'];
    const estable = s.par_estable;

    // Tabla ranking
    let tabla = `<div class="table-responsive mb-3">
      <table class="table table-hover combinadas-table">
        <thead class="table-dark">
          <tr><th>#</th><th>Vertical</th><th>IC</th><th>Meses +</th><th>P/L total</th><th>Media/día</th><th>Sharpe</th><th>Peor mes</th></tr>
        </thead><tbody>`;
    s.top_estabilidad.forEach((r, i) => {
      const stars = '★'.repeat(r.meses_pos >= 12 ? 5 : r.meses_pos >= 10 ? 4 : 3);
      tabla += `<tr class="${r.meses_pos >= 12 ? 'table-success' : ''}">
        <td>${i + 1}</td>
        <td><strong>${fmt(r.hora_v)}</strong></td>
        <td><strong>${fmt(r.hora_ic)}</strong></td>
        <td><span style="color:#fbbf24">${stars}</span> ${r.meses_pos}/${r.meses_total}</td>
        <td class="text-success fw-bold">${fmtMoney(r.total)}</td>
        <td class="text-success">${fmtMoney(r.mean)}</td>
        <td>${r.sharpe.toFixed(4)}</td>
        <td class="${r.worst_month >= 0 ? 'text-success' : 'text-danger'}">${fmtMoney(r.worst_month)}</td>
      </tr>`;
    });
    tabla += '</tbody></table></div>';

    // Grid mensual del par más estable
    const maxVal = Math.max(...s.monthly_estable.values);
    let grid = `<p class="small text-muted fw-semibold text-uppercase mb-2" style="letter-spacing:.05em">
      P/L mensual — ${fmt(estable.hora_v)} + ${fmt(estable.hora_ic)} (${estable.meses_pos}/${estable.meses_total} meses positivos)
    </p>
    <div class="month-grid mb-3">`;
    s.monthly_estable.labels.forEach((lbl, i) => {
      const v = s.monthly_estable.values[i];
      const t = Math.max(0.04, v / maxVal);
      const alpha = Math.min(0.28, 0.04 + t * 0.24);
      const mes = lbl.slice(0, 7);
      const mesCorto = meses_labels[i] || mes;
      grid += `<div class="month-cell" style="background:rgba(${v >= 0 ? '61,214,140' : '248,113,113'},${alpha.toFixed(2)})">
        <span class="mlabel">${mesCorto}</span>
        <span class="mval ${v >= 0 ? 'text-success' : 'text-danger'}">${v >= 0 ? '+' : ''}${fmtMoney(v)}</span>
      </div>`;
    });
    grid += '</div>';

    // Equity curves
    const nPts = Math.max(s.equity_estable.length, s.equity_ganador.length);
    const lbs  = Array.from({ length: nPts }, (_, i) => i + 1);

    const canvasId = 'chart-equity-' + Date.now();
    const chartDiv = `<p class="small text-muted fw-semibold text-uppercase mb-2" style="letter-spacing:.05em">Equity curve — estable vs ganador</p>
    <div class="mb-1 d-flex gap-3" style="font-size:.78rem;color:${dark?'#8b91a0':'#6c757d'}">
      <span><span style="display:inline-block;width:9px;height:9px;border-radius:2px;background:#3dd68c;margin-right:4px"></span>${fmt(estable.hora_v)} + ${fmt(estable.hora_ic)} (estable)</span>
      <span><span style="display:inline-block;width:9px;height:9px;border-radius:2px;background:#a78bfa;margin-right:4px"></span>${fmt(ganador.hora_v)} + ${fmt(ganador.hora_ic)} (mayor P/L)</span>
    </div>
    <div style="position:relative;height:220px"><canvas id="${canvasId}" role="img" aria-label="Equity curve estabilidad"></canvas></div>`;

    document.getElementById('estabilidad-content').innerHTML = tabla + grid + chartDiv;

    if (chartEquity) chartEquity.destroy();
    chartEquity = new Chart(document.getElementById(canvasId), {
      type: 'line',
      data: { labels: lbs, datasets: [
        { label: 'Estable', data: s.equity_estable, borderColor: '#3dd68c', backgroundColor: 'rgba(61,214,140,.05)', fill: true, pointRadius: 0, borderWidth: 2, tension: 0.3 },
        { label: 'Ganador', data: s.equity_ganador, borderColor: '#a78bfa', backgroundColor: 'transparent', pointRadius: 0, borderWidth: 1.5, tension: 0.3, borderDash: [4, 3] },
      ]},
      options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => ' ' + fmtMoney(ctx.parsed.y) }}},
        scales: {
          x: { display: false },
          y: { ticks: { color: dark ? '#8b91a0' : '#6c757d', font: { size: 9 }, callback: v => { const a = Math.abs(v); return (v < 0 ? '-' : '') + '$' + (a >= 1000 ? (a / 1000).toFixed(0) + 'k' : Math.round(a)); }}, grid: { color: dark ? 'rgba(255,255,255,.05)' : 'rgba(0,0,0,.06)' }},
        }
      }
    });
  }

})();
</script>
{% endblock %}