{% extends "layout.html" %}

{% block content %}
<div class="container-xl">

  <!-- ========================= -->
  <!-- Wizard header -->
  <!-- ========================= -->
  <div class="d-flex align-items-center mb-4">

    <!-- Back arrow -->
    <div class="me-3">
      <a href="/calibration/risk" class="btn btn-outline-secondary btn-icon">
        <svg xmlns="http://www.w3.org/2000/svg"
            class="icon icon-tabler icon-tabler-arrow-left"
            width="24" height="24" viewBox="0 0 24 24"
            stroke-width="2" stroke="currentColor"
            fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z"/>
          <path d="M15 6l-6 6l6 6"/>
        </svg>
      </a>
    </div>

    <div class="flex-grow-1 text-center">
      <h2 class="mb-0">Calibración · Paso 3 · Strategies</h2>
      <div class="text-secondary">Optimización + Walk Forward (OOS)</div>
    </div>

    <!-- Forward arrow (disabled until OK) -->
    <div class="ms-3">
      <a
        id="next-step-btn"
        href="#"
        class="btn btn-outline-secondary btn-icon"
        aria-disabled="true"
        title="Next step not implemented yet"
      >
        <svg xmlns="http://www.w3.org/2000/svg"
            class="icon icon-tabler icon-tabler-arrow-right"
            width="24" height="24" viewBox="0 0 24 24"
            stroke-width="2" stroke="currentColor"
            fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z"/>
          <path d="M9 6l6 6l-6 6"/>
        </svg>
      </a>
    </div>

  </div>

  <!-- ========================= -->
  <!-- Context -->
  <!-- ========================= -->
  <div class="card mb-4">
    <div class="card-header">
      <h3 class="card-title">Context</h3>
    </div>
    <div class="card-body">
      <div class="row g-3">
        <div class="col-md-4">
          <label class="form-label">Symbol</label>
          <input id="symbol" class="form-control" placeholder="BTC/USDT">
        </div>
        <div class="col-md-4">
          <label class="form-label">Timeframe</label>
          <input id="timeframe" class="form-control" placeholder="1h">
        </div>
        <div class="col-md-4">
          <label class="form-label">Account equity</label>
          <input id="account_equity" class="form-control" type="number" step="0.01" value="10000">
        </div>
      </div>
      <div class="mt-3 text-secondary">
        Tip: Symbol y timeframe se cargan desde Step 1 (localStorage). Si no aparecen, rellénalos manualmente.
      </div>
    </div>
  </div>

  <!-- ========================= -->
  <!-- Risk & Stops -->
  <!-- ========================= -->
  <div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h3 class="card-title mb-0">Risk & Stops(Step 2)</h3>

      <div class="form-check form-switch m-0">
        <input class="form-check-input" type="checkbox" id="lock_inherited" checked>
        <label class="form-check-label" for="lock_inherited">
          Bloquear parámetros heredados
        </label>
      </div>
    </div>

  <div class="card-body">

    <!-- ================= -->
    <!-- Risk Configuration -->
    <!-- ================= -->
    <h4 class="mb-3">Risk Configuration</h4>

    <div class="row g-3 mb-4">
      <div class="col-md-4">
        <label class="form-label">Risk per Trade (%)</label>
        <input id="risk_fraction" class="form-control inherited-field" type="number" step="0.01">
      </div>

      <div class="col-md-4">
        <label class="form-label">Max Position Size (%)</label>
        <input id="max_position_fraction" class="form-control inherited-field" type="number" step="0.1">
      </div>
    </div>

    <!-- ================= -->
    <!-- Stop Configuration -->
    <!-- ================= -->
    <h4 class="mb-3">Stop Configuration</h4>

    <div class="row g-3 mb-4">

      <div class="col-md-4">
        <label class="form-label">Stop Type</label>
        <select id="stop_type" class="form-select inherited-field">
          <option value="fixed">fixed</option>
          <option value="trailing">trailing</option>
          <option value="atr">atr</option>
        </select>
      </div>

      <div id="stop_fraction_group" class="col-md-4">
        <label class="form-label">Stop fraction (%)</label>
        <input id="stop_fraction" class="form-control inherited-field" type="number" step="0.01">
      </div>

      <div id="atr_group" class="col-md-4 d-none">
        <label class="form-label">ATR period</label>
        <input id="atr_period" class="form-control inherited-field" type="number">
      </div>

      <div id="atr_multiplier_group" class="col-md-4 d-none">
        <label class="form-label">ATR multiplier</label>
        <input id="atr_multiplier" class="form-control inherited-field" type="number" step="0.1">
      </div>

    </div>


    <!-- ================= -->
    <!-- Global Rules -->
    <!-- ================= -->
    <h4 class="mb-3">Global Rules</h4>

    <div class="row g-3 mb-4">
      <div class="col-md-4">
        <label class="form-label">Max Drawdown (%)</label>
        <input id="max_drawdown_pct" class="form-control inherited-field" type="number" step="0.1">
      </div>
    </div>

    <!-- ================= -->
    <!-- Optional Parameters -->
    <!-- ================= -->
    <h4 class="mb-3">Optional Parameters</h4>

    <div class="row g-3">
      <div class="col-md-4">
        <label class="form-label">Daily loss limit (%)</label>
        <input id="daily_loss_limit_pct" class="form-control optional-field" type="number" step="0.1">
      </div>

      <div class="col-md-4">
        <label class="form-label">Max consecutive losses</label>
        <input id="max_consecutive_losses" class="form-control optional-field" type="number">
      </div>

      <div class="col-md-4">
        <label class="form-label">Cooldown bars</label>
        <input id="cooldown_bars" class="form-control optional-field" type="number">
      </div>
    </div>

  </div>
