{% extends "base.html" %}

{% block title %}
{{ _('Backtesting Idea - BackTestingMarket') }}
{% endblock %}

{% block extra_head %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<script src="https://cdn.jsdelivr.net/npm/luxon@3/build/global/luxon.min.js"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles-backtestingidea2.css') }}">
<style>
    /* ═══ Hora group — segmented + custom dropdown ═══ */
    .hora-seg-ctrl {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: rgba(0, 0, 0, 0.06);
        border-radius: 10px;
        border: 0.5px solid rgba(255, 255, 255, 0.08);
        padding: 3px;
        gap: 3px;
        margin-bottom: 6px;
    }

    body:not(.dark-mode) .hora-seg-ctrl {
        background: rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.08);
    }

    .hora-tooltip-wrap {
        position: relative;
        display: flex;
    }

    .hora-seg-btn {
        padding: 7px 0;
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 100%;
        transition: background 0.15s, color 0.15s, opacity 0.15s;
    }

    .hora-seg-active-fija {
        background: #4F46E5;
        color: #fff;
    }

    .hora-seg-active-mejores {
        background: #B45309;
        color: #fff;
    }

    .hora-seg-inactive {
        background: transparent;
        color: rgba(150, 150, 170, 0.9);
    }

    /* Tooltip */
    .hora-tooltip-box {
        display: none;
        position: absolute;
        bottom: calc(100% + 8px);
        right: 0;
        left: auto;
        transform: none;
        background: #1a1a2e;
        color: #e0e0f0;
        font-size: 11px;
        line-height: 1.5;
        padding: 7px 10px;
        border-radius: 7px;
        width: 160px;
        text-align: left;
        z-index: 9999;
        pointer-events: none;
        white-space: normal;
    }

    .hora-tooltip-box::after {
        content: '';
        position: absolute;
        top: 100%;
        right: 18px;
        left: auto;
        transform: none;
        border: 5px solid transparent;
        border-top-color: #1a1a2e;
    }

    .hora-tooltip-wrap:hover .hora-tooltip-box {
        display: block;
    }

    /* Custom dropdown */
    .hora-cd-wrap {
        position: relative;
        margin-bottom: 6px;
    }

    .hora-cd-trigger {
        width: 100%;
        padding: 7px 10px;
        font-size: 13px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.05);
        color: inherit;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        transition: opacity 0.2s, border-color 0.15s;
        box-sizing: border-box;
    }

    body:not(.dark-mode) .hora-cd-trigger {
        border-color: rgba(0, 0, 0, 0.15);
        background: #fff;
        color: #212529;
    }

    .hora-cd-trigger:hover:not(:disabled) {
        border-color: #4F46E5;
    }

    .hora-cd-trigger:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

    .hora-cd-arrow {
        font-size: 9px;
        color: rgba(150, 150, 170, 0.8);
        transition: transform 0.15s;
    }

    .hora-cd-trigger-open .hora-cd-arrow {
        transform: rotate(180deg);
    }

    .hora-cd-list {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background: #1e1e2e;
        border: 0.5px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        overflow-y: auto;
        max-height: 210px;
        z-index: 200;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    }

    body:not(.dark-mode) .hora-cd-list {
        background: #fff;
        border-color: rgba(0, 0, 0, 0.12);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

    .hora-cd-list.hora-cd-open {
        display: block;
    }

    .hora-cd-item {
        padding: 7px 12px;
        font-size: 13px;
        cursor: pointer;
        color: rgba(220, 220, 240, 0.9);
        transition: background 0.1s;
    }

    body:not(.dark-mode) .hora-cd-item {
        color: #212529;
    }

    .hora-cd-item:hover {
        background: rgba(79, 70, 229, 0.15);
    }

    .hora-cd-item.hora-cd-selected {
        color: #818cf8;
        font-weight: 600;
        background: rgba(79, 70, 229, 0.12);
    }

    body:not(.dark-mode) .hora-cd-item.hora-cd-selected {
        color: #4F46E5;
        background: rgba(79, 70, 229, 0.08);
    }

    /* Ver Mejores Horarios btn */
    .hora-btn-ver {
        width: 100%;
        padding: 7px 0;
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px;
        border: 1px solid #B45309;
        background: transparent;
        color: #B45309;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: background 0.15s;
    }

    .hora-btn-ver:hover {
        background: rgba(180, 83, 9, 0.1);
    }

    /* ═══ Mobile responsive sidebar ═══ */
    /* ═══ PnL Calendar Squares ═══ */
    #sectionCalendarPnL {
        display: none;
    }

    #sectionCalendarPnL .card {
        border-radius: 10px;
    }

    .cal-month-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-bottom: 5px;
        margin-top: 14px;
        color: rgba(150, 150, 170, 0.65);
    }

    body:not(.dark-mode) .cal-month-label {
        color: rgba(80, 80, 100, 0.65);
    }

    .cal-month-label:first-child {
        margin-top: 0;
    }

    .cal-squares-row {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .cal-sq {
        width: 17px;
        height: 17px;
        border-radius: 3px;
        flex-shrink: 0;
        cursor: default;
        transition: transform 0.1s;
        position: relative;
    }

    .cal-sq:hover {
        transform: scale(1.5);
        z-index: 10;
    }

    .cal-sq-win  { background: #22c55e; }
    .cal-sq-loss { background: #ef4444; }

    .cal-sq-none {
        background: rgba(120, 120, 140, 0.25);
        border: 1px solid rgba(120, 120, 140, 0.2);
    }

    body:not(.dark-mode) .cal-sq-none {
        background: rgba(180, 180, 200, 0.22);
        border-color: rgba(180, 180, 200, 0.3);
    }

    .cal-legend-item {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        color: rgba(150, 150, 170, 0.75);
    }

    body:not(.dark-mode) .cal-legend-item {
        color: rgba(80, 80, 100, 0.75);
    }

    .cal-legend-sq {
        width: 11px;
        height: 11px;
        border-radius: 2px;
        display: inline-block;
        flex-shrink: 0;
    }

    .cal-summary-text {
        font-size: 11px;
        color: rgba(150, 150, 170, 0.65);
        margin-left: auto;
    }

    body:not(.dark-mode) .cal-summary-text {
        color: rgba(80, 80, 100, 0.65);
    }

    /* Tooltip custom */
    #calTooltip {
        position: fixed;
        pointer-events: none;
        background: #1e1e2e;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 8px 11px;
        font-size: 12px;
        color: #e0e0f0;
        line-height: 1.55;
        z-index: 9999;
        display: none;
        white-space: nowrap;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    }

    body:not(.dark-mode) #calTooltip {
        background: #ffffff;
        border-color: rgba(0, 0, 0, 0.12);
        color: #212529;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

    /* Scrollbar del grid */
    #calPnlGrid::-webkit-scrollbar {
        width: 4px;
    }
    #calPnlGrid::-webkit-scrollbar-track {
        background: transparent;
    }
    #calPnlGrid::-webkit-scrollbar-thumb {
        background: rgba(150, 150, 170, 0.3);
        border-radius: 4px;
    }
    #calPnlGrid::-webkit-scrollbar-thumb:hover {
        background: rgba(150, 150, 170, 0.55);
    }

    /* ═══ end PnL Calendar ═══ */

    /* ═══ Heatmap día×mes ═══ */
    #calHeatmapGrid {
        display: grid;
        gap: 3px;
        width: fit-content;
        min-width: 100%;
    }

    .hm-cell {
        width: 100%;
        height: 34px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 700;
        cursor: default;
        transition: transform 0.1s, filter 0.1s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 3px;
        box-sizing: border-box;
    }

    .hm-cell:hover {
        transform: scale(1.08);
        filter: brightness(1.2);
        z-index: 5;
        position: relative;
    }

    .hm-header {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        opacity: 0.55;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 18px;
        padding: 0 2px;
        white-space: nowrap;
    }

    .hm-row-label {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        opacity: 0.5;
        display: flex;
        align-items: center;
        height: 34px;
        padding-right: 6px;
        white-space: nowrap;
    }

    #calHeatmapContainer::-webkit-scrollbar { height: 4px; }
    #calHeatmapContainer::-webkit-scrollbar-track { background: transparent; }
    #calHeatmapContainer::-webkit-scrollbar-thumb {
        background: rgba(150,150,170,0.3);
        border-radius: 4px;
    }
    /* ═══ end Heatmap ═══ */

    @media (max-width: 768px) {
        .sidebar-controls {
            display: grid !important;
            grid-template-columns: 1fr 1fr;
            gap: 10px 12px;
            align-items: start;
        }

        /* Campos que ocupan todo el ancho */
        .sidebar-controls>.sidebar-field:first-child,
        /* Símbolo */
        #bloqueHora,
        /* Modo hora + dropdown */
        .sidebar-controls>.d-flex

        /* Botón Mostrar */
            {
            grid-column: 1 / -1;
        }

        /* Botón mostrar — más compacto */
        .sidebar-controls>.d-flex {
            margin-top: 4px !important;
        }

        /* Reducir padding interno en mobile */
        .sidebar-label {
            font-size: 10px !important;
        }

        .form-select-sm,
        .form-control-sm,
        .sidebar-select {
            font-size: 12px !important;
            padding: 5px 8px !important;
        }

        /* Brand más compacto */
        .sidebar-brand {
            padding: 8px 0 !important;
        }

        .sidebar-brand-title {
            font-size: 14px !important;
        }

        .sidebar-divider {
            margin: 8px 0 !important;
        }
    }
</style>
<script src="https://cdn.plot.ly/plotly-2.32.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>


{% endblock %}

