{% extends "layout.html" %}

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

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

    <!-- Back arrow (disabled on step 1) -->
    <div class="me-3">
      <button class="btn btn-outline-secondary btn-icon" disabled>
        <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>
      </button>
    </div>

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

    <!-- Forward arrow (JS will enable when Step1 is OK) -->
    <div class="ms-3">
      <a
        id="next-step-btn"
        href="/calibration/risk"
        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>


  <!-- FORMULARIO -->
  <div class="card mb-4">
    <div class="card-body">

      <div class="row g-3">

        <div class="col-md-2">
          <label class="form-label">Modo de mercado</label>
          <select id="market_mode" class="form-select">
            <option value="crypto" selected>Crypto (24/7)</option>
            <option value="session">Acciones / ETFs (sesiones)</option>
          </select>
        </div>

        <div class="col-md-2">
          <label class="form-label">Símbolo</label>
          <input id="symbol" class="form-control" value="BTC/USDT">
        </div>

        <div class="col-md-2">
          <label class="form-label">Timeframe</label>
          <select id="timeframe" class="form-select">
            <option value="1m">1m</option>
            <option value="5m">5m</option>
            <option value="15m">15m</option>
            <option value="30m">30m</option>
            <option value="1h" selected>1h</option>
            <option value="4h">4h</option>
            <option value="1d">1d</option>
          </select>
        </div>

        <div class="col-md-2">
          <label class="form-label">Fecha inicio (opcional)</label>
          <input id="start_date" type="date" class="form-control">
        </div>

        <div class="col-md-2">
          <label class="form-label">Fecha fin (opcional)</label>
          <input id="end_date" type="date" class="form-control">
        </div>
      </div>

      <div class="row mt-3 g-2">
        <div class="col-md-3">
          <button id="inspect-data-btn" type="button" class="btn btn-primary w-100">
            Inspeccionar datos (DB)
          </button>
        </div>

        <div class="col-md-3">
          <button
            id="download-data-btn"
            type="button"
            class="btn btn-success w-100"
          >
            Descargar datos (Exchange)
          </button>
        </div>

        <div class="col-md-3">
          <button
            id="cancel-download-btn"
            type="button"
            class="btn btn-outline-danger w-100"
          >
            Cancelar descarga
          </button>
        </div>
      </div>

      <div class="alert alert-danger d-none mt-3" id="range-error">
        ❌ El rango de fechas no es válido (la fecha de inicio es posterior a la de fin).
      </div>

    </div>
  </div>

  <!-- RESUMEN DB -->
  <div class="card mt-4 d-none" id="data-summary-card">
    <div class="card-body">

      <div class="d-flex align-items-center mb-3">
        <span id="data-status-badge" class="badge me-2"></span>
        <h4 class="card-title mb-0">Resumen de datos (Base de datos)</h4>
      </div>

      <ul class="list-unstyled mb-3">
        <li><strong>Primera vela disponible:</strong> <span id="first-ts">–</span></li>
        <li><strong>Última vela disponible:</strong> <span id="last-ts">–</span></li>
        <li><strong>Total de velas:</strong> <span id="candles-count">–</span></li>
      </ul>

      <div class="alert alert-warning d-none" id="data-warning">
        ⚠️ No hay datos en base de datos para este rango.
      </div>

      <div class="alert alert-success d-none" id="data-ok">
        ✅ Datos encontrados en base de datos.
      </div>

      <div class="mt-3">
        <div class="text-muted small mb-1">Log de inspección</div>
        <pre id="data-log" class="mb-0" style="white-space: pre-wrap;">–</pre>
      </div>

    </div>

    <!-- DATA QUALITY -->
    <div class="card mt-4 d-none" id="data-quality-card">
      <div class="card-body">
        <h4 class="card-title mb-2">Data quality</h4>

        <div class="mb-2">
          <strong>Status:</strong>
          <span id="dq-status" class="badge bg-secondary"></span>
        </div>

        <p id="dq-message" class="mb-3 text-muted"></p>

        <ul class="list-unstyled mb-0">
          <li>Continuidad: <strong id="dq-continuity"></strong></li>
          <li>Gaps: <strong id="dq-gaps"></strong></li>
          <li>Cobertura: <strong id="dq-coverage"></strong></li>
          <li>Volumen: <strong id="dq-volume"></strong></li>
        </ul>
      </div>
    </div>

  </div>

  <!-- PROGRESO DE DESCARGA -->
  <div class="card mt-4 d-none" id="download-progress-card">
    <div class="card-body">

      <h4 class="card-title mb-3">Progreso de descarga</h4>

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

      <div id="download-progress-text" class="text-muted small">
        Esperando inicio de descarga…
      </div>

    </div>
  </div>

  <!-- DEBUG -->
  <div class="card mt-4">
    <div class="card-body">
      <h4 class="card-title">Salida técnica (debug)</h4>
      <pre id="inspect-output" class="mt-3 text-muted">
No se ha inspeccionado ningún dato todavía.
      </pre>
    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/pages/calibration_data.js"></script>
{% endblock %}
