{% 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') }}">
<!-- 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>

<section class="grid" aria-label="{{ _('Backtest workspace') }}">
  <article class="card col-8">
    <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-3">
        <label class="bt-label" for="strategy">{{ _('Strategy') }}</label>
        <select id="strategy" name="strategy" class="bt-select">
          <option value="IC">Iron Condor</option>
          <option value="IB">Iron Butterfly</option>
        </select>
        <div style="display:flex; gap:8px; align-items:center; margin-top:6px;">
          <button class="btn" type="button" id="legsBtn">{{ _('Configure legs') }}</button>
          <small id="legsSummary" style="color:var(--muted)"></small>
        </div>
      </div>

      <div class="bt-field bt-col-3">
        <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-3">
        <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="120" />
      </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="d">{{ _('Distance (d)') }}</label>
        <input id="d" name="distance" type="number" min="0" step="1" class="bt-input" value="15" />
      </div>

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

      <div class="bt-field bt-col-3">
        <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-3">
        <label class="bt-label" for="slippage">{{ _('Slippage ($)') }}</label>
        <input id="slippage" name="slippage" type="number" min="0" step="0.01" class="bt-input" value="0.05" />
      </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>
        <button class="btn" type="reset" id="resetBtn">{{ _('Reset') }}</button>
      </div>
    </form>
  </article>

  <aside class="card col-4">
    <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>{{ _('Date range') }}</dt>
      <dd id="pv_dates">—</dd>
      <dt>{{ _('Entry time') }}</dt>
      <dd id="pv_entry">09:30</dd>
      <dt>{{ _('TP / SL') }}</dt>
      <dd id="pv_tpsl">120 / 120</dd>
      <dt>{{ _('Legs') }}</dt>
      <dd id="pv_legs">Δ 10 · wC 20 / wP 20</dd>
      <dt>{{ _('d / w') }}</dt>
      <dd id="pv_dw">15 / 20</dd>
      <dt>{{ _('Contracts') }}</dt>
      <dd id="pv_contracts">1</dd>
      <dt>{{ _('Fees / Slippage') }}</dt>
      <dd id="pv_costs">$1.30 / $0.05</dd>
    </dl>
    <div class="server-echo" id="serverEcho">{{ _('Backtest table will appear here') }}</div>
  </aside>

  <article class="card col-12">
    <h3>{{ _('Run summary (placeholder)') }}</h3>
    <div class="placeholder">{{ _('Charts and results will be rendered here after we connect the server.') }}</div>
  </article>
</section>

<!-- ===== Modal: Legs ===== -->
<dialog id="legsDialog" class="dlg">
  <div class="dlg-card">
    <div class="dlg-header">
      <h3 class="dlg-title">{{ _('Legs setup') }}</h3>
      <button type="button" class="dlg-x" id="legsClose" aria-label="{{ _('Close') }}">✕</button>
    </div>

    <!-- Delta neutral (IC) -->
    <div id="icDeltaBox">
      <p class="bt-label" style="margin:0 0 4px;">{{ _('Delta (neutral – same for Call/Put)') }}</p>
      <div class="dlg-chips" data-bind="dn">
        <button class="dlg-chip" type="button" data-v="5">5</button>
        <button class="dlg-chip" type="button" data-v="10">10</button>
        <button class="dlg-chip" type="button" data-v="15">15</button>
        <button class="dlg-chip" type="button" data-v="20">20</button>
        <button class="dlg-chip" type="button" data-v="25">25</button>
      </div>
      <input id="m_dn" type="number" min="1" max="50" step="1" class="bt-input" value="10" />
      <input id="r_dn" type="range" min="1" max="50" step="1" value="10" style="width:100%; margin-top:8px;" />
    </div>

    <!-- IB Delta fixed -->
    <div id="ibDeltaBox" hidden>
      <p class="bt-label">{{ _('Delta is fixed at 50 for Iron Butterfly.') }}</p>
      <p class="hint">{{ _('You can still adjust Call/Put widths below.') }}</p>
    </div>

    <!-- Widths + link -->
    <div style="margin-top:10px;">
      <div class="dlg-row">
        <div>
          <label class="bt-label">{{ _('Call width') }}</label>
          <div class="dlg-chips" data-bind="wc">
            <button class="dlg-chip" type="button" data-v="10">10</button>
            <button class="dlg-chip" type="button" data-v="15">15</button>
            <button class="dlg-chip" type="button" data-v="20">20</button>
            <button class="dlg-chip" type="button" data-v="25">25</button>
          </div>
          <input id="m_wc" type="number" min="1" max="300" step="1" class="bt-input" value="20" />
        </div>

        <div>
          <label class="bt-label">{{ _('Put width') }}</label>
          <div class="dlg-chips" data-bind="wp">
            <button class="dlg-chip" type="button" data-v="10">10</button>
            <button class="dlg-chip" type="button" data-v="15">15</button>
            <button class="dlg-chip" type="button" data-v="20">20</button>
            <button class="dlg-chip" type="button" data-v="25">25</button>
          </div>
          <input id="m_wp" type="number" min="1" max="300" step="1" class="bt-input" value="20" />
        </div>
      </div>

      <label class="switch">
        <input type="checkbox" id="linkWidths" checked>
        <span>{{ _('Link call/put widths') }}</span>
      </label>
    </div>

    <div class="dlg-footer">
      <button class="btn" type="button" id="legsCancel">{{ _('Cancel') }}</button>
      <button class="btn primary" type="button" id="legsApply">{{ _('Apply') }}</button>
    </div>
  </div>
</dialog>
<!-- ===== /Modal ===== -->
{% endblock %}

{% block scripts %}
<script>
  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:30', 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;
  }

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

  function syncStrategyFields() {
    const isIB = $('strategy').value === 'IB';
    $('icDeltaBox').hidden = isIB;     // IC: delta editable
    $('ibDeltaBox').hidden = !isIB;    // IB: delta fijo 50
  }

  // 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; }
        if (key === 'wc') { $('m_wc').value = v; if ($('linkWidths').checked) $('m_wp').value = v; }
        if (key === 'wp') { $('m_wp').value = v; if ($('linkWidths').checked) $('m_wc').value = v; }
      });
    });
  }
  // sincroniza slider/number del delta neutro
  document.addEventListener('input', (e) => {
    if (e.target?.id === 'm_dn') $('r_dn').value = e.target.value;
    if (e.target?.id === 'r_dn') $('m_dn').value = e.target.value;
    if (e.target?.id === 'm_wc' && $('linkWidths').checked) $('m_wp').value = e.target.value;
    if (e.target?.id === 'm_wp' && $('linkWidths').checked) $('m_wc').value = e.target.value;
  });

  $('legsBtn').addEventListener('click', () => {
    // seed modal con valores actuales
    const isIB = $('strategy').value === 'IB';
    if (isIB) {
      $('m_dn').value = 50; $('r_dn').value = 50; // se ignora, solo informativo
    } else {
      $('m_dn').value = $('delta_call').value; $('r_dn').value = $('delta_call').value;
    }
    $('m_wc').value = $('width_call').value;
    $('m_wp').value = $('width_put').value;
    $('linkWidths').checked = $('width_call').value === $('width_put').value;
    syncStrategyFields(); openLegs();
  });
  $('legsClose').addEventListener('click', closeLegs);
  $('legsCancel').addEventListener('click', closeLegs);
  document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && dlg.hasAttribute('open')) closeLegs(); });

  $('legsApply').addEventListener('click', () => {
    const isIB = $('strategy').value === 'IB';
    if (isIB) {
      $('delta_call').value = 50;
      $('delta_put').value = 50;
    } else {
      const dn = Number($('m_dn').value);
      $('delta_call').value = dn;
      $('delta_put').value = dn;
    }
    $('width_call').value = $('m_wc').value;
    $('width_put').value = $('m_wp').value;
    refreshLegsSummary();
    updatePreview();
    closeLegs();
  });

  function refreshLegsSummary() {
    const isIB = $('strategy').value === 'IB';
    const dn = isIB ? 50 : Number($('delta_call').value);
    const wc = Number($('width_call').value), wp = Number($('width_put').value);
    $('legsSummary').textContent = `Δ ${dn} · wC ${wc} / wP ${wp}`;
  }
  /* -------------------------------------- */

  function syncDistanceDisabled() { $('d').disabled = ($('strategy').value === 'IB'); }

  function updatePreview() {
    const sym = $('symbol').value;
    const strat = $('strategy').value === 'IC' ? 'Iron Condor' : 'Iron Butterfly';
    const df = $('date_from').value || '—';
    const dt = $('date_to').value || '—';
    const et = $('entry_time').value || '—';
    const tp = $('tp').value, sl = $('sl').value;
    const d = $('d').value, w = $('w').value, c = $('contracts').value;
    const com = Number($('commission').value).toFixed(2);
    const slipp = Number($('slippage').value).toFixed(2);

    const dn = (strat === 'Iron Butterfly') ? 50 : Number($('delta_call').value);
    const wc = Number($('width_call').value), wp = Number($('width_put').value);
    const legsTxt = `Δ ${dn} · wC ${wc} / wP ${wp}`;

    $('pv_symbol').textContent = sym;
    $('pv_strategy').textContent = strat;
    $('pv_dates').textContent = df + ' → ' + dt;
    $('pv_entry').textContent = et;
    $('pv_tpsl').textContent = tp + ' / ' + sl;
    $('pv_legs').textContent = legsTxt;
    $('pv_dw').textContent = d + ' / ' + w;
    $('pv_contracts').textContent = c;
    $('pv_costs').textContent = `$${com} / $${slipp}`;
  }

  // --- 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 collectPayload() {
    const fd = new FormData($('bt-form'));
    const payload = Object.fromEntries(fd.entries());
    // normalizar numéricos
    ['tp', 'sl', 'contracts', 'distance', 'width', 'commission', 'slippage', 'delta_call', 'delta_put', 'width_call', 'width_put']
      .forEach(k => { if (payload[k] !== undefined && payload[k] !== '') payload[k] = Number(payload[k]); });
    payload.strategy_label = ($('strategy').value === 'IC') ? 'Iron Condor' : 'Iron Butterfly';
    payload.legs_summary = $('legsSummary').textContent.trim();
    return payload;
  }

  async function sendPreview() {
    const echoBox = $('serverEcho');
    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();
      echoBox.innerHTML = `<pre style="white-space:pre-wrap;margin:0;">${JSON.stringify(data.received || data, null, 2)}</pre>`;
    } catch (err) {
      console.error(err);
      echoBox.textContent = "{{ _('Error sending preview to server.') }}";
    }
  }

  $('strategy').addEventListener('change', () => {
    // Forzar reglas de delta: IB=50, IC=neutro único
    if ($('strategy').value === 'IB') {
      $('delta_call').value = 50; $('delta_put').value = 50;
    } else {
      // si veníamos de IB, conserva 10 por defecto
      if (Number($('delta_call').value) === 50 && Number($('delta_put').value) === 50) {
        $('delta_call').value = 10; $('delta_put').value = 10;
      }
    }
    syncStrategyFields(); syncDistanceDisabled(); refreshLegsSummary(); updatePreview();
  });

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

  $('bt-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    updatePreview();
    $('serverEcho').textContent = "{{ _('Sending parameters to server...') }}";
    await startJob();
  });

  $('resetBtn').addEventListener('click', () => setTimeout(() => {
    fillTimeSelect('entry_time');
    $('entry_time')._cbxRebuild?.(); $('entry_time')._cbxSetText?.();
    // defaults neutrales
    if ($('strategy').value === 'IB') {
      $('delta_call').value = 50; $('delta_put').value = 50;
    } else {
      $('delta_call').value = 10; $('delta_put').value = 10;
    }
    $('width_call').value = 20; $('width_put').value = 20;
    refreshLegsSummary(); syncDistanceDisabled(); updatePreview();
    $('serverEcho').textContent = "{{ _('Backtest table will appear here') }}";
  }, 0));

  (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:30', '15:00', 5);

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

    bindChips();
    // Inicializa reglas de delta
    if ($('strategy').value === 'IB') { $('delta_call').value = 50; $('delta_put').value = 50; }
    syncStrategyFields(); syncDistanceDisabled(); refreshLegsSummary(); updatePreview();
  })();



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


  let pollTimer = null;

  async function startJob() {
    const echoBox = $('serverEcho');
    echoBox.textContent = "{{ _('Queuing backtest...') }}";
    try {
      const CSRF = getCsrfToken();
      const res = await fetch("{{ url_for('backtesting.start') }}", {
        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) { throw new Error('start failed'); }
      echoBox.innerHTML = `{{ _('Task queued:') }} <code>${data.task_id}</code><br>{{ _('Waiting for result...') }}`;
      // inicia polling
      startPolling(data.task_id);
    } catch (err) {
      console.error(err);
      $('serverEcho').textContent = "{{ _('Error queuing backtest.') }}";
    }
  }

  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();
        if (j.state === "PENDING" || j.state === "RECEIVED" || j.state === "STARTED") {
          $('serverEcho').innerHTML = `{{ _('Task:') }} <code>${taskId}</code> — {{ _('State:') }} <b>${j.state}</b>`;
          return;
        }
        clearInterval(pollTimer);
        if (j.state === "SUCCESS") {
          $('serverEcho').innerHTML = `<pre style="white-space:pre-wrap;margin:0;">${JSON.stringify(j.result, null, 2)}</pre>`;
        } else {
          $('serverEcho').textContent = `{{ _('Task failed:') }} ${j.error || j.state}`;
        }
      } catch (e) {
        clearInterval(pollTimer);
        $('serverEcho').textContent = "{{ _('Error polling status.') }}";
      }
    }, 2000); // cada 2s
  }


</script>
{% endblock %}