{% block content %}
<main>
    <div id="loadingOverlay" class="loading-overlay" style="display: none;">
        <div class="spinner-container text-center" style="min-width: 320px;">

            <div class="spinner-border text-primary mb-3" role="status">
                <span class="visually-hidden">{{ _('Cargando...') }}</span>
            </div>

            <p class="mt-2 fw-bold">
                {{ _('Procesando datos, por favor espera...') }}
            </p>

            <p id="countdownTimer" class="text-muted small mb-3"></p>

            <!-- 🔵 BARRA DE PROGRESO DENTRO DEL OVERLAY -->
            <div id="progressContainer" style="display:none;">
                <div class="progress">
                    <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated"
                        role="progressbar" style="width: 0%">
                        0%
                    </div>
                </div>
                <div id="progressWaitMsg"></div>
                <div class="mt-3">
                    <button id="cancelTaskBtn" class="btn btn-sm btn-outline-secondary"
                        style="display:none; opacity:0.75;">
                        <i class="fas fa-times me-1"></i> {{ _('Cancelar') }}
                    </button>
                </div>
            </div>

        </div>
    </div>


    <!-- Modal Parametros-->
    <div class="modal fade" id="modalParametros" tabindex="-1" aria-labelledby="modalParametrosLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalParametrosLabel">{{ _("Parámetros") }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="{{ _('Cerrar') }}"></button>
                </div>
                <div class="modal-body">

                    <!-- Número de contratos -->
                    <div class="mb-3">
                        <label for="contractCount" class="form-label">{{ _("Número de contratos:") }}</label>
                        <input type="number" id="contractCount" value="{{ user_contracts or 1 }}" min="1"
                            class="form-control" />
                    </div>

                    <!-- Comisión por pata -->
                    <div class="mb-2">
                        <label for="commissionInput" class="form-label">{{ _("Comisión por transacción ($):") }}</label>
                        <input type="number" id="commissionInput" value="{{ user_commission or 0.50 }}" step="0.01"
                            min="0" class="form-control" />
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="btnActualizarParametros">{{ _("Actualizar")
                        }}</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _("Cerrar") }}</button>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal para evolución del crédito -->
    <div class="modal fade" id="evolutionModal" tabindex="-1" aria-labelledby="evolutionModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="evolutionModalLabel">{{ _('Evolución de Ganancia/Pérdida') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="{{ _('Cerrar') }}"></button>
                </div>
                <div class="modal-body">
                    <div id="plotlyEvolutionChart" style="height: 500px;"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Dashboard Layout: Sidebar + Main Content -->
    <div class="dashboard-layout">

        <!-- ═══ SIDEBAR ═══ -->
        <aside class="dashboard-sidebar">

            <div class="sidebar-brand">
                <div class="sidebar-brand-icon">📊</div>
                <div>
                    <div class="sidebar-brand-title">{{ _('Backtesting') }}</div>
                    <div class="sidebar-brand-sub">BackTestingMarket</div>
                </div>
            </div>

            <hr class="sidebar-divider">

            <!-- Controls -->
            <div id="controls" class="sidebar-controls">

                <div class="sidebar-field">
                    <label for="symbolSelect" class="sidebar-label">{{ _('Símbolo') }}</label>
                    <select id="symbolSelect" class="form-select form-select-sm sidebar-select">
                        <option value="SPX" selected>SPX</option>
                        <option value="RUT">RUT</option>
                        <option value="SPY">SPY</option>
                        <option value="QQQ">QQQ</option>
                        <option value="XSP">XSP</option>
                    </select>
                </div>

                <div class="sidebar-field">
                    <label for="dateFrom" class="sidebar-label">{{ _('Desde') }}</label>
                    <input type="text" id="dateFrom" class="form-control form-control-sm sidebar-select" readonly>
                </div>

                <div class="sidebar-field">
                    <label for="dateTo" class="sidebar-label">{{ _('Hasta') }}</label>
                    <input type="text" id="dateTo" class="form-control form-control-sm sidebar-select" readonly>
                </div>

                <!-- ══ Modo de Hora + Hora — bloque unificado ══ -->
                <div class="sidebar-field" id="bloqueHora">
                    <label class="sidebar-label">{{ _('Modo de Hora') }}</label>

                    <!-- Segmented control -->
                    <div class="hora-seg-ctrl">
                        <button id="btnModoFija" class="hora-seg-btn hora-seg-active-fija"
                            onclick="setModoHora('HORA_FIJA')" type="button">
                            <i class="fas fa-clock"></i> {{ _('Hora Fija') }}
                        </button>
                        <div class="hora-tooltip-wrap">
                            <button id="btnModoMejores" class="hora-seg-btn hora-seg-inactive"
                                onclick="setModoHora('MEJORES_HORARIOS')" type="button">
                                <i class="fas fa-star"></i> {{ _('Mejores') }}
                            </button>
                            <div class="hora-tooltip-box">{{ _('Se usará el TOP 1 del ranking semanal automáticamente.')
                                }}</div>
                        </div>
                    </div>

                    <input type="hidden" id="modoHora" value="HORA_FIJA">

                    <!-- Custom dropdown hora -->
                    <div class="hora-cd-wrap" id="horaDropdownWrap">
                        <button class="hora-cd-trigger" id="horaDropdownTrigger" type="button"
                            onclick="toggleHoraDropdown()">
                            <span id="horaDropdownLabel">12:10</span>
                            <span class="hora-cd-arrow">▼</span>
                        </button>
                        <div class="hora-cd-list" id="horaDropdownList">
                            {% for hour in range(10, 16) %}
                            {% for minute in [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] %}
                            {% set time_value = "%02d%02d" % (hour, minute) %}
                            {% if (hour == 10 and minute >= 5) or (hour > 10 and hour < 15) or (hour==15 and minute
                                <=25) %} <div
                                class="hora-cd-item {% if time_value=='1210' %}hora-cd-selected{% endif %}"
                                data-value="{{ time_value }}"
                                onclick="selectHora('{{ time_value }}', '{{ time_value[:2] }}:{{ time_value[2:] }}')">
                                {{ time_value[:2] }}:{{ time_value[2:] }}
                        </div>
                        {% endif %}
                        {% endfor %}
                        {% endfor %}
                    </div>
                    <!-- Hidden input que mantiene el valor para el resto del JS -->
                    <input type="hidden" id="timeHour" value="1210">
                </div>

                <!-- Ver Mejores Horarios (visible solo en modo MEJORES) -->
                <button id="btnVerMejores" class="hora-btn-ver" type="button" onclick="abrirModalMejoresHorarios()"
                    style="display:none;">
                    <i class="fas fa-table"></i> {{ _('Ver Mejores Horarios') }}
                </button>
            </div>

            <div class="sidebar-field">
                <label for="strategySelect" class="sidebar-label">{{ _('Estrategia') }}</label>
                <select id="strategySelect" class="form-select form-select-sm sidebar-select">
                    <option value="Vertical">{{ _('Vertical') }}</option>
                    <option value="IronCondor">{{ _('Iron Condor') }}</option>
                </select>
            </div>

            <div class="sidebar-field">
                <label for="riskLevel" class="sidebar-label">{{ _('Riesgo') }}</label>
                <select id="riskLevel" class="form-select form-select-sm sidebar-select">
                    <option value="conservador">{{ _('Conservador') }}</option>
                    <option value="intermedio">{{ _('Intermedio') }}</option>
                    <option value="agresivo">{{ _('Agresivo') }}</option>
                    <option value="ultra_agresivo" selected>{{ _('Ultra Agresivo') }}</option>
                </select>
            </div>

            <div class="sidebar-field">
                <label for="creditTarget" class="sidebar-label">{{ _('Credit Target ($)') }}</label>
                <input type="number" id="creditTarget" class="form-control form-control-sm sidebar-select" min="0"
                    step="1" value="0" placeholder="{{ _('0 = sin filtro') }}">
            </div>

            <div class="d-flex gap-2 mt-3">
                <button id="loadButton" class="btn btn-success btn-sm fw-bold flex-grow-1 sidebar-btn-load">
                    <i class="fas fa-bolt me-1"></i> {{ _('Mostrar') }}
                </button>
                <button class="btn btn-sm btn-outline-secondary sidebar-btn-gear" data-bs-toggle="modal"
                    data-bs-target="#modalParametros" title="{{ _('Parámetros') }}">
                    ⚙️
                </button>
            </div>
    </div>

    <hr class="sidebar-divider">

    <!-- KPIs -->
    <div id="resultSummary" style="display:none;">
        <div class="sidebar-section-title">{{ _('Resumen') }}</div>

        <!-- Ganancia/Pérdida destacada -->
        <div id="profitRow" class="sidebar-profit-row mb-2">
            <div class="sidebar-profit-label">{{ _('Ganancia / Pérdida') }}</div>
            <div id="profitTotal" class="sidebar-profit-value">$0.00</div>
        </div>

        <div class="sidebar-kpi-list">
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Contratos / Comisión') }}</span>
                <span><span id="resumenContratos" class="fw-semibold">—</span> / $<span id="resumenComision"
                        class="fw-semibold">—</span></span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Días Totales') }}</span>
                <span id="totalDays" class="fw-semibold">0</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Días Ganadores') }}</span>
                <span id="winDays" class="fw-semibold text-success">0</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Días Perdedores') }}</span>
                <span id="lossDays" class="fw-semibold text-danger">0</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Win Rate') }}</span>
                <span id="winRate" class="fw-semibold text-warning">0%</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Max Racha +') }}</span>
                <span id="maxRachaPositiva" class="fw-semibold text-success">0</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Max Racha -') }}</span>
                <span id="maxRachaNegativa" class="fw-semibold text-danger">0</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Prom. Ganancias') }}</span>
                <span id="promedioGanancias" class="fw-semibold text-success">$0.00</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Prom. Pérdidas') }}</span>
                <span id="promedioPerdidas" class="fw-semibold text-danger">$0.00</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Profit Factor') }}</span>
                <span id="profitFactor" class="fw-semibold">—</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Max Drawdown') }}</span>
                <span id="maxDrawdown" class="fw-semibold text-danger">—</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Periodo DD') }}</span>
                <span id="maxDrawdownDates" class="fw-semibold" style="font-size:0.65rem;">—</span>
            </div>
        </div>
    </div>

    <div class="sidebar-footer-note">
        {{ _('Analiza estrategias con datos reales.') }}
    </div>
    </aside>

    <!-- ═══ MAIN CONTENT ═══ -->
    <div class="dashboard-main">

        <!-- Empty state -->
        <div id="emptyState" class="dashboard-empty-state">
            <div class="dashboard-empty-icon">📈</div>
            <div class="dashboard-empty-title">{{ _('Configura los parámetros y presiona "Mostrar"') }}</div>
            <div class="dashboard-empty-sub">{{ _('Los resultados del backtesting aparecerán aquí.') }}</div>
        </div>

        <!-- Dashboard visual -->
        <div id="dashboardVisual" style="display:none;">

            <!-- Gráficos principales -->
            <div class="row g-3 mb-3">
                <div class="col-12 col-lg-6">
                    <div class="card shadow-sm h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between mb-2">
                                <h6 id="plTitle" class="fw-semibold" data-title-mensual="{{ _('Ganancias por Mes') }}"
                                    data-title-semanal="{{ _('Ganancias por Semana') }}">
                                    {{ _('Ganancias por Mes') }}
                                </h6>
                                <button id="togglePLView" class="btn btn-outline-primary btn-sm"
                                    data-text-semanal="{{ _('Ver P/L Semanal') }}"
                                    data-text-mensual="{{ _('Ver P/L Mensual') }}">
                                    {{ _('Ver P/L Mensual') }}
                                </button>
                            </div>
                            <div id="wrapperPLMensual">
                                <div id="dashboardChartMensual" style="height:280px;"></div>
                            </div>
                            <div id="wrapperPLSemanal" style="display:none;">
                                <div id="dashboardChartPLSemanal" style="height:280px;"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-lg-6">
                    <div class="card shadow-sm h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between mb-2">
                                <h6 class="fw-semibold">{{ _('Evolución Diaria') }}</h6>
                                <button id="togglePLMode" class="btn btn-outline-primary btn-sm"
                                    data-text-linea="{{ _('Gráfico Lineal') }}"
                                    data-text-cascada="{{ _('Gráfico Cascada') }}">
                                    {{ _('Gráfico Cascada') }}
                                </button>
                            </div>
                            <div id="wrapperPLLineal">
                                <div id="dashboardChartAcumuladoLineal" style="height:280px;"></div>
                            </div>
                            <div id="wrapperPLCascada" style="display:none;">
                                <div id="dashboardChartAcumuladoCascada" style="height:280px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Gráficos secundarios -->
            <div class="row g-3 mb-3">
                <div class="col-12 col-md-6 col-xl-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-body p-2">
                            <h6 class="fw-semibold text-center mb-2">{{ _('P/L por Día de la Semana') }}</h6>
                            <div id="chartHistogramaPL" class="chart-wrapper"></div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-body p-2">
                            <h6 class="fw-semibold text-center mb-2">{{ _('Distribución') }}</h6>
                            <div id="chartPieCallsPuts" class="chart-wrapper"></div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-body p-2">
                            <h6 class="fw-semibold text-center mb-2">{{ _('Ganadoras vs Perdedoras por Día') }}</h6>
                            <div id="chartHistogramaWL" class="chart-wrapper"></div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-body p-2">
                            <h6 class="fw-semibold text-center mb-2">{{ _('Promedio: Ganancia vs Pérdida') }}</h6>
                            <div id="chartAvgProfitLoss" class="chart-wrapper"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ═══ PnL Calendar Squares + Heatmap ═══ -->
            <div id="sectionCalendarPnL" class="mb-3">
                <div class="row g-3">

                    <!-- Columna izquierda: squares -->
                    <div class="col-12 col-lg-5">
                        <div class="card shadow-sm h-100">
                            <div class="card-body pb-2 pt-3">
                                <div class="mb-2">
                                    <span style="font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; opacity:0.5;">
                                        {{ _('Secuencia de resultados diarios') }}
                                    </span>
                                </div>
                                <div id="calPnlGrid" style="height: 200px; overflow-y: auto; padding-right: 4px;"></div>
                                <div class="d-flex align-items-center flex-wrap gap-3 mt-2">
                                    <div class="cal-legend-item">
                                        <span class="cal-legend-sq cal-sq-win"></span>
                                        {{ _('Ganador') }}
                                    </div>
                                    <div class="cal-legend-item">
                                        <span class="cal-legend-sq cal-sq-loss"></span>
                                        {{ _('Perdedor') }}
                                    </div>
                                    <span id="calSummaryText" class="cal-summary-text"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Columna derecha: heatmap día×mes -->
                    <div class="col-12 col-lg-7">
                        <div class="card shadow-sm h-100">
                            <div class="card-body pt-3 pb-2">
                                <div class="mb-2">
                                    <span style="font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; opacity:0.5;">
                                        {{ _('P/L promedio por día × mes') }}
                                    </span>
                                </div>
                                <div id="calHeatmapContainer" style="overflow-x: auto;">
                                    <div id="calHeatmapGrid"></div>
                                </div>
                                <!-- leyenda gradiente -->
                                <div class="d-flex align-items-center gap-2 mt-2" style="font-size:10px; opacity:0.55;">
                                    <span>{{ _('Peor') }}</span>
                                    <div id="calHeatmapLegendBar" style="flex:1; height:6px; border-radius:3px; background: linear-gradient(to right, #ef4444, #1f2937, #22c55e);"></div>
                                    <span>{{ _('Mejor') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Tabla de resultados -->
            <div id="resultTableContainer" style="display:none;">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <div id="resultTableControls"
                            class="d-flex flex-wrap justify-content-between align-items-center mb-3 p-2">
                            <div class="d-flex align-items-center flex-wrap gap-2">
                                <span class="fw-semibold small">{{ _('Filtrar por día:') }}</span>
                                <div id="dayFilter" class="d-flex gap-1">
                                    <button class="btn btn-sm btn-primary day-btn" data-day="1">{{ _('Lun') }}</button>
                                    <button class="btn btn-sm btn-primary day-btn" data-day="2">{{ _('Mar') }}</button>
                                    <button class="btn btn-sm btn-primary day-btn" data-day="3">{{ _('Mié') }}</button>
                                    <button class="btn btn-sm btn-primary day-btn" data-day="4">{{ _('Jue') }}</button>
                                    <button class="btn btn-sm btn-primary day-btn" data-day="5">{{ _('Vie') }}</button>
                                </div>
                                <span class="mx-2 text-muted">|</span>
                                <span class="fw-semibold small">{{ _('Orden:') }}</span>
                                <div class="btn-group btn-group-sm" role="group">
                                    <button id="sortDateAsc" class="btn btn-outline-secondary"
                                        title="{{ _('Fecha ascendente') }}">
                                        <i class="fas fa-arrow-up"></i>
                                    </button>
                                    <button id="sortDateDesc" class="btn btn-outline-secondary"
                                        title="{{ _('Fecha descendente') }}">
                                        <i class="fas fa-arrow-down"></i>
                                    </button>
                                </div>
                                <span class="mx-2 text-muted">|</span>
                                <div class="d-flex align-items-center gap-2 ms-3">
                                    <span class="fw-semibold small">ME:</span>
                                    <div id="meFilter" style="width:140px; margin: 0 8px;"></div>
                                    <span id="meFilterValue" class="small fw-semibold">0 – 60</span>
                                    <span id="visibleRowsBadge" class="badge bg-secondary"
                                        style="font-size:0.78rem;">—</span>
                                </div>
                            </div>
                            <div>
                                <button id="downloadCSV" class="btn btn-sm btn-outline-secondary fw-semibold">
                                    <i class="fas fa-download me-1"></i> {{ _('Descargar CSV') }}
                                </button>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table id="resultTable" class="table table-bordered table-striped table-hover mb-0">
                                <thead class="table-dark text-center">
                                    <tr id="resultTableHead"></tr>
                                </thead>
                                <tbody class="text-center"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div><!-- end dashboardVisual -->
    </div><!-- end dashboard-main -->
    </div><!-- end dashboard-layout -->
<div id="calTooltip"></div>
</main>
{% endblock %}


{% block scripts %}
{{ super() }}

<script>
    // filtro por ME — jQuery UI range slider
    let meCurrentMin = 0;
    let meCurrentMax = 60;

    $(function () {
        $("#meFilter").slider({
            range: true,
            min: 0,
            max: 60,
            step: 1,
            values: [0, 60],
            slide: function (event, ui) {
                if (ui.values[1] - ui.values[0] < 1) return false;
                meCurrentMin = ui.values[0];
                meCurrentMax = ui.values[1];
                $("#meFilterValue").text(meCurrentMin + " – " + meCurrentMax);
                applyMEFilter();
            }
        });
    });


    function applyMEFilter() {
        const scrollY = window.scrollY;

        document
            .querySelectorAll("#resultTable tbody tr")
            .forEach(tr => {
                tr.style.display = rowPassesFilters(tr) ? "" : "none";
            });

        refreshChartsFromCurrentFilter();
        recalcKPIsWithFilteredData();

        requestAnimationFrame(() => {
            window.scrollTo({ top: scrollY });
        });
    }

    //--------------------------


    // RENDERIZAR GRÁFICO VACÍO "NO DATA"
    function renderNoDataChart(containerId, title = "No data") {
        Plotly.react(containerId, [{
            type: "scatter",
            x: [],
            y: [],
            hoverinfo: "skip"
        }], {
            autosize: true,
            annotations: [{
                text: title,
                x: 0.5,
                y: 0.5,
                xref: "paper",
                yref: "paper",
                showarrow: false,
                font: {
                    size: 14,
                    color: document.body.classList.contains("dark-mode")
                        ? "#ccc"
                        : "#777"
                }
            }],
            xaxis: { visible: false },
            yaxis: { visible: false },
            paper_bgcolor: "rgba(0,0,0,0)",
            plot_bgcolor: "rgba(0,0,0,0)",
            margin: { t: 10, b: 10, l: 10, r: 10 }
        }, {
            displayModeBar: false,
            responsive: true
        });
    }

    //--------------------------

    // ORDENAR TABLA POR FECHA
    function sortTableByDate(order = "asc") {
        const tbody = document.querySelector("#resultTable tbody");
        const rows = Array.from(tbody.querySelectorAll("tr"));

        rows.sort((a, b) => {
            const dateA = new Date(a.children[0].innerText + "T00:00:00");
            const dateB = new Date(b.children[0].innerText + "T00:00:00");

            return order === "asc"
                ? dateA - dateB
                : dateB - dateA;
        });

        // reinsertar en el DOM
        rows.forEach(row => tbody.appendChild(row));

    }

    document.getElementById("sortDateAsc").addEventListener("click", () => {
        sortTableByDate("asc");
    });

    document.getElementById("sortDateDesc").addEventListener("click", () => {
        sortTableByDate("desc");
    });


    //--------------------------

    // FILTRO POR DÍA DE LA SEMANA
    let activeDays = new Set([1, 2, 3, 4, 5]);

    function resetDayFilter() {
        // Lunes a Viernes activos
        activeDays = new Set([1, 2, 3, 4, 5]);

        document.querySelectorAll('.day-btn').forEach(btn => {
            btn.classList.remove('btn-outline-secondary');
            btn.classList.add('btn-primary');
        });
    }

    document.querySelectorAll('.day-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const day = Number(btn.dataset.day);

            if (activeDays.has(day)) {
                // ⛔ NO permitir apagar el último día
                if (activeDays.size === 1) {
                    return; // se ignora el click
                }

                activeDays.delete(day);
                btn.classList.remove('btn-primary');
                btn.classList.add('btn-outline-secondary');
            } else {
                activeDays.add(day);
                btn.classList.remove('btn-outline-secondary');
                btn.classList.add('btn-primary');
            }

            applyDayFilter();
        });
    });


    function refreshChartsFromCurrentFilter() {
        if (!lastBacktestResult) return;

        const filteredData = getFilteredDataFromTable();

        generarGraficos(filteredData);
        renderPLPorDiaSemana(filteredData);
        renderWinLossPorDiaSemana(filteredData);
        renderAvgProfitVsLoss(filteredData);
        renderPieCallsPuts(filteredData);
        renderCalendarPnL(filteredData);
        renderHeatmapDiaMes(filteredData);
    }

    function applyDayFilter() {
        document
            .querySelectorAll('#resultTable tbody tr')
            .forEach(tr => {
                tr.style.display = rowPassesFilters(tr) ? "" : "none";
            });

        refreshChartsFromCurrentFilter();
        recalcKPIsWithFilteredData();
    }


    function getFilteredDataFromTable() {
        if (!lastBacktestResult?.data) return [];

        // Leer filas visibles y construir map Day→adjustedPL leyendo del DOM
        const visibleRows = Array.from(document.querySelectorAll('#resultTableContainer tbody tr'))
            .filter(tr => tr.style.display !== 'none');

        // Usamos un array de {day, adjustedPL} en orden de tabla para luego matchear
        const visibleEntries = [];
        visibleRows.forEach(tr => {
            const day    = tr.children[0].innerText.trim();
            const plCell = tr.querySelector('td[data-raw-pl]');
            let adjustedPL = null;
            if (plCell) {
                const txt = plCell.textContent.replace(/[$,\s]/g, '');
                const val = parseFloat(txt);
                if (!isNaN(val)) adjustedPL = val;
            }
            visibleEntries.push({ day, adjustedPL });
        });

        const visibleDays = new Set(visibleEntries.map(e => e.day));

        // Matchear con result.data preservando orden y asignando adjustedPL por posición
        // Para fechas duplicadas usamos un contador por día
        const dayCounter = {};
        const entryByDayIdx = {};
        visibleEntries.forEach(e => {
            const idx = dayCounter[e.day] = (dayCounter[e.day] ?? -1) + 1;
            if (!entryByDayIdx[e.day]) entryByDayIdx[e.day] = [];
            entryByDayIdx[e.day][idx] = e.adjustedPL;
        });

        const dayUsed = {};
        return lastBacktestResult.data
            .filter(row => visibleDays.has(row.Day))
            .map(row => {
                const idx = dayUsed[row.Day] = (dayUsed[row.Day] ?? -1) + 1;
                const adjustedPL = (entryByDayIdx[row.Day] ?? [])[idx] ?? null;
                return { ...row, adjustedPL };
            });
    }

    function recalcKPIsWithFilteredData() {
        if (!lastBacktestResult) return;

        const filteredData = getFilteredDataFromTable();

        // Actualizar badge de registros visibles
        const badge = document.getElementById("visibleRowsBadge");
        if (badge) {
            const visible = filteredData ? filteredData.length : 0;
            const total = lastBacktestResult?.data?.length || 0;
            badge.textContent = `${visible}/${total}`;
            badge.className = visible === 0
                ? "badge bg-danger"
                : "badge bg-secondary";
        }

        // =========================
        // 🚫 NO DATA → limpiar KPIs
        // =========================
        if (!filteredData || filteredData.length === 0) {
            document.getElementById('profitTotal').textContent = "—";
            const profitRowEmpty = document.getElementById('profitRow');
            if (profitRowEmpty) profitRowEmpty.classList.remove('is-loss');
            document.getElementById('winDays').textContent = "0";
            document.getElementById('lossDays').textContent = "0";
            document.getElementById('totalDays').textContent = "0";
            document.getElementById('winRate').textContent = "0%";

            document.getElementById("resumenContratos").textContent =
                Number(sessionStorage.getItem("contractCount")) || 0;

            document.getElementById("resumenComision").textContent = "0.00";

            document.getElementById("maxRachaPositiva").textContent = "—";
            document.getElementById("maxRachaNegativa").textContent = "—";
            document.getElementById("promedioGanancias").textContent = "—";
            document.getElementById("promedioPerdidas").textContent = "—";
            document.getElementById("profitFactor").textContent = "—";
            document.getElementById("maxDrawdown").textContent = "—";
            document.getElementById("maxDrawdownDates").textContent = "—";

            return;
        }

        // =========================
        // 🔧 Parámetros
        // =========================
        const contractCount = Number(sessionStorage.getItem("contractCount")) || 1;
        const commissionPerLeg = Number(sessionStorage.getItem("commissionPerLeg")) || 0;
        const numLegs = Number(sessionStorage.getItem("numLegs")) || 2;

        const tradesCount = filteredData.length;
        const commissionPerTrade = commissionPerLeg * numLegs * contractCount;
        const totalCommission = commissionPerTrade * tradesCount;

        // =========================
        // 🔁 PROFIT TOTAL
        // =========================
        let profitTotalAjustado = 0;

        filteredData.forEach(row => {
            const rawPL = parseFloat(row['P/L']) || 0;
            profitTotalAjustado += (rawPL * contractCount) - commissionPerTrade;
        });

        document.getElementById('profitTotal').textContent =
            `$ ${profitTotalAjustado.toFixed(2)}`;

        const profitRowFilter = document.getElementById('profitRow');
        if (profitRowFilter) profitRowFilter.classList.toggle('is-loss', profitTotalAjustado < 0);

        // =========================
        // 🔁 CONTRACTS / COMMISSION
        // =========================
        document.getElementById("resumenContratos").textContent = contractCount;
        document.getElementById("resumenComision").textContent =
            totalCommission.toFixed(2);

        // =========================
        // 🔁 WINS / LOSSES
        // =========================
        const wins = filteredData.filter(r => r['P/L'] > 0).length;
        const losses = filteredData.filter(r => r['P/L'] <= 0).length;
        const totalDays = wins + losses;

        document.getElementById('winDays').textContent = wins;
        document.getElementById('lossDays').textContent = losses;
        document.getElementById('totalDays').textContent = totalDays;
        document.getElementById('winRate').textContent =
            totalDays ? ((wins / totalDays) * 100).toFixed(1) + "%" : "0%";

        // =========================
        // 🔁 KPIs AVANZADOS
        // =========================
        document.getElementById("maxRachaPositiva").textContent =
            calcularMaxRachaPositiva(filteredData);

        document.getElementById("maxRachaNegativa").textContent =
            calcularMaxRachaNegativa(filteredData);

        const promedios = calcularPromedios(
            filteredData, contractCount, commissionPerLeg, numLegs
        );

        document.getElementById("promedioGanancias").textContent =
            `$ ${promedios.promedioGanancias.toFixed(2)}`;

        document.getElementById("promedioPerdidas").textContent =
            `$ ${Math.abs(promedios.promedioPerdidas).toFixed(2)}`;

        document.getElementById("profitFactor").textContent =
            calcularProfitFactor(filteredData, contractCount, commissionPerLeg, numLegs);

        const drawdownInfo = calcularMaxDrawdown(
            filteredData, contractCount, commissionPerLeg, numLegs
        );

        document.getElementById("maxDrawdown").textContent = drawdownInfo.value;
        document.getElementById("maxDrawdownDates").textContent =
            `${drawdownInfo.desde} – ${drawdownInfo.hasta}`;
    }



    function rowPassesFilters(tr) {
        // =========================
        // ME
        // =========================
        const minME = meCurrentMin;
        const maxME = meCurrentMax;
        const meCell = tr.querySelector("td[data-raw-me]");
        const me = meCell ? Number(meCell.getAttribute("data-raw-me")) : 0;

        if (me < minME || me > maxME) return false;

        // =========================
        // DAY OF WEEK
        // =========================
        const dateStr = tr.children[0].innerText.trim();
        const date = new Date(dateStr + 'T00:00:00');
        const weekday = date.getDay(); // 0=Dom … 6=Sáb

        if (!activeDays.has(weekday)) return false;

        return true;
    }

    // ------------------------------------------

    let progressInterval = null;
    let progressValue = 0;
    let currentTaskId = null;
    let userCancelled = false;

    // Botón cancelar task
    document.getElementById('cancelTaskBtn').addEventListener('click', async () => {
        if (!currentTaskId) return;
        const btn = document.getElementById('cancelTaskBtn');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> {{ _("Cancelando...") }}';
        userCancelled = true;
        try {
            await fetch(`/backtestingIdea2/cancel_task/${currentTaskId}`, { method: 'POST' });
        } catch (e) { /* silencioso */ }
        currentTaskId = null;
        if (progressInterval) { clearInterval(progressInterval); progressInterval = null; }
        btn.style.display = 'none';
        btn.disabled = false;
        document.getElementById('progressWaitMsg').textContent = '';
        document.getElementById('progressContainer').style.display = 'none';
        document.getElementById('loadingOverlay').style.display = 'none';
    });

    document.getElementById('btnActualizarParametros').addEventListener('click', () => {
        // Cerrar modal
        const modal = bootstrap.Modal.getInstance(document.getElementById('modalParametros'));
        modal.hide();

        // Recalcular tabla (ajustar columnas de P/L)
        const filas = document.querySelectorAll("#resultTable tbody tr");
        const estrategia = document.getElementById("strategySelect").value;
        const contractCount = parseInt(document.getElementById("contractCount").value) || 1;
        const commissionPerLeg = parseFloat(document.getElementById("commissionInput").value) || 0;
        const numLegs = (estrategia === "IronCondor") ? 4 : 2;
        // Guardar en sessionStorage
        sessionStorage.setItem('contractCount', contractCount);
        sessionStorage.setItem('commissionPerLeg', commissionPerLeg);
        sessionStorage.setItem('numLegs', numLegs);



        let totalProfit = 0;
        let totalCommission = 0;

        // Reajustar cada fila y acumular datos
        const datosAjustados = [];

        filas.forEach(fila => {
            const celdaPL = fila.querySelector("td[data-raw-pl]");
            if (celdaPL) {
                const rawPL = parseFloat(celdaPL.getAttribute("data-raw-pl")) || 0;
                const commission = commissionPerLeg * numLegs * contractCount;
                const adjusted = rawPL * contractCount - commission;

                totalProfit += adjusted;
                totalCommission += commission;

                celdaPL.textContent = `$${adjusted.toFixed(2)}`;
                celdaPL.className = adjusted >= 0 ? "text-success fw-bold" : "text-danger fw-bold";

                datosAjustados.push({ 'P/L': rawPL });
            }
        });

        // Actualizar ganancia/pérdida total
        document.getElementById("profitTotal").textContent = `$ ${totalProfit.toFixed(2)}`;

        const profitRowContratos = document.getElementById('profitRow');
        if (profitRowContratos) profitRowContratos.classList.toggle('is-loss', totalProfit < 0);

        // Mostrar contratos y comisión total
        const resumenContratos = document.getElementById("resumenContratos");
        const resumenComision = document.getElementById("resumenComision");
        if (resumenContratos) resumenContratos.textContent = contractCount;
        if (resumenComision) resumenComision.textContent = totalCommission.toFixed(2);

        // Recalcular promedios
        const promedios = calcularPromedios(datosAjustados, contractCount, commissionPerLeg, numLegs);
        document.getElementById("promedioGanancias").textContent = `$ ${promedios.promedioGanancias.toFixed(2)}`;
        document.getElementById("promedioPerdidas").textContent = `$ ${Math.abs(promedios.promedioPerdidas).toFixed(2)}`;

        // Recalcular Profit Factor
        const profitFactor = calcularProfitFactor(datosAjustados, contractCount, commissionPerLeg, numLegs);
        const pfElement = document.getElementById("profitFactor");
        pfElement.textContent = profitFactor;

        // Opcional: cambiar color según valor
        pfElement.classList.remove("text-success", "text-danger", "text-light");
        if (profitFactor === "∞" || parseFloat(profitFactor) >= 1) {
            pfElement.classList.add("text-success");
        } else {
            pfElement.classList.add("text-danger");
        }

        // Recalcular Max Drawdown con los nuevos contratos/comisión
        const filteredForDD = getFilteredDataFromTable();
        const ddData = (filteredForDD && filteredForDD.length > 0)
            ? filteredForDD
            : (lastBacktestResult?.data || []);
        const drawdownInfo = calcularMaxDrawdown(ddData, contractCount, commissionPerLeg, numLegs);
        document.getElementById("maxDrawdown").textContent = drawdownInfo.value;
        document.getElementById("maxDrawdownDates").textContent =
            `${drawdownInfo.desde} – ${drawdownInfo.hasta}`;

        generarGraficos(lastBacktestResult);
        renderPLPorDiaSemana(lastBacktestResult.data);
        renderPieCallsPuts(lastBacktestResult.data);
        renderWinLossPorDiaSemana(lastBacktestResult.data);
        renderAvgProfitVsLoss(lastBacktestResult.data);
        renderCalendarPnL(getFilteredDataFromTable());
        renderHeatmapDiaMes(getFilteredDataFromTable());
    });

    function updateRiskOptions() {
        const symbol = document.getElementById("symbolSelect").value;
        const strategy = document.getElementById("strategySelect").value;
        const riskSelect = document.getElementById("riskLevel");

        const isHighRiskSymbol = ["SPX", "XSP"].includes(symbol);
        const isIronCondor = strategy === "IronCondor";

        Array.from(riskSelect.options).forEach(opt => {

            // Reset
            opt.hidden = false;

            // 🔴 Ocultar agresivo y ultra si el símbolo no lo permite
            if (!isHighRiskSymbol && ["agresivo", "ultra_agresivo"].includes(opt.value)) {
                opt.hidden = true;
            }

            // 🔴 Ocultar ultra_agresivo si es Iron Condor
            //if (isIronCondor && opt.value === "ultra_agresivo") {
            //    opt.hidden = true;
            //}

        });

        // Si la opción seleccionada quedó oculta → resetear
        if (riskSelect.selectedOptions[0].hidden) {
            riskSelect.value = "intermedio";
        }
    }


    //   document.getElementById("symbolSelect")
    //       .addEventListener("change", updateRiskOptions);

    //   document.getElementById("strategySelect")
    //       .addEventListener("change", updateRiskOptions);


    const isDarkMode = document.body.classList.contains('dark-mode');
    let lastBacktestResult = null;

    function setModoHora(modo) {
        document.getElementById('modoHora').value = modo;
        const btnFija = document.getElementById('btnModoFija');
        const btnMejores = document.getElementById('btnModoMejores');
        const trigger = document.getElementById('horaDropdownTrigger');
        const btnVer = document.getElementById('btnVerMejores');

        if (modo === 'HORA_FIJA') {
            btnFija.className = 'hora-seg-btn hora-seg-active-fija';
            btnMejores.className = 'hora-seg-btn hora-seg-inactive';
            trigger.disabled = false;
            trigger.style.opacity = '1';
            btnVer.style.display = 'none';
        } else {
            btnMejores.className = 'hora-seg-btn hora-seg-active-mejores';
            btnFija.className = 'hora-seg-btn hora-seg-inactive';
            trigger.disabled = true;
            trigger.style.opacity = '0.35';
            closeHoraDropdown();
            btnVer.style.display = 'flex';
        }
    }

    /* ── Custom hora dropdown ── */
    function toggleHoraDropdown() {
        const list = document.getElementById('horaDropdownList');
        const trigger = document.getElementById('horaDropdownTrigger');
        const isOpen = list.classList.contains('hora-cd-open');
        if (isOpen) {
            closeHoraDropdown();
        } else {
            list.classList.add('hora-cd-open');
            trigger.classList.add('hora-cd-trigger-open');
            const sel = list.querySelector('.hora-cd-selected');
            if (sel) sel.scrollIntoView({ block: 'nearest' });
        }
    }
    function closeHoraDropdown() {
        document.getElementById('horaDropdownList').classList.remove('hora-cd-open');
        document.getElementById('horaDropdownTrigger').classList.remove('hora-cd-trigger-open');
    }
    function selectHora(value, label) {
        document.getElementById('timeHour').value = value;
        document.getElementById('horaDropdownLabel').textContent = label;
        document.querySelectorAll('.hora-cd-item').forEach(el => el.classList.remove('hora-cd-selected'));
        document.querySelector(`.hora-cd-item[data-value="${value}"]`).classList.add('hora-cd-selected');
        closeHoraDropdown();
    }
    document.addEventListener('click', function (e) {
        const wrap = document.getElementById('horaDropdownWrap');
        if (wrap && !wrap.contains(e.target)) closeHoraDropdown();
    });

    document.addEventListener('DOMContentLoaded', async () => {
        initThemeToggle();

        const selectedSymbol = document.getElementById("symbolSelect").value;

        // Datepicker
        const availableDates = await fetch(`/get_dates?symbol=${selectedSymbol}`).then(res => res.json());
        $("#dateFrom, #dateTo").datepicker({
            dateFormat: "yy-mm-dd",
            beforeShowDay: date => [availableDates.includes($.datepicker.formatDate("yy-mm-dd", date))]
        });

        if (availableDates.length) {
            const available = [...availableDates].sort(); // orden ascendente YYYY-MM-DD
            const mostRecentStr = available.at(-1); // último día (HASTA)
            const mostRecent = new Date(mostRecentStr);
            const ninetyDaysBefore = new Date(mostRecent);
            ninetyDaysBefore.setDate(ninetyDaysBefore.getDate() - 90);

            // Buscar la primera fecha >= ninetyDaysBefore
            const fromStr = available.find(d => new Date(d) >= ninetyDaysBefore) || available[0];

            // Establecer en los datepickers
            $("#dateFrom").datepicker("setDate", fromStr);
            $("#dateTo").datepicker("setDate", mostRecentStr);
        }

        // 🌗 Observar cambios de clase en <body>
        const observer = new MutationObserver(() => {
            const modoActual = document.body.classList.contains('dark-mode') ? "🌑 Modo oscuro" : "☀️ Modo claro";
            if (lastBacktestResult) {
                generarGraficos(lastBacktestResult);
                renderPLPorDiaSemana(lastBacktestResult.data);
                renderPieCallsPuts(lastBacktestResult.data);
                renderWinLossPorDiaSemana(lastBacktestResult.data);
                renderAvgProfitVsLoss(lastBacktestResult.data);
                renderHeatmapDiaMes(getFilteredDataFromTable());
            }
        });
        observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
        // Re-render heatmap cuando cambia dark/light (los colores son distintos)
        const _origObserverCb = observer.takeRecords;
        document.body.addEventListener('classchange', () => {
            if (lastBacktestResult?.data) renderHeatmapDiaMes(lastBacktestResult.data);
        });
    });

    function isDarkModeActive() {
        return document.body.classList.contains('dark-mode');
    }

    document.getElementById('loadButton').addEventListener('click', async () => {

        // 🔥 CORTAR CUALQUIER INTERVAL PREVIO
        if (progressInterval) {
            clearInterval(progressInterval);
            progressInterval = null;
        }

        // reset rango ME al estado inicial
        if ($("#meFilter").data("ui-slider")) {
            meCurrentMin = 0;
            meCurrentMax = 60;
            $("#meFilter").slider("option", "max", 60);
            $("#meFilter").slider("values", [0, 60]);
            $("#meFilterValue").text("0 – 60");
        }


        // 🔄 RESET TOTAL DE UI Y PROGRESO (NUEVA EJECUCIÓN)
        progressValue = 0;
        resetDayFilter();

        const progressContainer = document.getElementById("progressContainer");
        const progressBar = document.getElementById("progressBar");

        userCancelled = false;
        const cancelBtn = document.getElementById('cancelTaskBtn');
        cancelBtn.style.display = 'none';
        cancelBtn.disabled = false;
        cancelBtn.innerHTML = '<i class="fas fa-times me-1"></i> {{ _("Cancelar") }}';
        progressContainer.style.display = "block";
        progressBar.style.width = "0%";
        progressBar.textContent = "0%";

        // No borrar nada hasta tener resultados nuevos
        lastBacktestResult = null;

        document.getElementById('loadingOverlay').style.display = 'flex';

        const desde = document.getElementById('dateFrom').value;
        const hasta = document.getElementById('dateTo').value;
        const estrategia = document.getElementById('strategySelect').value;
        const risk = document.getElementById('riskLevel').value;
        const timeHour = document.getElementById('timeHour').value;
        const symbol = document.getElementById("symbolSelect").value;
        const modoHora = document.getElementById('modoHora').value;
        const creditTarget = parseFloat(document.getElementById('creditTarget').value) || 0;

        if (!desde || !hasta) {
            showFlashMessage("{{ _('Selecciona ambas fechas.') }}", "warning");
            document.getElementById('loadingOverlay').style.display = 'none';
            return;
        }

        const desdeDate = luxon.DateTime.fromISO(desde);
        const hastaDate = luxon.DateTime.fromISO(hasta);
        if (desdeDate > hastaDate) {
            showFlashMessage("{{ _('La fecha DESDE debe ser menor o igual a la fecha HASTA.') }}", "danger");
            document.getElementById('loadingOverlay').style.display = 'none';
            return;
        }

        const fromDate = luxon.DateTime.fromISO(desde);
        const toDate = luxon.DateTime.fromISO(hasta);

        const totalDaysProgress = Math.max(
            1,
            Math.floor(toDate.diff(fromDate, 'days').days) + 1
        );
        const maxCreditMap = { SPX: 500, RUT: 500, SPY: 100, QQQ: 100, XSP: 100 };
        const maxCredit = maxCreditMap[symbol] || 500;
        const creditRatio = creditTarget > 0 ? Math.min(creditTarget / maxCredit, 1.0) : 0;
        const SECONDS_PER_DAY = 0.14 * (1 + creditRatio * 3); // dinámico según credit target
        const estimatedTotalSeconds = Math.max(3, totalDaysProgress * SECONDS_PER_DAY);

        try {
            // =========================
            // 1) DISPARAR CELERY
            // =========================
            const response = await fetch(
                `/backtestingIdea2/get_backtesting_idea?desde=${desde}&hasta=${hasta}&symbol=${symbol}&estrategia=${estrategia}&hora=${timeHour}&risk=${risk}&modo=${modoHora}&credit_target=${creditTarget}`,
                { headers: { 'Accept': 'application/json' } }
            );

            if (response.status === 429) {
                const txt = await response.json().catch(() => ({}));
                showFlashMessage(txt.error || "Ya tenés un backtesting en curso.", "warning");
                document.getElementById('loadingOverlay').style.display = 'none';
                clearInterval(progressInterval);
                progressInterval = null;
                return;
            }
            if (!response.ok) {
                const txt = await response.text().catch(() => "");
                throw new Error(`HTTP ${response.status} en get_backtesting_idea. ${txt.slice(0, 200)}`);
            }


            /* 🟦 MOSTRAR BARRA DE PROGRESO */
            document.getElementById("progressContainer").style.display = "block";
            progressValue = 0;

            const progressBar = document.getElementById("progressBar");
            progressBar.style.width = "0%";
            progressBar.textContent = "0%";

            const startTime = Date.now();
            const totalMs = estimatedTotalSeconds * 1000;

            progressInterval = setInterval(() => {
                const elapsed = Date.now() - startTime;
                const ratio = Math.min(elapsed / totalMs, 0.95); // nunca llegar a 100
                progressValue = Math.floor(ratio * 100);

                progressBar.style.width = `${progressValue}%`;
                progressBar.textContent = `${progressValue}%`;

                // Al llegar a 95% → parpadeo + mensaje de espera
                const waitMsg = document.getElementById('progressWaitMsg');
                if (progressValue >= 95) {
                    progressBar.classList.add('progress-bar-pulsing');
                    if (waitMsg) waitMsg.textContent = '{{ _("⏳ Procesando últimos datos, un momento más...") }}';
                } else {
                    progressBar.classList.remove('progress-bar-pulsing');
                    if (waitMsg) waitMsg.textContent = '';
                }
            }, 500);




            const startResult = await response.json();

            // =========================
            // 2) OBTENER RESULTADO FINAL (polling si hay task_id)
            // =========================
            let result = startResult;
            let wasRevoked = false;
            if (startResult && startResult.task_id) {
                const taskId = startResult.task_id;
                currentTaskId = taskId;

                // Mostrar botón cancelar
                const cancelBtn = document.getElementById('cancelTaskBtn');
                if (cancelBtn) cancelBtn.style.display = 'inline-block';

                const sleep = (ms) => new Promise(res => setTimeout(res, ms));

                // evita loops infinitos (ej: 15 min aprox)
                const MAX_TRIES = 900;
                let tries = 0;

                while (true) {
                    tries += 1;
                    if (tries > MAX_TRIES) {
                        throw new Error("{{ _('Timeout: la tarea tardó demasiado en responder.') }}");
                    }

                    const r = await fetch(`/backtestingIdea2/task_result/${taskId}`, { headers: { 'Accept': 'application/json' } });

                    if (!r.ok) {
                        const txt = await r.text().catch(() => "");
                        throw new Error(`HTTP ${r.status} en task_result. ${txt.slice(0, 200)}`);
                    }

                    // si por alguna razón devuelve HTML (login redirect, 404, etc.) esto evita el "Unexpected token <"
                    const contentType = r.headers.get("content-type") || "";
                    if (!contentType.includes("application/json")) {
                        const txt = await r.text().catch(() => "");
                        throw new Error(`task_result no devolvió JSON. Content-Type=${contentType}. Body=${txt.slice(0, 200)}`);
                    }

                    const payload = await r.json();

                    // Task cancelado por el usuario → salir silenciosamente
                    if (payload && payload.state === 'REVOKED') {
                        wasRevoked = true;
                        break;
                    }

                    // Caso A: payload trae bandera result_ready
                    if (payload && payload.result_ready === false) {

                        // 🔄 avance heurístico por heartbeat
                        // if (progressValue < 90) {
                        //     progressValue += 2 + Math.random() * 3; // 2–5%
                        //     progressValue = Math.min(progressValue, 90);

                        //     progressBar.style.width = `${progressValue.toFixed(0)}%`;
                        //     progressBar.textContent = `${progressValue.toFixed(0)}%`;
                        // }

                        await sleep(1200);
                        continue;
                    }

                    if (payload && payload.error) {
                        throw new Error(payload.error);
                    }

                    // Caso A.1: payload trae {result_ready:true, result:{...}}
                    if (payload && payload.result) {
                        result = payload.result;
                    } else {
                        // Caso B: payload YA es el resultado final
                        result = payload;
                    }



                    /* 🛑 DETENER PROGRESO AUTOMÁTICO */
                    if (progressInterval) {
                        clearInterval(progressInterval);
                        progressInterval = null;
                    }

                    // Ocultar botón cancelar
                    currentTaskId = null;
                    const cancelBtnDone = document.getElementById('cancelTaskBtn');
                    if (cancelBtnDone) cancelBtnDone.style.display = 'none';

                    /* 🟢 MOSTRAR 100% REAL */
                    progressValue = 100;
                    progressBar.style.width = "100%";
                    progressBar.textContent = "100%";
                    progressBar.classList.remove('progress-bar-pulsing');
                    const waitMsg = document.getElementById('progressWaitMsg');
                    if (waitMsg) waitMsg.textContent = '';

                    /* ⏳ Dejarlo visible */
                    await new Promise(res => setTimeout(res, 500));

                    /* ❌ Cerrar barra */
                    progressContainer.style.display = "none";

                    break;
                }
            } else {
                // si el backend está en modo "queued" pero no mandó task_id => error real
                if (startResult && startResult.status === "queued" && !startResult.task_id) {
                    throw new Error("{{ _('No se recibió task_id') }}");
                }
            }

            // =========================
            // 3) DESDE ACÁ TU FLUJO ORIGINAL (result.data existe)
            // =========================
            if (wasRevoked) return; // cancelado por usuario → no tocar la pantalla

            if (!result || !Array.isArray(result.data)) {
                throw new Error("{{ _('Respuesta final inválida: no existe result.data') }}");
            }


            const contractCount = parseInt(document.getElementById('contractCount').value) || 1;
            const commissionPerLeg = parseFloat(document.getElementById('commissionInput').value) || 0;
            const numLegs = (estrategia === 'IronCondor') ? 4 : 2;

            sessionStorage.setItem("contractCount", contractCount);
            sessionStorage.setItem("commissionPerLeg", commissionPerLeg);
            sessionStorage.setItem("numLegs", numLegs);

            let profitTotalAjustado = 0;
            result.data.forEach(row => {
                const rawPL = parseFloat(row['P/L']) || 0;
                const commissionTotal = commissionPerLeg * numLegs * contractCount;
                const adjustedPL = rawPL * contractCount - commissionTotal;
                profitTotalAjustado += adjustedPL;
            });

            const profitValue = document.getElementById('profitTotal');
            profitValue.textContent = `$ ${profitTotalAjustado.toFixed(2)}`;

            const resumenContratos = document.getElementById("resumenContratos");
            const resumenComision = document.getElementById("resumenComision");
            const totalCommission = commissionPerLeg * numLegs * contractCount * result.data.length;

            if (resumenContratos) resumenContratos.textContent = contractCount;
            if (resumenComision) resumenComision.textContent = totalCommission.toFixed(2);

            document.getElementById('winDays').textContent = result.wins;
            document.getElementById('lossDays').textContent = result.losses;
            lastBacktestResult = result;

            const totalDays = result.wins + result.losses;
            const winRate = totalDays > 0 ? ((result.wins / totalDays) * 100).toFixed(1) + "%" : "0%";
            document.getElementById('winRate').textContent = winRate;
            document.getElementById('totalDays').textContent = totalDays;
            document.getElementById('resultSummary').style.display = 'block';
            // Update profit row color
            const profitVal = parseFloat(document.getElementById('profitTotal').textContent.replace(/[^0-9.-]/g, ''));
            const profitRow = document.getElementById('profitRow');
            if (profitRow) {
                profitRow.classList.toggle('is-loss', profitVal < 0);
            }

            const thead = document.getElementById('resultTableHead');
            const tbody = document.querySelector('#resultTable tbody');
            tbody.innerHTML = '';

            const maxRacha = calcularMaxRachaPositiva(result.data || []);
            document.getElementById("maxRachaPositiva").textContent = maxRacha;
            const maxNeg = calcularMaxRachaNegativa(result.data || []);
            document.getElementById("maxRachaNegativa").textContent = maxNeg;

            const promedios = calcularPromedios(result.data, contractCount, commissionPerLeg, numLegs);
            document.getElementById("promedioGanancias").textContent = `$ ${promedios.promedioGanancias.toFixed(2)}`;
            document.getElementById("promedioPerdidas").textContent = `$ ${Math.abs(promedios.promedioPerdidas).toFixed(2)}`;

            const profitFactor = calcularProfitFactor(result.data, contractCount, commissionPerLeg, numLegs);
            document.getElementById("profitFactor").textContent = profitFactor;

            const drawdownInfo = calcularMaxDrawdown(result.data, contractCount, commissionPerLeg, numLegs);
            document.getElementById("maxDrawdown").textContent = `${drawdownInfo.value}`;
            document.getElementById("maxDrawdownDates").textContent = `${drawdownInfo.desde} – ${drawdownInfo.hasta}`;
            renderPLPorDiaSemana(result.data);
            renderPieCallsPuts(result.data);
            renderWinLossPorDiaSemana(result.data);
            renderAvgProfitVsLoss(result.data);

            if (estrategia === 'Vertical') {
                thead.innerHTML = `
                <th>{{ _('Fecha') }}</th>
                <th>{{ _('Hora') }}</th>
                <th>{{ _('Strikes') }}</th>
                <th>{{ _('Tipo') }}</th>
                <th>{{ _('Crédito') }}</th>
                <th>{{ _('Precio') }}</th>
                <th>{{ _('Cierre') }}</th>
                <th>{{ _('Resultado') }}</th>
                <th>{{ _('Distancia') }}</th>
                <th>{{ _('Estado') }}</th>
                <th>{{ _('ME') }}</th>
                <th>{{ _('Score') }}</th>
                
            `;

                const numLegsLocal = 2;

                result.data.forEach(row => {
                    const commissionTotal = commissionPerLeg * numLegsLocal * contractCount;
                    const rawPL = parseFloat(row['P/L']) || 0;
                    const adjustedPL = rawPL * contractCount - commissionTotal;

                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                    <td><a href="#" class="fila-link" style="text-decoration: none;"
                        data-row='${JSON.stringify(row).replace(/'/g, "&apos;")}'>${row.Day}</a></td>
                    <td>${row.Time}</td>
                    <td>${row.Strikes}</td>
                    <td>${row.Option}</td>
                    <td>$${parseFloat(row.Credit).toFixed(2)}</td>
                    <td>${row.Price != null ? row.Price.toFixed(2) : '-'}</td>
                    <td>${row.Close != null ? row.Close.toFixed(2) : '-'}</td>
                    <td class="${adjustedPL >= 0 ? 'text-success' : 'text-danger'} fw-bold" data-raw-pl="${row['P/L']}">
                        $${!isNaN(adjustedPL) ? adjustedPL.toFixed(2) : '-'}
                    </td>
                    <td>${row.Diff != null ? row.Diff.toFixed(2) : '-'}</td>
                    <td class="${row.itmOtm === 'ITM' ? 'text-danger' :
                            row.itmOtm === 'ITM P' ? 'text-warning' :
                                'text-success'} fw-bold">${row.itmOtm}</td>
                    <td class="text-end text-info fw-semibold"
                        data-raw-me="${row.movimiento_esperado != null ? row.movimiento_esperado : ''}">
                        ${row.movimiento_esperado != null
                            ? Number(row.movimiento_esperado).toFixed(2)
                            : '-'}
                    </td>


                    <td class="text-end fw-bold ${row.score_30min > 0 ? 'text-success' :
                            row.score_30min < 0 ? 'text-danger' :
                                'text-muted'
                        }">
                    ${row.score_30min != null
                            ? Number(row.score_30min).toFixed(4)
                            : '-'
                        }
                    </td>
                `;
                    tbody.appendChild(tr);
                });

                document.querySelectorAll(".fila-link").forEach(link => {
                    link.addEventListener("click", async (e) => {
                        e.preventDefault();
                        const rowData = JSON.parse(link.dataset.row);
                        rowData.symbol = document.getElementById("symbolSelect").value;

                        document.getElementById('loadingOverlay').style.display = 'flex';

                        try {
                            const response = await fetch("/backtestingIdea2/procesar_fila_vertical", {
                                method: "POST",
                                headers: { "Content-Type": "application/json", "Accept": "application/json" },
                                body: JSON.stringify(rowData)

                            });

                            if (response.status === 401) {
                                showFlashMessage("{{ _('Tu sesión fue cerrada porque iniciaste sesión en otro dispositivo.') }}", "warning");
                                setTimeout(() => window.location.href = '/login?expired=2', 2000);
                                return;
                            }
                            const resultFila = await response.json();

                            if (resultFila.status === "success") {
                                mostrarGraficoEvolucion(resultFila.evolution, resultFila.fecha, resultFila.strikes, resultFila.tipo);
                            } else {
                                showFlashMessage(resultFila.message || "{{ _('Error al calcular evolución') }}", "danger");
                            }

                        } catch (err) {
                            if (typeof response !== 'undefined' && response.status === 401) {
                                showFlashMessage("{{ _('Tu sesión fue cerrada porque iniciaste sesión en otro dispositivo.') }}", "warning");
                                setTimeout(() => window.location.href = '/login?expired=2', 2000);
                            } else {
                                showFlashMessage("{{ _('Error al enviar los datos del vertical') }}", "danger");
                                console.error(err);
                            }
                        } finally {
                            document.getElementById('loadingOverlay').style.display = 'none';
                        }
                    });
                });

            } else if (estrategia === 'IronCondor') {
                thead.innerHTML = `
                <th>{{ _('Fecha') }}</th>
                <th>{{ _('Hora') }}</th>
                <th>{{ _('Strikes') }}</th>
                <th>{{ _('Precio') }}</th>
                <th>{{ _('Cierre') }}</th>
                <th>{{ _('Crédito') }}</th>
                <th>{{ _('Resultado') }}</th>
                <th>{{ _('Distancia') }}</th>
                <th>{{ _('Estado') }}</th>
                <th class="text-end">{{ _('ME') }}</th>
                <th class="text-end">{{ _('Score') }}</th>
            `;

                const numLegsLocal = 4;

                result.data.forEach(row => {
                    const commissionTotal = commissionPerLeg * numLegsLocal * contractCount;
                    const rawPL = parseFloat(row['P/L']) || 0;
                    const adjustedPL = rawPL * contractCount - commissionTotal;

                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                    <td><a href="#" class="fila-link" style="text-decoration: none;"
                        data-row='${JSON.stringify(row).replace(/'/g, "&apos;")}'>${row.Day}</a></td>
                    <td>${row.Time}</td>
                    <td>${row.Strikes}</td>
                    <td>${row.Price != null ? row.Price.toFixed(2) : '-'}</td>
                    <td>${row.Close != null ? row.Close.toFixed(2) : '-'}</td>
                    <td>$${row.Credit != null ? parseFloat(row.Credit).toFixed(2) : '-'}</td>
                    <td class="${adjustedPL >= 0 ? 'text-success' : 'text-danger'} fw-bold" data-raw-pl="${row['P/L']}">
                        $${!isNaN(adjustedPL) ? adjustedPL.toFixed(2) : '-'}
                    </td>
                    <td>${row.Dif}</td>
                    <td class="${row.itmOtm === 'ITM' ? 'text-danger' :
                            row.itmOtm === 'ITM P' ? 'text-warning' :
                                'text-success'} fw-bold">${row.itmOtm || '-'}</td>


                    <td class="text-end text-info fw-semibold"
                        data-raw-me="${row.movimiento_esperado != null ? row.movimiento_esperado : ''}">
                        ${row.movimiento_esperado != null
                            ? Number(row.movimiento_esperado).toFixed(2)
                            : '-'}
                    </td>


                    <td class="text-end fw-bold ${row.score_30min > 0 ? 'text-success' :
                            row.score_30min < 0 ? 'text-danger' :
                                'text-muted'
                        }">
                        
                    ${row.score_30min != null
                            ? Number(row.score_30min).toFixed(4)
                            : '-'
                        }
                    </td>
                `;
                    tbody.appendChild(tr);
                });

                document.querySelectorAll(".fila-link").forEach(link => {
                    link.addEventListener("click", async (e) => {
                        e.preventDefault();
                        const rowData = JSON.parse(link.dataset.row);
                        rowData.symbol = document.getElementById("symbolSelect").value;

                        document.getElementById('loadingOverlay').style.display = 'flex';

                        try {
                            const response = await fetch("/backtestingIdea2/procesar_fila_ironcondor", {
                                method: "POST",
                                headers: { "Content-Type": "application/json", "Accept": "application/json" },
                                body: JSON.stringify(rowData)
                            });

                            if (response.status === 401) {
                                showFlashMessage("{{ _('Tu sesión fue cerrada porque iniciaste sesión en otro dispositivo.') }}", "warning");
                                setTimeout(() => window.location.href = '/login?expired=2', 2000);
                                return;
                            }
                            const resultFila = await response.json();

                            if (resultFila.status === "success") {
                                mostrarGraficoEvolucion(resultFila.evolution, resultFila.fecha, resultFila.strikes);
                            } else {
                                showFlashMessage(resultFila.message || "{{ _('Error al procesar Iron Condor') }}", "danger");
                            }

                        } catch (err) {
                            if (typeof response !== 'undefined' && response.status === 401) {
                                showFlashMessage("{{ _('Tu sesión fue cerrada porque iniciaste sesión en otro dispositivo.') }}", "warning");
                                setTimeout(() => window.location.href = '/login?expired=2', 2000);
                            } else {
                                showFlashMessage("{{ _('Error al enviar los datos del Iron Condor') }}", "danger");
                                console.error(err);
                            }
                        } finally {
                            document.getElementById('loadingOverlay').style.display = 'none';
                        }
                    });
                });
            }

            document.getElementById('resultTableContainer').style.display = 'block';
            sortTableByDate("desc");

            // Recalcular el max del slider ME según los datos reales
            (function updateMESliderMax() {
                const allMEValues = Array.from(
                    document.querySelectorAll("#resultTable tbody tr td[data-raw-me]")
                ).map(td => Number(td.getAttribute("data-raw-me"))).filter(v => !isNaN(v));

                const maxME = allMEValues.length > 0 ? Math.ceil(Math.max(...allMEValues)) : 60;

                meCurrentMin = 0;
                meCurrentMax = maxME;
                $("#meFilter").slider("option", "max", maxME);
                $("#meFilter").slider("values", [0, maxME]);
                $("#meFilterValue").text("0 – " + maxME);
            })();

            setTimeout(() => {
                generarGraficos(result);
                renderPLPorDiaSemana(result.data);
                renderPieCallsPuts(result.data);
                renderWinLossPorDiaSemana(lastBacktestResult.data);
                renderAvgProfitVsLoss(lastBacktestResult.data);
                renderCalendarPnL(getFilteredDataFromTable());
                renderHeatmapDiaMes(getFilteredDataFromTable());
                document.getElementById("emptyState").style.display = "none";
                document.getElementById("dashboardVisual").style.display = "block";
                recalcKPIsWithFilteredData();
            }, 30);

        } catch (error) {
            if (!userCancelled) {
                if (error.message && error.message.includes('HTTP 401')) {
                    showFlashMessage("{{ _('Tu sesión fue cerrada porque iniciaste sesión en otro dispositivo.') }}", "warning");
                    setTimeout(() => window.location.href = '/login?expired=2', 2000);
                } else {
                    showFlashMessage("{{ _('Hubo un error al procesar la solicitud.') }}", "warning");
                    console.error("❌ Error en carga de datos:", error);
                    limpiarResultados();
                }
            }
            userCancelled = false;
        } finally {
            document.getElementById('loadingOverlay').style.display = 'none';
        }
    });


    const plotTexts = {
        xLabel: '{{ _("Fecha") }}',
        yLabel: '{{ _("Ganancia/Pérdida") }}',
        plAcumuladoName: '{{ _("P/L Acumulado") }}',
        plAcumuladoTitle: '{{ _("P/L Acumulado por Día") }}',
        plSemanalName: '{{ _("P/L Semanal") }}',
        plSemanalTitle: '{{ _("P/L por Semana") }}',
        plDailyLabel: '{{ _("P/L Diario") }}',
        plTotalLabel: '{{ _("P/L Total") }}',
        plFechaLabel: '{{ _("Fecha") }}',
        plGananciaLabel: '{{ _("Ganancia") }}',
        plPerdidaLabel: '{{ _("Pérdida") }}',
        pieTitleVertical: '{{ _("Ganadoras (CALL vs PUT)") }}',
        pieTitleIronCondor: '{{ _("Ganadoras vs Perdedoras") }}'
    };




    function generarGraficos(result) {

        let fechas = [];
        let cambios_diarios = [];
        let acumulados = [];
        let acumulado = 0;

        const filas = Array.from(
            document.querySelectorAll("#resultTable tbody tr")
        ).filter(tr => tr.style.display !== 'none');

        if (!filas || filas.length === 0) {
            renderNoDataChart("dashboardChartAcumuladoLineal", plotTexts.noData || "No data");
            renderNoDataChart("dashboardChartAcumuladoCascada", plotTexts.noData || "No data");
            renderNoDataChart("dashboardChartPLSemanal", plotTexts.noData || "No data");
            renderNoDataChart("dashboardChartMensual", plotTexts.noData || "No data");
            return;
        }



        const filasOrdenadas = filas.sort((a, b) => {
            const fa = a.querySelector("td")?.innerText;
            const fb = b.querySelector("td")?.innerText;
            return new Date(fa) - new Date(fb);
        });

        filasOrdenadas.forEach(fila => {

            const celdaFecha = fila.querySelector("td");
            const celdaPL = fila.querySelector("td[data-raw-pl]");
            if (celdaFecha && celdaPL) {
                const fecha = celdaFecha.textContent.trim();
                const plTexto = celdaPL.textContent.trim().replace("$", "").replace(",", "");
                const ganancia = parseFloat(plTexto) || 0;

                acumulado += ganancia;
                fechas.push(fecha);
                cambios_diarios.push(ganancia);
                acumulados.push(acumulado);
            }
        });

        // Detectar modo oscuro
        const isDark = document.body.classList.contains('dark-mode') ||
            window.matchMedia('(prefers-color-scheme: dark)').matches;

        const ejeColor = isDark ? 'white' : 'black';
        const gridColor = isDark ? '#444' : '#ddd';
        const zeroLineColor = isDark ? '#777' : '#999';
        const bgColor = 'rgba(0,0,0,0)';

        const layoutBase = {
            title: { text: '', font: { color: ejeColor } },
            xaxis: {
                tickfont: { color: ejeColor },
                automargin: true,
                showgrid: false,
                zerolinecolor: zeroLineColor
            },
            yaxis: {
                tickprefix: '$',
                tickformat: ',.2f',
                tickfont: { color: ejeColor },
                automargin: true,
                showgrid: false,
                zerolinecolor: zeroLineColor
            },
            margin: { t: 50, l: 80, r: 40, b: 50 },
            plot_bgcolor: bgColor,
            paper_bgcolor: bgColor,
            font: { color: ejeColor }
        };


        function renderAcumuladoLineal() {
            // helper para formatear $
            const fmt = n =>
                (n < 0 ? "-$" : "$") +
                Math.abs(n).toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });

            // índices del último día de cada mes
            const lastIdxByMonth = {};
            fechas.forEach((f, i) => {
                const [yy, mm] = f.split('-'); // "YYYY-MM-DD"
                lastIdxByMonth[`${yy}-${mm}`] = i;
            });

            // anotaciones MES fin de mes
            const annotations = Object.values(lastIdxByMonth)
                .sort((a, b) => a - b)
                .map(i => ({
                    x: fechas[i],
                    y: acumulados[i],
                    text: fmt(acumulados[i]),
                    showarrow: false,
                    xanchor: 'center',
                    yanchor: 'bottom',
                    yshift: 6,
                    font: { size: 11 }
                }));

            Plotly.react('dashboardChartAcumuladoLineal', [{
                type: 'scatter',
                mode: 'lines',
                x: fechas,
                y: acumulados,
                name: plotTexts.plAcumuladoName,
                line: { color: 'deepskyblue' },
                hovertemplate:
                    `${plotTexts.plFechaLabel}: %{x}<br>` +
                    `${plotTexts.plTotalLabel}: %{y:$,.2f}<extra></extra>`
            }], {
                ...layoutBase,
                xaxis: { ...layoutBase.xaxis, type: 'category', showgrid: false },
                yaxis: {
                    showticklabels: false,
                    showgrid: false,
                    zeroline: true,                       // ← línea en Y=0
                    zerolinecolor: 'rgba(128,128,128,.4)',
                    zerolinewidth: 1,
                    autorange: true,                      // asegura auto-rango…
                    rangemode: 'tozero'                   // …incluyendo 0 siempre
                },
                annotations,
                margin: { t: (layoutBase.margin?.t ?? 20), r: 10, b: 20, l: 10 }
            }, {
                displayModeBar: false,
                responsive: true
            });
        }


        function renderAcumuladoCascada() {
            // helper $
            const fmt = n =>
                (n < 0 ? "-$" : "$") +
                Math.abs(n).toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });

            // último día de cada mes
            const lastIdxByMonth = {};
            fechas.forEach((f, i) => {
                const [yy, mm] = f.split('-');
                lastIdxByMonth[`${yy}-${mm}`] = i;
            });

            const annotations = Object.values(lastIdxByMonth)
                .sort((a, b) => a - b)
                .map(i => ({
                    x: fechas[i],
                    y: acumulados[i],
                    text: fmt(acumulados[i]),
                    showarrow: false,
                    xanchor: 'center',
                    yanchor: 'bottom',
                    yshift: 6,
                    font: { size: 11 }
                }));

            Plotly.react('dashboardChartAcumuladoCascada', [{
                type: 'waterfall',
                x: fechas,
                y: cambios_diarios,
                measure: Array(fechas.length).fill('relative'),
                name: plotTexts.plAcumuladoName,
                increasing: { marker: { color: 'limegreen' } },
                decreasing: { marker: { color: 'tomato' } },
                totals: { marker: { color: 'gray' } },
                customdata: cambios_diarios.map((c, i) => [c, acumulados[i]]),
                hovertemplate:
                    `${plotTexts.plFechaLabel}: %{x}<br>` +
                    `${plotTexts.plDailyLabel}: %{customdata[0]:$,.2f}<br>` +
                    `${plotTexts.plTotalLabel}: %{customdata[1]:$,.2f}<extra></extra>`
            }], {
                ...layoutBase,
                xaxis: { ...layoutBase.xaxis, type: 'category', showgrid: false },
                yaxis: {
                    showticklabels: false,
                    showgrid: false,
                    zeroline: true,                        // ← línea de referencia en 0
                    zerolinecolor: 'rgba(128,128,128,.4)',
                    zerolinewidth: 1,
                    rangemode: 'tozero'                    // ← asegura que 0 esté dentro del rango
                },
                annotations,
                margin: { t: (layoutBase.margin?.t ?? 20), r: 10, b: 20, l: 10 }
            }, {
                displayModeBar: false,
                responsive: true
            });
        }




        // === Gráfico P/L Semanal desde la tabla ===
        function getISOWeekNumber(date) {
            const target = new Date(date.valueOf());
            const dayNr = (date.getDay() + 6) % 7;
            target.setDate(target.getDate() - dayNr + 3);
            const firstThursday = new Date(target.getFullYear(), 0, 4);
            const diff = target - firstThursday;
            const week = 1 + Math.round(diff / (7 * 24 * 60 * 60 * 1000));
            const year = target.getFullYear();
            return { year, week };
        }

        function renderPLSemanal(filasTabla) {
            // Idioma para rótulos (por si quieres "Semana" vs "Week")
            const langDoc = (document.documentElement.lang || 'es').toLowerCase();
            const baseLang = langDoc.split('-')[0];
            const isES = baseLang === 'es';

            const semanas = {};

            filasTabla.forEach(fila => {
                const celdaFecha = fila.querySelector("td");
                const celdaPL = fila.querySelector("td[data-raw-pl]");
                if (celdaFecha && celdaPL) {
                    const fechaStr = celdaFecha.textContent.trim(); // yyyy-mm-dd
                    const plTexto = celdaPL.textContent.trim().replace("$", "").replace(",", "");
                    const ganancia = parseFloat(plTexto) || 0;

                    const [y, m, d] = fechaStr.split("-").map(Number);
                    const fecha = new Date(y, m - 1, d);

                    // Lunes de esa semana
                    const lunes = new Date(fecha);
                    lunes.setDate(fecha.getDate() - fecha.getDay() + 1);

                    const clave = lunes.toISOString().split('T')[0];
                    semanas[clave] = (semanas[clave] || 0) + ganancia;
                }
            });

            const semanasOrdenadas = Object.keys(semanas).sort();
            const valores = semanasOrdenadas.map(s => semanas[s]);
            const etiquetas = semanasOrdenadas.map(fechaISO => {
                const [y, m, d] = fechaISO.split("-").map(Number);
                const date = new Date(y, m - 1, d);
                const { year, week } = getISOWeekNumber(date);
                return (isES ? 'S' : 'W') + ` ${week}-${year}`;
            });

            const fmt = n =>
                (n < 0 ? "-$" : "$") +
                Math.abs(n).toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });

            const maxV = Math.max(0, ...valores);
            const minV = Math.min(0, ...valores);
            const topPad = maxV ? maxV * 0.12 : 1;  // aire arriba para textos outside
            const bottomPad = 0;                    // sin aire extra abajo

            Plotly.react('dashboardChartPLSemanal', [{
                x: etiquetas,
                y: valores,
                type: 'bar',
                name: plotTexts.plSemanalName,
                marker: { color: valores.map(v => v >= 0 ? 'limegreen' : 'tomato') },

                // Texto: fuera si es positivo, dentro si es negativo
                text: valores.map(v => fmt(v)),
                textposition: valores.map(v => v >= 0 ? 'outside' : 'inside'),
                insidetextfont: { color: '#ffffff' },
                textfont: { size: 10 },
                cliponaxis: false
            }], {
                ...layoutBase,
                title: '',                 // <- sin título interno
                showlegend: false,         // <- sin leyenda
                xaxis: { ...layoutBase.xaxis, type: 'category', fixedrange: true },
                yaxis: {
                    visible: false,
                    fixedrange: true,
                    range: [minV - bottomPad, maxV + topPad],
                    zeroline: false
                },
                margin: { t: 10, r: 10, b: 40, l: 10 } // márgenes compactos
            }, {
                displayModeBar: false,
                responsive: true,
                staticPlot: true   // sin hover/zoom/pan
            });
        }


        function renderPLMensual(filasTabla) {


            // Detecta idioma desde <html lang="...">
            const langDoc = (document.documentElement.lang || 'es').toLowerCase();
            const baseLang = langDoc.split('-')[0];
            const locale = baseLang === 'en' ? 'en-US' : baseLang === 'es' ? 'es-ES' : baseLang;

            const meses = {};
            filasTabla.forEach(fila => {
                const celdaFecha = fila.querySelector("td");
                const celdaPL = fila.querySelector("td[data-raw-pl]");
                if (celdaFecha && celdaPL) {
                    const fechaStr = celdaFecha.textContent.trim(); // yyyy-mm-dd
                    const plTexto = celdaPL.textContent.trim().replace("$", "").replace(",", "");
                    const ganancia = parseFloat(plTexto) || 0;

                    const [y, m] = fechaStr.split("-").map(Number);
                    const clave = `${y}-${String(m).padStart(2, '0')}`;
                    meses[clave] = (meses[clave] || 0) + ganancia;
                }
            });

            const mesesOrdenados = Object.keys(meses).sort();
            const valores = mesesOrdenados.map(m => meses[m]);

            // Etiquetas MES/AAAA según locale
            const etiquetas = mesesOrdenados.map(mesStr => {
                const [yy, mm] = mesStr.split("-").map(Number);
                const d = new Date(yy, mm - 1, 1);
                const parts = new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).formatToParts(d);
                const monthName = (parts.find(p => p.type === 'month')?.value || '').toLocaleUpperCase(locale);
                const year = parts.find(p => p.type === 'year')?.value || String(yy);
                return `${monthName}/${year}`;
            });

            const fmt = n =>
                (n < 0 ? "-$" : "$") +
                Math.abs(n).toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });

            const maxV = Math.max(0, ...valores);
            const minV = Math.min(0, ...valores);
            const topPad = maxV ? maxV * 0.12 : 1;
            const bottomPad = 0; // sin aire extra abajo

            Plotly.react('dashboardChartMensual', [{
                x: etiquetas,
                y: valores,
                type: 'bar',
                name: plotTexts.plMensualName || 'Monthly P&L',
                marker: { color: valores.map(v => v >= 0 ? 'limegreen' : 'tomato') },

                // Texto: fuera si es positivo, dentro si es negativo
                text: valores.map(v => fmt(v)),
                textposition: valores.map(v => v >= 0 ? 'outside' : 'inside'),
                insidetextfont: { color: '#ffffff' },
                textfont: { size: 10 },
                cliponaxis: false
            }], {
                ...layoutBase,
                title: '',                 // <- sin título interno
                showlegend: false,         // <- ocultar leyenda (un solo trace)
                xaxis: { ...layoutBase.xaxis, type: 'category', fixedrange: true },
                yaxis: {
                    visible: false,
                    fixedrange: true,
                    range: [minV - bottomPad, maxV + topPad],
                    zeroline: false
                },
                margin: { t: 10, r: 10, b: 40, l: 10 } // márgenes compactos
            }, {
                displayModeBar: false,
                responsive: true,
                staticPlot: true // totalmente estático (sin hover/zoom/pan)
            });
        }






        renderPLMensual(filas);
        renderPLSemanal(filas);
        renderAcumuladoLineal();
        renderAcumuladoCascada();
    }


    document.getElementById("togglePLMode").addEventListener("click", () => {
        const wrapperLineal = document.getElementById("wrapperPLLineal");
        const wrapperCascada = document.getElementById("wrapperPLCascada");
        const boton = document.getElementById("togglePLMode");

        const mostrandoLineal = wrapperLineal.style.display !== "none";

        wrapperLineal.style.display = mostrandoLineal ? "none" : "block";
        wrapperCascada.style.display = mostrandoLineal ? "block" : "none";

        boton.textContent = mostrandoLineal
            ? boton.dataset.textLinea
            : boton.dataset.textCascada;

        // Resize para asegurar que Plotly ajusta correctamente
        setTimeout(() => {
            const chartId = mostrandoLineal
                ? 'dashboardChartAcumuladoCascada'
                : 'dashboardChartAcumuladoLineal';
            Plotly.Plots.resize(document.getElementById(chartId));
        }, 100);
    });


    document.getElementById("togglePLView").addEventListener("click", () => {
        const semanal = document.getElementById("wrapperPLSemanal");
        const mensual = document.getElementById("wrapperPLMensual");
        const boton = document.getElementById("togglePLView");
        const titulo = document.getElementById("plTitle");

        const mostrandoSemanal = semanal.style.display !== "none";

        // toggle de vistas
        semanal.style.display = mostrandoSemanal ? "none" : "block";
        mensual.style.display = mostrandoSemanal ? "block" : "none";

        // texto del botón (la acción a la que cambiaría)
        boton.textContent = mostrandoSemanal ? boton.dataset.textSemanal
            : boton.dataset.textMensual;

        // título según la vista que quedó visible
        titulo.textContent = mostrandoSemanal ? titulo.dataset.titleMensual
            : titulo.dataset.titleSemanal;

        // resize del gráfico activo
        setTimeout(() => {
            const targetId = mostrandoSemanal ? 'dashboardChartMensual' : 'dashboardChartPLSemanal';
            Plotly.Plots.resize(document.getElementById(targetId));
        }, 100);
    });

    // (Opcional) al cargar, asegurarte de que el título coincide con el estado inicial
    document.addEventListener('DOMContentLoaded', () => {
        const semanal = document.getElementById("wrapperPLSemanal");
        const titulo = document.getElementById("plTitle");
        const showingSemanal = semanal.style.display !== "none";
        titulo.textContent = showingSemanal ? titulo.dataset.titleSemanal
            : titulo.dataset.titleMensual;
    });




    document.getElementById("downloadCSV").addEventListener("click", function () {
        const table = document.getElementById("resultTable");
        const rows = Array.from(table.querySelectorAll("tr")).filter(row => {
            // conservar header
            if (row.parentElement.tagName === "THEAD") return true;

            // solo filas visibles
            return row.style.display !== "none";
        });
        // Extract summary metrics
        const profit = document.getElementById("profitTotal").innerText;
        const wins = document.getElementById("winDays").innerText;
        const losses = document.getElementById("lossDays").innerText;
        const winRate = document.getElementById("winRate").innerText;

        // CSV header with summary (in English)
        let csvContent = "Metric,Value\n";
        csvContent += `Total Profit,${profit}\n`;
        csvContent += `Winning Days,${wins}\n`;
        csvContent += `Losing Days,${losses}\n`;
        csvContent += `Win Rate,${winRate}\n\n`;

        // Add table data
        rows.forEach(row => {
            const cols = row.querySelectorAll("th, td");
            const rowData = Array.from(cols).map(col =>
                `"${col.innerText.replace(/"/g, '""')}"`
            );
            csvContent += rowData.join(",") + "\n";
        });

        // Get parameters from inputs
        const symbol = document.getElementById("symbolSelect").value;
        const dateFrom = document.getElementById("dateFrom").value;
        const dateTo = document.getElementById("dateTo").value;
        const modoDescarga = document.getElementById("modoHora").value;
        const time = modoDescarga === "MEJORES_HORARIOS"
            ? "best_hours"
            : document.getElementById("timeHour").value;
        const strategy = document.getElementById("strategySelect").value;
        const risk = document.getElementById("riskLevel").value;

        // Sanitize values for filename (replace ":" or "/" if needed)
        const clean = (str) => str.replace(/[:\/\\]/g, "-");

        const fileName = `backtesting_${symbol}_${clean(dateFrom)}_to_${clean(dateTo)}_${time}_${strategy}_${risk}.csv`;

        // Trigger download
        const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
        const url = URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.setAttribute("href", url);
        link.setAttribute("download", fileName);
        link.style.display = "none";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    });


    function mostrarGraficoEvolucion(evolutionData, fecha, strikes, tipo = "") {

        const x = evolutionData.map(p => p.timestamp);
        const yPL = evolutionData.map(p => p.profit_loss);
        const yPrice = evolutionData.map(p => p.underlying_price);

        const lang = document.documentElement.lang || 'es';
        const texts = {
            es: {
                title: `Evolución de P/L - (${strikes}) ${tipo ? `[${tipo}]` : ''}`,
                xLabel: "Hora",
                yLabelPL: "Ganancia / Pérdida ($)",
                yLabelPrice: "Precio",
                legendPL: "Ganancia / Pérdida"
            },
            en: {
                title: `P/L Evolution - (${strikes}) ${tipo ? `[${tipo}]` : ''}`,
                xLabel: "Time",
                yLabelPL: "Profit / Loss ($)",
                yLabelPrice: "Price",
                legendPL: "P/L"
            }
        };
        const t = texts[lang] || texts["es"];
        const isDarkMode = document.body.classList.contains("dark-mode");

        const tracePL = {
            x: x,
            y: yPL,
            type: 'scatter',
            mode: 'lines',
            name: t.legendPL,
            line: { shape: 'spline', width: 2 },
            yaxis: 'y1'
        };

        const tracePrice = {
            x: x,
            y: yPrice,
            type: 'scatter',
            mode: 'lines',
            name: t.yLabelPrice,
            line: { dash: 'dot', width: 1.5 },
            yaxis: 'y2'
        };

        const strikeBandLegend = {
            x: [null],
            y: [null],
            type: 'scatter',
            mode: 'markers',
            name: lang === 'es' ? 'Zona de Strikes' : 'Strike Zone',
            marker: {
                size: 10,
                color: 'rgba(255, 165, 0, 0.4)',  // color similar a fill de la banda
                symbol: 'square'
            },
            showlegend: true,
            hoverinfo: 'skip'
        };

        const layout = {
            title: {
                text: t.title,
                font: { size: 16 }  // ✅ Título más pequeño
            },
            xaxis: {
                title: t.xLabel,
                color: isDarkMode ? '#ccc' : '#333',
                gridcolor: isDarkMode ? '#444' : '#ccc',
                zerolinecolor: isDarkMode ? '#555' : '#aaa'
            },
            yaxis: {
                title: t.yLabelPL,
                tickprefix: '$',
                color: isDarkMode ? '#ccc' : '#333',
                gridcolor: isDarkMode ? '#444' : '#ccc',
                zerolinecolor: isDarkMode ? '#555' : '#aaa'
            },
            yaxis2: {
                title: t.yLabelPrice,
                overlaying: 'y',
                side: 'right',
                showgrid: false,
                color: isDarkMode ? '#ccc' : '#333'
            },
            legend: {
                orientation: 'h',
                x: 0.5,
                xanchor: 'center',
                y: 1.12
            },
            margin: { t: 100, l: 60, r: 60, b: 50 },  // ✅ Más espacio arriba
            shapes: [
                {
                    type: 'line',
                    xref: 'paper',
                    x0: 0,
                    x1: 1,
                    y0: 0,
                    y1: 0,
                    line: {
                        color: 'orange',
                        width: 2,
                        dash: 'dot'
                    }
                }
            ],
            plot_bgcolor: 'rgba(0,0,0,0)',
            paper_bgcolor: 'rgba(0,0,0,0)',
            font: { size: 14, color: isDarkMode ? 'white' : 'black' }
        };

        // 🎯 Agregar bandas de strikes si están en el formato adecuado
        if (strikes && typeof strikes === 'string') {
            const partes = strikes.trim().split(" ");
            partes.forEach(strikeStr => {
                const nums = strikeStr.split("/").map(s => parseFloat(s));
                if (nums.length === 2 && !isNaN(nums[0]) && !isNaN(nums[1])) {
                    const y0 = Math.min(nums[0], nums[1]);
                    const y1 = Math.max(nums[0], nums[1]);
                    layout.shapes.push({
                        type: 'rect',
                        xref: 'paper',
                        yref: 'y2',
                        x0: 0,
                        x1: 1,
                        y0: y0,
                        y1: y1,
                        fillcolor: 'rgba(255, 165, 0, 0.15)',
                        line: { width: 0 }
                    });
                }
            });
        }

        const modal = new bootstrap.Modal(document.getElementById('evolutionModal'));
        modal.show();

        const modalElement = document.getElementById('evolutionModal');
        modalElement.addEventListener('shown.bs.modal', function () {
            Plotly.newPlot('plotlyEvolutionChart', [tracePL, tracePrice, strikeBandLegend], layout, {
                responsive: true,
                displayModeBar: false
            });
            Plotly.Plots.resize('plotlyEvolutionChart');
        }, { once: true });
    }


    // ═══════════════════════════════════════════════════
    // PnL CALENDAR SQUARES
    // ═══════════════════════════════════════════════════
    function renderCalendarPnL(rows) {
        const section  = document.getElementById('sectionCalendarPnL');
        const grid     = document.getElementById('calPnlGrid');
        const summary  = document.getElementById('calSummaryText');
        const tooltip  = document.getElementById('calTooltip');
        if (!grid || !rows || rows.length === 0) { if (section) section.style.display = 'none'; return; }

        grid.innerHTML = '';

        const monthNames = {
            es: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
            en: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
        };
        const lang = (document.documentElement.lang || 'es').split('-')[0];
        const mNames = monthNames[lang] || monthNames.es;

        // Ordenar por fecha descendente — más nuevo arriba
        const sorted = [...rows].sort((a, b) => new Date(b.Day) - new Date(a.Day));

        // Agrupar por YYYY-MM (ya en orden descendente)
        const byMonth = {};
        const monthOrder = [];
        sorted.forEach(row => {
            const key = row.Day.slice(0, 7);
            if (!byMonth[key]) { byMonth[key] = []; monthOrder.push(key); }
            byMonth[key].push(row);
        });

        // Dentro de cada mes, ordenar ascendente (izq=día 1 → der=día 31)
        monthOrder.forEach(k => byMonth[k].sort((a, b) => new Date(a.Day) - new Date(b.Day)));

        let wins = 0, losses = 0;

        monthOrder.forEach(monthKey => {
            const monthRows = byMonth[monthKey];
            const [year, mon] = monthKey.split('-');
            const lbl = document.createElement('div');
            lbl.className = 'cal-month-label';
            lbl.textContent = `${mNames[parseInt(mon) - 1]} ${year}`;
            grid.appendChild(lbl);

            const row = document.createElement('div');
            row.className = 'cal-squares-row';

            monthRows.forEach(data => {
                const rawPL  = data['P/L'];
                const itm    = data['itmOtm'] ?? '';
                const day    = data['Day'];
                const credit = data['Credit'];
                const opt    = data['Option'] || data['option'] || '';

                // P/L leído del DOM (ajustado). Fallback a rawPL si no vino del DOM.
                const pl = data.adjustedPL ?? (rawPL != null ? parseFloat(rawPL) : null);

                let cls, plText, plColor;
                if (parseFloat(pl) >= 0) {
                    cls = 'cal-sq-win';  plText = `+$${parseFloat(pl).toFixed(2)}`; plColor = '#22c55e'; wins++;
                } else {
                    cls = 'cal-sq-loss'; plText = `-$${Math.abs(parseFloat(pl)).toFixed(2)}`; plColor = '#ef4444'; losses++;
                }

                const sq = document.createElement('div');
                sq.className = `cal-sq ${cls}`;

                sq.addEventListener('mouseenter', e => {
                    const lines = [
                        `<strong>${day}</strong>`,
                        `P/L: <strong style="color:${plColor || 'inherit'}">${plText}</strong>`,
                        credit != null ? `{{ _("Crédito") }}: $${parseFloat(credit).toFixed(2)}` : null,
                        itm && itm !== 'NO_ENTRY' ? `{{ _("Estado") }}: ${itm}` : null,
                        opt ? `{{ _("Tipo") }}: ${opt}` : null,
                    ].filter(Boolean).join('<br>');
                    tooltip.innerHTML = lines;
                    tooltip.style.display = 'block';
                });
                sq.addEventListener('mousemove', e => {
                    tooltip.style.left = (e.clientX + 14) + 'px';
                    tooltip.style.top  = (e.clientY - 10) + 'px';
                });
                sq.addEventListener('mouseleave', () => { tooltip.style.display = 'none'; });

                row.appendChild(sq);
            });

            grid.appendChild(row);
        });

        // Summary text
        const total = wins + losses;
        const pct   = total > 0 ? ((wins / total) * 100).toFixed(1) + '%' : '—';
        summary.textContent = `${wins}W / ${losses}L — Win rate ${pct}`;

        section.style.display = 'block';
    }
    // ═══════════════════════════════════════════════════


    // ═══════════════════════════════════════════════════
    // HEATMAP P/L PROMEDIO DÍA × MES
    // ═══════════════════════════════════════════════════
    function renderHeatmapDiaMes(rows) {
        const container = document.getElementById('calHeatmapGrid');
        if (!container || !rows || rows.length === 0) return;
        container.innerHTML = '';

        const lang = (document.documentElement.lang || 'es').split('-')[0];
        const dayNames = lang === 'en'
            ? ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
            : ['Lun', 'Mar', 'Mié', 'Jue', 'Vie'];
        const monthAbbr = lang === 'en'
            ? ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
            : ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'];

        // Acumular P/L ajustado por (mes, diaSemana) — leído del DOM vía adjustedPL
        const months = {};
        const cells  = {};

        rows.forEach(row => {
            const pl = row.adjustedPL;
            if (row['itmOtm'] === 'NO_ENTRY' || pl === null || pl === undefined || isNaN(pl)) return;
            const day   = row['Day'];
            const mKey  = day.slice(0, 7); // YYYY-MM
            const fecha = new Date(day + 'T00:00:00');
            const jsDay = fecha.getDay(); // 0=Dom
            const idx   = (jsDay + 6) % 7; // 0=Lun..4=Vie
            if (idx > 4) return;

            months[mKey] = true;
            const cKey = `${mKey}|${idx}`;
            if (!cells[cKey]) cells[cKey] = { sum: 0, count: 0 };
            cells[cKey].sum   += pl;
            cells[cKey].count += 1;
        });

        const monthKeys = Object.keys(months).sort();
        if (monthKeys.length === 0) return;

        // Calcular todos los promedios para normalizar colores
        const allAvgs = [];
        monthKeys.forEach(mk => {
            for (let d = 0; d < 5; d++) {
                const c = cells[`${mk}|${d}`];
                if (c && c.count > 0) allAvgs.push(c.sum / c.count);
            }
        });
        const maxAbs = Math.max(1, ...allAvgs.map(Math.abs));

        // Función de color: rojo → negro → verde según avg normalizado
        function toColor(avg) {
            const t = Math.max(-1, Math.min(1, avg / maxAbs)); // -1..1
            const isDark = document.body.classList.contains('dark-mode');
            if (t >= 0) {
                // negro→verde
                const r = Math.round((isDark ? 31  : 220) * (1 - t));
                const g = Math.round((isDark ? 197 : 34)  * t + (isDark ? 31 : 220) * (1 - t));
                const b = Math.round((isDark ? 31  : 220) * (1 - t) + (isDark ? 62 : 34) * t);
                return `rgb(${Math.round((isDark?31:220)*(1-t))},${Math.round(31+(197-31)*t)},${Math.round(31+(62-31)*t)})`;
            } else {
                // negro→rojo
                const abs = -t;
                return `rgb(${Math.round(31+(239-31)*abs)},${Math.round(31*(1-abs))},${Math.round(31*(1-abs))})`;
            }
        }

        function textColor(avg) {
            const intensity = Math.abs(avg) / maxAbs;
            return intensity > 0.25 ? '#ffffff' : (document.body.classList.contains('dark-mode') ? 'rgba(220,220,240,0.6)' : 'rgba(40,40,60,0.55)');
        }

        // Construir grid CSS: 1 col labels + N cols meses, 1 fila headers + 5 filas días
        const numCols = monthKeys.length;
        container.style.gridTemplateColumns = `auto repeat(${numCols}, minmax(44px, 1fr))`;
        container.style.gridTemplateRows    = `18px repeat(5, 34px)`;

        // Celda vacía esquina superior-izquierda
        const corner = document.createElement('div');
        container.appendChild(corner);

        // Headers de meses
        monthKeys.forEach(mk => {
            const [y, m] = mk.split('-');
            const el = document.createElement('div');
            el.className = 'hm-header';
            el.textContent = `${monthAbbr[parseInt(m)-1]} ${y.slice(2)}`;
            container.appendChild(el);
        });

        // Filas por día de semana
        for (let d = 0; d < 5; d++) {
            // Label del día
            const lbl = document.createElement('div');
            lbl.className = 'hm-row-label';
            lbl.textContent = dayNames[d];
            container.appendChild(lbl);

            // Celdas por mes
            monthKeys.forEach(mk => {
                const c   = cells[`${mk}|${d}`];
                const el  = document.createElement('div');
                el.className = 'hm-cell';

                if (c && c.count > 0) {
                    const avg = c.sum / c.count;
                    el.style.background = toColor(avg);
                    el.style.color      = textColor(avg);
                    el.textContent      = (avg >= 0 ? '+' : '') + '$' + Math.round(avg);

                    // Tooltip
                    const [y, m] = mk.split('-');
                    const mName  = monthAbbr[parseInt(m)-1];
                    el.title = `${dayNames[d]} · ${mName} ${y}\n${lang==='en'?'Days':'Días'}: ${c.count}\nAvg P/L: ${avg>=0?'+':''}$${avg.toFixed(2)}\nTotal: ${c.sum>=0?'+':''}$${c.sum.toFixed(2)}`;
                } else {
                    el.style.background = document.body.classList.contains('dark-mode')
                        ? 'rgba(255,255,255,0.04)'
                        : 'rgba(0,0,0,0.04)';
                    el.style.color = 'transparent';
                    el.textContent = '—';
                }

                container.appendChild(el);
            });
        }
    }
    // ═══════════════════════════════════════════════════


    function limpiarResultados() {
        // Limpiar tabla
        const tbody = document.querySelector('#resultTable tbody');
        if (tbody) tbody.innerHTML = '';
        const thead = document.getElementById('resultTableHead');
        if (thead) thead.innerHTML = '';

        // Ocultar contenedor de tabla y resumen
        document.getElementById('resultTableContainer').style.display = 'none';
        document.getElementById('resultSummary').style.display = 'none';

        // Ocultar calendario PnL
        const calSection = document.getElementById('sectionCalendarPnL');
        if (calSection) calSection.style.display = 'none';

        // Limpiar gráficos Plotly
        const charts = ['dashboardChartAcumulado', 'dashboardChartPLSemanal', 'dashboardChartMensual'];
        charts.forEach(id => {
            const chartDiv = document.getElementById(id);
            if (chartDiv) {
                Plotly.purge(chartDiv);
            }
        });

        // Resetear última referencia
        lastBacktestResult = null;
    }

    function calcularMaxRachaPositiva(data) {
        let maxRacha = 0;
        let rachaActual = 0;

        for (const dia of data) {
            const profit = parseFloat(dia.profit || dia["P/L"] || 0);
            if (profit > 0) {
                rachaActual++;
                if (rachaActual > maxRacha) maxRacha = rachaActual;
            } else {
                rachaActual = 0;
            }
        }

        return maxRacha;
    }
    function calcularMaxRachaNegativa(data) {
        let maxRacha = 0;
        let rachaActual = 0;

        for (const dia of data) {
            const profit = parseFloat(dia.profit || dia["P/L"] || 0);
            if (profit < 0) {
                rachaActual++;
                if (rachaActual > maxRacha) maxRacha = rachaActual;
            } else {
                rachaActual = 0;
            }
        }

        return maxRacha;
    }

    function calcularPromedios(data, contractCount, commissionPerLeg, numLegs) {
        let totalGanancias = 0;
        let totalPerdidas = 0;
        let countGanancias = 0;
        let countPerdidas = 0;

        data.forEach(row => {
            const rawPL = parseFloat(row['P/L']) || 0;
            const commission = commissionPerLeg * numLegs * contractCount;
            const adjusted = rawPL * contractCount - commission;

            if (adjusted > 0) {
                totalGanancias += adjusted;
                countGanancias++;
            } else if (adjusted < 0) {
                totalPerdidas += adjusted;
                countPerdidas++;
            }
        });

        return {
            promedioGanancias: countGanancias > 0 ? totalGanancias / countGanancias : 0,
            promedioPerdidas: countPerdidas > 0 ? totalPerdidas / countPerdidas : 0
        };
    }
    function calcularProfitFactor(data, contractCount, commissionPerLeg, numLegs) {
        let ganancias = 0;
        let perdidas = 0;

        data.forEach(row => {
            const rawPL = parseFloat(row['P/L']) || 0;
            const commission = commissionPerLeg * numLegs * contractCount;
            const adjustedPL = rawPL * contractCount - commission;

            if (adjustedPL > 0) ganancias += adjustedPL;
            else if (adjustedPL < 0) perdidas += Math.abs(adjustedPL);
        });

        return perdidas > 0 ? (ganancias / perdidas).toFixed(2) : "∞";
    }

    function calcularMaxDrawdown(data, contractCount, commissionPerLeg, numLegs) {
        let total = 0;
        const cumulative = [];

        data.forEach((row, i) => {
            const rawPL = parseFloat(row['P/L']) || 0;
            const commission = commissionPerLeg * numLegs * contractCount;
            const adjusted = rawPL * contractCount - commission;
            total += adjusted;

            // ✅ usar "Day"
            let fecha = row.Day || `Día ${i + 1}`;
            try {
                fecha = luxon.DateTime.fromISO(fecha).toFormat("dd/LLL");
            } catch (_) { }

            cumulative.push({ equity: total, date: fecha });
        });

        let maxEquity = -Infinity;
        let maxDrawdown = 0;
        let desde = "", hasta = "";
        let tempDesde = "";

        for (let i = 0; i < cumulative.length; i++) {
            const { equity, date } = cumulative[i];
            if (equity > maxEquity) {
                maxEquity = equity;
                tempDesde = date;
            }
            const drawdown = maxEquity - equity;
            if (drawdown > maxDrawdown) {
                maxDrawdown = drawdown;
                desde = tempDesde;
                hasta = date;
            }
        }

        return {
            value: `$ ${maxDrawdown.toFixed(2)}`,
            desde,
            hasta
        };
    }



    function renderPLPorDiaSemana(data) {
        if (!data || data.length === 0) {
            renderNoDataChart("chartHistogramaPL", plotTexts.noData || "No data");
            return;
        }
        const { contractCount, commissionPerLeg, numLegs } = getParametrosDesdeSession();

        // Locale desde <html lang="...">
        const langDoc = (document.documentElement.lang || 'es').toLowerCase();
        const baseLang = langDoc.split('-')[0]; // "es", "en", etc.
        const locale = baseLang === 'en' ? 'en-US' : 'es-ES';

        // Etiquetas por idioma (L-V)
        const labels = {
            es: ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes"],
            en: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
        };
        const diasSemana = labels[baseLang] || labels.es;

        // Acumulador por día (índice: Lun=0..Vie=4)
        const plPorDia = new Array(5).fill(0);

        const isDarkMode = document.body.classList.contains("dark-mode");

        data.forEach(row => {
            const rawPL = parseFloat(row['P/L']) || 0;
            const fecha = new Date((row['Day'] || row['day'] || row['Fecha']) + "T00:00:00");

            // JS: 0=Dom ... 6=Sáb  ->  Lun=0..Dom=6
            const jsDay = fecha.getDay();
            const weekdayIdx = (jsDay + 6) % 7;

            if (weekdayIdx >= 0 && weekdayIdx < 5) {
                const adjustedPL = rawPL * contractCount - commissionPerLeg * numLegs * contractCount;
                plPorDia[weekdayIdx] += adjustedPL;
            }
        });

        const y = plPorDia;
        const barColors = y.map(val => val >= 0 ? 'green' : 'red');


        const trace = {
            x: diasSemana,
            y,
            type: 'bar',
            marker: { color: barColors },
            text: y.map(val => "$" + Math.round(val)),
            textposition: 'outside',
            insidetextfont: { color: '#ffffff' },
            textfont: { color: isDarkMode ? 'white' : 'black', size: 10 },
            hoverinfo: 'none',
            cliponaxis: false
        };

        const layout = {
            barmode: 'stack',
            autosize: true,
            margin: { t: 20, b: 20, l: 0, r: 0 },
            font: { size: 10, color: isDarkMode ? 'white' : 'black' },
            yaxis: { visible: false, showticklabels: false, showgrid: false, zeroline: false },
            xaxis: { tickfont: { size: 11, color: isDarkMode ? '#ccc' : '#333' } },
            plot_bgcolor: 'rgba(0,0,0,0)',
            paper_bgcolor: 'rgba(0,0,0,0)',
            showlegend: false,
            dragmode: false,
            hovermode: false,
            selectdirection: false
        };

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

        Plotly.newPlot("chartHistogramaPL", [trace], layout, config).then(() => {
            window.dispatchEvent(new Event("resize"));
        });
    }



    function renderWinLossPorDiaSemana(data) {
        if (!data || data.length === 0) {
            renderNoDataChart("chartHistogramaWL", plotTexts.noData || "No data");
            return;
        }
        // Locale desde <html lang="...">
        const langDoc = (document.documentElement.lang || 'es').toLowerCase();
        const baseLang = langDoc.split('-')[0]; // "es", "en", etc.

        // Etiquetas por idioma (L-V)
        const labels = {
            es: ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes"],
            en: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
        };
        const diasSemana = labels[baseLang] || labels.es;

        // Contadores por día (Lun=0..Vie=4)
        const winCount = new Array(5).fill(0);
        const lossCount = new Array(5).fill(0);

        const isDarkMode = document.body.classList.contains("dark-mode");

        data.forEach(row => {
            const pl = parseFloat(row['P/L']) || 0;
            const dateStr = row['Day'] || row['day'] || row['Fecha'];
            if (!dateStr) return;

            const fecha = new Date(dateStr + "T00:00:00");
            if (isNaN(fecha)) return;

            // JS: 0=Dom ... 6=Sáb  -> Lunes=0..Dom=6
            const jsDay = fecha.getDay();
            const idx = (jsDay + 6) % 7;

            if (idx >= 0 && idx < 5) {
                if (pl > 0) winCount[idx] += 1;
                else if (pl < 0) lossCount[idx] += 1;
            }
        });

        const lossTextColor = isDarkMode ? 'white' : 'black';

        const traceWin = {
            x: diasSemana,
            y: winCount,
            type: 'bar',
            marker: { color: 'green' },
            text: winCount.map(v => String(v)),
            textposition: 'inside',
            textfont: { color: 'white', size: 9 }
        };

        const traceLoss = {
            x: diasSemana,
            y: lossCount,
            type: 'bar',
            marker: { color: 'red' },
            text: lossCount.map(v => String(v)),
            textposition: 'inside',
            textfont: { color: lossTextColor, size: 9 }
        };

        const layout = {
            barmode: 'stack',
            margin: { t: 10, b: 20, l: 0, r: 0 },
            font: { size: 11, color: isDarkMode ? 'white' : 'black' },
            xaxis: { tickfont: { size: 11, color: isDarkMode ? '#ccc' : '#333' } },
            yaxis: { tickfont: { size: 9 }, showgrid: false, zeroline: false },
            showlegend: false,
            plot_bgcolor: 'rgba(0,0,0,0)',
            paper_bgcolor: 'rgba(0,0,0,0)'
        };

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

        Plotly.newPlot("chartHistogramaWL", [traceWin, traceLoss], layout, config).then(() => {
            window.dispatchEvent(new Event("resize"));
        });
    }







    function renderAvgProfitVsLoss(data) {

        if (!data || data.length === 0) {
            renderNoDataChart("chartAvgProfitLoss", plotTexts.noData || "No data");
            return;
        }

        const { contractCount, commissionPerLeg, numLegs } = getParametrosDesdeSession();

        let totalGain = 0;
        let totalLoss = 0;
        let gainCount = 0;
        let lossCount = 0;

        data.forEach(row => {
            const rawPL = parseFloat(row["P/L"]) || 0;
            const adjustedPL = rawPL * contractCount - commissionPerLeg * numLegs * contractCount;

            if (adjustedPL > 0) {
                totalGain += adjustedPL;
                gainCount++;
            } else if (adjustedPL < 0) {
                totalLoss += adjustedPL;
                lossCount++;
            }
        });

        const avgGain = gainCount > 0 ? totalGain / gainCount : 0;
        const avgLoss = lossCount > 0 ? totalLoss / lossCount : 0;

        const isDarkMode = document.body.classList.contains("dark-mode");

        const trace = {
            x: [
                '{{ _("Ganancia Promedio") }}',
                '{{ _("Pérdida Promedio") }}'
            ],
            y: [avgGain, Math.abs(avgLoss)],
            type: "bar",
            marker: {
                color: ["green", "red"]
            },
            text: [
                `$${avgGain.toFixed(0)}`,
                `$${Math.abs(avgLoss).toFixed(0)}`
            ],
            textposition: "inside",
            textfont: {
                color: isDarkMode ? "white" : "black",
                size: 11
            },
            hoverinfo: "none"
        };

        const layout = {
            margin: { t: 30, b: 20, l: 10, r: 10 },
            font: {
                size: 10,
                color: isDarkMode ? "white" : "black"
            },
            yaxis: {
                visible: false

            },
            xaxis: {
                tickfont: { size: 11 }
            },
            plot_bgcolor: "rgba(0,0,0,0)",
            paper_bgcolor: "rgba(0,0,0,0)",
            showlegend: false
        };

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

        Plotly.newPlot("chartAvgProfitLoss", [trace], layout, config).then(() => {
            window.dispatchEvent(new Event("resize"));
        });
    }


    function renderPieCallsPuts(data) {

        if (!data || data.length === 0) {
            renderNoDataChart("chartPieCallsPuts", plotTexts.noData || "No data");
            return;
        }
        const chartId = "chartPieCallsPuts";
        const container = document.getElementById(chartId);
        if (!container) return;

        const isDark = document.body.classList.contains("dark-mode");
        const hasOptionField = Array.isArray(data) && data.some(r => r.Option);

        const layout = {
            autosize: true,
            hovermode: false,

            margin: { t: 30, b: 10, l: 10, r: 10 },
            paper_bgcolor: "rgba(0,0,0,0)",
            plot_bgcolor: "rgba(0,0,0,0)",
            font: {
                color: isDark ? "white" : "black",
                size: 13
            },
            showlegend: false,
            title: {
                text: hasOptionField
                    ? plotTexts.pieTitleVertical
                    : plotTexts.pieTitleIronCondor,
                font: { size: 14 }
            }
        };

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

        /* ===========================
           SIN DATOS
        =========================== */
        if (!Array.isArray(data) || data.length === 0) {
            Plotly.react(chartId, [{
                type: "pie",
                values: [1],
                labels: [""],
                hole: 0.35,
                textinfo: "none",
                marker: { colors: ["rgba(150,150,150,0.15)"] }
            }], layout, config);
            return;
        }

        /* ===========================
           VERTICAL
        =========================== */
        if (hasOptionField) {
            let call = 0, put = 0;

            data.forEach(r => {
                if ((Number(r["P/L"]) || 0) > 0) {
                    if (r.Option === "CALL") call++;
                    if (r.Option === "PUT") put++;
                }
            });

            if (call + put === 0) {
                Plotly.purge(chartId);
                return;
            }

            Plotly.react(chartId, [{
                type: "pie",
                labels: ["CALL", "PUT"],
                values: [call, put],
                textinfo: "label+percent",
                textposition: "inside",
                sort: false,
                hole: 0,
                marker: { colors: ["#1f77b4", "#ff7f0e"] }
            }], layout, config);
        }

        /* ===========================
           IRON CONDOR
        =========================== */
        else {
            let win = 0, loss = 0;

            data.forEach(r => {
                const pl = Number(r["P/L"]) || 0;
                if (pl > 0) win++;
                if (pl < 0) loss++;
            });

            if (win + loss === 0) {
                Plotly.purge(chartId);
                return;
            }

            Plotly.react(chartId, [{
                type: "pie",
                labels: [plotTexts.plGananciaLabel, plotTexts.plPerdidaLabel],
                values: [win, loss],
                textinfo: "label+percent",
                textposition: "inside",
                sort: false,
                hole: 0.25,
                marker: { colors: ["#22c55e", "#ef4444"] }
            }], layout, config);
        }
    }



    function getParametrosDesdeSession() {
        return {
            contractCount: parseInt(sessionStorage.getItem("contractCount")) || 1,
            commissionPerLeg: parseFloat(sessionStorage.getItem("commissionPerLeg")) || 0,
            numLegs: parseInt(sessionStorage.getItem("numLegs")) || 2
        };
    }