</div>

  <!-- ========================= -->
  <!-- WF + Optimizer config -->
  <!-- ========================= -->
  <div class="card mb-4">
    <div class="card-header">
      <h3 class="card-title">Walk-Forward Validation (OOS)</h3>
    </div>
    <div class="card-body">
      <div class="row g-3">
        <div class="col-md-3">
          <label class="form-label">Train days</label>
          <input id="wf_train_days" class="form-control" type="number" step="1" value="120">
        </div>
        <div class="col-md-3">
          <label class="form-label">Test days</label>
          <input id="wf_test_days" class="form-control" type="number" step="1" value="30">
        </div>
        <div class="col-md-3">
          <label class="form-label">Step days (optional)</label>
          <input id="wf_step_days" class="form-control" type="number" step="1" value="">
        </div>

        <div class="col-md-3">
          <label class="form-label">Min trades per window (test)</label>
          <input id="wf_min_trades_test" class="form-control" type="number" step="1" value="10">
        </div>

        <div class="col-md-3">
          <label class="form-label">Commission</label>
          <input id="commission" class="form-control" type="number" step="0.0001" value="0.001">
        </div>
        <div class="col-md-3">
          <label class="form-label">Slippage</label>
          <input id="slippage" class="form-control" type="number" step="0.0001" value="0.0005">
        </div>
      </div>
    </div>
  </div>

  <!-- ========================= -->
  <!-- Strategy selection -->
  <!-- ========================= -->
  <div class="card mb-4">
    <div class="card-header">
      <h3 class="card-title">Strategies</h3>
      <div class="card-actions">
        <button id="refresh_strategies_btn" class="btn btn-sm btn-outline-secondary">Refresh</button>
      </div>
    </div>
    <div class="card-body">
      <div id="strategies_container" class="d-flex flex-column gap-4"></div>
      <div class="card p-3">
        <div class="d-flex justify-content-between">
          <strong>Total combinations</strong>
          <span id="combination_counter">0</span>
        </div>
      </div>
      <div class="mt-2 text-end">
        <small class="text-muted">
          Estimated WF time:
          <span id="wf_time_estimate">~ 0 sec</span>
        </small>
      </div>
      <div class="mt-3 text-secondary">
        Cada estrategia utiliza parámetros fijos (validación OOS sin grid).
      </div>
    </div>
  </div>

  <!-- ========================= -->
  <!-- Actions -->
  <!-- ========================= -->
  <div class="d-flex gap-2 mb-4">
    <button id="validate_strategies_btn" class="btn btn-primary">
      Validate (WF)
    </button>
    <button id="report_strategies_btn" class="btn btn-outline-primary">
      Generate PDF report
    </button>
  </div>

  <!-- ========================= -->
  <!-- Prograss Bar -->
  <!-- ========================= -->
  <div id="wf_progress_card" class="card mb-4">
    <div class="card-header">
      <h3 class="card-title">Walk-Forward Progress</h3>
    </div>
    <div class="card-body">

      <div class="progress mb-2">
        <div
          id="wfProgressBar"
          class="progress-bar progress-bar-striped progress-bar-animated"
          role="progressbar"
          style="width: 0%"
        >
          0%
        </div>
      </div>

      <div id="wf_progress_text" class="text-secondary small">
        Waiting to start...
      </div>

    </div>
  </div>

  <!-- ========================= -->
  <!-- Results -->
  <!-- ========================= -->
  <div class="card mb-4">
    <div class="card-header">
      <h3 class="card-title">Results</h3>
      <div class="card-actions">
        <span id="strategies_status_badge" class="badge bg-secondary">—</span>
      </div>
    </div>
    <div class="card-body">
      <div id="strategies_message" class="mb-3 text-secondary">Run validation to see results.</div>

      <div class="row g-3">
        <div class="col-md-4">
          <label class="form-label">Strategy plot</label>
          <select id="plot_strategy_select" class="form-select">
            <option value="equity">Equity + Returns & Trades</option>
            <option value="rolling_sharpe">Rolling Sharpe-like</option>
            <option value="hist_oos_returns">OOS Returns Distribution</option>
            <option value="drawdown">Drawdown Evolution</option>
            <option value="trade_density">Trade Density</option>
          </select>
        </div>
      </div>

      <div class="mt-3">
        <div id="plot_strategy" style="height: 320px;"></div>
      </div>

      <hr class="my-4">

      <div id="strategies_table_wrap"></div>

      <details class="mt-3">
        <summary class="text-secondary">Debug JSON</summary>
        <pre id="strategies_debug" class="mt-2" style="max-height: 300px; overflow:auto;"></pre>
      </details>
    </div>
  </div>

  <!-- ========================= -->
  <!-- PDF Viewer -->
  <!-- ========================= -->
  <div id="pdf_viewer_section" class="card mb-4 d-none">
    <div class="card-header">
      <h3 class="card-title">Strategies Report (PDF)</h3>
      <div class="card-actions">
        <button id="close_pdf_btn" class="btn btn-sm btn-outline-secondary">Close</button>
      </div>
    </div>
    <div class="card-body">
      <iframe id="pdf_frame" style="width: 100%; height: 800px; border: none;"></iframe>
    </div>
  </div>

</div>

<script src="/static/js/plotly.js"></script>
<script src="/static/js/pages/calibration_strategies.js"></script>
{% endblock %}