{% extends "base.html" %}
{% block title %}Neutral Sigma 0DTE · {{ _('Backtesting') }}{% endblock %}

{% block head_extra %}
<meta name="csrf-token" content="{{ csrf_token() }}">

<link rel="stylesheet" href="{{ url_for('static', filename='css/backtesting.css') }}">
<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>

<!-- estilos ligeros solo para el modal -->
<style>
  dialog.dlg {
    border: none;
    padding: 0;
    background: transparent;
  }

  dialog.dlg::backdrop {
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
  }

  .dlg-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    min-width: min(560px, 92vw);
    box-shadow: var(--shadow);
  }

  .dlg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .dlg-title {
    margin: 0;
    font-size: 16px;
    color: var(--muted);
  }

  .dlg-x {
    all: unset;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
  }

  .dlg-x:hover {
    background: color-mix(in srgb, var(--card) 85%, transparent);
  }

  .dlg-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  @media (max-width:700px) {
    .dlg-row {
      grid-template-columns: 1fr;
    }
  }

  .dlg-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 6px 0 4px;
  }

  .dlg-chip {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 10px;
    background: var(--card);
    cursor: pointer;
  }

  .dlg-chip:hover {
    background: color-mix(in srgb, var(--brand) 14%, transparent);
  }

  .dlg-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 12px;
  }

  .switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
  }

  .switch input {
    width: 16px;
    height: 16px;
  }

  .hint {
    font-size: 13px;
    color: var(--muted);
    margin: .25rem 0 .5rem;
  }

  /* mini placeholder */
  .server-echo {
    margin-top: 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 10px;
    font-size: 13px;
    background: color-mix(in srgb, var(--card) 92%, transparent);
  }
</style>
{% endblock %}

{% block content %}
<h1 class="bt-title">{{ _('Backtesting') }}</h1>