</script>
<style>
    /* Modal Mejores Horarios */
    #modalMejoresHorarios .modal-header {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        border-bottom: 1px solid rgba(255, 193, 7, 0.3);
        padding: 0.75rem 1rem;
    }

    #modalMejoresHorarios .modal-title {
        font-size: 0.9rem;
    }

    #modalMejoresHorarios .modal-subtitle {
        font-size: 0.72rem;
        color: rgba(255, 255, 255, 0.55);
        letter-spacing: 0.03em;
    }

    #modalMejoresHorarios .modal-body {
        padding: 0;
        max-height: 75vh;
        overflow-y: auto;
    }

    /* Tabla */
    #modalMejoresHorarios table {
        font-size: 0.78rem;
        margin-bottom: 0;
    }

    #modalMejoresHorarios thead th {
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: 0.4rem 0.6rem;
        white-space: nowrap;
    }

    #modalMejoresHorarios tbody td {
        padding: 0.35rem 0.6rem;
        vertical-align: middle;
    }

    /* Semana col */
    #modalMejoresHorarios .col-semana {
        font-size: 0.73rem;
        font-weight: 600;
        white-space: nowrap;
        color: #adb5bd;
    }

    body:not(.dark-mode) #modalMejoresHorarios .col-semana {
        color: #495057;
    }

    /* Badges hora */
    .mh-badge {
        display: inline-block;
        padding: 0.2em 0.55em;
        border-radius: 4px;
        font-weight: 700;
        font-size: 0.8rem;
        letter-spacing: 0.02em;
    }

    .mh-badge-1 {
        background: rgba(255, 193, 7, 0.18);
        color: #ffc107;
        border: 1px solid rgba(255, 193, 7, 0.35);
    }

    .mh-badge-2 {
        background: rgba(108, 117, 125, 0.15);
        color: #adb5bd;
        border: 1px solid rgba(108, 117, 125, 0.3);
    }

    .mh-badge-3 {
        background: rgba(205, 127, 50, 0.12);
        color: #cd7f32;
        border: 1px solid rgba(205, 127, 50, 0.25);
    }

    body:not(.dark-mode) .mh-badge-1 {
        background: #fff8e1;
        color: #b8860b;
        border-color: #ffc107;
    }

    body:not(.dark-mode) .mh-badge-2 {
        background: #f1f3f5;
        color: #495057;
        border-color: #ced4da;
    }

    body:not(.dark-mode) .mh-badge-3 {
        background: #fdf6ec;
        color: #8B5E1A;
        border-color: #e0a060;
    }

    .mh-profit {
        font-size: 0.68rem;
        color: #6c757d;
        margin-top: 1px;
    }

    body:not(.dark-mode) .mh-profit {
        color: #868e96;
    }

    /* Fila hover */
    body.dark-mode #modalMejoresHorarios tbody tr:hover {
        background: rgba(255, 255, 255, 0.04);
    }

    body:not(.dark-mode) #modalMejoresHorarios tbody tr:hover {
        background: #f8f9fa;
    }

    /* Dark mode modal */
    body.dark-mode #modalMejoresHorarios .modal-content {
        background: #1e1e2e;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    body.dark-mode #modalMejoresHorarios thead {
        background: #12121e;
    }

    body.dark-mode #modalMejoresHorarios thead th {
        color: #adb5bd;
        border-color: rgba(255, 255, 255, 0.08);
    }

    body.dark-mode #modalMejoresHorarios tbody td {
        border-color: rgba(255, 255, 255, 0.06);
    }

    /* Light mode modal */
    body:not(.dark-mode) #modalMejoresHorarios .modal-content {
        background: #fff;
    }

    body:not(.dark-mode) #modalMejoresHorarios thead {
        background: #343a40;
    }

    body:not(.dark-mode) #modalMejoresHorarios tbody td {
        border-color: #dee2e6;
    }

    @keyframes pulse-bar {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.45;
        }
    }

    .progress-bar-pulsing {
        animation: pulse-bar 1.1s ease-in-out infinite !important;
    }

    #progressWaitMsg {
        font-size: 0.78rem;
        color: #f0a500;
        margin-top: 6px;
        min-height: 1.2em;
    }
