{% 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-backtestingidea.css') }}">
<script src="https://cdn.plot.ly/plotly-2.32.0.min.js"></script>

<style>
    .modal-backdrop.show {
        opacity: 0.7 !important;
    }

    /* 1) Agranda el área clickeable de las flechas */
    #carouselSymbols .carousel-control-prev,
    #carouselSymbols .carousel-control-next {
        width: 4rem;
        /* antes ~2rem */
        opacity: 0.9;
        /* se ven un poco más */
    }

    /* 2) Agranda el ícono de la flecha */
    #carouselSymbols .carousel-control-prev-icon,
    #carouselSymbols .carousel-control-next-icon {
        width: 2.4rem;
        height: 2.4rem;
        background-size: 100% 100%;
        /* si el fondo es claro y quieres flechas oscuras:
    filter: invert(1) grayscale(100%);
    */
    }

    /* 3) Reserva espacio lateral para que el texto no quede debajo de las flechas */
    #carouselSymbols .carousel-inner {
        padding: 0 4.5rem;
        /* deja espacio para las flechas agrandadas */
    }

    /* Ajuste responsive */
    @media (max-width: 767.98px) {
        #carouselSymbols .carousel-inner {
            padding: 0 3.25rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<main>
    <div id="loadingOverlay" class="loading-overlay" style="display: none;">
        <div class="spinner-container text-center">
            <div class="spinner-border text-primary" 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"></p>
        </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>

    <!-- Encabezado superior del card -->
    <div class="text-center mb-3">
        <h5 class="fw-semibold mb-1">{{ _('Simulador de Backtesting') }}</h5>
        <p class="small text-center mb-2">
            {{ _('Analiza estrategias Verticales e Iron Condor con datos reales y optimiza tu toma de decisiones.') }}
        </p>
    </div>



    <section class="container my-4">

        <div class="container px-2 px-md-4 my-4 ">

            <div class="card border-0 shadow-sm p-3 p-md-4 dynamic-bg full-bleed">
                <div class="container-xl px-2">

                    <!-- Leyenda superior -->
                    <div class="text-center mb-3">
                        <h6 class="fw-bold">
                            {{ _('MEJORES HORARIOS - VERTICAL') }} <span id="symbol-active">SPX</span>
                        </h6>
                    </div>

                    <div id="carouselSymbols" class="carousel slide" data-bs-interval="false" data-bs-wrap="false"
                        data-bs-touch="false">
                        <div class="carousel-indicators" id="carousel-indicators"></div>

                        <div class="carousel-inner" id="carousel-inner"></div>

                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselSymbols"
                            data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Prev</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselSymbols"
                            data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </div>
            </div>




        </div>
        <div class="card dynamic-bg shadow-lg border-secondary rounded-4">

            <div class="card-body py-4 px-3">
                <div id="controls" class="text-center">
                    <div class="d-flex flex-wrap justify-content-center align-items-center gap-3">

                        <!-- Símbolo -->
                        <div class="d-flex flex-column flex-sm-row align-items-center gap-1">
                            <label for="symbolSelect" class="mb-0">{{ _('Símbolo:') }}</label>
                            <select id="symbolSelect" class="form-select form-select-sm rounded"
                                style="width: auto; min-width: 80px;">
                                <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>

                        <!-- Desde -->
                        <div class="d-flex flex-column flex-sm-row align-items-center gap-1">
                            <label for="dateFrom" class="mb-0">{{ _('Desde') }}:</label>
                            <input type="text" id="dateFrom" class="form-control form-control-sm rounded" readonly
                                style="width: auto; min-width: 120px;">
                        </div>

                        <!-- Hasta -->
                        <div class="d-flex flex-column flex-sm-row align-items-center gap-1">
                            <label for="dateTo" class="mb-0">{{ _('Hasta') }}:</label>
                            <input type="text" id="dateTo" class="form-control form-control-sm rounded" readonly
                                style="width: auto; min-width: 120px;">
                        </div>

                        <!-- Hora -->
                        <div class="d-flex flex-column flex-sm-row align-items-center gap-1">
                            <label for="timeHour" class="mb-0">{{ _('Hora:') }}</label>
                            <select id="timeHour" class="form-select form-select-sm rounded"
                                style="width: auto; min-width: 85px;">
                                {% 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) %} <option value="{{ time_value }}" {% if time_value=='1210' %}selected{%
                                    endif %}>
                                    {{ time_value[:2] }}:{{ time_value[2:] }}
                                    </option>
                                    {% endif %}
                                    {% endfor %}
                                    {% endfor %}
                            </select>
                        </div>

                        <!-- Estrategia -->
                        <div class="d-flex flex-column flex-sm-row align-items-center gap-1">
                            <label for="strategySelect" class="mb-0">{{ _('Estrategia:') }}</label>
                            <select id="strategySelect" class="form-select form-select-sm rounded"
                                style="width: auto; min-width: 110px;">
                                <option value="Vertical">{{ _('Vertical') }}</option>
                                <option value="IronCondor">{{ _('Iron Condor') }}</option>
                            </select>
                        </div>

                        <!-- Riesgo -->
                        <div class="d-flex flex-column flex-sm-row align-items-center gap-1">
                            <label for="riskLevel" class="mb-0">{{ _('Riesgo:') }}</label>
                            <select id="riskLevel" class="form-select form-select-sm rounded"
                                style="width: auto; min-width: 120px;">
                                <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>

                        <!-- Botón principal + engranaje -->
                        <div class="d-flex align-items-center gap-2 mt-2 mt-sm-0">
                            <button id="loadButton" class="btn btn-success btn-sm fw-bold">
                                {{ _('Mostrar Backtesting') }}
                            </button>
                            <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
                                data-bs-target="#modalParametros">
                                ⚙️
                            </button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>





    <!-- Nuevo DASHBOARD VISUAL -->
    <div class="container-fluid my-5" id="dashboardVisual" style="display: none;">
        <div class="row g-4">

            <!-- KPIs estilo lista profesional Power BI -->
            <div class="col-12 col-lg-2">
                <div id="resultSummary" style="display: none;" class="small">

                    <!-- Título -->
                    <h6 class="fw-bold text-uppercase mb-2" style="font-size: 0.85rem; letter-spacing: 0.5px;">
                        {{ _('Resumen del Backtesting') }}
                    </h6>

                    <!-- Destacado: Ganancia/Pérdida -->
                    <div id="profitRow" class="mb-2 p-2 rounded-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <div class="text-uppercase" style="font-size:.75rem; letter-spacing:.5px; color:#aaa;">
                                    {{ _('Ganancia/Pérdida') }}
                                </div>
                                <div class="d-flex align-items-center gap-2">
                                    <!-- número grande -->
                                    <span id="profitTotal" class="fw-bold"
                                        style="font-size:1.9rem; line-height:1;">$0.00</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between py-1 border-bottom">
                        <span style="color: #aaa;">{{ _('Contratos') }} / {{ _('Comisión') }}</span>
                        <span><span id="resumenContratos" class="fw-semibold">—</span> — $<span id="resumenComision"
                                class="fw-semibold">—</span></span>
                    </div>


                    <div class="d-flex justify-content-between py-1 border-bottom">
                        <span style="color: #aaa;">{{ _('Días Totales') }}</span>
                        <span id="totalDays" class="fw-semibold">0</span>
                    </div>
                    <div class="d-flex justify-content-between py-1 border-bottom">
                        <span style="color: #aaa;">{{ _('Días Ganadores') }}</span>
                        <span id="winDays" class="fw-semibold text-success">0</span>
                    </div>

                    <div class="d-flex justify-content-between py-1 border-bottom">
                        <span style="color: #aaa;">{{ _('Días Perdedores') }}</span>
                        <span id="lossDays" class="fw-semibold text-danger">0</span>
                    </div>

                    <div class="d-flex justify-content-between py-1 border-bottom">
                        <span style="color: #aaa;">{{ _('Win Rate') }}</span>
                        <span id="winRate" class="fw-semibold text-warning">0%</span>
                    </div>

                    <div class="d-flex justify-content-between py-1 border-bottom">
                        <span style="color: #aaa;">{{ _('Max Racha Positiva') }}</span>
                        <span id="maxRachaPositiva" class="fw-semibold">0</span>
                    </div>


                    <div class="d-flex justify-content-between py-1 border-bottom">
                        <span style="color: #aaa;">{{ _('Max Racha Negativa') }}</span>
                        <span id="maxRachaNegativa" class="fw-semibold text-danger">0</span>
                    </div>


                    <!-- Promedio de Ganancias -->
                    <div class="d-flex justify-content-between py-1 border-bottom">
                        <span style="color: #aaa;">{{ _('Promedio de Ganancias') }}</span>
                        <span id="promedioGanancias" class="fw-semibold text-success">$0.00</span>
                    </div>

                    <!-- Promedio de Pérdidas -->
                    <div class="d-flex justify-content-between py-1 border-bottom">
                        <span style="color: #aaa;">{{ _('Promedio de Pérdidas') }}</span>
                        <span id="promedioPerdidas" class="fw-semibold text-danger">$0.00</span>
                    </div>

                    <!-- Profit Factor -->
                    <div class="d-flex justify-content-between py-1 border-bottom">
                        <span style="color: #aaa;">{{ _('Profit Factor') }}</span>
                        <span id="profitFactor" class="fw-semibold">—</span>
                    </div>

                    <!-- Max Drawdown -->
                    <div class="d-flex justify-content-between py-1 border-bottom">
                        <span style="color: #aaa;">{{ _('Max Drawdown') }}</span>
                        <span id="maxDrawdown" class="fw-semibold text-danger">—</span>
                    </div>
                    <div class="d-flex justify-content-between py-1 border-bottom">
                        <span style="color: #aaa;">{{ _('Periodo Drawdown') }}</span>
                        <span id="maxDrawdownDates" class="fw-semibold">—</span>
                    </div>


                </div>
            </div>

            <!-- Gráficos -->
            <div class="col-12 col-lg-10">
                <div class="row g-4">

                    <!-- Columna izquierda: gráfico P/L mensual/semanal con toggle -->
                    <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: 300px;"></div>
                                </div>
                                <div id="wrapperPLSemanal" style="display: none;">
                                    <div id="dashboardChartPLSemanal" style="height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Columna derecha: gráfico acumulado con toggle lineal/cascada -->
                    <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: 300px;"></div>
                                </div>
                                <div id="wrapperPLCascada" style="display: none;">
                                    <div id="dashboardChartAcumuladoCascada" style="height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- Fila nueva: KPIs gráficos pequeños -->
                <div class="row g-4 mt-2">

                    <!-- P/L by day -->
                    <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>



                    <!-- Distribución call vs put -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <div class="card shadow-sm h-100">
                            <div class="card-body">
                                <div id="chartPieCallsPuts" class="chart-wrapper"></div>
                            </div>
                        </div>
                    </div>


                    <!-- Win/Loss por Día de la Semana -->
                    <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>


                    <!-- Promedio de Ganancias vs Pérdidas -->
                    <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>





            </div>

            <!-- ✅ Tabla alineada al margen izquierdo de los gráficos -->
            <div id="resultTableContainer" class="mt-4" style="display: none;">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <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 class="mt-4 text-start">
                            <button id="downloadCSV" class="btn btn-outline-secondary fw-bold">
                                <i class="fas fa-download"></i> {{ _('Descargar CSV') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</main>
{% endblock %}


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

<script>


    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)}`;

        // 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");
        }

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


    document.getElementById("symbolSelect").addEventListener("change", function () {
        const symbol = this.value;
        const riskSelect = document.getElementById("riskLevel");

        // Mostrar todas primero
        Array.from(riskSelect.options).forEach(opt => opt.hidden = false);

        // Si el símbolo no es SPX o RUT, ocultar agresivo y ultra_agresivo
        if (!["SPX"].includes(symbol)) {
            Array.from(riskSelect.options).forEach(opt => {
                if (["agresivo", "ultra_agresivo"].includes(opt.value)) {
                    opt.hidden = true;
                }
            });

            // Si la opción actual está oculta, cambiar a intermedio
            if (["agresivo", "ultra_agresivo"].includes(riskSelect.value)) {
                riskSelect.value = "intermedio";
            }
        }
    });

    // (function () {
    //   const symbolSelect   = document.getElementById("symbolSelect");
    //   const strategySelect = document.getElementById("strategySelect");
    //   const riskSelect     = document.getElementById("riskLevel");

    //   const FULL_SYMBOLS   = ["SPX", "RUT"];                // símbolos con agresivo/ultra cuando NO es Vertical
    //   const LIMITED_RISKS  = ["agresivo", "ultra_agresivo"];

    //   function showAllRisks() {
    //     Array.from(riskSelect.options).forEach(opt => { opt.hidden = false; });
    //   }

    //   function applyRule() {
    //     const symbol   = symbolSelect?.value;
    //     const strategy = strategySelect?.value;

    //     // Reset: mostrar todo
    //     showAllRisks();

    //     // Si es Vertical → TODOS los riesgos visibles para cualquier símbolo
    //     if (strategy === "Vertical") return;

    //     // Si NO es Vertical → ocultar agresivo/ultra cuando el símbolo no es SPX/RUT
    //     if (!FULL_SYMBOLS.includes(symbol)) {
    //       Array.from(riskSelect.options).forEach(opt => {
    //         if (LIMITED_RISKS.includes(opt.value)) opt.hidden = true;
    //       });
    //       // Si el seleccionado quedó oculto, pasar a intermedio
    //       if (LIMITED_RISKS.includes(riskSelect.value)) {
    //         riskSelect.value = "intermedio";
    //       }
    //     }
    //   }

    //   // Listeners
    //   symbolSelect?.addEventListener("change", applyRule);
    //   strategySelect?.addEventListener("change", applyRule);

    //   // Estado inicial
    //   document.addEventListener("DOMContentLoaded", applyRule);
    // })();

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

    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);



            }
        });
        observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
    });

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

    document.getElementById('loadButton').addEventListener('click', async () => {
        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;
        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;
        }
        try {
            const desdeLuxon = luxon.DateTime.fromISO(desde);
            const response = await fetch(`/backtestingIdea/get_backtesting_idea?desde=${desde}&hasta=${hasta}&symbol=${symbol}&estrategia=${estrategia}&hora=${timeHour}&risk=${risk}`);
            const result = await response.json();

            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 para uso global
            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)}`;


            // Actualizar resumen de contratos y comisión total
            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;

            // Calcular y mostrar Win Rate
            const totalDays = result.wins + result.losses;
            const winRate = totalDays > 0 ? ((result.wins / totalDays) * 100).toFixed(1) + "%" : "0%";
            document.getElementById('winRate').textContent = winRate;
            document.getElementById('resultSummary').style.display = 'block';
            const thead = document.getElementById('resultTableHead');
            const tbody = document.querySelector('#resultTable tbody');
            tbody.innerHTML = '';

            // KPIs desde result.summary
            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)}`;
            document.getElementById('totalDays').textContent = totalDays;
            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>
`;

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

                result.data.forEach(row => {
                    const commissionTotal = commissionPerLeg * numLegs * 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>`;
                    tbody.appendChild(tr);
                });

                // Verticales
                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("/backtestingIdea/procesar_fila_vertical", {
                                method: "POST",
                                headers: {
                                    "Content-Type": "application/json"
                                },
                                body: JSON.stringify(rowData)
                            });

                            const result = await response.json();

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

                        } catch (err) {
                            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>`;

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

                result.data.forEach(row => {
                    const commissionTotal = commissionPerLeg * numLegs * 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>`;
                    tbody.appendChild(tr);
                });

                // Iron Condors
                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("/backtestingIdea/procesar_fila_ironcondor", {
                                method: "POST",
                                headers: {
                                    "Content-Type": "application/json"
                                },
                                body: JSON.stringify(rowData)
                            });

                            const result = await response.json();

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

                        } catch (err) {
                            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';
            setTimeout(() => {
                generarGraficos(result);
                renderPLPorDiaSemana(result.data);
                renderPieCallsPuts(result.data);
                renderWinLossPorDiaSemana(lastBacktestResult.data);
                renderAvgProfitVsLoss(lastBacktestResult.data);



                document.getElementById("dashboardVisual").style.display = "block";
            }, 30); // ⏱ da tiempo a que el DOM renderice completamente

        } catch (error) {
            showFlashMessage("{{ _('Hubo un error al procesar la solicitud.') }}", "warning");
            console.error("❌ Error en carga de datos:", error);

            limpiarResultados();

        } 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 = document.querySelectorAll("#resultTable tbody tr");
        if (!filas || filas.length === 0) {
            return;
        }

        filas.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,
                gridcolor: gridColor,
                zerolinecolor: zeroLineColor
            },
            yaxis: {
                tickprefix: '$',
                tickformat: ',.2f',
                tickfont: { color: ejeColor },
                automargin: true,
                gridcolor: gridColor,
                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 = table.querySelectorAll("tr");

        // 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 time = 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 });
    }


    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';

        // 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) 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 = {
            autosize: true,
            height: 130,
            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) 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 renderPieCallsPuts(data) {
        if (!Array.isArray(data)) return;

        const isDarkMode = document.body.classList.contains('dark-mode');
        const hasOptionField = data.some(row => row.hasOwnProperty('Option'));

        let layoutCommon = {
            height: 250,
            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: isDarkMode ? 'white' : 'black',
                size: 13
            },
            showlegend: false,
            title: {
                text: hasOptionField ? plotTexts.pieTitleVertical : plotTexts.pieTitleIronCondor,
                font: {
                    size: 14
                }
            }
        };

        if (hasOptionField) {
            // VERTICAL: Gráfico CALL vs PUT ganadoras
            let callCount = 0;
            let putCount = 0;

            data.forEach(row => {
                const tipo = row['Option'];
                const rawPL = parseFloat(row['P/L']) || 0;
                if (rawPL > 0) {
                    if (tipo === 'CALL') callCount++;
                    else if (tipo === 'PUT') putCount++;
                }
            });

            const total = callCount + putCount;
            if (total === 0) {
                document.getElementById("chartPieCallsPuts").innerHTML = `<p class="text-center small">Sin ganadoras</p>`;
                return;
            }

            const dataPie = [{
                values: [callCount, putCount],
                labels: ['CALL', 'PUT'],
                type: 'pie',
                textinfo: 'label+percent',
                textposition: 'outside',
                marker: {
                    colors: ['#1f77b4', '#ff7f0e']
                },
                hole: 0,
                sort: false
            }];

            Plotly.newPlot('chartPieCallsPuts', dataPie, layoutCommon, {
                responsive: true,
                displayModeBar: false,
                displaylogo: false
            });

        } else {
            // IRON CONDOR: Gráfico Ganancia vs Pérdida
            let win = 0, loss = 0;

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

            const total = win + loss;
            if (total === 0) {
                document.getElementById("chartPieCallsPuts").innerHTML = `<p class="text-center small">Sin resultados</p>`;
                return;
            }

            const pieData = [{
                values: [win, loss],
                labels: [plotTexts.plGananciaLabel, plotTexts.plPerdidaLabel],
                type: 'pie',
                marker: {
                    colors: ['green', 'red']
                },
                textinfo: 'label+percent',
                textposition: 'outside',
                hole: 0.2
            }];

            Plotly.newPlot('chartPieCallsPuts', pieData, layoutCommon, {
                responsive: true,
                displayModeBar: false,
                displaylogo: false
            });
        }
    }



    function renderAvgProfitVsLoss(data) {
        if (!Array.isArray(data) || data.length === 0) 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 = {
            height: 230,
            margin: { t: 30, b: 20, l: 10, r: 10 },
            font: {
                size: 10,
                color: isDarkMode ? "white" : "black"
            },
            yaxis: {
                showgrid: false,
                zeroline: 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 getParametrosDesdeSession() {
        return {
            contractCount: parseInt(sessionStorage.getItem("contractCount")) || 1,
            commissionPerLeg: parseFloat(sessionStorage.getItem("commissionPerLeg")) || 0,
            numLegs: parseInt(sessionStorage.getItem("numLegs")) || 2
        };
    }






    (function () {
        const fmtUSD = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 });
        const MEDALS = ["🥇", "🥈", "🥉"];

        // 1) Qué riesgos muestra cada símbolo
        const RISKS_BY_SYMBOL = {
            SPX: ["cons", "inte", "agre", "ultr"],
            RUT: ["cons", "inte"],
            XSP: ["cons", "inte"]
        };

        // // Meta de riesgos (no cambia)
        // const RISK_META = {
        //     cons: { label: "Conservador", icon: "🛡️" },
        //     inte: { label: "Intermedio", icon: "⚖️" },
        //     agre: { label: "Agresivo", icon: "🔥" },
        //     ultr: { label: "Ultra Agresivo", icon: "⚡" }
        // };

        // const LABELS = {
        //     risk: "Riesgo",
        //     horario: "Horario",
        //     ganancia: "Ganancia",
        //     desde: "Desde",
        //     hasta: "Hasta"
        // };


         const RISK_META = {{ {
    "cons": {"label": _("Conservador"),     "icon": "🛡️"},
    "inte": {"label": _("Intermedio"),      "icon": "⚖️"},
    "agre": {"label": _("Agresivo"),        "icon": "🔥"},
    "ultr": {"label": _("Ultra Agresivo"),  "icon": "⚡"}
  } | tojson }};

  const LABELS = {{ {
    "risk":     _("Riesgo"),
    "horario":  _("Horario"),
    "ganancia": _("Ganancia"),
    "desde":    _("Desde"),
    "hasta":    _("Hasta")
  } | tojson }};

  
        function tableCard(sym, rk) {
            return `
      <div class="col-12 col-sm-6 col-lg-3">
        <div class="border rounded-4 p-3 h-100" style="max-width:270px;margin:auto;">
          <div class="text-center mb-2">
            <div class="small">${LABELS.risk}</div>
            <div class="fw-semibold">${RISK_META[rk].icon} ${RISK_META[rk].label}</div>
          </div>
          <div class="table-responsive">
            <table class="table table-bordered table-hover table-sm text-center risk-table">
              <thead class="table-dark">
                <tr>
                  <th>#</th>
                  <th>${LABELS.horario}</th>
                  <th>${LABELS.ganancia}</th>
                </tr>
              </thead>
              <tbody id="tbody-${rk}-${sym}"></tbody>
            </table>
          </div>
        </div>
      </div>
    `;
        }

        // 2) Generar cada slide usando SOLO los riesgos definidos para ese símbolo
        function slideTemplate(sym) {
            const risks = RISKS_BY_SYMBOL[sym] || ["cons", "inte"]; // fallback
            return `
      <div class="carousel-item" data-sym="${sym}">
        <div class="container-xl px-2">
          <div class="row justify-content-center g-4">
            ${risks.map(rk => tableCard(sym, rk)).join("")}
          </div>
          <div class="text-end mt-3 small">
            <em>${LABELS.desde}: <strong id="range-from-${sym}"></strong> – ${LABELS.hasta}: <strong id="range-to-${sym}"></strong></em>
          </div>
        </div>
      </div>
    `;
        }

        function renderRows(tbodyId, rows) {
            const tbody = document.getElementById(tbodyId);
            if (!tbody) return;
            tbody.innerHTML = "";
            rows.slice(0, 3).forEach((row, i) => {
                const tr = document.createElement("tr");
                tr.innerHTML = `
        <td>${MEDALS[i]}</td>
        <td><strong>${row.hora}</strong></td>
        <td>${fmtUSD.format(row.profit)}</td>
      `;
                tbody.appendChild(tr);
            });
        }

        async function initCarousel() {
            const resp = await fetch("/api/top-vertical");
            const json = await resp.json();
            const symbols = json.symbols || [];
            const inner = document.getElementById("carousel-inner");
            const indicators = document.getElementById("carousel-indicators");

            inner.innerHTML = "";
            indicators.innerHTML = "";

            // Crear slides + indicadores
            symbols.forEach((sym, idx) => {
                inner.insertAdjacentHTML("beforeend", slideTemplate(sym));
                const btn = document.createElement("button");
                btn.type = "button";
                btn.setAttribute("data-bs-target", "#carouselSymbols");
                btn.setAttribute("data-bs-slide-to", String(idx));
                btn.setAttribute("aria-label", sym);
                if (idx === 0) { btn.classList.add("active"); btn.setAttribute("aria-current", "true"); }
                indicators.appendChild(btn);
            });

            const first = inner.querySelector(".carousel-item");
            if (first) first.classList.add("active");

            // Rellenar solo los riesgos permitidos por símbolo
            const data = json.data || {};
            const fromTo = json.from_to || {};

            symbols.forEach(sym => {
                const risks = RISKS_BY_SYMBOL[sym] || ["cons", "inte"];
                const symData = data[sym] || {};
                risks.forEach(rk => renderRows(`tbody-${rk}-${sym}`, symData[rk] || []));
                // fechas
                const ft = fromTo[sym] || {};
                const rf = document.getElementById(`range-from-${sym}`);
                const rt = document.getElementById(`range-to-${sym}`);
                if (rf) rf.textContent = ft.from || "";
                if (rt) rt.textContent = ft.to || "";
            });

            // Título activo
            const titleSpan = document.getElementById("symbol-active");
            const carouselEl = document.getElementById("carouselSymbols");
            const bsCarousel = bootstrap.Carousel.getOrCreateInstance(carouselEl, { interval: false, ride: false, wrap: false, touch: false });
            function updateTitle() {
                const active = inner.querySelector(".carousel-item.active");
                const sym = active ? active.getAttribute("data-sym") : (symbols[0] || "");
                if (titleSpan) titleSpan.textContent = sym;
            }
            carouselEl.addEventListener("slid.bs.carousel", updateTitle);
            updateTitle();
        }

        document.addEventListener("DOMContentLoaded", initCarousel);
    })();

</script>


{% endblock %}