{% 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;
    }
</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>

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

        <div class="card border-0 shadow-sm rounded-4 p-3 p-md-4 dynamic-bg">

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

            <!-- Contenedor de Riesgos -->
            <div class="row justify-content-center g-4">

                <!-- Conservador -->
                <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">{{ _('Riesgo') }}</div>
                            <div class="fw-semibold">🛡️ {{ _('Conservador') }}</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>{{ _('Horario') }}</th>
                                        <th>{{ _('Ganancia') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>🥇</td>
                                        <td><strong>11:10</strong></td>
                                        <td>$2857</td>
                                    </tr>
                                    <tr>
                                        <td>🥈</td>
                                        <td><strong>11:20</strong></td>
                                        <td>$2597</td>
                                    </tr>
                                    <tr>
                                        <td>🥉</td>
                                        <td><strong>11:15</strong></td>
                                        <td>$2545</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Intermedio -->
                <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">{{ _('Riesgo') }}</div>
                            <div class="fw-semibold">⚖️ {{ _('Intermedio') }}</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>{{ _('Horario') }}</th>
                                        <th>{{ _('Ganancia') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>🥇</td>
                                        <td><strong>11:20</strong></td>
                                        <td>$3358</td>
                                    </tr>
                                    <tr>
                                        <td>🥈</td>
                                        <td><strong>11:35</strong></td>
                                        <td>$2952</td>
                                    </tr>
                                    <tr>
                                        <td>🥉</td>
                                        <td><strong>11:00</strong></td>
                                        <td>$2800</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Agresivo -->
                <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">{{ _('Riesgo') }}</div>
                            <div class="fw-semibold">🔥 {{ _('Agresivo') }}</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>{{ _('Horario') }}</th>
                                        <th>{{ _('Ganancia') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>🥇</td>
                                        <td><strong>11:30</strong></td>
                                        <td>$4127</td>
                                    </tr>
                                    <tr>
                                        <td>🥈</td>
                                        <td><strong>11:35</strong></td>
                                        <td>$3990</td>
                                    </tr>
                                    <tr>
                                        <td>🥉</td>
                                        <td><strong>11:20</strong></td>
                                        <td>$3341</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Ultra Agresivo -->
                <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">{{ _('Riesgo') }}</div>
                            <div class="fw-semibold">⚡ {{ _('Ultra Agresivo') }}</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>{{ _('Horario') }}</th>
                                        <th>{{ _('Ganancia') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>🥇</td>
                                        <td><strong>11:30</strong></td>
                                        <td>$5047</td>
                                    </tr>
                                    <tr>
                                        <td>🥈</td>
                                        <td><strong>11:35</strong></td>
                                        <td>$4157</td>
                                    </tr>
                                    <tr>
                                        <td>🥉</td>
                                        <td><strong>11:20</strong></td>
                                        <td>$4115</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Fechas de muestra -->
            <div class="text-end mt-4 small">
                <em>{{ _('Desde') }}: <strong>05/08/2025</strong> – {{ _('Hasta') }}: <strong>08/08/2025</strong></em>
            </div>
        </div>

    </div>



    <section class="container my-4">
        <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=='1340' %}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" selected>{{ _('Intermedio') }}</option>
                                <option value="agresivo">{{ _('Agresivo') }}</option>
                                <option value="ultra_agresivo">{{ _('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>



    <div id="resultSummary" class="container my-4" style="display: none;">
        <div class="row text-center justify-content-center">
            <!-- Ganancia Total -->
            <div class="col-6 col-md-3 mb-3">
                <div class="card border-primary shadow-sm h-100">
                    <div class="card-body p-2">
                        <h6 id="profitLabel" class="text-primary mb-1 fw-semibold">
                            <i class="fas fa-dollar-sign"></i> {{ _('Ganancia/Pérdida') }}
                        </h6>
                        <div id="profitTotal" class="text-primary fw-bold small">$0.00</div>

                        <div class="mt-2">
                            <span class="badge w-100 d-block text-center rounded-2 small py-1 px-2" style="
                        background-color: var(--bs-secondary-bg); 
                        color: var(--bs-secondary-color); 
                        white-space: normal;
                        word-break: break-word;
                        line-height: 1.25;
                        font-size: 0.75rem;
                    ">
                                {{ _('Contratos:') }} <span id="resumenContratos">1</span> —
                                {{ _('Comisión:') }} $<span id="resumenComision">0.00</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Días Ganadores -->
            <div class="col-6 col-md-3 mb-3">
                <div class="card border-success shadow-sm">
                    <div class="card-body p-2">
                        <h6 class="text-success mb-1 fw-semibold">
                            <i class="fas fa-trophy"></i> {{ _('Ganadores') }}
                        </h6>
                        <div id="winDays" class="text-success fw-bold small">0</div>
                    </div>
                </div>
            </div>

            <!-- Días Perdedores -->
            <div class="col-6 col-md-3 mb-3">
                <div class="card border-danger shadow-sm">
                    <div class="card-body p-2">
                        <h6 class="text-danger mb-1 fw-semibold">
                            <i class="fas fa-times-circle"></i> {{ _('Perdedores') }}
                        </h6>
                        <div id="lossDays" class="text-danger fw-bold small">0</div>
                    </div>
                </div>
            </div>

            <!-- Win Rate -->
            <div class="col-6 col-md-3 mb-3">
                <div class="card border-warning shadow-sm">
                    <div class="card-body p-2">
                        <h6 class="text-warning mb-1 fw-semibold">
                            <i class="fas fa-percentage"></i> {{ _('Win Rate') }}
                        </h6>
                        <div id="winRate" class="text-warning fw-bold small">0%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div id="resultTableContainer" class="container mb-5" style="display: none;">
        <div class="table-responsive">
            <table id="resultTable" class="table table-bordered table-striped table-hover">
                <thead class="table-dark text-center">
                    <tr id="resultTableHead"></tr>
                </thead>
                <tbody class="text-center"></tbody>
            </table>
        </div>
        <div class="text-center my-4">
            <button id="downloadCSV" class="btn btn-outline-secondary fw-bold">
                <i class="fas fa-download"></i> {{ _('Descargar CSV') }}
            </button>
        </div>



        <div id="chartsContainer">
            <div class="text-end mb-2">
                <button id="togglePLMode" class="btn btn-outline-primary btn-sm"
                    data-text-linea="{{ _('Gráfico Lineal') }}" data-text-cascada="{{ _('Gráfico Cascada') }}">
                    {{ _('Gráfico Lineal') }}
                </button>
            </div>
            <div class="custom-chart-wrapper" id="wrapperPLAcumulado">
                <div id="chartPLAcumulado" class="custom-chart-box"></div>
            </div>

            <div class="text-end mb-2">
                <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 class="custom-chart-wrapper" id="wrapperPLSemanal">
                <div id="chartPLSemanal" class="custom-chart-box"></div>
            </div>

            <div class="custom-chart-wrapper" id="wrapperPLMensual" style="display: none;">
                <div id="chartPLMensual" class="custom-chart-box"></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;

        let totalProfit = 0;
        let totalCommission = 0;

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

        // 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 gráficos
        generarGraficos();  // ya usa la tabla
    });



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

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

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

            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);
            }, 30); // ⏱ da tiempo a que el DOM renderice completamente

        } catch (error) {
            showFlashMessage("{{ _('Hubo un error al procesar la solicitud.') }}", "warning");
            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") }}'

    };


    function generarGraficos(result) {
        let isWaterfallMode = true;

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

        const filas = document.querySelectorAll("#resultTable tbody tr");
        if (!filas || filas.length === 0) {
            console.warn("No hay filas en la tabla para graficar");
            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: {
                title: { text: plotTexts.xLabel, font: { color: ejeColor } },
                tickfont: { color: ejeColor },
                automargin: true,
                gridcolor: gridColor,
                zerolinecolor: zeroLineColor
            },
            yaxis: {
                title: { text: plotTexts.yLabel, font: { color: ejeColor } },
                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 renderPLAcumulado() {
            const chartDiv = document.getElementById('chartPLAcumulado');
            if (!chartDiv || chartDiv.offsetParent === null) return;

            let trace;
            const hoverFechaLabel = plotTexts.plFechaLabel || 'Fecha';
            const hoverDailyLabel = plotTexts.plDailyLabel || 'P/L Diario';
            const hoverTotalLabel = plotTexts.plTotalLabel || 'P/L Total';

            if (isWaterfallMode) {
                trace = {
                    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:
                        `${hoverFechaLabel}: %{x}<br>` +
                        `${hoverDailyLabel}: %{customdata[0]:$,.2f}<br>` +
                        `${hoverTotalLabel}: %{customdata[1]:$,.2f}<extra></extra>`
                };
            } else {
                trace = {
                    type: 'scatter',
                    mode: 'lines',
                    x: fechas,
                    y: acumulados,
                    name: plotTexts.plAcumuladoName,
                    line: { color: 'deepskyblue' },
                    hovertemplate:
                        `${hoverFechaLabel}: %{x}<br>` +
                        `${hoverTotalLabel}: %{y:$,.2f}<extra></extra>`
                };
            }

            Plotly.react(chartDiv, [trace], {
                ...layoutBase,
                title: {
                    text: plotTexts.plAcumuladoTitle,
                    font: { color: ejeColor }
                },
                xaxis: {
                    ...layoutBase.xaxis,
                    type: 'category'
                }
            }, {
                displayModeBar: false,
                responsive: true
            });
        }

        renderPLAcumulado();

        document.getElementById('togglePLMode').addEventListener('click', () => {
            isWaterfallMode = !isWaterfallMode;
            const btn = document.getElementById('togglePLMode');
            btn.textContent = isWaterfallMode
                ? btn.dataset.textLinea
                : btn.dataset.textCascada;
            renderPLAcumulado();
        });




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

        const filasTabla = document.querySelectorAll("#resultTable tbody tr");
        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();
                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);

                const lunes = new Date(fecha);
                lunes.setDate(fecha.getDate() - fecha.getDay() + 1); // primer día de la semana
                const clave = lunes.toISOString().split('T')[0];

                semanas[clave] = (semanas[clave] || 0) + ganancia;
            }
        });

        const semanas_ordenadas = Object.keys(semanas).sort();
        const valores = semanas_ordenadas.map(sem => semanas[sem]);
        const etiquetas = semanas_ordenadas.map(fechaISO => {
            const [y, m, d] = fechaISO.split("-").map(Number);
            const date = new Date(y, m - 1, d);
            const { year, week } = getISOWeekNumber(date);
            return `Week ${week}-${year}`;
        });

        Plotly.react('chartPLSemanal', [{
            x: etiquetas,
            y: valores,
            type: 'bar',
            name: plotTexts.plSemanalName,
            marker: {
                color: valores.map(v => v >= 0 ? 'limegreen' : 'tomato')
            }
        }], {
            ...layoutBase,
            title: {
                text: plotTexts.plSemanalTitle,
                font: { color: ejeColor }
            },
            xaxis: {
                ...layoutBase.xaxis,
                type: 'category'
            }
        }, {
            displayModeBar: false,
            responsive: true
        });

        // === Gráfico P/L Mensual desde la tabla ===
        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();
                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);  // mes -1 porque enero = 0

                const clave = `${fecha.getFullYear()}-${String(fecha.getMonth() + 1).padStart(2, '0')}`;
                meses[clave] = (meses[clave] || 0) + ganancia;
            }
        });

        const meses_ordenados = Object.keys(meses).sort();
        const valoresMensuales = meses_ordenados.map(mes => meses[mes]);
        const etiquetasMensuales = meses_ordenados.map(mesStr => {
            const [año, mes] = mesStr.split('-');
            return `${año}-${mes}`;
        });

        Plotly.react('chartPLMensual', [{
            x: etiquetasMensuales,
            y: valoresMensuales,
            type: 'bar',
            name: plotTexts.plMensualName || 'Monthly P&L',
            marker: {
                color: valoresMensuales.map(v => v >= 0 ? 'limegreen' : 'tomato')
            }
        }], {
            ...layoutBase,
            title: {
                text: plotTexts.plMensualTitle || 'Monthly P&L',
                font: { color: ejeColor }
            },
            xaxis: {
                ...layoutBase.xaxis,
                type: 'category'
            }
        }, {
            displayModeBar: false,
            responsive: true
        });



    }

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

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

        semanal.style.display = mostrandoSemanal ? "none" : "block";
        mensual.style.display = mostrandoSemanal ? "block" : "none";

        // Texto según estado, en ambos idiomas usando atributos data
        boton.textContent = mostrandoSemanal
            ? boton.dataset.textSemanal
            : boton.dataset.textMensual;

        // Resize forzado
        setTimeout(() => {
            Plotly.Plots.resize(mostrandoSemanal ? 'chartPLMensual' : 'chartPLSemanal');
        }, 100);
    });

    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 = ['chartPLAcumulado', 'chartPLSemanal', 'chartPLMensual'];
        charts.forEach(id => {
            const chartDiv = document.getElementById(id);
            if (chartDiv) {
                Plotly.purge(chartDiv);
            }
        });

        // Resetear última referencia
        lastBacktestResult = null;
    }



</script>
{% endblock %}