</style>

<div class="modal fade" id="modalMejoresHorarios" tabindex="-1" aria-labelledby="modalMejoresHorariosLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable" style="margin-top:60px;">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title text-white" id="modalMejoresHorariosLabel">
                        <i class="fas fa-star me-2 text-warning" style="font-size:0.85rem;"></i>
                        <span id="mhTitulo">{{ _('Mejores Horarios') }}</span>
                    </h5>
                    <div class="modal-subtitle mt-1" id="mhSubtitulo"></div>
                </div>
                <button type="button" class="btn-close btn-close-white ms-3" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">

                <!-- Loading -->
                <div id="mejoresHorariosLoading" class="text-center py-5">
                    <div class="spinner-border text-warning spinner-border-sm" role="status"></div>
                    <div class="mt-2 text-muted" style="font-size:0.75rem;">{{ _('Cargando...') }}</div>
                </div>

                <!-- Content: tabla arriba, chart abajo -->
                <div id="mejoresHorariosContent" class="d-none">

                    <!-- Tabla -->
                    <div style="overflow-x:auto; border-bottom:0.5px solid rgba(255,255,255,0.08);">
                        <table class="table table-borderless w-100 mb-0">
                            <thead>
                                <tr>
                                    <th>{{ _('Semana') }}</th>
                                    <th class="text-center">{{ _('🥇 TOP 1') }}</th>
                                    <th class="text-center">{{ _('🥈 TOP 2') }}</th>
                                    <th class="text-center">{{ _('🥉 TOP 3') }}</th>
                                </tr>
                            </thead>
                            <tbody id="mejoresHorariosBody"></tbody>
                        </table>
                    </div>

                    <!-- Chart panel -->
                    <div style="padding:16px 18px 18px;">
                        <div
                            style="display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px;">
                            <div>
                                <span style="font-size:13px; font-weight:600;">{{ _('Evolución TOP 1') }}</span>
                                <span style="font-size:11px; color:#888; margin-left:8px;">{{ _('por semana') }}</span>
                            </div>
                            <!-- Tab switcher -->
                            <div style="display:flex; gap:4px;">
                                <button id="mhTabPnl" onclick="mhSwitchTab('pnl')"
                                    style="font-size:11px; padding:4px 12px; border-radius:6px; border:0.5px solid rgba(255,255,255,0.15); background:#4F46E5; color:#fff; cursor:pointer; font-weight:600;">
                                    PnL $
                                </button>
                                <button id="mhTabHora" onclick="mhSwitchTab('hora')"
                                    style="font-size:11px; padding:4px 12px; border-radius:6px; border:0.5px solid rgba(255,255,255,0.15); background:transparent; color:#888; cursor:pointer; font-weight:600;">
                                    {{ _('Horario') }}
                                </button>
                            </div>
                        </div>
                        <!-- Charts -->
                        <div style="position:relative; height:300px;">
                            <canvas id="mhChartPnl"></canvas>
                            <canvas id="mhChartHora" style="display:none;"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Error -->
                <div id="mejoresHorariosError" class="d-none text-center py-5 px-3" style="font-size:0.78rem;">
                    <i class="fas fa-folder-open mb-2 d-block" style="font-size:1.8rem; color:#6c757d;"></i>
                    <span id="mejoresHorariosErrorMsg" style="color:#adb5bd;"></span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    let mhChartPnlInst = null;
    let mhChartHoraInst = null;

    function mhSwitchTab(tab) {
        const isPnl = tab === 'pnl';
        document.getElementById('mhChartPnl').style.display = isPnl ? 'block' : 'none';
        document.getElementById('mhChartHora').style.display = isPnl ? 'none' : 'block';
        document.getElementById('mhTabPnl').style.background = isPnl ? '#4F46E5' : 'transparent';
        document.getElementById('mhTabPnl').style.color = isPnl ? '#fff' : '#888';
        document.getElementById('mhTabHora').style.background = isPnl ? 'transparent' : '#B45309';
        document.getElementById('mhTabHora').style.color = isPnl ? '#888' : '#fff';
    }

    function mhHoraToNum(h) {
        const s = String(h).padStart(4, '0');
        return parseInt(s.slice(0, 2)) + parseInt(s.slice(2)) / 60;
    }
    function mhNumToHora(n) {
        const hh = Math.floor(n);
        const mm = Math.round((n - hh) * 60);
        return `${String(hh).padStart(2, '0')}:${String(mm).padStart(2, '0')}`;
    }

    async function abrirModalMejoresHorarios() {
        const modal = new bootstrap.Modal(document.getElementById('modalMejoresHorarios'));
        modal.show();

        document.getElementById('mejoresHorariosLoading').classList.remove('d-none');
        document.getElementById('mejoresHorariosContent').classList.add('d-none');
        document.getElementById('mejoresHorariosError').classList.add('d-none');

        const symbol = document.getElementById('symbolSelect').value;
        const estrategia = document.getElementById('strategySelect').value;
        const risk = document.getElementById('riskLevel').value;

        const riesgoLabel = {
            'conservador': 'Conservador', 'intermedio': 'Intermedio',
            'agresivo': 'Agresivo', 'ultra_agresivo': 'Ultra Agresivo'
        };
        document.getElementById('mhTitulo').textContent = `${symbol} · ${estrategia} · ${riesgoLabel[risk] || risk}`;

        try {
            const resp = await fetch(`/backtestingIdea2/get_mejores_horarios?symbol=${symbol}&estrategia=${estrategia}&risk=${risk}`, { headers: { 'Accept': 'application/json' } });
            if (!resp.ok) {
                let msg = `HTTP ${resp.status}`;
                try { const errData = await resp.json(); if (errData.error) msg = errData.error; } catch (_) { }
                if (resp.status === 404) {
                    msg = `{{ _('No se encontraron horarios para') }} ${symbol} · ${estrategia} · ${riesgoLabel[risk] || risk}. {{ _('El archivo CSV aún no existe para esta combinación.') }}`;
                }
                throw new Error(msg);
            }
            const data = await resp.json();
            if (!data.semanas || data.semanas.length === 0)
                throw new Error('{{ _("Sin datos disponibles para esta combinación.") }}');

            const fmtHora = h => h ? `${String(h).padStart(4, '0').slice(0, 2)}:${String(h).padStart(4, '0').slice(2)}` : '-';
            const fmtProfit = p => p != null ? `$${Number(p).toFixed(1)}` : '';

            /* ── Tabla ── */
            const tbody = document.getElementById('mejoresHorariosBody');
            tbody.innerHTML = '';
            const cell = (t, cls) => t
                ? `<td class="text-center">
                   <span class="mh-badge ${cls}">${fmtHora(t.hora)}</span>
                   <div class="mh-profit">${fmtProfit(t.profit)}</div>
               </td>`
                : `<td class="text-center"><span class="mh-badge mh-badge-2">-</span></td>`;

            const fmtSemana = semana => {
                if (semana.end_date) {
                    const ed = new Date(semana.end_date + 'T00:00:00');
                    const lunes = new Date(ed); lunes.setDate(ed.getDate() + 3);
                    const vier = new Date(ed); vier.setDate(ed.getDate() + 7);
                    const fmt = d => d.toISOString().slice(0, 10);
                    return `${fmt(lunes)} → ${fmt(vier)}`;
                }
                return semana.semana;
            };

            data.semanas.forEach(semana => {
                const [t1, t2, t3] = [semana.rankings[0], semana.rankings[1], semana.rankings[2]];
                tbody.innerHTML += `<tr>
                <td class="col-semana">${fmtSemana(semana)}</td>
                ${cell(t1, 'mh-badge-1')}
                ${cell(t2, 'mh-badge-2')}
                ${cell(t3, 'mh-badge-3')}
            </tr>`;
            });

            /* ── Datos para charts (orden cronológico = reversed) ── */
            const semanas = [...data.semanas].reverse();
            const labels = semanas.map(s => {
                if (s.end_date) {
                    const ed = new Date(s.end_date + 'T00:00:00');
                    const lunes = new Date(ed); lunes.setDate(ed.getDate() + 3);
                    return lunes.toISOString().slice(0, 10); // YYYY-MM-DD completo
                }
                return s.semana;
            });
            const pnlData = semanas.map(s => s.rankings[0] ? Number(s.rankings[0].profit) : null);
            const horaData = semanas.map(s => s.rankings[0] ? mhHoraToNum(s.rankings[0].hora) : null);
            const avgPnl = pnlData.filter(Boolean).reduce((a, b) => a + b, 0) / pnlData.filter(Boolean).length;

            /* destroy previous instances */
            if (mhChartPnlInst) { mhChartPnlInst.destroy(); mhChartPnlInst = null; }
            if (mhChartHoraInst) { mhChartHoraInst.destroy(); mhChartHoraInst = null; }

            const xTickConfig = { color: '#888', font: { size: 10 }, maxRotation: 90, minRotation: 90, autoSkip: true, maxTicksLimit: 14 };

            /* Chart PnL */
            mhChartPnlInst = new Chart(document.getElementById('mhChartPnl'), {
                type: 'bar',
                data: {
                    labels,
                    datasets: [{
                        data: pnlData,
                        backgroundColor: '#4F46E5',
                        borderRadius: 4,
                    }]
                },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: { callbacks: { label: ctx => `$${Number(ctx.raw).toLocaleString('en-US', { maximumFractionDigits: 0 })}` } }
                    },
                    scales: {
                        x: { ticks: xTickConfig, grid: { display: false } },
                        y: { ticks: { color: '#888', font: { size: 10 }, callback: v => '$' + (v / 1000).toFixed(1) + 'k' }, grid: { color: 'rgba(255,255,255,0.05)' } }
                    }
                }
            });

            /* Chart Horario — scatter sin líneas de unión */
            const horaMin = Math.min(...horaData.filter(Boolean)) - 0.25;
            const horaMax = Math.max(...horaData.filter(Boolean)) + 0.25;
            const scatterData = horaData.map((v, i) => v != null ? { x: i, y: v } : null).filter(Boolean);
            mhChartHoraInst = new Chart(document.getElementById('mhChartHora'), {
                type: 'scatter',
                data: {
                    datasets: [{
                        data: scatterData,
                        backgroundColor: '#4F46E5',
                        pointRadius: 6, pointHoverRadius: 8,
                    }]
                },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: ctx => `${labels[ctx.raw.x]}  →  ${mhNumToHora(ctx.raw.y)}`
                            }
                        }
                    },
                    scales: {
                        x: {
                            type: 'linear', min: -0.5, max: labels.length - 0.5,
                            ticks: {
                                color: '#888', font: { size: 10 }, maxRotation: 90, minRotation: 90, autoSkip: true, maxTicksLimit: 14,
                                callback: v => Number.isInteger(v) && labels[v] ? labels[v] : ''
                            },
                            grid: { display: false }
                        },
                        y: {
                            min: horaMin, max: horaMax,
                            ticks: { color: '#888', font: { size: 10 }, stepSize: 0.25, callback: v => mhNumToHora(v) },
                            grid: { color: 'rgba(255,255,255,0.05)' }
                        }
                    }
                }
            });

            /* reset tab to PnL */
            mhSwitchTab('pnl');

            document.getElementById('mejoresHorariosLoading').classList.add('d-none');
            document.getElementById('mejoresHorariosContent').classList.remove('d-none');

        } catch (e) {
            document.getElementById('mejoresHorariosLoading').classList.add('d-none');
            if (typeof resp !== 'undefined' && resp.status === 401) {
                showFlashMessage("{{ _('Tu sesión fue cerrada porque iniciaste sesión en otro dispositivo.') }}", "warning");
                setTimeout(() => window.location.href = '/login?expired=2', 2000);
            } else {
                const errDiv = document.getElementById('mejoresHorariosError');
                document.getElementById('mejoresHorariosErrorMsg').textContent = e.message;
                errDiv.classList.remove('d-none');
            }
        }
    }
</script>

{% endblock %}