<div id="btOverlay" style="
       display:none;
       position:fixed;
       inset:0;
       background:rgba(0,0,0,0.55);
       backdrop-filter: blur(3px);
       z-index:9999;
       align-items:center;
       justify-content:center;
     ">

  <div style="
       background:var(--card);
       border:1px solid var(--border);
       border-radius:14px;
       padding:28px;
       width:min(420px, 92vw);
       box-shadow:0 20px 60px rgba(0,0,0,.4);
       text-align:center;
     ">

    <div style="font-size:15px; font-weight:600; margin-bottom:6px;">
      Running backtest…
    </div>

    <div style="font-size:13px; color:var(--muted); margin-bottom:16px;">
      Please wait while we analyze historical data
    </div>

    <!-- PROGRESS BAR -->
    <div style="
         width:100%;
         height:10px;
         background:var(--border);
         border-radius:6px;
         overflow:hidden;
       ">
      <div id="btProgressBar" style="
             height:100%;
             width:0%;
             background:linear-gradient(90deg,#4f8cff,#6aa8ff);
             transition:width .6s ease;
           ">
      </div>
    </div>

    <div style="font-size:12px; color:var(--muted); margin-top:6px;">
      <span id="btPct">0%</span> · <span id="btEta">Calculating…</span>
    </div>

    <!-- CANCEL -->
    <button id="btCancelBtn" class="btn" style="margin-top:18px;">
      Cancel
    </button>

  </div>
</div>

<dialog id="icDayDialog" class="dlg">
  <div class="dlg-card" style="
       width:min(1100px,95vw);
       max-height:72vh;
       position:relative;
     ">



    <div class="dlg-header">
      <div>
        <h3 class="dlg-title">Intraday PnL · Iron Condor</h3>
        <div class="hint" id="icDayHint">—</div>
      </div>
      <button class="dlg-title" id="icDayClose">✕</button>
    </div>

    <!-- error (solo si falla la carga) -->
    <div id="icDayError" class="hint" style="display:none; margin:6px 0;">
      Error loading intraday data.
    </div>

    <!-- chart -->
    <div id="icDayChart" style="
       width:100%;
       height:42vh;
       min-height:360px;
     "></div>
    <!-- loading overlay (centrado) -->
    <div id="icDayOverlay" style="
           display:none;
           position:absolute;
           inset:0;
           backdrop-filter: blur(2px);
           z-index:3;
           align-items:center;
           justify-content:center;
         ">

      <div style="text-align:center;">
        <div class="ic-spinner"></div>
        <div style="margin-top:10px; font-size:13px; color:var(--muted);">
          Loading intraday evolution…
        </div>
      </div>

    </div>

  </div>
</dialog>


<section class="grid" aria-label="{{ _('Backtest workspace') }}">

  <div class="bt-top">

    <article class="card">
      <h3>{{ _('Parameters') }}</h3>

      <form id="bt-form" class="bt-form-grid">
        <!-- Row 1 -->
        <div class="bt-field bt-col-2">
          <label class="bt-label" for="symbol">{{ _('Symbol') }}</label>
          <select id="symbol" name="symbol" class="bt-select">
            <option>SPX</option>
            <option>RUT</option>
            <option>XSP</option>
            <option>QQQ</option>
            <option>SPY</option>
          </select>
        </div>

        <div class="bt-field bt-col-4">
          <label class="bt-label" for="strategy">{{ _('Strategy') }}</label>

          <div style="display:flex; align-items:center; gap:10px;">
            <button type="button" class="bt-config-btn" id="strategyConfigBtn"
                aria-label="{{ _('Configure strategy parameters') }}">
              <span class="bt-config-ico">⚙</span>
              <span class="bt-config-text">{{ _('Configuration') }}</span>
            </button>
            <span id="legsSummary" style="color:var(--muted); font-size:13px; white-space:nowrap; font-weight:bold;">
            </span>


            <!-- Resumen de legs -->
            <span id="legsSummary"
                style="color:var(--muted); font-size:13px; white-space:nowrap; font-weight: bold;"></span>
          </div>
        </div>


        <div class="bt-field bt-col-2">
          <label class="bt-label" for="date_from">{{ _('From') }}</label>
          <input id="date_from" name="date_from" type="date" class="bt-input" />
        </div>

        <div class="bt-field bt-col-2">
          <label class="bt-label" for="date_to">{{ _('To') }}</label>
          <input id="date_to" name="date_to" type="date" class="bt-input" />
        </div>

        <div class="bt-field bt-col-2">
          <label class="bt-label" for="entry_time">{{ _('Entry time') }}</label>
          <select id="entry_time" name="entry_time" class="bt-select"></select>
        </div>

        <!-- Row 2 -->

        <div class="bt-field bt-col-2">
          <label class="bt-label" for="tp">{{ _('Take Profit ($)') }}</label>
          <input id="tp" name="tp" type="number" min="0" step="1" class="bt-input" value="500" />
        </div>

        <div class="bt-field bt-col-2">
          <label class="bt-label" for="sl">{{ _('Stop Loss ($)') }}</label>
          <input id="sl" name="sl" type="number" min="0" step="1" class="bt-input" value="120" />
        </div>

        <div class="bt-field bt-col-2">
          <label class="bt-label" for="contracts">{{ _('Contracts') }}</label>
          <input id="contracts" name="contracts" type="number" min="1" step="1" class="bt-input" value="1" />
        </div>


        <div class="bt-field bt-col-2">
          <label class="bt-label" for="commission">{{ _('Commission per leg ($)') }}</label>
          <input id="commission" name="commission" type="number" min="0" step="0.01" class="bt-input" value="1.30" />
        </div>

        <div class="bt-field bt-col-2">
          <label class="bt-label" for="slippage">{{ _('Slippage ($)') }}</label>
          <input id="slippage" name="slippage" type="number" min="0" step="1" class="bt-input" value="5" />
        </div>

        <!-- Hidden fields for legs -->
        <input type="hidden" id="delta_call" name="delta_call" value="10">
        <input type="hidden" id="delta_put" name="delta_put" value="10">
        <input type="hidden" id="width_call" name="width_call" value="20">
        <input type="hidden" id="width_put" name="width_put" value="20">

        <div class="bt-col-12" style="display:flex; gap:12px; margin-top:4px;">
          <button class="btn primary" type="submit">{{ _('Preview') }}</button>
        </div>
      </form>
    </article>
    <aside class="card">
      <h3>{{ _('Preview') }}</h3>

      <dl id="preview" class="bt-preview-dl">
        <dt>{{ _('Symbol') }}</dt>
        <dd id="pv_symbol">SPX</dd>

        <dt>{{ _('Strategy') }}</dt>
        <dd id="pv_strategy">Iron Condor</dd>

        <dt>{{ _('Legs') }}</dt>
        <dd id="pv_legs">Δ 10 · w 20</dd>


      </dl>

      <!-- 🔽 PAYOFF PREVIEW -->
      <div style="margin-top:12px;">
        <svg id="payoffSvgPreview" viewBox="0 0 600 220" width="100%" height="140" aria-label="Payoff preview">

          <!-- EJE BASE -->
          <line x1="0" y1="150" x2="600" y2="150" stroke="#999" />

          <defs>
            <!-- 🔒 CLIPS (IGUAL QUE EL MODAL) -->
            <clipPath id="clipTopPreview">
              <rect x="0" y="0" width="600" height="150"></rect>
            </clipPath>

            <clipPath id="clipBottomPreview">
              <rect x="0" y="150" width="600" height="70"></rect>
            </clipPath>

            <!-- 🟢 GRADIENTE VERDE -->
            <linearGradient id="profitGradPreview" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#2ecc71" stop-opacity="0.85" />
              <stop offset="100%" stop-color="#2ecc71" stop-opacity="0.10" />
            </linearGradient>

            <!-- 🔴 GRADIENTE ROJO -->
            <linearGradient id="lossGradPreview" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#e74c3c" stop-opacity="0.10" />
              <stop offset="100%" stop-color="#e74c3c" stop-opacity="0.85" />
            </linearGradient>
          </defs>

          <!-- 🔴 PÉRDIDA (recortada abajo) -->
          <path id="payoffFillBottomPreview" d="" clip-path="url(#clipBottomPreview)" fill="url(#lossGradPreview)"
              stroke="none" />

          <!-- 🟢 GANANCIA (recortada arriba) -->
          <path id="payoffFillTopPreview" d="" clip-path="url(#clipTopPreview)" fill="url(#profitGradPreview)"
              stroke="none" />

          <!-- ⚫ LÍNEA (UNA SOLA) -->
          <path id="payoffOutlinePreview" d="" fill="none" stroke="#111" stroke-width="2.2" stroke-linejoin="round"
              stroke-linecap="round" />
        </svg>

      </div>


    </aside>

  </div> <!-- cierre bt-top -->

  <!-- =========================
   KPIs – RESULT SUMMARY
  ========================= -->
  <article class="card col-12" id="resultsKpisCard" style="display:none;">

    <div id="resultsLayout" class="results-layout" style="grid-column: 1 / -1; width:100%;">

      <!-- COLUMNA KPIs -->
      <div class="results-kpis">
        <div class="kpi-grid">

          <div class="kpi-card kpi-main">
            <div class="kpi-label">Net Performance</div>
            <div class="kpi-value" id="kpiNetPnL">$—</div>
          </div>

          <div class="kpi-card">
            <div class="kpi-label">Win Rate</div>
            <div class="kpi-value" id="kpiWinRate">—%</div>
          </div>

          <div class="kpi-card">
            <div class="kpi-label">Profit Factor</div>
            <div class="kpi-value" id="kpiPF">—</div>
          </div>

          <div class="kpi-card">
            <div class="kpi-label">Max Drawdown</div>
            <div class="kpi-value neg" id="kpiMaxDD">$—</div>
          </div>

          <div class="kpi-card">
            <div class="kpi-label">Days</div>
            <div class="kpi-sub">
              <span>Total: <b id="kpiDaysTotal">—</b></span>
              <span class="pos">Win: <b id="kpiDaysWin">—</b></span>
              <span class="neg">Loss: <b id="kpiDaysLoss">—</b></span>
            </div>
          </div>

          <div class="kpi-card">
            <div class="kpi-label">Avg Win / Loss</div>
            <div class="kpi-sub">
              <span class="pos"><b id="kpiAvgWin">—</b></span>
              <span class="neg"><b id="kpiAvgLoss">—</b></span>
            </div>
          </div>

          <div class="kpi-card">
            <div class="kpi-label">Max Streak</div>
            <div class="kpi-sub">
              <span class="pos">Win: <b id="kpiMaxWinStreak">—</b></span>
              <span class="neg">Loss: <b id="kpiMaxLossStreak">—</b></span>
            </div>
          </div>

          <div class="kpi-card">
            <div class="kpi-label">Avg Monthly PnL</div>
            <div class="kpi-value" id="kpiAvgMonthly">$—</div>
          </div>

          <div class="kpi-card">
            <div class="kpi-label">Consistency</div>
            <div class="kpi-value" id="kpiConsistency">—%</div>
          </div>


        </div>
      </div>

      <!-- COLUMNA GRÁFICO -->
      <div class="results-chart-wrap">

        <!-- HEADER -->
        <div class="chart-header-main">
          <span class="chart-header-icon" id="chartHeaderIcon">📈</span>
          <span class="chart-header-title" id="chartHeaderTitle">
            {{ _('Cumulative PnL') }}
          </span>

          <button type="button" class="chart-help-btn" id="chartHelpBtn" aria-label="{{ _('Help about this chart') }}"
              title="{{ _('What is this chart?') }}">
            ?
          </button>
        </div>

        <!-- FILA: gráfico + toolbar -->
        <div class="results-chart-row">

          <div class="results-chart">
            <div id="equityChart"></div>
          </div>

          <div class="chart-toolbar">

            <button class="chart-tool active" data-chart="equity">📈</button>
            <button class="chart-tool" data-chart="monthly">🗓️</button>
            <button class="chart-tool" data-chart="weekly">📆</button>
            <button class="chart-tool" data-chart="drawdown">📉</button>
            <button class="chart-tool" data-chart="equity_hwm">🏁</button>
            <button class="chart-tool" data-chart="pnl_histogram">🎯</button>
            <button class="chart-tool" data-chart="rolling_wr">📊</button>
            <button class="chart-tool" data-chart="weekday">📅</button>
            <button class="chart-tool" data-chart="streaks">🔁</button>

          </div>

        </div>

      </div>


    </div>
  </article>

  <article class="card col-12">
    <h3>{{ _('Run summary') }}</h3>

    <div class="table-wrap">
      <table id="bt-run-table" class="bt-table">
        <thead>
          <tr>
            <th>Fecha</th>
            <th>Día</th>
            <th>Evento</th>
            <th>P/L ($)</th>
            <th>Total Acum ($)</th>

            <th>Crédito inicial</th>
            <th>Underlying @ Entry</th>
            <th>Underlying @ Close</th>
            <th>Hora salida</th>
            <th>Min TP</th>
            <th>Min SL</th>
            <th>Strikes</th>

          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </article>
</section>

<!-- ===== Modal: Leg Payload ===== -->
<dialog id="legsDialog" class="dlg">
  <div class="dlg-card">

    <!-- HEADER -->
    <div class="dlg-header">
      <div>
        <h3 class="dlg-title">Leg Payload</h3>
        <div class="hint">Visual risk envelope of the strategy</div>
      </div>
      <button type="button" class="dlg-x" id="legsClose">✕</button>
    </div>

    <!-- ================= VISUAL PAYOFF ================= -->
    <div style="margin:14px 0;">
      <svg id="payoffSvg" viewBox="0 0 600 220" width="100%" height="220">

        <!-- EJE HORIZONTAL (nivel 0) -->
        <line x1="0" y1="150" x2="600" y2="150" stroke="#999" />

        <!-- EJE VERTICAL (ATM) -->
        <line x1="300" y1="20" x2="300" y2="210" stroke="#777" stroke-dasharray="4 4" />

        <defs>
          <!-- Recorte arriba del eje -->
          <clipPath id="clipTop">
            <rect x="0" y="0" width="600" height="150"></rect>
          </clipPath>

          <!-- Recorte abajo del eje -->
          <clipPath id="clipBottom">
            <rect x="0" y="150" width="600" height="70"></rect>
          </clipPath>

          <!-- Gradiente verde -->
          <linearGradient id="profitGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#2ecc71" stop-opacity="0.85" />
            <stop offset="100%" stop-color="#2ecc71" stop-opacity="0.10" />
          </linearGradient>

          <!-- Gradiente rojo -->
          <linearGradient id="lossGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#e74c3c" stop-opacity="0.10" />
            <stop offset="100%" stop-color="#e74c3c" stop-opacity="0.85" />
          </linearGradient>
        </defs>

        <!-- RELLENO ROJO (misma geometría, recortada abajo) -->
        <path id="payoffFillBottom" d="" clip-path="url(#clipBottom)" fill="url(#lossGrad)" stroke="none"></path>

        <!-- RELLENO VERDE (misma geometría, recortada arriba) -->
        <path id="payoffFillTop" d="" clip-path="url(#clipTop)" fill="url(#profitGrad)" stroke="none"></path>

        <!-- LÍNEA (UNA SOLA, NEGRA) -->
        <path id="payoffOutline" d="" fill="none" stroke="#111" stroke-width="2.2" stroke-linejoin="round"
            stroke-linecap="round"></path>

      </svg>

    </div>

    <!-- ================= DELTA ================= -->
    <div id="icDeltaBox">
      <div class="bt-label">Distance from ATM (Delta)</div>
      <div class="hint">Lower = farther | Higher = closer</div>

      <input id="r_dn" type="range" min="1" max="50" step="1" value="10" style="width:100%; margin-top:10px;" />

      <div style="display:flex; justify-content:space-between; font-size:12px; color:var(--muted);">
        <span>Far</span>
        <strong>ATM</strong>
        <span>Close</span>
      </div>

      <div style="display:flex; gap:10px; align-items:center; margin-top:6px;">
        <span class="hint">Δ</span>
        <input id="m_dn" type="number" min="1" max="50" value="20" class="bt-input" style="width:90px;" />
      </div>
    </div>



    <hr style="margin:16px 0; opacity:.3">

    <!-- ================= WIDTH ================= -->
    <div class="bt-label">Risk Width</div>
    <div class="hint">
      Controls how wide the risk wings are (symmetric)
    </div>

    <!-- Slider -->
    <input id="m_w" type="range" min="1" max="50" step="1" value="20" style="width:100%; margin-top:10px;" />

    <div style="display:flex; justify-content:space-between;
            font-size:12px; color:var(--muted);">
      <span>Narrow</span>
      <strong>Neutral</strong>
      <span>Wide</span>
    </div>

    <!-- Number input (MISMO ESTILO QUE DELTA) -->
    <div style="display:flex; gap:10px; align-items:center; margin-top:6px;">
      <span class="hint">W</span>
      <input id="n_w" type="number" min="1" max="50" step="1" class="bt-input" style="width:90px;" />
    </div>



    <!-- ================= FOOTER ================= -->
    <div class="dlg-footer">
      <button class="btn" type="button" id="legsCancel">Cancel</button>
      <button class="btn primary" type="button" id="legsApply">Apply Payload</button>
    </div>

  </div>
</dialog>


<!-- ===== /Modal ===== -->
<div class="chart-help-modal-overlay" id="chartHelpOverlay" hidden>
  <div class="chart-help-modal">

    <div class="chart-help-header">
      <span class="chart-help-icon">📈</span>
      <h3 class="chart-help-title"></h3>

      <button type="button" class="chart-help-close" aria-label="{{ _('Close') }}">✕</button>
    </div>

    <div class="chart-help-body" id="chartHelpBody"></div>

  </div>
</div>




{% endblock %}

{% block scripts %}
<script>

  function showIcLoading() {
    document.getElementById("icDayOverlay").style.display = "flex";
  }

  function hideIcLoading() {
    document.getElementById("icDayOverlay").style.display = "none";
  }

  function showOverlay() {
    const el = document.getElementById("btOverlay");
    if (el) el.style.display = "flex";
  }

  function hideOverlay() {
    const el = document.getElementById("btOverlay");
    if (el) el.style.display = "none";
  }
  const FIXED_STRATEGY = 'IC';

  const $ = (id) => document.getElementById(id);

  /* -------- Combobox custom -------- */
  function enhanceSelect(selectId) {
    const sel = document.getElementById(selectId);
    if (!sel || sel.dataset.enhanced) return;
    sel.dataset.enhanced = "1";

    const wrap = document.createElement('div');
    wrap.className = 'cbx';
    sel.parentNode.insertBefore(wrap, sel);
    wrap.appendChild(sel);

    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'cbx-btn';
    btn.id = `${selectId}__btn`;
    btn.setAttribute('aria-haspopup', 'listbox');
    btn.setAttribute('aria-expanded', 'false');
    btn.textContent = sel.options[sel.selectedIndex]?.text || '';
    wrap.appendChild(btn);

    const menu = document.createElement('div');
    menu.className = 'cbx-menu';
    menu.role = 'listbox';
    menu.id = `${selectId}__menu`;
    wrap.appendChild(menu);

    function buildOptions() {
      menu.innerHTML = '';
      for (let i = 0; i < sel.options.length; i++) {
        const opt = sel.options[i];
        const item = document.createElement('div');
        item.className = 'cbx-option';
        item.role = 'option';
        item.tabIndex = -1;
        item.textContent = opt.text;
        if (opt.selected) item.setAttribute('aria-selected', 'true');
        item.addEventListener('click', () => {
          sel.selectedIndex = i;
          sel.dispatchEvent(new Event('input', { bubbles: true }));
          sel.dispatchEvent(new Event('change', { bubbles: true }));
          btn.textContent = opt.text;
          close(true);
        });
        menu.appendChild(item);
      }
    }
    buildOptions();

    function open() {
      wrap.setAttribute('data-open', 'true');
      btn.setAttribute('aria-expanded', 'true');
      (menu.querySelector('[aria-selected="true"]') || menu.firstElementChild)?.focus();
    }
    function close(restoreFocus = false) {
      if (wrap.getAttribute('data-open') !== 'true') return;
      wrap.removeAttribute('data-open');
      btn.setAttribute('aria-expanded', 'false');
      if (restoreFocus) btn.focus();
    }
    function toggle() { (wrap.getAttribute('data-open') === 'true') ? close(true) : open(); }

    btn.addEventListener('click', (e) => { e.stopPropagation(); toggle(); });
    btn.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
        e.preventDefault(); open();
      }
    });

    menu.addEventListener('keydown', (e) => {
      const items = [...menu.querySelectorAll('.cbx-option')];
      const idx = items.indexOf(document.activeElement);
      if (e.key === 'Escape') { e.preventDefault(); close(true); }
      if (e.key === 'ArrowDown') { e.preventDefault(); items[Math.min(idx + 1, items.length - 1)]?.focus(); }
      if (e.key === 'ArrowUp') { e.preventDefault(); items[Math.max(idx - 1, 0)]?.focus(); }
      if (e.key === 'Enter') { e.preventDefault(); document.activeElement?.click(); }
    });

    document.addEventListener('mousedown', (e) => { if (!wrap.contains(e.target)) close(false); });

    const lbl = document.querySelector(`label[for="${selectId}"]`);
    lbl?.addEventListener('click', (e) => { e.preventDefault(); btn.focus(); open(); });

    const mo = new MutationObserver(() => { buildOptions(); btn.textContent = sel.options[sel.selectedIndex]?.text || ''; });
    mo.observe(sel, { childList: true });
    sel._cbxRebuild = buildOptions;
    sel._cbxSetText = () => { btn.textContent = sel.options[sel.selectedIndex]?.text || ''; };
  }
  /* --------------------------------------------------------------------- */

  function fillTimeSelect(selectId, start = '09:35', end = '15:00', stepMin = 5) {
    const sel = $(selectId);
    sel.innerHTML = '';
    const [sh, sm] = start.split(':').map(Number);
    const [eh, em] = end.split(':').map(Number);
    let t = sh * 60 + sm, T = eh * 60 + em;
    while (t <= T) {
      const h = String(Math.floor(t / 60)).padStart(2, '0');
      const m = String(t % 60).toString().padStart(2, '0');
      const o = document.createElement('option');
      o.value = `${h}:${m}`; o.textContent = `${h}:${m}`;
      sel.appendChild(o);
      t += stepMin;
    }
    sel.value = start;
  }

  function drawPayoff() {

    const symbol = $('symbol')?.value;
    const delta = Math.round(Number($('m_dn')?.value || 50));
    const width = Math.round(Number($('m_w')?.value || 20));

    // ===== SVG geometry =====
    const baseY = 150;
    const topY = 55;
    const lossY = 190;

    const leftX = 40;
    const rightX = 560;
    const centerX = 300;

    const halfCanvas = centerX - leftX;

    // ===== Visual limits =====
    const maxFlat = 20;

    // 🔥 CLAVE: maxSlope depende del símbolo
    const maxSlope = (symbol === 'SPX' || symbol === 'RUT')
      ? 120   // índices → alas más contenidas
      : 220;  // stocks / otros

    // ===== Flat por delta =====
    let flat;
    if (delta >= 50) {
      flat = 0;
    } else {
      flat = ((50 - delta) / 49) * maxFlat;
    }

    // ===== Slope por width =====
    let slope;
    if (symbol === 'SPX' || symbol === 'RUT') {
      // width real = 5–50 → normalizar correctamente
      slope = (width / 50) * maxSlope;
    } else {
      // width real = 1–5
      slope = (width / 5) * maxSlope;
    }

    // ======================================
    // 🔒 CLAMP FINAL (seguridad absoluta)
    // ======================================
    const totalHalf = flat + slope;
    if (totalHalf > halfCanvas) {
      const scale = halfCanvas / totalHalf;
      flat *= scale;
      slope *= scale;
    }

    // ===== Path =====
    const outline = `
    M ${leftX} ${lossY}
    L ${centerX - flat - slope} ${lossY}
    L ${centerX - flat} ${topY}
    L ${centerX + flat} ${topY}
    L ${centerX + flat + slope} ${lossY}
    L ${rightX} ${lossY}
  `;

    const fillPath = outline + `
  L ${rightX} ${baseY}
  L ${leftX} ${baseY}
  Z
`;

    // ===== MODAL =====
    if ($('payoffOutline')) {
      $('payoffOutline').setAttribute('d', outline);
      $('payoffFillTop').setAttribute('d', fillPath);
      $('payoffFillBottom').setAttribute('d', fillPath);
    }

    // ===== PREVIEW (ASIDE) =====
    if ($('payoffOutlinePreview')) {
      $('payoffOutlinePreview').setAttribute('d', outline);
      $('payoffFillTopPreview').setAttribute('d', fillPath);
      $('payoffFillBottomPreview').setAttribute('d', fillPath);
    }
  }


  $('symbol').addEventListener('change', () => {
    const sym = $('symbol').value;

    // 1️⃣ wing por defecto según símbolo
    const w = getDefaultWingBySymbol(sym);

    // 2️⃣ aplicar a payload y controles
    $('width_call').value = w;
    $('width_put').value = w;

    $('m_w').value = w;
    $('n_w').value = w;

    // 3️⃣ aplicar reglas (min/max/step)
    applyWidthRulesBySymbol();

    // 4️⃣ refrescar UI
    refreshLegsSummary();
    updatePreview();

    requestAnimationFrame(() => {
      syncPayloadVisual();
    });
  });


  function getDefaultWingBySymbol(symbol) {
    if (symbol === 'SPX' || symbol === 'RUT') return 30;
    if (symbol === 'QQQ' || symbol === 'SPY' || symbol === 'XSP') return 2;
    return 20; // fallback seguro
  }


  function applyWidthRulesBySymbol() {

    const sym = $('symbol').value;

    const isIndex = (sym === 'SPX' || sym === 'RUT');

    if (isIndex) {
      // SPX / RUT
      $('m_w').min = 5;
      $('m_w').max = 50;
      $('m_w').step = 5;

      $('n_w').min = 5;
      $('n_w').max = 50;
      $('n_w').step = 5;

      // ajustar valor actual
      let v = Math.round(Number($('m_w').value) / 5) * 5;
      v = Math.max(5, Math.min(50, v));
      $('m_w').value = v;
      $('n_w').value = v;

    } else {
      // otros símbolos
      $('m_w').min = 1;
      $('m_w').max = 5;
      $('m_w').step = 1;

      $('n_w').min = 1;
      $('n_w').max = 5;
      $('n_w').step = 1;

      let v = Math.round(Number($('m_w').value));
      v = Math.max(1, Math.min(5, v));
      $('m_w').value = v;
      $('n_w').value = v;
    }

    syncPayloadVisual();
  }





  function syncPayloadVisual() {
    drawPayoff();
  }



  document.addEventListener('input', (e) => {
    const id = e.target.id;

    // 🔵 Delta
    if (id === 'r_dn') {
      const v = Math.round(Number(e.target.value));
      $('m_dn').value = v;
      syncPayloadVisual();
      return;
    }

    if (id === 'm_dn') {
      let v = Math.round(Number(e.target.value));
      v = Math.max(1, Math.min(50, v));
      $('m_dn').value = v;
      $('r_dn').value = v;
      syncPayloadVisual();
      return;
    }

    // 🟢 WIDTH (slider / input)
    if (id === 'm_w') {
      let v = Math.round(Number(e.target.value));
      v = Math.max(1, Math.min(50, v));

      $('m_w').value = v;
      $('n_w').value = v;

      // ✅ CLAVE: width único → copiar a ambos hidden
      $('width_call').value = v;
      $('width_put').value = v;

      syncPayloadVisual();
      return;
    }

    if (id === 'n_w') {
      let v = Math.round(Number(e.target.value));
      v = Math.max(1, Math.min(50, v));

      $('n_w').value = v;
      $('m_w').value = v;

      // ✅ CLAVE: width único → copiar a ambos hidden
      $('width_call').value = v;
      $('width_put').value = v;

      syncPayloadVisual();
      return;
    }
  });





  function openLegsFromStrategy() {

    // DELTA (siempre IC)
    const d = Number($('delta_call').value || 10);
    $('m_dn').value = d;
    $('r_dn').value = d;

    // WIDTH único
    const w = Number($('width_call').value || 20);
    $('m_w').value = w;
    $('n_w').value = w;

    applyWidthRulesBySymbol();
    syncPayloadVisual();
    openLegs();
  }






  /* ---------- Legs modal logic ---------- */
  const dlg = $('legsDialog');
  function openLegs() {
    try {
      dlg.showModal();
    } catch {
      dlg.setAttribute('open', '');
    }

    // 🔥 DIBUJAR PAYOFF AL ABRIR
    requestAnimationFrame(() => {
      syncPayloadVisual();
    });
  } function closeLegs() { try { dlg.close(); } catch { dlg.removeAttribute('open'); } }



  // chips: dn (delta neutro), wc, wp
  function bindChips() {
    document.querySelectorAll('.dlg-chips').forEach(ch => {
      ch.addEventListener('click', (e) => {
        const b = e.target.closest('.dlg-chip'); if (!b) return;
        const key = ch.dataset.bind; const v = Number(b.dataset.v);
        if (key === 'dn') { $('m_dn').value = v; $('r_dn').value = v; }

      });
    });
  }





  $('strategyConfigBtn').addEventListener('click', () => {
    openLegsFromStrategy();
  });


  $('legsClose').addEventListener('click', closeLegs);
  $('legsCancel').addEventListener('click', closeLegs);
  document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && dlg.hasAttribute('open')) closeLegs(); });

  $('legsApply').addEventListener('click', () => {

    // DELTA
    const dn = Number($('m_dn').value);
    $('delta_call').value = dn;
    $('delta_put').value = dn;

    // WIDTH
    const w = Number($('m_w').value);
    $('width_call').value = w;
    $('width_put').value = w;

    refreshLegsSummary();
    updatePreview();
    closeLegs();
  });

  function refreshLegsSummary() {
    const dn = Number($('delta_call').value);
    const w = Number($('width_call').value);
    $('legsSummary').textContent = `Δ ${dn} · w ${w}`;
  }
  /* -------------------------------------- */


  function updatePreview() {
    const sym = $('symbol').value;

    const strategy = inferStrategyByDelta();
    const strategyLabel = strategy === 'IB' ? 'Iron Butterfly' : 'Iron Condor';

    const dn = Number($('delta_call').value);
    const w = Number($('width_call').value);

    const legsTxt = `Δ ${dn} · w ${w}`;

    $('pv_symbol').textContent = sym;
    $('pv_legs').textContent = legsTxt;

    // si decidís volver a mostrar strategy en preview:
    const pvStrat = $('pv_strategy');
    if (pvStrat) pvStrat.textContent = strategyLabel;

    requestAnimationFrame(drawPayoff);
  }



  // --- Envío al backend (Preview) con CSRF ---
  function getCsrfToken() {
    // 1) meta tag (recomendado)
    const meta = document.querySelector('meta[name="csrf-token"]');
    if (meta) return meta.getAttribute('content');
    // 2) fallback: buscar cookie (si usas double-submit)
    const m = document.cookie.match(/(?:^|;\s*)csrf_token=([^;]+)/);
    return m ? decodeURIComponent(m[1]) : null;
  }


  function inferStrategyByDelta() {
    const dn = Number($('delta_call')?.value);
    return dn === 50 ? 'IB' : 'IC';
  }

  function collectPayload() {
    const fd = new FormData($('bt-form'));
    const payload = Object.fromEntries(fd.entries());

    const strategy = inferStrategyByDelta();

    payload.strategy = strategy;
    payload.strategy_label = strategy === 'IB'
      ? 'Iron Butterfly'
      : 'Iron Condor';

    payload.legs_summary = $('legsSummary').textContent.trim();

    ['tp', 'sl', 'contracts', 'commission', 'slippage', 'delta_call', 'delta_put', 'width_call', 'width_put']
      .forEach(k => {
        if (payload[k] !== undefined) payload[k] = Number(payload[k]);
      });

    return payload;
  }

  async function sendPreview() {
    try {
      const CSRF = getCsrfToken();

      const res = await fetch("{{ url_for('backtesting.submit') }}", {
        method: "POST",
        credentials: "same-origin", // incluye cookies si las hubiera
        headers: {
          "Content-Type": "application/json",
          ...(CSRF ? { "X-CSRFToken": CSRF } : {})
        },
        body: JSON.stringify(collectPayload())
      });

      const data = await res.json();
    } catch (err) {
      console.error(err);
    }
  }


  ['symbol', 'date_from', 'date_to', 'entry_time', 'tp', 'sl', 'contracts', 'commission', 'slippage']
    .forEach(id => $(id).addEventListener('input', updatePreview));

  $('bt-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    //Resetear estado del gráfico al nuevo backtest
    resetChartUI();
    updatePreview();
    await startJob();
  });


  (function init() {
    const t = new Date(),
      yyyy = t.getFullYear(),
      mm = String(t.getMonth() + 1).padStart(2, '0'),
      dd = String(t.getDate()).padStart(2, '0');

    $('date_from').value = `${yyyy}-${mm}-01`;
    $('date_to').value = `${yyyy}-${mm}-${dd}`;
    fillTimeSelect('entry_time', '09:35', '15:00', 5);

    enhanceSelect('symbol');
    enhanceSelect('strategy');
    enhanceSelect('entry_time');

    bindChips();

    // 🔥 FORZAR VALORES SEGÚN ESTRATEGIA AL CARGAR

    $('m_dn').value = $('delta_call').value;
    $('r_dn').value = $('delta_call').value;

    // 🔥 APLICAR REGLAS VISUALES INICIALES
    applyWidthRulesBySymbol();

    refreshLegsSummary();
    updatePreview();

    // 🔥 DIBUJAR PAYOFF APENAS CARGA LA PÁGINA
    requestAnimationFrame(() => {
      syncPayloadVisual();
    });
  })();

  // reset gráfico a estado inicial (equity activo, header, toolbar)
  function resetChartUI() {
    const defaultKey = "equity";
    const meta = chartMeta[defaultKey];

    currentChartKey = defaultKey;

    // Toolbar: activar solo equity
    document.querySelectorAll(".chart-tool").forEach(btn => {
      btn.classList.toggle("active", btn.dataset.chart === defaultKey);
    });

    // Header
    const headerIcon = document.getElementById("chartHeaderIcon");
    const headerTitle = document.getElementById("chartHeaderTitle");

    if (headerIcon) headerIcon.textContent = meta.icon;
    if (headerTitle) headerTitle.textContent = meta.title;
  }



  function getCsrfToken() {
    const meta = document.querySelector('meta[name="csrf-token"]');
    return meta ? meta.getAttribute('content') : null;
  }


  let pollTimer = null;

  async function startJob() {

    // ======================================================
    // 🔥 LIMPIAR ESTADO DEL RUN ANTERIOR
    // ======================================================

    // 🔥 ocultar layout completo (KPIs + gráfico)
    const resultsLayout = document.getElementById("resultsKpisCard");
    if (resultsLayout) {
      resultsLayout.style.display = "none";
    }

    // 🔥 limpiar tabla previa
    const tbody = document.querySelector("#bt-run-table tbody");
    if (tbody) {
      tbody.innerHTML = "";
    }

    // 🔥 limpiar gráfico previo (equity)
    const equityDiv = document.getElementById("equityChart");
    if (equityDiv) {
      equityDiv.innerHTML = "";
    }

    // 🔥 cortar polling previo
    if (pollTimer) {
      clearInterval(pollTimer);
      pollTimer = null;
    }

    // ======================================================
    // 🔄 LOADING / PROGRESS
    // ======================================================
    startFakeProgress();

    // ======================================================
    // 🚀 SUBMIT BACKTEST
    // ======================================================
    try {
      const CSRF = getCsrfToken();

      const res = await fetch("{{ url_for('backtesting.submit') }}", {
        method: "POST",
        credentials: "same-origin",
        headers: {
          "Content-Type": "application/json",
          ...(CSRF ? { "X-CSRFToken": CSRF } : {})
        },
        body: JSON.stringify(collectPayload())
      });

      const data = await res.json();
      if (!data.ok || !data.task_id) {
        throw new Error("start failed");
      }

      // 🔁 iniciar polling
      startPolling(data.task_id);

    } catch (err) {
      console.error(err);

      // ❌ error → apagar barra
      finishFakeProgress();
    }
  }





  function startPolling(taskId) {
    clearInterval(pollTimer);

    pollTimer = setInterval(async () => {
      try {
        const r = await fetch(
          "{{ url_for('backtesting.job_status', task_id='__ID__') }}"
            .replace("__ID__", taskId)
        );

        const j = await r.json();

        // ⏳ Mientras corre → no mostrar nada
        if (
          j.state === "PENDING" ||
          j.state === "RECEIVED" ||
          j.state === "STARTED"
        ) {
          return;
        }

        // 🛑 Terminó → cortar polling
        clearInterval(pollTimer);
        pollTimer = null;

        // Apagar barra fake
        finishFakeProgress();

        // ✅ ÉXITO
        if (j.state === "SUCCESS") {

          // Guardar resultado
          window.__LAST_BT_RESULT__ = j.result;

          // Render KPIs + tabla + equity
          renderRunTable(j.result);

          // 🔥 MOSTRAR KPIs + GRÁFICO JUNTOS
          const resultsLayout = document.getElementById("resultsKpisCard");
          if (resultsLayout) {
            resultsLayout.style.display = "block";
          }

          return;
        }

        // ❌ Falló
        if (j.state === "FAILURE") {
          console.error("Backtest failed:", j.error);
          alert("Backtest failed");
        }

      } catch (e) {
        console.error(e);
        clearInterval(pollTimer);
        pollTimer = null;
        finishFakeProgress();
      }
    }, 2000);
  }



  function renderRunTable(result) {
    const tbody = document.querySelector('#bt-run-table tbody');
    tbody.innerHTML = '';

    // ⛔ si no hay resultados, no mostramos nada
    if (!result?.per_day || !result.per_day.length) {
      return;
    }

    // ======================================================
    // 1️⃣ Ordenar ASC para calcular acumulado
    // ======================================================
    const rowsAsc = [...result.per_day].sort(
      (a, b) => new Date(a.date) - new Date(b.date)
    );

    // ======================================================
    // 2️⃣ Calcular PnL diario + acumulado
    // ======================================================
    let runningPnL = 0;

    const rowsWithCum = rowsAsc.map(d => {
      let plValue = d.exit.final_pnl;

      if (d.exit.reason === 'TP') plValue = d.exit.tp;
      if (d.exit.reason === 'SL') plValue = -d.exit.sl;

      runningPnL += plValue;

      return {
        ...d,
        plValue,
        cumPnL: runningPnL
      };
    });

    // ======================================================
    // 3️⃣ KPIs — calcular y renderizar
    // ======================================================
    const kpis = computeKPIsFromRows(rowsWithCum);
    renderKPIs(kpis);

    // ======================================================
    // 4️⃣ Mostrar layout de resultados (KPIs + gráfico)
    // ======================================================
    const kpiBox = document.getElementById("kpiContainer");
    if (kpiBox) {
      kpiBox.style.display = "block";
    }

    const resultsLayout = document.getElementById("resultsKpisCard");
    if (resultsLayout) {
      resultsLayout.style.display = "block";
    }

    // ======================================================
    // 5️⃣ Dibujar equity curve 
    // ======================================================
    drawEquityCurve(rowsWithCum);


    // ======================================================
    // 6️⃣ Render tabla DESC (más nuevo arriba)
    // ======================================================
    const rowsDesc = [...rowsWithCum].reverse();

    rowsDesc.forEach(d => {

      // weekday SIEMPRE NY
      const [y, m, day] = d.date.split('-').map(Number);
      const safeUtc = new Date(Date.UTC(y, m - 1, day, 12, 0, 0));
      const dayName = safeUtc.toLocaleDateString('en-US', {
        weekday: 'short',
        timeZone: 'America/New_York'
      });

      const entryTs = new Date(d.entry.timestamp);
      const exitTs = new Date(d.exit.timestamp);
      const diffMin = Math.round((exitTs - entryTs) / 60000);

      const minTP = d.exit.reason === 'TP' ? diffMin : '';
      const minSL = d.exit.reason === 'SL' ? diffMin : '';

      const plClass =
        d.plValue > 0 ? 'bt-pl-pos' :
          d.plValue < 0 ? 'bt-pl-neg' :
            'bt-pl-flat';

      const cumClass =
        d.cumPnL > 0 ? 'bt-pl-pos' :
          d.cumPnL < 0 ? 'bt-pl-neg' :
            'bt-pl-flat';

      const strikes =
        `${d.legs.put_sell.strike}/${d.legs.put_buy.strike} Put - ` +
        `${d.legs.call_sell.strike}/${d.legs.call_buy.strike} Call`;

      const tr = document.createElement('tr');
      tr.innerHTML = `
      <td>
        <a href="#" class="bt-date-link" data-date="${d.date}">
          ${d.date}
        </a>
      </td>
      <td>${dayName}</td>
      <td></td>
      <td class="bt-num ${plClass}">${d.plValue.toFixed(2)}</td>
      <td class="bt-num ${cumClass}">${d.cumPnL.toFixed(2)}</td>
      <td>${d.entry.credit_net.toFixed(2)}</td>
      <td>${d.underlying_entry?.toFixed(2) ?? '—'}</td>
      <td>${d.exit.underlying_close_used != null ? d.exit.underlying_close_used.toFixed(2) : '—'}</td>
      <td>${d.exit.time_hhmm ?? '—'}</td>
      <td>${minTP}</td>
      <td>${minSL}</td>
      <td style="text-align:left">${strikes}</td>
    `;

      tbody.appendChild(tr);
    });
  }


  // ===============================
  // ELEMENTOS MODAL INTRADAY
  // ===============================
  const icDlg = document.getElementById('icDayDialog');
  const icClose = document.getElementById('icDayClose');
  const icHint = document.getElementById('icDayHint');
  const icLoading = document.getElementById('icDayLoading');
  const icError = document.getElementById('icDayError');
  const icChartDiv = document.getElementById('icDayChart');

  let icChart = null;
  let icSeries = null;

  // ===============================
  // MODAL HELPERS
  // ===============================
  function openIcDialog() {
    try {
      icDlg.showModal();
    } catch {
      icDlg.setAttribute('open', '');
    }
  }

  function closeIcDialog() {
    try {
      icDlg.close();
    } catch {
      icDlg.removeAttribute('open');
    }
  }

  icClose.addEventListener('click', closeIcDialog);

  // ===============================
  // RENDER INTRADAY CHART
  // ===============================


  function drawIntradayChart(pnl_path) {
    icChartDiv.innerHTML = '';

    // ===============================
    // Datos PnL
    // ===============================
    const x = pnl_path.map(p => p.ts);
    const yPnL = pnl_path.map(p => Number(p.pnl));

    // ===============================
    // Datos Underlying (si existen)
    // ===============================
    const hasUnderlying = pnl_path.some(p => p.underlying !== undefined);
    const yU = hasUnderlying
      ? pnl_path.map(p => Number(p.underlying))
      : [];

    const minPnL = Math.min(...yPnL);
    const maxPnL = Math.max(...yPnL);

    const tp = Number(document.getElementById('tp')?.value || 0);
    const sl = Number(document.getElementById('sl')?.value || 0);

    const lower = Math.min(minPnL, -sl);
    const upper = Math.max(maxPnL, tp);
    const pad = (upper - lower) * 0.1 || 10;

    // ===============================
    // Detectar TP / SL confirmado (5 puntos)
    // ===============================
    const tpIdx = tp > 0
      ? findConfirmedHitIndex(yPnL, v => v >= tp, 3)
      : null;

    const slIdx = sl > 0
      ? findConfirmedHitIndex(yPnL, v => v <= -sl, 3)
      : null;

    // ===============================
    // Determinar PRIMER evento real
    // ===============================
    let exitType = null; // 'TP' | 'SL'
    let exitIdx = null;

    if (tpIdx !== null && slIdx !== null) {
      if (tpIdx < slIdx) {
        exitType = 'TP';
        exitIdx = tpIdx;
      } else {
        exitType = 'SL';
        exitIdx = slIdx;
      }
    } else if (tpIdx !== null) {
      exitType = 'TP';
      exitIdx = tpIdx;
    } else if (slIdx !== null) {
      exitType = 'SL';
      exitIdx = slIdx;
    }

    // ===============================
    // Serie PnL
    // ===============================
    const traces = [{
      x,
      y: yPnL,
      type: 'scatter',
      mode: 'lines',
      name: 'PnL ($)',
      line: {
        color: '#4f8cff',
        width: 2,
      },
      hovertemplate:
        'Time: %{x}<br>' +
        'PnL: %{y:$,.2f}<extra></extra>',
      yaxis: 'y',
    }];

    // ===============================
    // Serie Underlying (desactivada por defecto)
    // ===============================
    if (hasUnderlying) {
      traces.push({
        x,
        y: yU,
        type: 'scatter',
        mode: 'lines',
        name: 'Underlying',
        visible: 'legendonly',
        line: {
          color: '#ff9800',
          width: 1.5,
        },
        hovertemplate:
          'Time: %{x}<br>' +
          'Underlying: %{y:.2f}<extra></extra>',
        yaxis: 'y2',
      });
    }

    // ===============================
    // Líneas horizontales (0 / TP / SL)
    // ===============================
    const shapes = [
      {
        type: 'line',
        xref: 'paper',
        x0: 0,
        x1: 1,
        y0: 0,
        y1: 0,
        line: {
          color: '#ffeb3b',
          dash: 'dot',
          width: 1.2,
        },
      },
    ];

    if (tp > 0) {
      shapes.push({
        type: 'line',
        xref: 'paper',
        x0: 0,
        x1: 1,
        y0: tp,
        y1: tp,
        line: {
          color: '#00c853',
          dash: 'dot',
          width: 1.2,
        },
      });
    }

    if (sl > 0) {
      shapes.push({
        type: 'line',
        xref: 'paper',
        x0: 0,
        x1: 1,
        y0: -sl,
        y1: -sl,
        line: {
          color: '#d50000',
          dash: 'dot',
          width: 1.2,
        },
      });
    }

    // ===============================
    // UNA sola línea vertical (primer TP o SL)
    // ===============================
    if (exitType && exitIdx !== null) {
      shapes.push({
        type: 'line',
        xref: 'x',
        yref: 'paper',
        x0: x[exitIdx],
        x1: x[exitIdx],
        y0: 0,
        y1: 1,
        line: {
          color: exitType === 'TP' ? '#00c853' : '#d50000',
          dash: 'dot',
          width: 1.2,
        },
      });
    }

    // ===============================
    // Layout
    // ===============================
    const layout = {
      margin: { l: 60, r: 60, t: 10, b: 40 },
      paper_bgcolor: 'rgba(0,0,0,0)',
      plot_bgcolor: 'rgba(0,0,0,0)',
      shapes,
      showlegend: hasUnderlying,
      font: { color: '#cfd8dc' },

      xaxis: {
        type: 'date',
        showgrid: true,
        gridcolor: 'rgba(255,255,255,0.06)',
        zeroline: false,
      },

      yaxis: {
        title: 'PnL ($)',
        range: [lower - pad, upper + pad],
        showgrid: true,
        gridcolor: 'rgba(255,255,255,0.06)',
        zeroline: false,
      },

      yaxis2: {
        title: 'Underlying',
        overlaying: 'y',
        side: 'right',
        showgrid: false,
        zeroline: false,
      },
    };

    // ===============================
    // Render
    // ===============================
    Plotly.newPlot(icChartDiv, traces, layout, {
      responsive: true,
      displaylogo: false,
      displayModeBar: false,
    });
  }




  function findConfirmedHitIndex(values, predicate, confirmN = 5) {
    let count = 0;

    for (let i = 0; i < values.length; i++) {
      if (predicate(values[i])) {
        count++;
        if (count === confirmN) {
          return i; // índice del punto CONFIRMADO
        }
      } else {
        count = 0; // rompe la secuencia
      }
    }

    return null;
  }



  // ===============================
  // CLICK FECHA → FETCH INTRADAY
  // ===============================
  document.addEventListener('click', async (e) => {
    const link = e.target.closest('.bt-date-link');
    if (!link) return;

    e.preventDefault();

    const dateStr = link.dataset.date;

    // 🔥 limpiar estado previo
    resetIcChart();

    // actualizar hint
    const hint = document.getElementById("icDayHint");
    if (hint) {
      hint.textContent = `${dateStr} · intraday evolution`;
    }

    // 🔥 mostrar loading centrado y abrir modal
    showIcLoading();
    openIcDialog();

    try {
      const p = collectPayload();

      const qs = new URLSearchParams({
        date: dateStr,
        symbol: p.symbol,
        entry_time: p.entry_time,
        strategy: p.strategy,
        delta: p.delta_call,
        width: p.width_call,
        contracts: p.contracts,
        slippage: p.slippage,
        tp: p.tp,
        sl: p.sl,
      });

      const res = await fetch(`/backtesting/intraday?${qs.toString()}`, {
        credentials: 'same-origin',
      });

      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const data = await res.json();

      if (!data.ok || !Array.isArray(data.pnl_path)) {
        throw new Error('Invalid intraday payload');
      }

      // 🔥 ocultar loading
      hideIcLoading();

      // actualizar hint final
      if (hint) {
        hint.textContent = `${dateStr} · intraday evolution (${data.pnl_path.length} pts)`;
      }

      // 👇 dibujar gráfico
      drawIntradayChart(data.pnl_path);

    } catch (err) {
      console.error(err);

      // 🔥 ocultar loading
      hideIcLoading();

      // mostrar error
      const errBox = document.getElementById("icDayError");
      if (errBox) errBox.style.display = 'block';

      if (hint) {
        hint.textContent = `${dateStr} · error loading intraday`;
      }
    }
  });


  document.getElementById("btCancelBtn")?.addEventListener("click", () => {
    // detener barra fake
    finishFakeProgress();

    // detener polling
    if (pollTimer) {
      clearInterval(pollTimer);
      pollTimer = null;
    }

    hideOverlay();

    // opcional: limpiar estado UI
    console.log("Backtest cancelled by user");
  });

  let fakeProgressTimer = null;

  function startFakeProgress() {

    const bar = document.getElementById("btProgressBar");
    const pct = document.getElementById("btPct");
    const eta = document.getElementById("btEta");

    const from = document.getElementById("date_from").value;
    const to = document.getElementById("date_to").value;

    const days = countTradingDays(from, to);

    // ⏱️ AJUSTE CLAVE → tiempo estimado por día
    const SECONDS_PER_DAY = 0.20;
    const totalSeconds = Math.max(days * SECONDS_PER_DAY, 1);

    let elapsed = 0;
    let percent = 0;

    // 🔥 mostrar overlay
    showOverlay();

    // reset UI
    bar.style.width = "0%";
    pct.textContent = "0%";
    eta.textContent = "Calculating…";

    // limpiar timer previo
    clearInterval(fakeProgressTimer);

    fakeProgressTimer = setInterval(() => {

      elapsed += 0.5; // tick cada 500 ms
      percent = Math.min(95, Math.round((elapsed / totalSeconds) * 100));

      bar.style.width = percent + "%";
      pct.textContent = percent + "%";

      const remaining = Math.max(0, Math.round(totalSeconds - elapsed));
      const min = Math.floor(remaining / 60);
      const sec = remaining % 60;

      eta.textContent = `ETA ~ ${min}m ${sec}s`;

      // cuando llega al estimado → se queda clavado en 95%
      if (elapsed >= totalSeconds) {
        clearInterval(fakeProgressTimer);
      }

    }, 500);
  }


  function finishFakeProgress() {
    clearInterval(fakeProgressTimer);

    const bar = document.getElementById("btProgressBar");
    const pct = document.getElementById("btPct");

    if (bar) bar.style.width = "100%";
    if (pct) pct.textContent = "100%";

    // pequeño delay para que se vea el 100%
    setTimeout(() => {
      hideOverlay();   // 🔥 clave: cerrar overlay
    }, 400);
  }


  function countTradingDays(from, to) {
    let d0 = new Date(from);
    let d1 = new Date(to);
    let count = 0;

    while (d0 <= d1) {
      const day = d0.getDay();
      if (day !== 0 && day !== 6) count++;
      d0.setDate(d0.getDate() + 1);
    }
    return count;
  }


  function resetIcChart() {

    // limpiar gráfico previo
    icChartDiv.innerHTML = '';

    // ocultar error si estaba visible
    if (icDayError) {
      icDayError.style.display = 'none';
    }

    // limpiar Plotly previo
    if (icChart) {
      try {
        Plotly.purge(icChartDiv);
      } catch (e) { }
      icChart = null;
      icSeries = null;
    }
  }

  function computeKPIsFromRows(rowsAsc) {
    const daysTotal = rowsAsc.length;

    let wins = 0;
    let losses = 0;

    let grossWin = 0;
    let grossLoss = 0;

    let netPnL = 0;

    let maxStreakWin = 0;
    let maxStreakLoss = 0;
    let curWin = 0;
    let curLoss = 0;

    let peak = 0;
    let equity = 0;
    let maxDrawdown = 0;

    // 🔽 para tracking del drawdown
    let ddStartIndex = null;
    let maxDDStartIndex = null;
    let maxDDEndIndex = null;

    // ===============================
    // LOOP PRINCIPAL
    // ===============================
    rowsAsc.forEach((d, i) => {
      const pnl = d.plValue;

      netPnL += pnl;

      equity += pnl;

      if (equity > peak) {
        peak = equity;
        ddStartIndex = i; // nuevo pico → posible inicio DD
      }

      const drawdown = equity - peak;

      if (drawdown < maxDrawdown) {
        maxDrawdown = drawdown;
        maxDDStartIndex = ddStartIndex;
        maxDDEndIndex = i;
      }

      if (pnl > 0) {
        wins++;
        grossWin += pnl;
        curWin++;
        curLoss = 0;
        maxStreakWin = Math.max(maxStreakWin, curWin);
      } else if (pnl < 0) {
        losses++;
        grossLoss += pnl;
        curLoss++;
        curWin = 0;
        maxStreakLoss = Math.max(maxStreakLoss, curLoss);
      } else {
        curWin = 0;
        curLoss = 0;
      }
    });

    const winRate = daysTotal ? (wins / daysTotal) * 100 : 0;
    const avgWin = wins ? grossWin / wins : 0;
    const avgLoss = losses ? grossLoss / losses : 0;

    const profitFactor =
      Math.abs(grossLoss) > 0
        ? grossWin / Math.abs(grossLoss)
        : null;

    // ===============================
    // KPIs MENSUALES
    // ===============================
    const byMonth = {};

    rowsAsc.forEach(d => {
      const rawDate = d.date || d.fecha;
      if (!rawDate) return;

      const dt = new Date(rawDate);
      if (isNaN(dt)) return;

      const key =
        `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, '0')}`;

      byMonth[key] = (byMonth[key] || 0) + d.plValue;
    });

    const monthlyPnLs = Object.values(byMonth);
    const totalMonths = monthlyPnLs.length;

    const avgMonthlyPnL =
      totalMonths > 0
        ? monthlyPnLs.reduce((a, b) => a + b, 0) / totalMonths
        : 0;

    const positiveMonths =
      monthlyPnLs.filter(v => v > 0).length;

    const consistency =
      totalMonths > 0
        ? (positiveMonths / totalMonths) * 100
        : 0;

    // ===============================
    // DURACIÓN DEL MAX DRAWDOWN
    // ===============================
    let maxDrawdownDays = 0;

    if (
      maxDDStartIndex !== null &&
      maxDDEndIndex !== null &&
      maxDDEndIndex >= maxDDStartIndex
    ) {
      maxDrawdownDays = maxDDEndIndex - maxDDStartIndex + 1;
    }

    // ===============================
    // RETURN
    // ===============================
    return {
      netPnL,

      daysTotal,
      wins,
      losses,
      winRate,
      avgWin,
      avgLoss,

      profitFactor,
      maxDrawdown: Math.abs(maxDrawdown),
      maxDrawdownDays,

      maxStreakWin,
      maxStreakLoss,

      avgMonthlyPnL,
      consistency,
    };
  }



  function renderKPIs(k) {

    // NET PERFORMANCE
    const netEl = document.getElementById("kpiNetPnL");
    if (netEl) {
      netEl.textContent = `$${k.netPnL.toFixed(2)}`;
      netEl.classList.remove("pos", "neg");
      if (k.netPnL > 0) netEl.classList.add("pos");
      if (k.netPnL < 0) netEl.classList.add("neg");
    }

    // días
    document.getElementById("kpiDaysTotal").textContent = k.daysTotal;
    document.getElementById("kpiDaysWin").textContent = k.wins;
    document.getElementById("kpiDaysLoss").textContent = k.losses;

    // win rate
    document.getElementById("kpiWinRate").textContent =
      `${k.winRate.toFixed(1)}%`;

    // promedios
    document.getElementById("kpiAvgWin").textContent =
      `$${k.avgWin.toFixed(2)}`;

    document.getElementById("kpiAvgLoss").textContent =
      `$${k.avgLoss.toFixed(2)}`;

    // profit factor
    document.getElementById("kpiPF").textContent =
      k.profitFactor ? k.profitFactor.toFixed(2) : '—';

    // 🔥 MAX DRAWDOWN + duración
    document.getElementById("kpiMaxDD").innerHTML = `
    $${k.maxDrawdown.toFixed(2)}
    <div style="font-size:11px; opacity:0.7; margin-top:2px;">
      ${k.maxDrawdownDays} days
    </div>
  `;

    // rachas
    document.getElementById("kpiMaxWinStreak").textContent =
      k.maxStreakWin;

    document.getElementById("kpiMaxLossStreak").textContent =
      k.maxStreakLoss;

    // nuevos
    document.getElementById("kpiAvgMonthly").textContent =
      `$${k.avgMonthlyPnL.toFixed(2)}`;

    document.getElementById("kpiConsistency").textContent =
      `${k.consistency.toFixed(1)}%`;
  }




  function drawEquityCurve(rowsWithCum) {
    const chartDiv = document.getElementById("equityChart");
    if (!chartDiv || !rowsWithCum?.length) return;

    // =========================
    // DATA
    // =========================
    const x = rowsWithCum.map(d => d.date);
    const y = rowsWithCum.map(d => d.cumPnL);

    const lastPnL = y[y.length - 1];
    const isPositive = lastPnL >= 0;

    // =========================
    // TRACE
    // =========================
    const trace = {
      x,
      y,
      type: 'scatter',
      mode: 'lines',
      name: 'Equity',
      line: {
        width: 3,
        color: isPositive ? '#22c55e' : '#ef4444'
      },
      hovertemplate:
        '<b>%{x}</b><br>' +
        'Equity: <b>$%{y:.2f}</b>' +
        '<extra></extra>'
    };

    // =========================
    // ZERO LINE
    // =========================
    const zeroLine = {
      type: 'line',
      xref: 'paper',
      x0: 0,
      x1: 1,
      y0: 0,
      y1: 0,
      line: {
        color: 'rgba(255,255,255,0.25)',
        width: 1,
        dash: 'dot'
      }
    };

    // =========================
    // LAYOUT
    // =========================
    const layout = {
      margin: { t: 20, l: 55, r: 20, b: 35 },
      paper_bgcolor: 'transparent',
      plot_bgcolor: 'transparent',
      showlegend: false,
      shapes: [zeroLine],

      xaxis: {
        title: '',
        tickfont: { color: '#9ca3af', size: 11 },
        showgrid: false,
        zeroline: false
      },

      yaxis: {
        title: 'Equity ($)',
        tickfont: { color: '#9ca3af', size: 11 },
        gridcolor: 'rgba(100,100,100,0.20)',
        zeroline: false
      }
    };

    // =========================
    // CONFIG
    // =========================
    const config = {
      displayModeBar: false,
      responsive: true
    };

    // =========================
    // DRAW
    // =========================
    Plotly.newPlot(chartDiv, [trace], layout, config);
  }


  /* ===============================
     CHART SWITCHER
  =============================== */

  function renderChart(type) {
    const data = window.__LAST_BT_RESULT__;
    if (!data || !data.per_day) return;

    // limpiar gráfico actual
    Plotly.purge("equityChart");

    switch (type) {
      case 'equity':
        drawEquityCurve(
          computeRowsWithCum(data.per_day)
        );
        break;

      case 'monthly':
        drawMonthlyChart(data.per_day);
        break;

      case 'weekly':
        drawWeeklyChart(data.per_day);
        break;

      case 'drawdown':
        drawDrawdownChart(data.per_day);
        break;

      case "equity_hwm":
        drawEquityWithHWM(data.per_day);
        break;

      case "pnl_histogram":
        drawPnLHistogram(data.per_day);
        break;

      case "rolling_wr":
        drawRollingWinRate(data.per_day);
        break;
      case "weekday":
        drawPnLByWeekday(data.per_day);
        break;
      case "streaks":
        drawStreaksChart(data.per_day);
        break;

    }

  }

  /* botones */
  document.querySelectorAll('.chart-tool').forEach(btn => {
    btn.addEventListener('click', () => {

      document
        .querySelectorAll('.chart-tool')
        .forEach(b => b.classList.remove('active'));

      btn.classList.add('active');

      renderChart(btn.dataset.chart);
    });
  });

  function computeRowsWithCum(perDay) {
    let cum = 0;
    return [...perDay]
      .sort((a, b) => new Date(a.date) - new Date(b.date))
      .map(d => {
        const pnl =
          d.exit.reason === 'TP' ? d.exit.tp :
            d.exit.reason === 'SL' ? -d.exit.sl :
              d.exit.final_pnl;

        cum += pnl;
        return { date: d.date, cumPnL: cum, pnl };
      });
  }



  function drawMonthlyChart(perDay) {
    const chartDiv = document.getElementById("equityChart");
    if (!chartDiv || !perDay?.length) return;

    /* ===============================
       1️⃣ Agrupar PnL por mes (SAFE DATE)
       =============================== */
    const byMonth = {};

    perDay.forEach(d => {
      if (!d.date) return;

      // 🔒 PARSEO SEGURO (NO UTC)
      const [y, m, day] = d.date.split("-").map(Number);
      const dt = new Date(y, m - 1, day, 12, 0, 0);
      if (isNaN(dt)) return;

      const key = `${y}-${String(m).padStart(2, "0")}`;

      const pnl =
        d.exit.reason === "TP" ? d.exit.tp :
          d.exit.reason === "SL" ? -d.exit.sl :
            d.exit.final_pnl;

      byMonth[key] = (byMonth[key] || 0) + pnl;
    });

    /* ===============================
       2️⃣ Orden cronológico real
       =============================== */
    const monthKeys = Object.keys(byMonth).sort();
    const values = monthKeys.map(k => byMonth[k]);

    /* ===============================
       3️⃣ Labels Babel-safe (Ene 26 / Jan 26)
       =============================== */
    const locale = document.documentElement.lang || "en-US";

    const labels = monthKeys.map(k => {
      const [y, m] = k.split("-").map(Number);
      const d = new Date(y, m - 1, 1, 12, 0, 0);

      let monthShort = new Intl.DateTimeFormat(locale, {
        month: "short"
      }).format(d);

      // Forzar mayúscula inicial (estética dashboard)
      monthShort =
        monthShort.charAt(0).toUpperCase() +
        monthShort.slice(1);

      return `${monthShort} ${String(y).slice(-2)}`;
    });

    /* ===============================
       4️⃣ Colores dinámicos de barras
       =============================== */
    const colors = values.map(v =>
      v >= 0 ? "#22c55e" : "#ef4444"
    );

    /* ===============================
       5️⃣ Texto sobre / bajo barras
       =============================== */
    const barText = values.map(v =>
      `${v < 0 ? "-" : ""}$${Math.abs(v).toFixed(0)}`
    );

    /* ===============================
       6️⃣ Trace
       =============================== */
    const axisTextColor = "#9ca3af"; // mismo color que los labels

    const trace = {
      x: labels,
      y: values,
      type: "bar",
      marker: { color: colors },

      text: barText,
      textposition: "outside",
      textfont: {
        size: 12,
        color: axisTextColor,
        family: "Inter, system-ui, sans-serif"
      },

      hovertemplate:
        "<b>%{x}</b><br>" +
        "PnL: <b>$%{y:.2f}</b>" +
        "<extra></extra>"
    };

    /* ===============================
       7️⃣ Línea cero
       =============================== */
    const zeroLine = {
      type: "line",
      xref: "paper",
      x0: 0,
      x1: 1,
      y0: 0,
      y1: 0,
      line: {
        color: "rgba(255,255,255,0.35)",
        width: 1,
        dash: "dot"
      }
    };

    /* ===============================
       8️⃣ Layout
       =============================== */
    const layout = {
      margin: { t: 30, l: 55, r: 20, b: 55 },
      paper_bgcolor: "transparent",
      plot_bgcolor: "transparent",
      showlegend: false,
      shapes: [zeroLine],

      // 🔑 permitir texto fuera de las barras
      cliponaxis: false,
      uniformtext: {
        mode: "hide",
        minsize: 10
      },

      xaxis: {
        title: "",
        tickfont: { color: axisTextColor, size: 11 },
        showgrid: false,
        zeroline: false
      },

      yaxis: {
        title: "PnL ($)",
        tickfont: { color: axisTextColor, size: 11 },
        gridcolor: "rgba(100,100,100,0.20)",
        zeroline: false
      }
    };

    const config = {
      displayModeBar: false,
      responsive: true
    };

    Plotly.newPlot(chartDiv, [trace], layout, config);
  }

  function drawWeeklyChart(perDay) {
    const chartDiv = document.getElementById("equityChart");
    if (!chartDiv || !perDay?.length) return;

    /* ===============================
       1️⃣ Helpers ISO Week
       =============================== */
    function getISOWeek(date) {
      const d = new Date(Date.UTC(
        date.getFullYear(),
        date.getMonth(),
        date.getDate()
      ));

      // jueves de la semana actual decide el año ISO
      d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
      const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
      const weekNo = Math.ceil((((d - yearStart) / 86400000) + 1) / 7);

      return {
        year: d.getUTCFullYear(),
        week: weekNo
      };
    }

    /* ===============================
       2️⃣ Agrupar PnL por semana (SAFE DATE)
       =============================== */
    const byWeek = {};

    perDay.forEach(d => {
      if (!d.date) return;

      // 🔒 PARSEO SEGURO (NO UTC SHIFT)
      const [y, m, day] = d.date.split("-").map(Number);
      const localDate = new Date(y, m - 1, day, 12, 0, 0);
      if (isNaN(localDate)) return;

      const { year, week } = getISOWeek(localDate);
      const key = `${year}-W${String(week).padStart(2, "0")}`;

      const pnl =
        d.exit.reason === "TP" ? d.exit.tp :
          d.exit.reason === "SL" ? -d.exit.sl :
            d.exit.final_pnl;

      byWeek[key] = (byWeek[key] || 0) + pnl;
    });

    /* ===============================
       3️⃣ Orden cronológico real
       =============================== */
    const weekKeys = Object.keys(byWeek).sort((a, b) => {
      const [ya, wa] = a.split("-W").map(Number);
      const [yb, wb] = b.split("-W").map(Number);
      return ya === yb ? wa - wb : ya - yb;
    });

    const values = weekKeys.map(k => byWeek[k]);

    /* ===============================
       4️⃣ Labels semanales (W42 25)
       =============================== */
    const labels = weekKeys.map(k => {
      const [y, w] = k.split("-W");
      return `W${w} ${String(y).slice(-2)}`;
    });

    /* ===============================
       5️⃣ Colores dinámicos
       =============================== */
    const colors = values.map(v =>
      v >= 0 ? "#22c55e" : "#ef4444"
    );

    /* ===============================
       6️⃣ Texto sobre / bajo barras
       =============================== */
    const barText = values.map(v =>
      `${v < 0 ? "-" : ""}$${Math.abs(v).toFixed(0)}`
    );

    /* ===============================
       7️⃣ Trace
       =============================== */
    const axisTextColor = "#9ca3af";

    const trace = {
      x: labels,
      y: values,
      type: "bar",
      marker: { color: colors },

      text: barText,
      textposition: "outside",
      textfont: {
        size: 12,
        color: axisTextColor,
        family: "Inter, system-ui, sans-serif"
      },

      hovertemplate:
        "<b>%{x}</b><br>" +
        "PnL: <b>$%{y:.2f}</b>" +
        "<extra></extra>"
    };

    /* ===============================
       8️⃣ Línea cero
       =============================== */
    const zeroLine = {
      type: "line",
      xref: "paper",
      x0: 0,
      x1: 1,
      y0: 0,
      y1: 0,
      line: {
        color: "rgba(255,255,255,0.35)",
        width: 1,
        dash: "dot"
      }
    };

    /* ===============================
       9️⃣ Layout
       =============================== */
    const layout = {
      margin: { t: 30, l: 55, r: 20, b: 55 },
      paper_bgcolor: "transparent",
      plot_bgcolor: "transparent",
      showlegend: false,
      shapes: [zeroLine],

      cliponaxis: false,
      uniformtext: {
        mode: "hide",
        minsize: 10
      },

      xaxis: {
        title: "",
        tickfont: { color: axisTextColor, size: 11 },
        showgrid: false,
        zeroline: false
      },

      yaxis: {
        title: "PnL ($)",
        tickfont: { color: axisTextColor, size: 11 },
        gridcolor: "rgba(100,100,100,0.20)",
        zeroline: false
      }
    };

    const config = {
      displayModeBar: false,
      responsive: true
    };

    Plotly.newPlot(chartDiv, [trace], layout, config);
  }

  function drawDrawdownChart(perDay) {
    const chartDiv = document.getElementById("equityChart");
    if (!chartDiv || !perDay?.length) return;

    /* ===============================
       1️⃣ Construir equity curve (SAFE DATE)
       =============================== */
    const rows = [];

    perDay.forEach(d => {
      if (!d.date) return;

      // 🔒 PARSEO SEGURO (NO UTC)
      const [y, m, day] = d.date.split("-").map(Number);
      const dt = new Date(y, m - 1, day, 12, 0, 0);
      if (isNaN(dt)) return;

      const pnl =
        d.exit.reason === "TP" ? d.exit.tp :
          d.exit.reason === "SL" ? -d.exit.sl :
            d.exit.final_pnl;

      rows.push({ date: dt, pnl });
    });

    if (!rows.length) return;

    // Orden cronológico
    rows.sort((a, b) => a.date - b.date);

    /* ===============================
       2️⃣ Calcular Equity y Drawdown
       =============================== */
    let equity = 0;
    let peak = 0;

    const dates = [];
    const drawdowns = [];

    rows.forEach(r => {
      equity += r.pnl;
      peak = Math.max(peak, equity);
      const dd = equity - peak; // <= 0

      dates.push(r.date);
      drawdowns.push(dd);
    });

    /* ===============================
       3️⃣ Trace Drawdown
       =============================== */
    const axisTextColor = "#9ca3af";

    const trace = {
      x: dates,
      y: drawdowns,
      type: "scatter",
      mode: "lines",
      line: {
        color: "#ef4444",
        width: 2
      },
      fill: "tozeroy",
      fillcolor: "rgba(239,68,68,0.15)",

      hovertemplate:
        "<b>%{x|%Y-%m-%d}</b><br>" +
        "Drawdown: <b>$%{y:.2f}</b>" +
        "<extra></extra>"
    };

    /* ===============================
       4️⃣ Línea cero
       =============================== */
    const zeroLine = {
      type: "line",
      xref: "paper",
      x0: 0,
      x1: 1,
      y0: 0,
      y1: 0,
      line: {
        color: "rgba(255,255,255,0.35)",
        width: 1,
        dash: "dot"
      }
    };

    /* ===============================
       5️⃣ Layout
       =============================== */
    const layout = {
      margin: { t: 30, l: 60, r: 20, b: 40 },
      paper_bgcolor: "transparent",
      plot_bgcolor: "transparent",
      showlegend: false,
      shapes: [zeroLine],

      xaxis: {
        type: "date",
        tickfont: { color: axisTextColor, size: 11 },
        showgrid: false,
        zeroline: false
      },

      yaxis: {
        title: "Drawdown ($)",
        tickfont: { color: axisTextColor, size: 11 },
        gridcolor: "rgba(100,100,100,0.20)",
        zeroline: false
      }
    };

    const config = {
      displayModeBar: false,
      responsive: true
    };

    Plotly.newPlot(chartDiv, [trace], layout, config);
  }


  function drawEquityWithHWM(perDay) {
    const chartDiv = document.getElementById("equityChart");
    if (!chartDiv || !perDay?.length) return;

    const TOP_N = 3; // 🔥 cantidad de drawdowns a mostrar

    /* ===============================
       1️⃣ Construir equity curve (SAFE DATE)
       =============================== */
    const rows = [];

    perDay.forEach(d => {
      if (!d.date) return;

      // 🔒 PARSEO SEGURO (NO UTC)
      const [y, m, day] = d.date.split("-").map(Number);
      const dt = new Date(y, m - 1, day, 12, 0, 0);
      if (isNaN(dt)) return;

      const pnl =
        d.exit.reason === "TP" ? d.exit.tp :
          d.exit.reason === "SL" ? -d.exit.sl :
            d.exit.final_pnl;

      rows.push({ date: dt, pnl });
    });

    if (!rows.length) return;

    rows.sort((a, b) => a.date - b.date);

    /* ===============================
       2️⃣ Calcular Equity + HWM
       =============================== */
    let equity = 0;
    let peak = 0;

    const x = [];
    const yEquity = [];
    const yHWM = [];

    const drawdowns = [];

    let ddStartDate = null;
    let ddStartPeak = null;

    rows.forEach(r => {
      equity += r.pnl;

      // nuevo máximo
      if (equity > peak) {
        peak = equity;

        // si había drawdown → cerrarlo
        if (ddStartDate) {
          const ddDays = Math.round(
            (r.date - ddStartDate) / (1000 * 60 * 60 * 24)
          );

          drawdowns.push({
            start: ddStartDate,
            end: r.date,
            days: ddDays,
            peak: peak
          });

          ddStartDate = null;
          ddStartPeak = null;
        }
      }

      // entrar en drawdown
      if (equity < peak && ddStartDate === null) {
        ddStartDate = r.date;
        ddStartPeak = peak;
      }

      x.push(r.date);
      yEquity.push(equity);
      yHWM.push(peak);
    });

    /* ===============================
       3️⃣ Seleccionar TOP N drawdowns
       =============================== */
    const topDD = drawdowns
      .sort((a, b) => b.days - a.days)
      .slice(0, TOP_N);

    const annotations = topDD.map(dd => ({
      x: dd.end,
      y: dd.peak,
      text: `↧ ${dd.days} days`,
      showarrow: true,
      arrowhead: 2,
      arrowsize: 1,
      arrowwidth: 1,
      ax: 0,
      ay: -28,
      font: {
        size: 12,
        color: "#ef4444",
        family: "Inter, system-ui, sans-serif"
      },
      arrowcolor: "#ef4444"
    }));

    /* ===============================
       4️⃣ Traces
       =============================== */
    const axisTextColor = "#9ca3af";

    const traceHWM = {
      x,
      y: yHWM,
      type: "scatter",
      mode: "lines",
      line: {
        color: "rgba(156,163,175,0.9)",
        width: 2,
        dash: "dot"
      },
      hovertemplate:
        "<b>%{x|%Y-%m-%d}</b><br>" +
        "HWM: <b>$%{y:.2f}</b>" +
        "<extra></extra>"
    };

    const traceEquity = {
      x,
      y: yEquity,
      type: "scatter",
      mode: "lines",
      line: {
        color: "#22c55e",
        width: 2
      },
      fill: "tonexty",
      fillcolor: "rgba(239,68,68,0.12)",
      hovertemplate:
        "<b>%{x|%Y-%m-%d}</b><br>" +
        "Equity: <b>$%{y:.2f}</b>" +
        "<extra></extra>"
    };

    /* ===============================
       5️⃣ Layout
       =============================== */
    const layout = {
      margin: { t: 30, l: 60, r: 40, b: 40 },
      paper_bgcolor: "transparent",
      plot_bgcolor: "transparent",
      showlegend: false,
      annotations,

      xaxis: {
        type: "date",
        tickfont: { color: axisTextColor, size: 11 },
        showgrid: false,
        zeroline: false
      },

      yaxis: {
        title: "Equity ($)",
        tickfont: { color: axisTextColor, size: 11 },
        gridcolor: "rgba(100,100,100,0.20)",
        zeroline: false
      }
    };

    const config = {
      displayModeBar: false,
      responsive: true
    };

    Plotly.newPlot(chartDiv, [traceHWM, traceEquity], layout, config);
  }


  function drawPnLHistogram(perDay) {
    const chartDiv = document.getElementById("equityChart");
    if (!chartDiv || !perDay?.length) return;

    /* ===============================
       1️⃣ Extraer PnL por trade
       =============================== */
    const pnls = [];

    perDay.forEach(d => {
      if (!d.exit) return;

      const pnl =
        d.exit.reason === "TP" ? d.exit.tp :
          d.exit.reason === "SL" ? -d.exit.sl :
            d.exit.final_pnl;

      if (typeof pnl === "number" && !isNaN(pnl)) {
        pnls.push(pnl);
      }
    });

    if (!pnls.length) return;

    /* ===============================
       2️⃣ Definir bins (simétricos)
       =============================== */
    const BIN_COUNT = 16;

    const maxAbs = Math.max(...pnls.map(v => Math.abs(v))) || 1;
    const binSize = (2 * maxAbs) / BIN_COUNT;

    const bins = [];
    const counts = [];

    for (let i = 0; i < BIN_COUNT; i++) {
      bins.push(-maxAbs + i * binSize);
      counts.push(0);
    }

    pnls.forEach(v => {
      let idx = Math.floor((v + maxAbs) / binSize);
      idx = Math.min(Math.max(idx, 0), BIN_COUNT - 1);
      counts[idx]++;
    });

    /* ===============================
       3️⃣ Labels legibles
       =============================== */
    const labels = bins.map(b =>
      `${Math.round(b)} → ${Math.round(b + binSize)}`
    );

    const colors = bins.map(b =>
      b + binSize <= 0
        ? "#ef4444"
        : b >= 0
          ? "#22c55e"
          : "#9ca3af"
    );

    /* ===============================
       4️⃣ Trace
       =============================== */
    const trace = {
      x: labels,
      y: counts,
      type: "bar",
      marker: { color: colors },
      hovertemplate:
        "Range: <b>%{x}</b><br>" +
        "Trades: <b>%{y}</b>" +
        "<extra></extra>"
    };

    /* ===============================
       5️⃣ Línea vertical en 0
       =============================== */
    const zeroIndex = bins.findIndex(
      b => b < 0 && b + binSize > 0
    );

    const zeroLine =
      zeroIndex >= 0
        ? [{
          type: "line",
          xref: "x",
          yref: "paper",
          x0: labels[zeroIndex],
          x1: labels[zeroIndex],
          y0: 0,
          y1: 1,
          line: {
            color: "rgba(255,255,255,0.35)",
            width: 1,
            dash: "dot"
          }
        }]
        : [];

    /* ===============================
       6️⃣ Layout
       =============================== */
    const layout = {
      margin: { t: 30, l: 55, r: 20, b: 80 },
      paper_bgcolor: "transparent",
      plot_bgcolor: "transparent",
      showlegend: false,
      shapes: zeroLine,

      xaxis: {
        title: "PnL range ($)",
        tickfont: { color: "#9ca3af", size: 10 },
        tickangle: -35,
        showgrid: false
      },

      yaxis: {
        title: "Number of trades",
        tickfont: { color: "#9ca3af", size: 11 },
        gridcolor: "rgba(100,100,100,0.20)",
        zeroline: false
      }
    };

    const config = {
      displayModeBar: false,
      responsive: true
    };

    Plotly.newPlot(chartDiv, [trace], layout, config);
  }

  function drawRollingWinRate(perDay) {
    const chartDiv = document.getElementById("equityChart");
    if (!chartDiv || !perDay?.length) return;

    const WINDOW = 20;
    const RISK_THRESHOLD = 40;
    const RISK_TRADES = 30;

    /* ===============================
       1️⃣ Extraer trades
       =============================== */
    const trades = [];

    perDay.forEach(d => {
      if (!d.exit) return;

      const pnl =
        d.exit.reason === "TP" ? d.exit.tp :
          d.exit.reason === "SL" ? -d.exit.sl :
            d.exit.final_pnl;

      if (typeof pnl === "number" && !isNaN(pnl)) {
        trades.push(pnl > 0);
      }
    });

    if (trades.length < WINDOW) {
      Plotly.newPlot(chartDiv, [], {
        annotations: [{
          text: "Not enough trades to compute Rolling Win Rate",
          xref: "paper",
          yref: "paper",
          x: 0.5,
          y: 0.5,
          showarrow: false,
          font: { color: "#9ca3af", size: 14 }
        }],
        paper_bgcolor: "transparent",
        plot_bgcolor: "transparent"
      });
      return;
    }

    /* ===============================
       2️⃣ Rolling WR base (SIEMPRE)
       =============================== */
    const x = [];
    const y = [];

    for (let i = WINDOW - 1; i < trades.length; i++) {
      const slice = trades.slice(i - WINDOW + 1, i + 1);
      const wins = slice.filter(Boolean).length;
      x.push(i + 1);
      y.push((wins / WINDOW) * 100);
    }

    /* ===============================
       3️⃣ Shapes base (banda verde)
       =============================== */
    const shapes = [
      {
        type: "rect",
        xref: "paper",
        yref: "y",
        x0: 0,
        x1: 1,
        y0: 40,
        y1: 60,
        fillcolor: "rgba(34,197,94,0.08)",
        line: { width: 0 }
      }
    ];

    /* ===============================
       4️⃣ Detectar riesgo SOLO si existe
       =============================== */
    let startRisk = null;

    for (let i = 0; i < y.length; i++) {
      if (y[i] < RISK_THRESHOLD) {
        if (startRisk === null) startRisk = i;
      } else if (startRisk !== null) {
        const len = i - startRisk;
        if (len >= RISK_TRADES) {
          shapes.push({
            type: "rect",
            xref: "x",
            yref: "paper",
            x0: x[startRisk],
            x1: x[i - 1],
            y0: 0,
            y1: 1,
            fillcolor: "rgba(239,68,68,0.12)",
            line: { width: 0 }
          });
        }
        startRisk = null;
      }
    }

    /* ===============================
       5️⃣ Trace principal
       =============================== */
    const trace = {
      x,
      y,
      type: "scatter",
      mode: "lines",
      line: { color: "#38bdf8", width: 2 },
      hovertemplate:
        "Trade #%{x}<br>" +
        "Win rate: <b>%{y:.1f}%</b>" +
        "<extra></extra>"
    };

    /* ===============================
       6️⃣ Layout
       =============================== */
    const layout = {
      margin: { t: 25, l: 55, r: 20, b: 40 },
      paper_bgcolor: "transparent",
      plot_bgcolor: "transparent",
      showlegend: false,
      shapes,

      xaxis: {
        title: "Trade number",
        tickfont: { color: "#9ca3af", size: 11 },
        zeroline: false,
        showgrid: false
      },

      yaxis: {
        title: "Win Rate (%)",
        range: [0, 100],
        tickfont: { color: "#9ca3af", size: 11 },
        gridcolor: "rgba(100,100,100,0.20)",
        zeroline: false
      }
    };

    Plotly.newPlot(chartDiv, [trace], layout, {
      displayModeBar: false,
      responsive: true
    });
  }

  function drawPnLByWeekday(perDay) {
    const chartDiv = document.getElementById("equityChart");
    if (!chartDiv || !perDay?.length) return;

    /* ===============================
       1️⃣ Inicializar estructura
       =============================== */
    const weekdays = [
      "Mon", "Tue", "Wed", "Thu", "Fri"
    ];

    const data = {
      Mon: 0,
      Tue: 0,
      Wed: 0,
      Thu: 0,
      Fri: 0
    };

    /* ===============================
       2️⃣ Agregar PnL por día
       =============================== */
    perDay.forEach(d => {
      if (!d.date || !d.exit) return;

      // 🔒 SAFE DATE (NO UTC BUG)
      const [y, m, day] = d.date.split("-").map(Number);
      const dt = new Date(y, m - 1, day, 12, 0, 0);
      if (isNaN(dt)) return;

      const dow = dt.getDay(); // 0=Sun, 6=Sat
      if (dow === 0 || dow === 6) return;

      const label = weekdays[dow - 1];

      const pnl =
        d.exit.reason === "TP" ? d.exit.tp :
          d.exit.reason === "SL" ? -d.exit.sl :
            d.exit.final_pnl;

      data[label] += pnl;
    });

    const values = weekdays.map(d => data[d]);

    /* ===============================
       3️⃣ Colores
       =============================== */
    const colors = values.map(v =>
      v >= 0 ? "#22c55e" : "#ef4444"
    );

    /* ===============================
       4️⃣ Trace
       =============================== */
    const trace = {
      x: weekdays,
      y: values,
      type: "bar",
      marker: { color: colors },
      hovertemplate:
        "<b>%{x}</b><br>" +
        "PnL: <b>$%{y:.2f}</b>" +
        "<extra></extra>"
    };

    /* ===============================
       5️⃣ Línea cero
       =============================== */
    const zeroLine = {
      type: "line",
      xref: "paper",
      x0: 0,
      x1: 1,
      y0: 0,
      y1: 0,
      line: {
        color: "rgba(255,255,255,0.35)",
        width: 1,
        dash: "dot"
      }
    };

    /* ===============================
       6️⃣ Layout
       =============================== */
    const layout = {
      margin: { t: 30, l: 55, r: 20, b: 40 },
      paper_bgcolor: "transparent",
      plot_bgcolor: "transparent",
      showlegend: false,
      shapes: [zeroLine],

      xaxis: {
        title: "",
        tickfont: { color: "#9ca3af", size: 12 },
        showgrid: false,
        zeroline: false
      },

      yaxis: {
        title: "PnL ($)",
        tickfont: { color: "#9ca3af", size: 11 },
        gridcolor: "rgba(100,100,100,0.20)",
        zeroline: false
      }
    };

    Plotly.newPlot(chartDiv, [trace], layout, {
      displayModeBar: false,
      responsive: true
    });
  }

  function drawStreaksChart(perDay) {
    const chartDiv = document.getElementById("equityChart");
    if (!chartDiv || !perDay?.length) return;

    /* ===============================
       1️⃣ Extraer wins / losses
       =============================== */
    const results = [];

    perDay.forEach(d => {
      if (!d.exit) return;

      const pnl =
        d.exit.reason === "TP" ? d.exit.tp :
          d.exit.reason === "SL" ? -d.exit.sl :
            d.exit.final_pnl;

      if (typeof pnl === "number" && !isNaN(pnl)) {
        results.push(pnl > 0 ? 1 : -1);
      }
    });

    if (!results.length) return;

    /* ===============================
       2️⃣ Calcular rachas
       =============================== */
    const winStreaks = {};
    const lossStreaks = {};

    let current = results[0];
    let count = 1;

    for (let i = 1; i < results.length; i++) {
      if (results[i] === current) {
        count++;
      } else {
        if (current > 0) {
          winStreaks[count] = (winStreaks[count] || 0) + 1;
        } else {
          lossStreaks[count] = (lossStreaks[count] || 0) + 1;
        }
        current = results[i];
        count = 1;
      }
    }

    // cerrar última racha
    if (current > 0) {
      winStreaks[count] = (winStreaks[count] || 0) + 1;
    } else {
      lossStreaks[count] = (lossStreaks[count] || 0) + 1;
    }

    /* ===============================
       3️⃣ Ejes comunes
       =============================== */
    const maxStreak = Math.max(
      ...Object.keys(winStreaks).map(Number),
      ...Object.keys(lossStreaks).map(Number)
    );

    const x = [];
    const winValues = [];
    const lossValues = [];

    for (let i = 1; i <= maxStreak; i++) {
      x.push(i);
      winValues.push(winStreaks[i] || 0);
      lossValues.push(lossStreaks[i] || 0);
    }

    /* ===============================
       4️⃣ Traces
       =============================== */
    const winTrace = {
      x,
      y: winValues,
      type: "bar",
      name: "Winning streaks",
      marker: { color: "#22c55e" }
    };

    const lossTrace = {
      x,
      y: lossValues,
      type: "bar",
      name: "Losing streaks",
      marker: { color: "#ef4444" }
    };

    /* ===============================
       5️⃣ Layout
       =============================== */
    const layout = {
      margin: { t: 30, l: 55, r: 20, b: 40 },
      barmode: "group",
      paper_bgcolor: "transparent",
      plot_bgcolor: "transparent",

      legend: {
        orientation: "h",
        y: 1.1,
        font: { color: "#9ca3af" }
      },

      xaxis: {
        title: "Streak length",
        tickfont: { color: "#9ca3af", size: 11 },
        showgrid: false,
        zeroline: false
      },

      yaxis: {
        title: "Occurrences",
        tickfont: { color: "#9ca3af", size: 11 },
        gridcolor: "rgba(100,100,100,0.20)",
        zeroline: false
      }
    };

    Plotly.newPlot(chartDiv, [winTrace, lossTrace], layout, {
      displayModeBar: false,
      responsive: true
    });
  }



  /* ======================================
     Chart help modal + toolbar (FINAL)
     ====================================== */

  let currentChartKey = "equity";

  /* ===============================
     Metadata por gráfico
     =============================== */
  const chartMeta = {
    equity: {
      icon: "📈",
      title: "{{ _('Cumulative PnL') }}",
      body: `
      <p>
        {{ _('This chart represents the cumulative Profit and Loss (PnL) of the strategy, where each trading day result is added to the previous total.') }}
      </p>
      <p>
        {{ _('It is one of the most important charts to evaluate the long-term behavior of a strategy, as it reveals whether profits are built progressively or depend on isolated wins.') }}
      </p>
      <p>
        {{ _('A healthy equity curve typically shows a clear upward bias, even if it includes temporary pullbacks or consolidation periods.') }}
      </p>
      <p>
        {{ _('Focus on the overall slope and consistency rather than short-term fluctuations. Frequent new highs over time usually indicate a sustainable edge.') }}
      </p>

      <p class="chart-help-tip">
        <span class="tip-icon">💡</span>
        <span class="tip-text">
          {{ _('A strategy with moderate but consistent growth often outperforms one with sharp gains followed by deep drawdowns.') }}
        </span>
      </p>
    `
    },

    monthly: {
      icon: "🗓️",
      title: "{{ _('Monthly PnL') }}",
      body: `
      <p>
        {{ _('This chart groups all trading results by calendar month and shows the total Profit and Loss achieved in each period.') }}
      </p>
      <p>
        {{ _('It helps you assess consistency, seasonality, and the presence of structurally weak or strong months throughout the year.') }}
      </p>
      <p>
        {{ _('One or two losing months are normal in most strategies, but repeated deep negative months may reveal structural issues or excessive risk.') }}
      </p>
      <p>
        {{ _('The goal is not to avoid losing months entirely, but to ensure that profitable months outweigh losses over time.') }}
      </p>

      <p class="chart-help-tip">
        <span class="tip-icon">💡</span>
        <span class="tip-text">
          {{ _('Avoid judging a strategy by a single month. Long-term consistency matters more than short-term results.') }}
        </span>
      </p>
    `
    },

    weekly: {
      icon: "📆",
      title: "{{ _('Weekly PnL') }}",
      body: `
      <p>
        {{ _('This chart aggregates performance on a weekly basis, allowing a more granular view than monthly results while smoothing daily noise.') }}
      </p>
      <p>
        {{ _('It is useful for identifying short-term streaks, operational consistency, and execution discipline.') }}
      </p>
      <p>
        {{ _('Large variability between weeks may indicate unstable conditions, poor timing, or inconsistent execution.') }}
      </p>
      <p>
        {{ _('Stable weekly results often reflect a well-defined process and controlled exposure.') }}
      </p>

      <p class="chart-help-tip">
        <span class="tip-icon">💡</span>
        <span class="tip-text">
          {{ _('Wide swings from week to week often signal execution problems rather than market behavior.') }}
        </span>
      </p>
    `
    },

    drawdown: {
      icon: "📉",
      title: "{{ _('Drawdown') }}",
      body: `
      <p>
        {{ _('This chart measures drawdown, defined as the decline from a previous equity peak to a subsequent low before a new high is reached.') }}
      </p>
      <p>
        {{ _('Drawdown is one of the best indicators of risk and psychological pressure, as it reflects how much capital is temporarily lost during adverse periods.') }}
      </p>
      <p>
        {{ _('Deep or prolonged drawdowns can be difficult to recover from, both financially and emotionally.') }}
      </p>
      <p>
        {{ _('Pay special attention to the depth and duration of drawdowns, as well as how quickly the strategy recovers. Faster recoveries usually indicate better risk management.') }}
      </p>

      <p class="chart-help-tip">
        <span class="tip-icon">⚠️</span>
        <span class="tip-text">
          {{ _('If a drawdown feels emotionally unbearable, the strategy risk may be too high for long-term sustainability.') }}
        </span>
      </p>
    `
    },

    equity_hwm: {
      icon: "🏁",
      title: "{{ _('Equity & High Watermark') }}",
      body: `
    <p>
      {{ _('This chart displays the equity curve together with its High Watermark, which represents the highest equity level reached up to each point in time.') }}
    </p>
    <p>
      {{ _('Whenever the equity remains below the High Watermark, the strategy is considered to be in a recovery phase after previous losses.') }}
    </p>
    <p>
      {{ _('This visualization helps measure how long the strategy stays under water and how efficiently it recovers from drawdowns.') }}
    </p>
    <p>
      {{ _('Long recovery periods may indicate increased capital stress and psychological pressure, even if the final results are profitable.') }}
    </p>

    <p class="chart-help-tip">
      <span class="tip-icon">💡</span>
      <span class="tip-text">
        {{ _('Fast recoveries are often more important than avoiding losses, as prolonged time under water can erode confidence and discipline.') }}
      </span>
    </p>
  `
    },

    pnl_histogram: {
      icon: "🎯",
      title: "{{ _('PnL Distribution') }}",
      body: `
    <p>
      {{ _('This chart shows the distribution of individual trade or daily PnL results, grouped by outcome size.') }}
    </p>
    <p>
      {{ _('It helps you understand how profits and losses are distributed, rather than focusing only on total performance.') }}
    </p>
    <p>
      {{ _('A strategy may be profitable overall while still relying on a small number of large wins or suffering frequent small losses.') }}
    </p>
    <p>
      {{ _('Analyzing the shape of the distribution provides insight into risk asymmetry and expectancy.') }}
    </p>

    <p class="chart-help-tip">
      <span class="tip-icon">💡</span>
      <span class="tip-text">
        {{ _('Healthy strategies often show limited downside with a longer positive tail, indicating controlled losses and scalable gains.') }}
      </span>
    </p>
  `
    },

    rolling_wr: {
      icon: "📊",
      title: "{{ _('Rolling Win Rate') }}",
      body: `
    <p>
      {{ _('This chart shows the win rate calculated over a rolling window of recent trades, rather than the entire history.') }}
    </p>
    <p>
      {{ _('It provides a dynamic view of performance stability and helps detect changes in strategy effectiveness over time.') }}
    </p>
    <p>
      {{ _('Sudden drops in the rolling win rate may signal unfavorable market conditions or execution issues.') }}
    </p>
    <p>
      {{ _('This metric is especially useful for early risk management decisions, before large losses occur.') }}
    </p>

    <p class="chart-help-tip">
      <span class="tip-icon">⚠️</span>
      <span class="tip-text">
        {{ _('A stable rolling win rate is often more valuable than a high but highly volatile one.') }}
      </span>
    </p>
  `
    },

    weekday: {
      icon: "📅",
      title: "{{ _('PnL by Weekday') }}",
      body: `
    <p>
      {{ _('This chart displays the average or total Profit and Loss broken down by day of the week.') }}
    </p>
    <p>
      {{ _('It helps identify whether certain weekdays consistently perform better or worse for the strategy.') }}
    </p>
    <p>
      {{ _('Differences between weekdays may be caused by market structure, volatility patterns, or execution behavior.') }}
    </p>
    <p>
      {{ _('Understanding these patterns can help optimize exposure or reduce risk on structurally weaker days.') }}
    </p>

    <p class="chart-help-tip">
      <span class="tip-icon">💡</span>
      <span class="tip-text">
        {{ _('Avoid assuming all trading days are equal. Small structural edges can accumulate significantly over time.') }}
      </span>
    </p>
  `
    },
    streaks: {
      icon: "🔁",
      title: "{{ _('Winning & Losing Streaks') }}",
      body: `
    <p>
      {{ _('This chart analyzes sequences of consecutive winning and losing trades, commonly referred to as streaks.') }}
    </p>
    <p>
      {{ _('It shows how often the strategy experiences runs of losses or wins and how long those streaks typically last.') }}
    </p>
    <p>
      {{ _('Streak analysis helps set realistic expectations and prepares traders for inevitable periods of consecutive losses.') }}
    </p>
    <p>
      {{ _('Understanding streak behavior is crucial for position sizing, emotional discipline, and long-term survival.') }}
    </p>

    <p class="chart-help-tip">
      <span class="tip-icon">⚠️</span>
      <span class="tip-text">
        {{ _('Most strategies fail not because of losses, but because traders are not prepared to endure normal losing streaks.') }}
      </span>
    </p>
  `
    }






  };


  /* ===============================
     Header references
     =============================== */
  const headerIcon = document.getElementById("chartHeaderIcon");
  const headerTitle = document.getElementById("chartHeaderTitle");

  /* ===============================
     Modal references
     =============================== */
  const helpBtn = document.getElementById("chartHelpBtn");
  const helpOverlay = document.getElementById("chartHelpOverlay");
  const helpIcon = helpOverlay.querySelector(".chart-help-icon");
  const helpTitle = helpOverlay.querySelector(".chart-help-title");
  const helpBody = document.getElementById("chartHelpBody");
  const helpClose = helpOverlay.querySelector(".chart-help-close");

  /* ===============================
     Toolbar behavior
     =============================== */
  document.querySelectorAll(".chart-tool").forEach(btn => {
    btn.addEventListener("click", () => {
      const key = btn.dataset.chart;
      const meta = chartMeta[key];
      if (!meta) return;

      currentChartKey = key;

      // Estado activo
      document.querySelectorAll(".chart-tool")
        .forEach(b => b.classList.remove("active"));
      btn.classList.add("active");

      // Header
      headerIcon.textContent = meta.icon;
      headerTitle.textContent = meta.title;
    });
  });

  /* ===============================
     Modal open
     =============================== */
  helpBtn.addEventListener("click", () => {
    const meta = chartMeta[currentChartKey];
    if (!meta) return;

    helpIcon.textContent = meta.icon;
    helpTitle.textContent = meta.title;
    helpBody.innerHTML = meta.body;

    helpOverlay.hidden = false;
  });

  /* ===============================
     Modal close
     =============================== */
  helpClose.addEventListener("click", () => {
    helpOverlay.hidden = true;
  });

  helpOverlay.addEventListener("click", e => {
    if (e.target === helpOverlay) {
      helpOverlay.hidden = true;
    }
  });


</script>
{% endblock %}