{% 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/data" 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"/>
        <line x1="19" y1="12" x2="5" y2="12" />
        <line x1="11" y1="18" x2="5" y2="12" />
        <line x1="11" y1="6" x2="5" y2="12" />
    </svg>
    </a>
    </div>

    <!-- Center title -->
    <div class="flex-grow-1 text-center">
    <h2 class="mb-0">Calibración · Paso 2 · Risk & Stops</h2>
    </div>

    <!-- Forward arrow (disabled until Step2 OK) -->
    <div class="ms-3">
    <a
    id="next-step-btn"
    href="/calibration/strategies"
    class="btn btn-outline-secondary btn-icon"
    aria-disabled="true"
    >
    <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"/>
        <line x1="5" y1="12" x2="19" y2="12" />
        <line x1="13" y1="6" x2="19" y2="12" />
        <line x1="13" y1="18" x2="19" y2="12" />
    </svg>
    </a>
    </div>

</div>

  <!-- ========================= -->
  <!-- Risk configuration form -->
  <!-- ========================= -->
  <div class="card mb-4">
    <div class="card-body">
      <h3 class="card-title">Data Context</h3>

      <div class="row g-3">

        <!-- Symbol -->
        <div class="col-md-4">
          <label class="form-label">Símbolo</label>
          <div
            class="form-control bg-light text-muted"
            style="cursor: not-allowed;"
          >
            <span id="ctx_symbol">-</span>
          </div>
        </div>

        <!-- Timeframe -->
        <div class="col-md-4">
          <label class="form-label">Timeframe</label>
          <div
            class="form-control bg-light text-muted"
            style="cursor: not-allowed;"
          >
            <span id="ctx_timeframe">-</span>
          </div>
        </div>

      </div>

      <hr class="my-4">

      <h3 class="card-title">Risk configuration</h3>

      <div class="row g-3">

        <!-- Account equity -->
        <div class="col-md-4">
          <label class="form-label">Account equity</label>
          <input id="account_equity" class="form-control" type="number" value="10000" min="0">
        </div>

        <!-- Risk per trade -->
        <div class="col-md-4">
          <label class="form-label">Risk per trade (%)</label>
          <input id="risk_fraction" class="form-control" type="number" step="0.01" value="0.5">
        </div>

        <!-- Max position -->
        <div class="col-md-4">
          <label class="form-label">Max position size (%)</label>
          <input id="max_position_fraction" class="form-control" type="number" step="1" value="25">
        </div>

      </div>

      <hr class="my-4">

      <!-- Stop configuration -->
      <h3 class="card-title">Stop configuration</h3>

      <div class="row g-3">

        <!-- Stop type -->
        <div class="col-md-4">
          <label class="form-label">Stop type</label>
          <select id="stop_type" class="form-select">
            <option value="fixed">Fixed stop</option>
            <option value="trailing">Trailing stop</option>
            <option value="atr">ATR stop</option>
          </select>
        </div>

        <!-- Fixed / trailing -->
        <div class="col-md-4 stop-param stop-fixed stop-trailing">
          <label class="form-label">Stop distance (%)</label>
          <input id="stop_fraction" class="form-control" type="number" step="0.1" value="2">
        </div>

        <!-- ATR params -->
        <div class="col-md-4 stop-param stop-atr d-none">
          <label class="form-label">ATR period</label>
          <input id="atr_period" class="form-control" type="number" value="14">
        </div>

        <div class="col-md-4 stop-param stop-atr d-none">
          <label class="form-label">ATR multiplier</label>
          <input id="atr_multiplier" class="form-control" type="number" step="0.1" value="3">
        </div>

      </div>

      <hr class="my-4">

      <!-- Global rules -->
      <h3 class="card-title">Global rules</h3>

      <div class="row g-3">
        <div class="col-md-4">
          <label class="form-label">Max drawdown (%)</label>
          <input id="max_drawdown_pct" class="form-control" type="number" step="1" value="20">
        </div>
      </div>

      <div class="mt-4">
        <button id="inspect_risk_btn" class="btn btn-primary">
          Inspect Risk & Stops
        </button>
        <button id="validate_risk_btn" class="btn btn-primary">
          Validate Risk & Stops
        </button>
        <button id="generate_report_btn" class="btn btn-outline-dark">
          Generate PDF Report
        </button>
      </div>

    </div>
  </div>

  <!-- ========================= -->
  <!-- Risk quality result -->
  <!-- ========================= -->
  <div id="risk_result" class="d-none">

    <div class="card">
      <div class="card-body">

        <h3 class="card-title">Risk quality</h3>

        <div id="risk_status_badge" class="mb-3"></div>

        <p id="risk_message" class="mb-3"></p>

        <pre id="risk_debug" class="bg-light p-3 rounded small d-none"></pre>

      </div>
    </div>

    <!-- RISK CHECKS -->
    <div class="mt-3">
    <ul id="risk_checks_list" class="list-unstyled mb-0"></ul>
    </div>

    <!-- STOP QUANTILES -->
    <div class="mt-3">
    <h5 class="mb-2">Stop distance statistics</h5>
    <ul class="list-unstyled text-muted" id="stop_quantiles">
        <li>P50: –</li>
        <li>P90: –</li>
        <li>P99: –</li>
    </ul>
    </div>

    <!-- RISK FORMULAS -->
    <div class="mt-3">
        <h5 class="mb-2">Risk sizing breakdown</h5>
        <ul id="risk_formulas" class="list-unstyled text-muted">
            Calculating…
        </ul>
    </div>
  </div>

  <!-- ========================= -->
  <!-- Gráficas -->
  <!-- ========================= -->
  <!-- POSITION SIZE OVER TIME -->
  <div class="mt-4">
    <h5 class="mb-2">Position size over time</h5>
    <div id="position_size_plot" style="height: 360px;"></div>
  </div>

  <!-- EFFECTIVE RISK OVER TIME -->
  <div class="mt-4">
    <h5 class="mb-2">Effective risk over time</h5>
    <div id="effective_risk_plot" style="height: 360px;"></div>
  </div>

  <!-- STOP DISTANCE DISTRIBUTION -->
  <div class="mt-4">
    <h5 class="mb-2">Stop distance distribution</h5>
    <div id="stop_distance_plot" style="height: 360px;"></div>
  </div>

  <!-- ========================= -->
  <!-- PDF REPORT VIEWER -->
  <!-- ========================= -->
  <div id="pdf_viewer_section" class="mt-5 d-none">
    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h4 class="card-title mb-0">Risk Report Preview</h4>
          <button id="close_pdf_btn" class="btn btn-sm btn-outline-secondary">
            Close
          </button>
        </div>

        <iframe
          id="pdf_frame"
          style="width: 100%; height: 800px; border: none;"
        ></iframe>
      </div>
    </div>
  </div>

</div>
<!-- Plotly -->
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<!-- Page logic -->
<script src="/static/js/pages/calibration_risk.js"></script>
{% endblock %}
