{% extends "base.html" %}

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

{% block extra_head %}
<!-- jQuery y jQuery UI -->
<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>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />

<!-- Luxon -->
<script src="https://cdn.jsdelivr.net/npm/luxon@3/build/global/luxon.min.js"></script>

<!-- Tus estilos propios (incluye aquí si usas otro CSS para esta página) -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles-trendidea.css') }}">

<!-- <script src="https://cdn.plot.ly/plotly-2.32.0.min.js"></script> -->


{% endblock %}

{% block content %}
<main>
    <!-- Modal de resumen -->
    <div class="modal fade" id="resumenModal" tabindex="-1" aria-labelledby="resumenModalLabel">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content shadow-lg rounded">

                <!-- Encabezado -->
                <div class="modal-header">
                    <h5 class="modal-title fw-bold" id="resumenModalLabel">{{ _('Resumen de Idea Vertical') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>

                <!-- Botones de selección -->
                <div class="px-3 pt-3">
                    <div class="btn-group w-100 mb-3" role="group">
                        <button type="button" class="btn btn-outline-primary active" id="btnIdea">{{ _('IDEA')
                            }}</button>
                        <button type="button" class="btn btn-outline-primary" id="btnActual">{{ _('ACTUAL') }}</button>
                    </div>
                </div>

                <!-- Cuerpo del modal -->
                <div class="modal-body">
                    <!-- Vista IDEA -->
                    <div id="contenedorIdea">
                        <pre id="resumenTexto" class="mb-0" style="white-space: pre-wrap;"></pre>
                    </div>

                    <!-- Vista ACTUAL (Gráfico) -->
                    <div id="contenedorActual" class="d-none">
                        <div id="encabezadoGrafico" class="mb-3 small text-muted"></div>

                        <div id="plotlyEvolutionChart" class="grafico-contenedor" style="height: 400px;"></div>

                        <div id="mensajeAdvertenciaCierre" class="mt-3 small d-none mensaje-cierre-box">
                            ⚠️ <em>{{ _('Nota: Debido a la alta volatilidad en los últimos segundos o minutos antes del
                                cierre del mercado, los valores mostrados en el gráfico pueden no reflejar con precisión
                                la
                                ganancia/pérdida final, incluso una vez finalizada la jornada.') }}</em>
                        </div>
                    </div>

                    <!-- Mensaje de copia -->
                    <div id="flashResumen" class="alert alert-success d-none mt-3" role="alert">
                        {{ _('Resumen copiado al portapapeles.') }}
                    </div>
                </div>

                <!-- Pie del modal -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-info d-none" id="refrescarEvolucion"
                        title="{{ _('Actualizar gráfico') }}">
                        🔄 {{ _('Actualizar') }}
                    </button>
                    <button type="button" class="btn btn-primary" id="copiarResumen">
                        📋 {{ _('Copiar al portapapeles') }}
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        ❌ {{ _('Cerrar') }}
                    </button>
                </div>



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



    <div id="loading-spinner" class="spinner-overlay">
        <div class="spinner-container">
            <div class="spinner"></div>
            <p>{{ _('Cargando datos...') }}</p>
        </div>
    </div>


    <!-- Encabezado -->
    <div class="text-center mb-4">
        <h5 class="fw-semibold mb-1">{{ _('Generador de Ideas Intradía') }}</h5>
        <p class="small text-center mb-0">
            {{ _('Ideas intradía de estrategias Verticales e Iron Condor basadas en estimaciones de tendencia. Uso
            exclusivo con fines educativos o analíticos.') }}
        </p>
    </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">



                <!-- Controles -->
                <div id="controls" class="text-center">
                    <div class="d-flex flex-wrap justify-content-center align-items-center gap-3">

                        <!-- Símbolo -->
                        <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>

                        <!-- Fecha -->
                        <label for="datePicker" class="mb-0">{{ _('Fecha:') }}</label>
                        <input type="text" id="datePicker" class="form-control form-control-sm rounded"
                            style="width: auto; min-width: 130px;" readonly>

                        <!-- Estrategia -->
                        <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="IRON_CONDOR">{{ _('Iron Condor') }}</option>
                        </select>

                        <!-- Riesgo -->
                        <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>

                        <!-- Botón Submit -->
                        <button id="loadButton" class="btn btn-success btn-sm fw-bold ms-2 mt-2 mt-sm-0">
                            {{ _('Mostrar Ideas') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- Sección Vertical -->
    <div id="verticalSection" style="display: none;">
        <div id="summaryContainer" class="container my-4">
            <div class="row justify-content-center align-items-center g-4 flex-wrap text-center">

                <!-- Bloque Win/Loss/Rate -->
                <div class="col-md-6">
                    <div class="row justify-content-center g-3">
                        <div class="col-auto">
                            <div class="px-4 py-2 bg-success text-white rounded">
                                <div class="small">{{ _('Positivos') }}</div>
                                <div id="totalWins" class="fw-bold fs-5">0</div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="px-4 py-2 bg-danger text-white rounded">
                                <div class="small">{{ _('Negativos') }}</div>
                                <div id="totalLosses" class="fw-bold fs-5">0</div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="px-4 py-2 bg-primary text-white rounded">
                                <div class="small">{{ _('Win Rate') }}</div>
                                <div id="winRate" class="fw-bold fs-5">0%</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bloque Moneyness -->
                <div class="col-md-6">
                    <div class="row justify-content-center g-3">
                        <div class="col-auto">
                            <div class="px-4 py-2 bg-success text-white rounded">
                                <div class="small">OTM</div>
                                <div id="countOTM" class="fw-bold fs-5">0</div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="px-4 py-2 bg-danger text-white rounded">
                                <div class="small">ITM</div>
                                <div id="countITM" class="fw-bold fs-5">0</div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="px-4 py-2 bg-warning text-dark rounded">
                                <div class="small">ITM P</div>
                                <div id="countITMP" class="fw-bold fs-5">0</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>





        <div id="predictionTableContainer" class="container my-4 mb-5">
            <div class="card p-0 pb-4">

                <div class="px-3 py-2 d-flex flex-wrap justify-content-center gap-3 small text-secondary"
                    id="infoResumenVertical">
                    <!-- Aquí insertaremos Estrategia, Símbolo y Expiración -->
                </div>

                <div
                    class="card-header text-white card-header-darkmode d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ _('Listado de Ideas - Verticales') }}</h5>
                    <div id="spxActual" class="spx-badge rounded px-3 py-1" style="font-size: 16px; font-weight: bold;">
                        <!-- Precio actual se mostrará aquí -->
                    </div>
                </div>

                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table id="predictionTable"
                            class="table custom-dark-table table-bordered table-striped table-hover mb-0">
                            <thead class="text-center thead-darkmode">
                                <tr>
                                    <th>{{ _('Hora') }}</th>
                                    <th>{{ _('Lado') }}</th>
                                    <th>{{ _('Strikes') }}</th>
                                    <th>{{ _('Crédito') }}</th>
                                    <th>{{ _('Dist. Pts') }}</th>
                                    <th>{{ _('Dist. %%') }}</th>
                                    <th>{{ _('Estado') }}</th>
                                    <th>{{ _('P/L') }}</th>
                                </tr>
                            </thead>
                            <tbody class="text-center"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Sección Iron Condor -->
    <div id="ironCondorSection" style="display: none;">
        <div id="summaryContainerIC" class="container my-4">
            <div class="row justify-content-center align-items-center g-4 flex-wrap text-center">

                <!-- Bloque Win/Loss/Rate -->
                <div class="col-md-6">
                    <div class="row justify-content-center g-3">
                        <div class="col-auto">
                            <div class="px-4 py-2 bg-success text-white rounded">
                                <div class="small">{{ _('Positivos') }}</div>
                                <div id="totalWinsIC" class="fw-bold fs-5">0</div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="px-4 py-2 bg-danger text-white rounded">
                                <div class="small">{{ _('Negativos') }}</div>
                                <div id="totalLossesIC" class="fw-bold fs-5">0</div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="px-4 py-2 bg-primary text-white rounded">
                                <div class="small">{{ _('Win Rate') }}</div>
                                <div id="winRateIC" class="fw-bold fs-5">0%</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bloque Moneyness -->
                <div class="col-md-6">
                    <div class="row justify-content-center g-3">
                        <div class="col-auto">
                            <div class="px-4 py-2 bg-success text-white rounded">
                                <div class="small">OTM</div>
                                <div id="countOTMIC" class="fw-bold fs-5">0</div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="px-4 py-2 bg-danger text-white rounded">
                                <div class="small">ITM</div>
                                <div id="countITMIC" class="fw-bold fs-5">0</div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="px-4 py-2 bg-warning text-dark rounded">
                                <div class="small">ITM P</div>
                                <div id="countITMPIC" class="fw-bold fs-5">0</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>


        <div id="predictionTableContainerIC" class="container my-4 mb-5">
            <div class="card p-0 pb-4">
                <div class="px-3 py-2 d-flex flex-wrap justify-content-center gap-3 small text-secondary"
                    id="infoResumenIronCondor">
                    <!-- Aquí insertaremos Estrategia, Símbolo y Expiración -->
                </div>
                <div
                    class="card-header text-white card-header-darkmode d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ _('Listado de Ideas - Iron Condors') }}</h5>
                    <div id="spxActualIC" class="spx-badge rounded px-3 py-1"
                        style="font-size: 16px; font-weight: bold;">

                        <!-- SPX actual se mostrará aquí también -->
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table id="predictionTableIC"
                            class="table custom-dark-table table-bordered table-striped table-hover mb-0">
                            <thead class="table-secondary text-center">
                                <tr>
                                    <th>Hora</th>
                                    <th>Strikes IC</th>
                                    <th>Crédito</th>
                                    <th>Dist. Pts PUT</th>
                                    <th>Dist. % PUT</th>
                                    <th>Estado PUT</th>
                                    <th>Dist. Pts CALL</th>
                                    <th>Dist. % CALL</th>
                                    <th>Estado CALL</th>
                                    <th>P/L</th>
                                </tr>
                            </thead>
                            <tbody class="text-center"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
{% endblock %}

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

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

    });




    let plotlyLoaded = false;
    let plotlyLoadingPromise = null;

    function ensurePlotlyLoaded() {
        if (plotlyLoaded) return Promise.resolve();

        if (plotlyLoadingPromise) return plotlyLoadingPromise;

        plotlyLoadingPromise = new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = "https://cdn.plot.ly/plotly-2.32.0.min.js";
            script.onload = () => {
                plotlyLoaded = true;
                resolve();
            };
            script.onerror = reject;
            document.head.appendChild(script);
        });

        return plotlyLoadingPromise;
    }







    let rowDataGlobal = null; // Guarda la fila activa para usarla en ACTUAL

    document.getElementById('btnIdea').addEventListener('click', function () {

        document.getElementById('contenedorIdea').classList.remove('d-none');
        document.getElementById('contenedorActual').classList.add('d-none');
        this.classList.add('active');
        document.getElementById('btnActual').classList.remove('active');

        // Ocultar botón de refrescar
        document.getElementById('refrescarEvolucion').classList.add('d-none');
    });


    document.getElementById('btnActual').addEventListener('click', async function () {
        await ensurePlotlyLoaded();  // ⬅️ asegura que Plotly esté cargado

        document.getElementById('contenedorIdea').classList.add('d-none');
        document.getElementById('contenedorActual').classList.remove('d-none');
        this.classList.add('active');
        document.getElementById('btnIdea').classList.remove('active');

        // 👇 Mostrar botón de refrescar
        document.getElementById('refrescarEvolucion').classList.remove('d-none');

        if (!rowDataGlobal) {
            showFlashMessage("{{ _('No hay datos de la fila seleccionada.') }}", "danger");
            return;
        }

        const estrategia = document.getElementById("strategySelect").value;
        let endpoint;

        if (estrategia === "VERTICAL") {
            endpoint = "/backtestingIdea/procesar_fila_vertical";
        } else if (estrategia === "IRON_CONDOR") {
            endpoint = "/backtestingIdea/procesar_fila_ironcondor";
        } else {
            showFlashMessage("⚠️ Estrategia no reconocida.", "danger");
            return;
        }

        document.getElementById('plotlyEvolutionChart').innerHTML = '';
        document.getElementById('loading-spinner').style.display = 'flex';

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

            const result = await response.json();

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

        } catch (err) {
            console.error("❌ Error in fetch:", err);
            showFlashMessage("⚠️ Error to send data", "danger");
        } finally {
            document.getElementById('loading-spinner').style.display = 'none';
        }
    });

    let autoRefreshInterval = null;




    let isLoadingIdeas = false;  // 👈 pon esto arriba, junto con rowDataGlobal y autoRefreshInterval

    const loadButton = document.getElementById('loadButton');

    loadButton.addEventListener('click', async () => {
        // ⛔ Evitar múltiples clics mientras está cargando
        if (isLoadingIdeas) {
            return;
        }

        const { DateTime } = luxon;
        const nowNY = DateTime.now().setZone('America/New_York');
        const hour = nowNY.hour;
        const minute = nowNY.minute;

        const selectedDate = document.getElementById('datePicker').value;
        const todayNY = nowNY.toFormat('yyyy-MM-dd');
        const isTodaySelected = selectedDate === todayNY;

        // Validación básica antes de bloquear el botón
        if (!selectedDate) {
            showFlashMessage("{{ _('Selecciona una fecha primero.') }}", "warning");
            return;
        }

        // ⚠️ Mostrar mensaje si es hoy y antes de 10:05 NY
        if (isTodaySelected && (hour < 10 || (hour === 10 && minute < 5))) {
            showFlashMessage("⚠️ {{ _('Las ideas comienzan a partir de las 10:05 (hora NY)') }}", "warning");
        }

        const strategy = document.getElementById('strategySelect').value;
        const risk = document.getElementById('riskLevel').value;
        const selectedSymbol = document.getElementById("symbolSelect").value;

        // ✅ A partir de aquí sí bloqueamos el botón
        isLoadingIdeas = true;
        const originalHtml = loadButton.innerHTML;
        loadButton.disabled = true;
        loadButton.classList.add('disabled');  // por si Bootstrap aplica estilo
        loadButton.innerHTML = "⏳ {{ _('Cargando...') }}";

        // (Opcional) mostrar spinner general
        document.getElementById('loading-spinner').style.display = 'flex';

        try {
            clearTables();

            if (strategy === "VERTICAL") {
                document.getElementById('verticalSection').style.display = 'block';
                document.getElementById('ironCondorSection').style.display = 'none';
                await loadPredictionTable(selectedDate, selectedSymbol);   // 👈 IMPORTANTE: await
            } else if (strategy === "IRON_CONDOR") {
                document.getElementById('verticalSection').style.display = 'none';
                document.getElementById('ironCondorSection').style.display = 'block';
                await loadPredictionTableIC(selectedDate, selectedSymbol); // 👈 IMPORTANTE: await
            }

            // Iniciar auto-refresh solo después de que la primera carga terminó
            startAutoRefresh();

        } catch (err) {
            console.error("❌ Error al cargar ideas:", err);
            // showFlashMessage("⚠️ {{ _('Error al cargar ideas. Intenta nuevamente.') }}", "danger");
        } finally {
            // Restaurar estado del botón y spinner SIEMPRE
            isLoadingIdeas = false;
            loadButton.disabled = false;
            loadButton.classList.remove('disabled');
            loadButton.innerHTML = originalHtml;
            document.getElementById('loading-spinner').style.display = 'none';
        }
    });







    let lastSPXVertical = null;
    let lastSPXIC = null;

    function animateSPXUpdate(id, movement = 0) {
        const el = document.getElementById(id);

        // Pulse
        el.classList.add('pulse-update');

        // Color flash verde/rojo
        if (movement > 0) {
            el.classList.add('flash-up');
        } else if (movement < 0) {
            el.classList.add('flash-down');
        }

        // Limpiar animaciones al terminar
        el.addEventListener('animationend', function handler() {
            el.classList.remove('pulse-update', 'flash-up', 'flash-down');
            el.removeEventListener('animationend', handler);
        });
    }

    function getParameterByName(name) {
        const url = window.location.href;
        name = name.replace(/[\[\]]/g, '\\$&');
        const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
        const results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }


    document.getElementById("symbolSelect").addEventListener("change", () => {
        clearTables();          // 🧹 Limpia resultados visibles
        loadAvailableDates();   // 🔄 Carga fechas del nuevo símbolo

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

        // Mostrar u ocultar opciones según el símbolo
        const isSPX = selectedSymbol.toUpperCase() === "SPX";

        // Iterar sobre las opciones del select
        for (const option of riskSelect.options) {
            const value = option.value;
            if (value === "agresivo" || value === "ultra_agresivo") {
                option.style.display = isSPX ? "block" : "none";
            } else {
                option.style.display = "block";
            }
        }

        // Si la opción actual está oculta, resetear a 'intermedio'
        const currentRisk = riskSelect.value;
        if ((currentRisk === "agresivo" || currentRisk === "ultra_agresivo") && !isSPX) {
            riskSelect.value = "intermedio";
        }
    });

    document.addEventListener('DOMContentLoaded', async function () {
        const dateParam = getParameterByName('date');
        const dates = await loadAvailableDates();

        if (dateParam) {
            document.getElementById('datePicker').value = dateParam;
            $("#datePicker").datepicker("setDate", dateParam);
        } else if (dates.length > 0) {
            const mostRecentDate = dates.sort().slice(-1)[0];  // ordena y toma la más reciente
            document.getElementById('datePicker').value = mostRecentDate;
            $("#datePicker").datepicker("setDate", mostRecentDate);
        }
    });

    async function loadPredictionTable(date, symbol) {
        const risk = document.getElementById('riskLevel').value;


        const response = await fetch(`/get_prediction_data?date=${date}&risk=${risk}&symbol=${symbol}`);
        const result = await response.json();
        const spxActual = result.spx_final;
        const data = result.data.reverse();

        const tableBody = document.querySelector('#predictionTable tbody');
        tableBody.innerHTML = '';

        if (data.error) {
            const row = tableBody.insertRow();
            const cell = row.insertCell();
            cell.colSpan = 11;
            cell.textContent = "{{ _('No hay datos disponibles.') }}";
            return;
        }

        if (lastSPXVertical !== spxActual) {
            const movement = lastSPXVertical === null ? 0 : spxActual - lastSPXVertical;

            document.getElementById('spxActual').textContent = `${symbol} ${spxActual.toFixed(2)}`;
            animateSPXUpdate('spxActual', movement);

            lastSPXVertical = spxActual;
        }

        let totalPL = 0;
        let wins = 0;
        let losses = 0;

        let otmCount = 0;
        let itmCount = 0;
        let itmpCount = 0;

        data.forEach(row => {

            const moneyness = row.Moneyness;
            if (moneyness === 'OTM') otmCount++;
            else if (moneyness === 'ITM') itmCount++;
            else if (moneyness === 'ITM P') itmpCount++;

            const pl = row['P/L'];
            totalPL += pl;
            if (pl >= 0) wins++;
            else if (pl < 0) losses++;

            const tr = document.createElement('tr');
            tr.innerHTML = `
<td><a href="#" class="hora-link" style="text-decoration: none;" data-info='${JSON.stringify(row)}'>${row.Hora}</a></td>
                    <td>${row.Lado}</td>
                    <td>${row.Strikes}</td>
                    <td>${row.Credito.toFixed(2)}</td>
                    <td>${row.DiffPts}</td>
                    <td>${row.DiffPct.toFixed(2)}%</td>
                    <td class="${row.Moneyness === 'ITM' ? 'text-danger fw-bold' :
                    row.Moneyness === 'ITM P' ? 'text-warning fw-bold' :
                        'text-success fw-bold'
                }">${row.Moneyness}</td>
                    <td class="${pl >= 0 ? 'text-success' : 'text-danger'} text-end">$${pl.toFixed(2)}</td>
                `;
            tableBody.appendChild(tr);
        });

        document.getElementById('infoResumenVertical').innerHTML = `
  <span><strong>{{ _('Estrategia:') }}</strong> ${data[0].Estrategia}</span>
  <span><strong>{{ _('Símbolo:') }}</strong> ${data[0].Simbolo}</span>
  <span><strong>{{ _('Expiración:') }}</strong> ${data[0].Expiracion}</span>
`;


        document.getElementById('summaryContainer').style.display = 'block';
        document.getElementById('totalWins').textContent = wins;
        document.getElementById('totalLosses').textContent = losses;

        const total = wins + losses;
        const winRate = total > 0 ? ((wins / total) * 100).toFixed(1) + '%' : '0%';
        document.getElementById('winRate').textContent = winRate;
        document.getElementById('predictionTableContainer').style.display = 'block';
        document.getElementById('predictionTableContainer').style.display = 'block';

        document.getElementById('countOTM').textContent = otmCount;
        document.getElementById('countITM').textContent = itmCount;
        document.getElementById('countITMP').textContent = itmpCount;
    }


    document.addEventListener('click', function (e) {
        if (!e.target.classList.contains('hora-link')) return;

        e.preventDefault();
        const rowData = JSON.parse(e.target.dataset.info);

        const riesgo = document.getElementById('riskLevel').options[
            document.getElementById('riskLevel').selectedIndex
        ].text;

        const precioActual = parseFloat(rowData.precio_actual);
        const credito = parseFloat(rowData.Credito);

        // Calcular tendencia corta basada en total_pos y total_neg
        const totalPos = parseInt(rowData.total_pos);
        const totalNeg = parseInt(rowData.total_neg);
        const total = totalPos + totalNeg;

        let tendenciaCalculada = "FLAT";
        let porcentajeTendencia = 0;

        if (total > 0) {
            const pctPos = (totalPos / total) * 100;
            const pctNeg = (totalNeg / total) * 100;
            const diff = Math.abs(pctPos - pctNeg);

            if (pctPos > pctNeg && diff >= 20) {
                tendenciaCalculada = "UP";
                porcentajeTendencia = pctPos.toFixed(0);
            } else if (pctNeg > pctPos && diff >= 20) {
                tendenciaCalculada = "DOWN";
                porcentajeTendencia = pctNeg.toFixed(0);
            } else {
                porcentajeTendencia = Math.max(pctPos, pctNeg).toFixed(0);
            }
        }

        let resumen = "";

        if (rowData.Estrategia === "VERTICAL") {
            const ventaStrike = parseFloat(rowData.Strikes.split('/')[0]);
            const compraStrike = parseFloat(rowData.Strikes.split('/')[1]);
            const distanciaPts = (ventaStrike - precioActual).toFixed(2);
            const distanciaPct = ((ventaStrike - precioActual) / precioActual * 100).toFixed(2);
            const spreadWidth = Math.abs(ventaStrike - compraStrike) * 100;
            const perdidaMax = (spreadWidth - credito).toFixed(2);

            resumen = `
🔎 {{ _('Resumen de Idea Vertical') }}

🕒 {{ _('Hora') }}: ${rowData.Hora}
📊 {{ _('Símbolo') }}: ${rowData.Simbolo}
📈 {{ _('Estrategia') }}: ${rowData.Estrategia}
⚠️ {{ _('Nivel de Riesgo') }}: ${riesgo}
📅 {{ _('Expiración') }}: ${rowData.Expiracion}
📍 {{ _('Lado') }}: ${rowData.Lado}
📉 {{ _('Strikes') }}: Sell ${ventaStrike} / Buy ${compraStrike}
💰 {{ _('Máxima Ganancia') }}: $${credito.toFixed(2)}
💥 {{ _('Máxima Pérdida') }}: $${perdidaMax}
📏 {{ _('Distancia') }}: ${distanciaPts} pts (${distanciaPct}%)

--- 📊 {{ _('Información Técnica') }} ---
💹 {{ _('Precio Actual') }}: ${rowData.precio_actual}
📊 {{ _('Tendencia 0DTE') }}: ${rowData.tendencia_30min}
📊 {{ _('Tendencia Corta') }}: ${tendenciaCalculada} (${porcentajeTendencia}%)
📈 {{ _('Score') }}: ${parseFloat(rowData.score_30min).toFixed(4)}

📌 {{ _('OI Clusters') }}: ${rowData.strikes_OI}
📌 {{ _('GEX Clusters') }}: ${rowData.strikes_GEX}
📌 {{ _('Volumen Clusters') }}: ${rowData.strikes_Volumen}
`.trim();

        } else if (rowData.Estrategia === "IRON CONDOR") {
            const [putsPart, callsPart] = rowData.Strikes_IC.split('-');
            const [put_sell, put_buy] = putsPart.split('/').map(Number);
            const [call_sell, call_buy] = callsPart.split('/').map(Number);

            const distanciaPtsPut = (put_sell - precioActual).toFixed(2);
            const distanciaPctPut = ((put_sell - precioActual) / precioActual * 100).toFixed(2);
            const distanciaPtsCall = (call_sell - precioActual).toFixed(2);
            const distanciaPctCall = ((call_sell - precioActual) / precioActual * 100).toFixed(2);

            const spreadWidth = Math.abs(put_sell - put_buy) * 100;
            const perdidaMax = (spreadWidth - credito).toFixed(2);

            resumen = `
🔎 {{ _('Resumen de Idea Iron Condor') }}

🕒 {{ _('Hora') }}: ${rowData.Hora}
📊 {{ _('Símbolo') }}: ${rowData.Simbolo}
📈 {{ _('Estrategia') }}: ${rowData.Estrategia}
⚠️ {{ _('Nivel de Riesgo') }}: ${riesgo}
📅 {{ _('Expiración') }}: ${rowData.Expiracion}
📉 {{ _('Strikes') }}:
  • PUT:  Sell ${put_sell} / Buy ${put_buy}
  • CALL: Sell ${call_sell} / Buy ${call_buy}
💰 {{ _('Máxima Ganancia') }}: $${credito.toFixed(2)}
💥 {{ _('Máxima Pérdida') }}: $${perdidaMax}
📏 {{ _('Distancia PUT') }}: ${distanciaPtsPut} pts (${distanciaPctPut}%)
📏 {{ _('Distancia CALL') }}: ${distanciaPtsCall} pts (${distanciaPctCall}%)

--- 📊 {{ _('Información Técnica') }} ---
💹 {{ _('Precio Actual') }}: ${rowData.precio_actual}
📊 {{ _('Tendencia 0DTE') }}: ${rowData.tendencia_30min}
📊 {{ _('Tendencia Corta') }}: ${tendenciaCalculada} (${porcentajeTendencia}%)
📈 {{ _('Score') }}: ${parseFloat(rowData.score_30min).toFixed(4)}

📌 {{ _('OI Clusters') }}: ${rowData.strikes_OI}
📌 {{ _('GEX Clusters') }}: ${rowData.strikes_GEX}
📌 {{ _('Volumen Clusters') }}: ${rowData.strikes_Volumen}
`.trim();
        }

        let payload = {};

        // Reordenar de MM/DD/YYYY a YYYY-MM-DD
        const [mm, dd, yyyy] = rowData.Expiracion.split("/");
        const fechaFormateada = `${yyyy}-${mm.padStart(2, "0")}-${dd.padStart(2, "0")}`;

        // Mantener hora completa con segundos
        const horaFormateada = rowData.Hora;  // se espera algo como "15:20:31"

        if (rowData.Estrategia === "VERTICAL") {
            payload = {
                symbol: rowData.Simbolo,
                Day: fechaFormateada,
                Time: horaFormateada,
                Option: rowData.Lado,
                Strikes: rowData.Strikes,
                PL: rowData["P/L"]

            };
        } else if (rowData.Estrategia === "IRON CONDOR") {

            // Reordenar PUTs si vienen invertidos
            const [put, call] = rowData.Strikes_IC.replace("-", " ").split(" ");
            const [p1, p2] = put.split("/");
            const putCorregido = `${Math.max(p1, p2)}/${Math.min(p1, p2)}`;
            payload = {
                symbol: rowData.Simbolo,
                Day: fechaFormateada,
                Time: horaFormateada,
                Strikes: `${putCorregido} ${call}`,
                PL: rowData["P/L"]
            };
        }

        // Guardamos el payload globalmente
        rowDataGlobal = payload;

        // Forzar pestaña IDEA antes de abrir el modal
        document.getElementById('contenedorActual').classList.add('d-none');
        document.getElementById('contenedorIdea').classList.remove('d-none');
        document.getElementById('btnIdea').classList.add('active');
        document.getElementById('btnActual').classList.remove('active');
        document.getElementById('refrescarEvolucion').classList.add('d-none');

        // Mostrar resumen y abrir modal
        document.getElementById('resumenTexto').textContent = resumen;
        new bootstrap.Modal(document.getElementById('resumenModal')).show();


    });


    document.getElementById('copiarResumen').addEventListener('click', () => {
        let texto = "";

        const resumen = document.getElementById('resumenTexto');
        const encabezado = document.getElementById('encabezadoGrafico');
        const spxActual = document.getElementById('spxActual')?.innerText.trim() || "N/A";

        // Detectar idioma actual
        const lang = document.documentElement.lang || "es";

        // Traducciones
        const textos = {
            es: {
                titulo: "🔎 Idea Original:",
                datosActuales: "📌 Datos Actuales:",
                precioActual: "💹 Precio Actual",
                ganancia: "💵 Ganancia / Pérdida"
            },
            en: {
                titulo: "🔎 Original Idea:",
                datosActuales: "📌 Current Data:",
                precioActual: "💹 Current Price",
                ganancia: "💵 P/L"
            }
        };

        const t = textos[lang] || textos["es"];

        if (resumen && resumen.offsetParent !== null) {
            texto = `${t.titulo}\n\n${resumen.textContent.trim()}`;
        } else if (encabezado) {
            const filas = encabezado.querySelectorAll("tr");
            const lineas = [];
            let profitText = "";

            filas.forEach(tr => {
                const celdas = tr.querySelectorAll("td");
                celdas.forEach(td => {
                    const contenido = td.innerText.trim();
                    if (contenido.startsWith("💵")) {
                        profitText = `${t.ganancia}: ${contenido.split(":")[1].trim()}`;
                    } else if (contenido) {
                        lineas.push(contenido);
                    }
                });
            });

            lineas.unshift(t.titulo);  // Insertar título arriba
            lineas.push('');
            lineas.push(t.datosActuales);
            lineas.push(`${t.precioActual}: ${spxActual}`);
            if (profitText) lineas.push(profitText);

            texto = lineas.join('\n');
        }

        if (texto.trim() !== "") {
            navigator.clipboard.writeText(texto).then(() => {
                const flash = document.getElementById('flashResumen');
                flash.classList.remove('d-none');
                setTimeout(() => {
                    flash.classList.add('d-none');
                }, 3000);
            });
        } else {
            alert("❌ Nothing to copy");
        }
    });






    async function loadPredictionTableIC(date, symbol) {
        const risk = document.getElementById('riskLevel').value;

        const response = await fetch(`/get_prediction_data_ic?date=${date}&risk=${risk}&symbol=${symbol}`);
        const result = await response.json();
        const spxActual = result.spx_final;
        const data = result.data.reverse();

        const tableBody = document.querySelector('#predictionTableIC tbody');
        tableBody.innerHTML = '';

        if (data.error) {
            const row = tableBody.insertRow();
            const cell = row.insertCell();
            cell.colSpan = 13; // tenemos 13 columnas
            cell.textContent = 'No hay datos disponibles.';
            return;
        }


        if (lastSPXIC !== spxActual) {
            const movement = lastSPXIC === null ? 0 : spxActual - lastSPXIC;

            document.getElementById('spxActualIC').textContent = `${symbol} ${spxActual.toFixed(2)}`;
            animateSPXUpdate('spxActualIC', movement);

            lastSPXIC = spxActual;
        }



        let totalPL = 0;
        let wins = 0;
        let losses = 0;

        let otmCountIC = 0;
        let itmCountIC = 0;
        let itmpCountIC = 0;

        data.forEach(row => {

            const monPUT = row.Moneyness_PUT;
            const monCALL = row.Moneyness_CALL;

            [monPUT, monCALL].forEach(mon => {
                if (mon === 'OTM') otmCountIC++;
                else if (mon === 'ITM') itmCountIC++;
                else if (mon === 'ITM P') itmpCountIC++;
            });


            const pl = row['P/L'];
            totalPL += pl;
            if (pl >= 0) wins++;
            else if (pl < 0) losses++;

            const tr = document.createElement('tr');
            tr.innerHTML = `
<td><a href="#" class="hora-link" style="text-decoration: none;" data-info='${JSON.stringify(row)}'>${row.Hora}</a></td>
                <td>${row.Strikes_IC}</td>
                <td>${row.Credito.toFixed(2)}</td>

                <td>${row.DiffPts_PUT}</td>
                <td>${row.DiffPct_PUT.toFixed(2)}%</td>
                <td class="${row.Moneyness_PUT === 'ITM' ? 'text-danger fw-bold' :
                    row.Moneyness_PUT === 'ITM P' ? 'text-warning fw-bold' :
                        'text-success fw-bold'
                }">${row.Moneyness_PUT}</td>

                <td>${row.DiffPts_CALL}</td>
                <td>${row.DiffPct_CALL.toFixed(2)}%</td>
                <td class="${row.Moneyness_CALL === 'ITM' ? 'text-danger fw-bold' :
                    row.Moneyness_CALL === 'ITM P' ? 'text-warning fw-bold' :
                        'text-success fw-bold'
                }">${row.Moneyness_CALL}</td>

                <td class="${pl >= 0 ? 'text-success' : 'text-danger'} text-end">$${pl.toFixed(2)}</td>
            `;
            tableBody.appendChild(tr);
        });

        document.getElementById('infoResumenIronCondor').innerHTML = `
  <span class="resumen-linea"><strong>{{ _('Estrategia:') }}</strong> ${data[0].Estrategia}</span>
  <span class="resumen-linea"><strong>{{ _('Símbolo:') }}</strong> ${data[0].Simbolo}</span>
  <span class="resumen-linea"><strong>{{ _('Expiración:') }}</strong> ${data[0].Expiracion}</span>
`;

        document.getElementById('summaryContainerIC').style.display = 'block';
        document.getElementById('totalWinsIC').textContent = wins;
        document.getElementById('totalLossesIC').textContent = losses;
        document.getElementById('predictionTableContainerIC').style.display = 'block';
        const totalIC = wins + losses;
        const winRateIC = totalIC > 0 ? ((wins / totalIC) * 100).toFixed(1) + '%' : '0%';
        document.getElementById('winRateIC').textContent = winRateIC;

        document.getElementById('countOTMIC').textContent = otmCountIC;
        document.getElementById('countITMIC').textContent = itmCountIC;
        document.getElementById('countITMPIC').textContent = itmpCountIC;
    }


    async function loadAvailableDates() {
        try {
            // Mostrar spinner
            document.getElementById("loading-spinner").style.display = "flex";
            const selectedSymbol = document.getElementById("symbolSelect").value;
            const response = await fetch(`/get_dates?symbol=${selectedSymbol}`);
            const dates = await response.json();
            $("#datePicker").datepicker("destroy");
            $("#datePicker").datepicker({
                dateFormat: "yy-mm-dd",
                beforeShowDay: function (date) {
                    const dateString = $.datepicker.formatDate("yy-mm-dd", date);
                    return [dates.indexOf(dateString) > -1];
                },
                onSelect: function (dateText) {
                    clearTables();

                    // const strategy = document.getElementById('strategySelect').value;

                    // if (strategy === "VERTICAL") {
                    //     loadPredictionTable(dateText, selectedSymbol);
                    //     document.getElementById('predictionTableContainer').style.display = 'block';
                    // } else if (strategy === "IRON_CONDOR") {
                    //     loadPredictionTableIC(dateText, selectedSymbol);
                    //     document.getElementById('predictionTableContainerIC').style.display = 'block';
                    // }

                    startAutoRefresh();
                }
            });

            return dates;

        } catch (error) {
            console.error("❌ Error", error);
            return [];
        } finally {
            // Ocultar spinner al finalizar
            document.getElementById("loading-spinner").style.display = "none";
        }
    }

    function startAutoRefresh() {
        if (autoRefreshInterval) {
            clearInterval(autoRefreshInterval);
        }

        autoRefreshInterval = setInterval(() => {
            const { DateTime } = luxon;
            const nowNY = DateTime.now().setZone('America/New_York');
            const hour = nowNY.hour;
            const minute = nowNY.minute;

            const isWithinRange =
                (hour > 10 || (hour === 10 && minute >= 5)) &&
                (hour < 16 || (hour === 16 && minute === 0));

            if (isWithinRange) {
                const selectedDate = document.getElementById('datePicker').value;
                if (selectedDate) {
                    const strategy = document.getElementById('strategySelect').value;
                    const selectedSymbol = document.getElementById("symbolSelect").value;

                    if (strategy === "VERTICAL") {
                        loadPredictionTable(selectedDate, selectedSymbol);
                    } else if (strategy === "IRON_CONDOR") {
                        loadPredictionTableIC(selectedDate, selectedSymbol);
                    }

                    console.log(`market open: ${nowNY.toFormat('HH:mm:ss')} NY`);
                }
            } else {
                console.log(`market close: ${nowNY.toFormat('HH:mm:ss')}`);
            }
        }, 10000);
    }

    function clearTables() {
        document.querySelector('#predictionTable tbody').innerHTML = '';
        document.getElementById('summaryContainer').style.display = 'none';
        document.getElementById('predictionTableContainer').style.display = 'none';

        document.querySelector('#predictionTableIC tbody').innerHTML = '';
        document.getElementById('summaryContainerIC').style.display = 'none';
        document.getElementById('predictionTableContainerIC').style.display = 'none';
    }



    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 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 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 layout = {
            title: {
                text: t.title,
                font: { size: 16 }
            },
            xaxis: {
                title: { text: t.xLabel, font: { size: 11 } },
                color: isDarkMode ? '#ccc' : '#333',
                gridcolor: isDarkMode ? '#444' : '#ccc',
                zerolinecolor: isDarkMode ? '#555' : '#aaa'
            },
            yaxis: {
                title: { text: t.yLabelPL, font: { size: 11 } },
                tickprefix: '$',
                color: isDarkMode ? '#ccc' : '#333',
                gridcolor: isDarkMode ? '#444' : '#ccc',
                zerolinecolor: isDarkMode ? '#555' : '#aaa'
            },
            yaxis2: {
                title: { text: t.yLabelPrice, font: { size: 11 } },
                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 },
            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: 12, color: isDarkMode ? 'white' : 'black' }
        };

        // Agregar bandas de strikes (rectángulos)
        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 }
                    });
                }
            });
        }

        Plotly.purge('plotlyEvolutionChart');
        Plotly.newPlot('plotlyEvolutionChart', [tracePL, tracePrice, strikeBandLegend], layout, {
            responsive: true,
            displayModeBar: false
        });

        // Mostrar encabezado con info de la operación
        const ultimo = evolutionData[evolutionData.length - 1];
        const profit = parseFloat(rowDataGlobal.PL ?? 0).toFixed(2);
        const profitIcon = profit >= 0 ? '📈' : '📉';
        const strategy = document.getElementById("strategySelect").value;
        const riskLevel = document.getElementById("riskLevel").options[
            document.getElementById("riskLevel").selectedIndex
        ].text;
        const side = rowDataGlobal.Option || "PUT/CALL";

        let strikeHTML = "";
        if (strategy === "IRON_CONDOR") {
            const [putStrikes, callStrikes] = strikes.split(" ");
            const [putSell, putBuy] = putStrikes.split("/");
            const [callSell, callBuy] = callStrikes.split("/");
            strikeHTML = `
            📉 <strong>{{ _('Strikes') }}:</strong><br>
            • <strong>PUT:</strong> {{ _('Vender') }} ${parseInt(putSell)} / {{ _('Comprar') }} ${parseInt(putBuy)}<br>
            • <strong>CALL:</strong> {{ _('Vender') }} ${parseInt(callSell)} / {{ _('Comprar') }} ${parseInt(callBuy)}
        `;
        } else if (strikes.includes("/")) {
            const [sell, buy] = strikes.split("/");
            strikeHTML = `
            📍 <strong>{{ _('Lado') }}:</strong> ${side}<br>
            📉 <strong>{{ _('Strikes') }}:</strong> {{ _('Vender') }} ${parseInt(sell)} / {{ _('Comprar') }} ${parseInt(buy)}
        `;
        } else {
            strikeHTML = `
            📍 <strong>{{ _('Lado') }}:</strong> ${side}<br>
            📉 <strong>{{ _('Strikes') }}:</strong> ${strikes}
        `;
        }

        const encabezadoHTML = `
        <table class="table table-sm table-borderless mb-2">
            <tbody>
                <tr>
                    <td>🕒 <strong>{{ _('Hora') }}:</strong> ${rowDataGlobal.Time}</td>
                    <td>📊 <strong>{{ _('Símbolo') }}:</strong> ${rowDataGlobal.symbol}</td>
                    <td>📈 <strong>{{ _('Estrategia') }}:</strong> ${strategy.replace("_", " ")}</td>
                </tr>
                <tr>
                    <td>⚠️ <strong>{{ _('Nivel de Riesgo') }}:</strong> ${riskLevel}</td>
                    <td>📅 <strong>{{ _('Expiración') }}:</strong> ${rowDataGlobal.Day}</td>
                    <td>${strikeHTML}</td>
                </tr>
                <tr>
                    <td colspan="3" class="p-0">
                        <div style="
                            background-color: ${profit >= 0 ? '#d4edda' : '#f8d7da'};
                            color: ${profit >= 0 ? '#155724' : '#721c24'};
                            padding: 8px 12px;
                            font-size: 1.02rem;
                            font-weight: 600;
                            text-align: center;
                        ">
                            {{ _('Ganancia / Pérdida') }}:
                            ${profitIcon} $${profit}
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    `;
        document.getElementById("encabezadoGrafico").innerHTML = encabezadoHTML;

        // Mostrar advertencia si ya son más de las 15:30 NY
        const { DateTime } = luxon;
        const nowNY = DateTime.now().setZone('America/New_York');
        const marketClosingSoon = (nowNY.hour > 15) || (nowNY.hour === 15 && nowNY.minute >= 30);

        const advertenciaEl = document.getElementById("mensajeAdvertenciaCierre");
        if (advertenciaEl) {
            advertenciaEl.classList.toggle("d-none", !marketClosingSoon);
        }
    }



    document.getElementById('refrescarEvolucion').addEventListener('click', async function () {
        const estrategia = document.getElementById("strategySelect").value;
        let endpoint;

        if (estrategia === "VERTICAL") {
            endpoint = "/backtestingIdea/procesar_fila_vertical";
        } else if (estrategia === "IRON_CONDOR") {
            endpoint = "/backtestingIdea/procesar_fila_ironcondor";
        } else {
            showFlashMessage("⚠️ Estrategia no reconocida.", "danger");
            return;
        }

        document.getElementById('loading-spinner').style.display = 'flex';

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

            const result = await response.json();

            if (result.status === "success") {
                // ✅ Buscar la fila actualizada en la tabla solo por hora
                const filas = document.querySelectorAll(".hora-link");
                const horaBuscada = rowDataGlobal.Time?.slice(0, 5);

                for (const fila of filas) {
                    const data = JSON.parse(fila.dataset.info);
                    const horaFila = data.Hora?.slice(0, 5);

                    if (horaFila === horaBuscada) {
                        rowDataGlobal.PL = data["P/L"];
                        break;
                    }
                }

                // 📈 Mostrar gráfico con PL actualizado
                mostrarGraficoEvolucion(
                    result.evolution,
                    result.fecha,
                    result.strikes,
                    result.tipo || ""
                );
            } else {
                showFlashMessage(result.message || "⚠️ Error al procesar evolución", "danger");
            }

        } catch (err) {
            console.error("❌ Error en fetch:", err);
            showFlashMessage("⚠️ Error al actualizar los datos", "danger");
        } finally {
            document.getElementById('loading-spinner').style.display = 'none';
        }
    });

</script>
{% endblock %}