{% extends "base.html" %}

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

{% block extra_head %}
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.2.1/dist/chartjs-plugin-zoom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@1.1.0"></script> -->


<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>
<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-predictor.css') }}">
<!-- <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></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.plot.ly/plotly-2.32.0.min.js"></script>
{% endblock %}

{% block content %}

<!-- Modal del Informe AI -->
<div class="modal fade" id="modalInformeAI" tabindex="-1" aria-labelledby="modalInformeAILabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content text-bg-dark">
            <div class="modal-header">
                <h5 class="modal-title" id="modalInformeAILabel">{{ _('Informe del Mercado') }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <div id="informeAITexto" class="text-light text-start px-2"
                    style="white-space: pre-wrap; font-family: 'Segoe UI', sans-serif; line-height: 1.6;"></div>
            </div>
        </div>
    </div>
</div>
</div>

<div id="market-status-marker" class="market-status hidden">
</div>


<!-- Encabezado -->
<div class="text-center mb-4">
    <h5 class="fw-semibold mb-1">{{ _('Seguimiento Intradía del Mercado') }}</h5>
    <p class="small text-center mb-0">
        {{ _('Visualiza en tiempo real la evolución de GEX, Open Interest, Volumen y otras señales derivadas de la
        cadena de opciones para detectar posibles tendencias durante la jornada. Uso exclusivo con fines analíticos o
        educativos.') }}
    </p>
</div>
<section class="my-4">
    <div class="mx-auto px-3" style="max-width: 600px;"> <!-- 👈 agregado px-3 -->
        <div class="card dynamic-bg shadow-lg border-secondary rounded-4">
            <div class="card-body pt-2 pb-4 px-3">

                <!-- Título pequeño alineado a la izquierda -->
                <div class="mb-3">
                    <p class="mb-0 small fw-semibold text-start">
                        {{ _('Seleccione índice y fecha') }}
                    </p>
                </div>

                <div class="d-flex flex-wrap justify-content-center align-items-center gap-4">

                    <!-- Símbolo -->
                    <div class="d-flex align-items-center gap-2">
                        <label for="symbolSelect" class="mb-0 fw-semibold">{{ _('Símbolo:') }}</label>
                        <select id="symbolSelect" class="form-select form-select-sm rounded w-auto">
                            <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>

                    <!-- Fecha -->
                    <div class="d-flex align-items-center gap-2">
                        <label for="datePicker" class="mb-0 fw-semibold">{{ _('Fecha:') }}</label>
                        <input type="text" id="datePicker" class="form-control form-control-sm rounded w-auto" readonly
                            style="min-width: 130px;">
                    </div>

                </div>

            </div>

            <div class="mb-3">
                <p class="small fst-italic text-center mb-0">
                    {{ _('Los datos en tiempo real están disponibles a partir de las 9:35 a.m. (hora de Nueva York).')
                    }}
                </p>
            </div>
        </div>
    </div>
</section>





<div class="text-center mt-3">
    <button id="btnGenerarInforme" class="btn btn-outline-info fw-bold" data-bs-toggle="tooltip" data-bs-placement="top"
        title="{{ _('Genera un informe con IA que analiza datos clave del mercado y proyecta posibles escenarios del día.') }}">
        {{ _('📊 Generar Informe (Beta)') }}
    </button>
</div>


<div id="difference-container">

    <div class="difference-box" title="{{ _('Precio actual del índice/subyacente') }}">
        <span class="label">{{ _('Spot') }}</span>
        <span id="spot-price" class="value">--</span>
    </div>

    <div class="difference-box" title="{{ _('Diferencia en puntos del precio con respecto al punto de gravedad') }}">
        <span class="label">{{ _('Dist. PG $') }}</span>
        <span id="difference-points" class="value">--</span>
    </div>
    <div class="difference-box"
        title="{{ _('Diferencia en porcentaje del precio con respecto al punto de gravedad') }}">
        <span class="label">{{ _('Dist. PG %%') }}</span>
        <span id="difference-percentage" class="value">--</span>
    </div>
    <div class="difference-box" title="{{ _('Movimiento esperado del activo basado en volatilidad') }}">
        <span class="label">{{ _('Mov Esperado') }}</span>
        <span id="expected-move" class="value">--</span>
    </div>
    <div class="difference-box" title="{{ _('Tendencia general estimada del mercado') }}">
        <span class="label">{{ _('Tendencia') }}</span>
        <span id="tendencia-display" class="value trend-neutral">--</span>
    </div>
    <div class="difference-box"
        title="{{ _('Puntaje basado en diversos indicadores para evaluar la dirección del mercado') }}">
        <span class="label">{{ _('Score') }}</span>
        <span id="score-display" class="value">--</span>
    </div>


</div>

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

<div style="max-width: 90%; margin: 0 auto;">
    <div class="row">
        <div id="chart-container" class="col-12 col-md-6 mt-4">
            <div class="scale-label" style="display: flex;">
                <span>{{ _('Principal') }}</span>
            </div>
            <div id="chart"
                style="height: 400px; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 2px solid #ddd;">
            </div>

        </div>

        <div class="col-12 col-md-6 mt-4" id="containerStrikesGexPutCall">
            <div class="scale-label" style="display: flex; justify-content: space-between; align-items: center;">
                <span>{{ _('Strikes GEX Put/Call') }}</span>
            </div>

            <!-- Contenedor Plotly con estilo visual consistente -->
            <div id="chartStrikesGexPutCall"
                style="height: 400px; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 2px solid #ddd;">

            </div>

            <!-- Selectores de modo y horario -->
            <div
                style="display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px;">

                <!-- Slider de horario -->
                <div style="display: flex; align-items: center; gap: 8px;">
                    <span id="dataHourLabel">{{ _('Horario') }}</span>
                    <input type="range" id="dataHourSlider" min="0" max="0" step="1" value="0" style="width: 120px;">
                    <span id="dataHourValue">--:--</span>

                    <!-- Botón Live -->
                    <button id="liveToggleBtn" class="btn btn-sm btn-success"
                        style="padding: 2px 8px; font-size: 0.8rem;">
                        🟢 Live
                    </button>
                </div>
                <!-- Selector de modo -->
                <div style="display: flex; align-items: center; gap: 8px;">
                    <span id="viewModeLabel">{{ _('Modo CALL VS PUT') }}</span>
                    <input type="range" id="viewModeSlider" min="0" max="1" step="1" value="0" style="width: 40px;">
                </div>


            </div>
        </div>


    </div>
    <div class="row">


        <div class="col-12 col-md-6 mt-4" id="containerDominantStrikes">
            <div class="scale-label" style="display: flex; justify-content: space-between; align-items: center;">
                <span>{{ _('Strikes Dominantes GEX') }}</span>
                <!-- <i class="fa fa-search-plus" id="zoomDominantStrikes" style="cursor: pointer;"></i> -->
            </div>

            <div id="chartDominantStrikes"
                style="height: 400px; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 2px solid #ddd;">

            </div>
        </div>





        <div class="col-12 col-md-6 mt-4" id="containerGEXMax">
            <div class="scale-label" style="display: flex; justify-content: space-between; align-items: center;">
                <span>{{ _('Acumulado GEX Dominantes') }}</span>
                <!-- <i class="fa fa-search-plus" id="zoomGEXMax" style="cursor: pointer;"></i> -->
            </div>

            <div id="chart-chartGEXMax">
                <div id="chartGEXMax"
                    style="height: 400px; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 2px solid #ddd;">

                </div>
            </div>

            <div style="display: flex; align-items: center; justify-content: flex-end; gap: 10px;">
                <span id="viewModeLabel_2" data-i18n-key="modeCombined">{{ _('Modo Juntos') }}</span>
                <input type="range" id="viewModeSlider_2" min="0" max="1" step="1" value="0" style="width: 40px;">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 col-md-6 mt-4" id="containerScore">
            <div class="scale-label" style="display: flex; justify-content: space-between; align-items: center;">
                <span>{{ _('Evolución del Score') }}</span>
            </div>


            <!-- Contenedor con diseño consistente (borde, sombra, etc) -->
            <div id="chartScore"
                style="height: 400px; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 2px solid #ddd;">

            </div>
            <div id="score-warning" style="display: none; font-size: 13px; color: #cc8800; margin-top: 4px;">
                {{ _('Este gráfico comienza a mostrar resultados a partir de las 10:05 AM (hora local de mercado).') }}
            </div>

        </div>

        <div id="chart-container1" class="col-12 col-md-6 mt-4">
            <div class="scale-label" style="display: flex;">
                <span>{{ _('Tendencias') }}</span>

            </div>
            <div class="trend-box panel-elegante" id="chart-containerTrend" style="height: 400px;">
                <div class="scale-container">
                    <div class="scale-label"><span id="symbol-title-0dte">SPX </span>{{ _('Tendencia 0DTE') }}</div>
                    <div class="scale-bar">
                        <div id="scale-indicator" class="scale-indicator"></div>
                        <div class="scale-ticks">
                            <span style="left: 0%; margin-top: -12px;">-1</span>
                            <span style="left: 25%; margin-top: -12px; ">-0.5</span>
                            <span style="left: 50%; margin-top: -12px;">0</span>
                            <span style="left: 75%; margin-top: -12px;">0.5</span>
                            <span style="left: 98%; margin-top: -12px;">1</span>
                        </div>
                    </div>
                </div>

                <div class="scale-container">
                    <div class="scale-label"><span id="symbol-title-short">SPX </span>{{ _('Tendencia Corta') }}</div>
                    <div class="scale-bar">
                        <div id="short-scale-indicator" class="scale-indicator"></div>
                        <div class="scale-ticks">
                            <span style="left: 0%; margin-top: -12px;">-1</span>
                            <span style="left: 25%; margin-top: -12px; ">-0.5</span>
                            <span style="left: 50%; margin-top: -12px;">0</span>
                            <span style="left: 75%; margin-top: -12px;">0.5</span>
                            <span style="left: 98%; margin-top: -12px;">1</span>
                        </div>
                    </div>
                </div>

                <div id="difference-containerSmall">
                    <div class="scale-label full-width">{{ _('Tendencia Individual') }}</div>

                    <div class="difference-box" title="{{ _('Tendencia del punto de gravedad del mercado') }}">
                        <span class="label">{{ _('Gravedad') }}</span>
                        <span id="gravity-trend-display" class="value trend-neutral">--</span>
                    </div>

                    <div class="difference-box"
                        title="{{ _('Tendencia basada en el Open Interest y la exposición Gamma (GEX)') }}">
                        <span class="label">{{ _('OI GEX') }}</span>
                        <span id="pred-oi-gex-trend-display" class="value trend-neutral">--</span>
                    </div>

                    <div class="difference-box"
                        title="{{ _('Nivel donde la Delta se vuelve neutral, indicando equilibrio de opciones') }}">
                        <span class="label">{{ _('Delta Neutro') }}</span>
                        <span id="pred-delta-neutro-trend-display" class="value trend-neutral">--</span>
                    </div>

                    <div class="difference-box"
                        title="{{ _('Volumen de operaciones que pueden influir en la dirección del mercado') }}">
                        <span class="label">{{ _('Volumen') }}</span>
                        <span id="pred-volumen-trend-display" class="value trend-neutral">--</span>
                    </div>
                </div>
            </div>
        </div>




    </div>
</div>

<div class="table-responsive">
    <table>
        <thead>
            <tr>
                <th>{{ _('Timestamp') }}</th>
                <th>{{ _('Price') }}</th>
                <th>{{ _('Punto de Gravedad') }}</th>
                <th>{{ _('Strikes OI') }}</th>
                <th>{{ _('Strikes Volumen') }}</th>
                <th>{{ _('Strikes GEX') }}</th>
                <th>{{ _('Predicción OI GEX') }}</th>
                <th>{{ _('Predicción Delta Neutro') }}</th>
                <th>{{ _('Predicción Volumen') }}</th>
                <th>{{ _('Tendencia') }}</th>
                <th>{{ _('Score') }}</th>
            </tr>
        </thead>
        <tbody id="data-table-body"></tbody>
    </table>
</div>



{% endblock %}

{% block scripts %}
{{ super() }}
<script>
    let liveMode = true;

    document.getElementById("liveToggleBtn").addEventListener("click", () => {
        // Solo permite activar Live, nunca desactivarlo desde el botón
        if (!liveMode) {
            liveMode = true;

            const btn = document.getElementById("liveToggleBtn");
            btn.textContent = "🟢 Live";
            btn.classList.remove("btn-outline-danger");
            btn.classList.add("btn-success");

            // Fijar el slider al último valor
            const slider = document.getElementById("dataHourSlider");
            slider.value = slider.max;
            document.getElementById("dataHourValue").textContent = validTimes[slider.max];

            // Llamar función Live
            fetchGEXData();
        }
    });


    const dataHourSlider = document.getElementById('dataHourSlider');
    const dataHourValue = document.getElementById('dataHourValue');
    let validTimes = [];  // global para que otras funciones lo usen

    function pad(n) {
        return n < 10 ? '0' + n : n;
    }

    function generateValidTimes(selectedDateStr) {
        const times = [];

        if (!selectedDateStr || isNaN(Date.parse(selectedDateStr))) {
            console.warn("Fecha inválida:", selectedDateStr);
            return [];
        }

        const now = new Date();
        const nyTime = new Date(now.toLocaleString("en-US", { timeZone: "America/New_York" }));
        const selectedDate = new Date(`${selectedDateStr}T00:00:00`);

        const isToday = selectedDate.toISOString().slice(0, 10) === nyTime.toISOString().slice(0, 10);
        const isFuture = selectedDate > nyTime;

        const marketOpenHour = 9;
        const marketOpenMinute = 35;
        const marketCloseHour = 16;
        const marketCloseMinute = 0;

        if (isFuture || (isToday && (nyTime.getHours() < marketOpenHour || (nyTime.getHours() === marketOpenHour && nyTime.getMinutes() < marketOpenMinute)))) {
            return [];
        }

        let hour = marketOpenHour;
        let minute = marketOpenMinute;

        while (hour < marketCloseHour || (hour === marketCloseHour && minute <= marketCloseMinute)) {
            const candidateTime = new Date(selectedDate);
            candidateTime.setHours(hour, minute, 0, 0);

            if (isToday && candidateTime > nyTime) break;

            times.push(`${pad(hour)}:${pad(minute)}`);

            minute += 1;
            if (minute >= 60) {
                minute = 0;
                hour += 1;
            }
        }

        return times;
    }

    function updateSliderFromDatePicker(selectedDate) {
        validTimes = generateValidTimes(selectedDate);

        if (validTimes.length > 0) {
            dataHourSlider.max = validTimes.length - 1;
            dataHourSlider.value = validTimes.length - 1;
            dataHourValue.textContent = validTimes[dataHourSlider.value];
            dataHourSlider.disabled = false;

            dataHourSlider.addEventListener("input", () => {
                const index = parseInt(dataHourSlider.value);
                dataHourValue.textContent = validTimes[index] || "--:--";
            });

        } else {
            dataHourValue.textContent = "Sin horarios válidos";
            dataHourSlider.disabled = true;
        }
    }




    let predictorData = null;

    function isDarkModeActive() {
        return document.body.classList.contains('dark-mode');
    }
    function openReport() {
        const selectedDate = document.getElementById('datePicker').value;
        if (!selectedDate) {
            showFlashMessage("{{ _('Por favor selecciona una fecha primero.') }}", "warning");
            return;
        }
        const url = `/trendIdea?date=${encodeURIComponent(selectedDate)}`;
        window.open(url, '_blank');
    }


    document.addEventListener('DOMContentLoaded', () => {
        // Inicializar tema
        initThemeToggle();

        // Mostrar advertencia si es día de mercado y antes de 10:05
        const now = new Date();
        const day = now.getDay(); // 1-5 son lunes a viernes
        const hour = now.getHours();
        const minute = now.getMinutes();
        const isMarketDay = day >= 1 && day <= 5;
        const isBefore1005 = hour < 10 || (hour === 10 && minute < 5);
        const warningDiv = document.getElementById('score-warning');
        if (isMarketDay && isBefore1005 && warningDiv) {
            warningDiv.style.display = 'block';
        }

        // Observador de cambio de tema
        const observer = new MutationObserver(() => {
            const dark = document.body.classList.contains('dark-mode');
            console.log(dark ? '🌑 Modo oscuro activado' : '☀️ Modo claro activado');

            updateChart(predictorData);
            updateScore(predictorData);
            updateGEXMaxChart(predictorData);
            updateDominantStrikesChart(predictorData);

            if (gexDataCurrent.length > 0) {
                updateGEXChartPlotly(gexDataCurrent);
            }
        });
        observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });



    });


    let latestReports = [];
    const MAX_REPORTS = 400;
    let updateInterval;
    let today = new Date().toISOString().split('T')[0]; // Fecha actual YYYY-MM-DD


    async function fetchData(selectedDate, selectedSymbol, showSpinner = true) {



        try {
            if (showSpinner) {
                document.getElementById("loading-spinner").style.display = "flex"; // Mostrar solo en selección manual
            }


            const response = await fetch(`/data?date=${selectedDate}&symbol=${selectedSymbol}`);

            const data = await response.json();

            if (!Array.isArray(data) || data.length === 0) {
                console.warn("⚠️ No data:", data);
                return;
            }


            // 🕒 Normalizar los timestamps a ET (Eliminamos GMT y evitamos conversión automática)
            data.forEach(row => {
                if (typeof row.timestamp === "string") {
                    row.timestamp = row.timestamp.replace("GMT", "").trim() + " ET";  // Reemplazamos "GMT" por "ET"
                }
            });
            predictorData = data;

            updateTable(data);
            updateChart(data);
            updateScore(data);
            updateGEXMaxChart(data);
            updateDominantStrikesChart(data);

            latestReports = data.slice(-MAX_REPORTS).reverse();

        } catch (error) {
            console.error("❌ Error:", error);
        } finally {
            if (showSpinner) {
                document.getElementById("loading-spinner").style.display = "none"; // Ocultar solo si se mostró
            }
        }
    }

    function updateScore(data) {
        const isDarkMode = isDarkModeActive();
        const symbol = document.getElementById("symbolSelect").value;

        // ✅ Filtrar datos posteriores a las 10:05 NY usando el string original
        const filteredData = data.filter(row => {
            const parts = row.timestamp.split(" ");
            if (parts.length < 5) return false;

            const timeParts = parts[4].split(":");  // Ej: ["09","35","05"]
            const hourNY = parseInt(timeParts[0], 10);
            const minuteNY = parseInt(timeParts[1], 10);

            return hourNY > 10 || (hourNY === 10 && minuteNY >= 5);
        });

        if (filteredData.length === 0) {
            filteredData.push({
                timestamp: 'Tue, 08 Apr 2025 10:05:00 ET',
                score_30min: 0
            });
        }

        const labels = filteredData.map(row => {
            const parts = row.timestamp.split(" ");
            if (parts.length < 5) return "--:--";
            return parts[4].slice(0, 5);  // "09:35"
        });

        const scores = filteredData.map(row => row.score_30min);

        const scoreMin = Math.min(...scores);
        const scoreMax = Math.max(...scores);
        const minY = Math.min(-0.3, scoreMin - 0.05);
        const maxY = Math.max(0.3, scoreMax + 0.05);
        const range = maxY - minY;

        const tickSpacing = Math.ceil(labels.length / 10);
        const tickvals = labels.filter((_, i) => i % tickSpacing === 0);
        const ticktext = tickvals;

        const trace = {
            x: labels,
            y: scores,
            mode: 'lines',
            name: 'Score',
            line: { color: '#FFFFFF', width: 3 },
            hovertemplate: '%{x} → %{y:.2f}<extra></extra>'
        };

        const backgroundShapes = [
            { y0: maxY - range * 0 / 5, y1: maxY - range * 1 / 5, color: 'rgba(0,80,0,0.6)' },
            { y0: maxY - range * 1 / 5, y1: maxY - range * 2 / 5, color: 'rgba(0,128,0,0.6)' },
            { y0: maxY - range * 2 / 5, y1: minY + range * 2 / 5, color: 'rgba(204,153,0,0.6)' },
            { y0: minY + range * 2 / 5, y1: minY + range * 1 / 5, color: 'rgba(139,0,0,0.6)' },
            { y0: minY + range * 1 / 5, y1: minY + range * 0 / 5, color: 'rgba(90,0,0,0.7)' }
        ].map(shape => ({
            type: 'rect',
            xref: 'paper',
            yref: 'y',
            x0: 0,
            x1: 1,
            y0: shape.y0,
            y1: shape.y1,
            fillcolor: shape.color,
            opacity: 1,
            line: { width: 0 },
            layer: 'below'
        }));

        const layout = {
            paper_bgcolor: isDarkMode ? '#1e1e1e' : '#ffffff',
            plot_bgcolor: isDarkMode ? '#1e1e1e' : '#ffffff',
            font: { color: isDarkMode ? '#ffffff' : '#222222' },
            margin: { l: 30, r: 50, t: 10, b: 60 },
            xaxis: {
                type: 'category',
                tickvals: tickvals,
                ticktext: ticktext,
                tickangle: -45,
                tickfont: { size: 10 },
                gridcolor: isDarkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)',
                color: isDarkMode ? '#ffffff' : '#222222',
                fixedrange: false
            },
            yaxis: {
                side: 'right',
                range: [minY, maxY],
                tickfont: { size: 10 },
                gridcolor: isDarkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)',
                color: isDarkMode ? '#ffffff' : '#222222',
                fixedrange: false
            },
            shapes: backgroundShapes,
            annotations: [
                {
                    text: symbol.toUpperCase(),
                    xref: 'paper',
                    yref: 'paper',
                    x: 0.5,
                    y: 0.5,
                    xanchor: 'center',
                    yanchor: 'middle',
                    showarrow: false,
                    font: {
                        size: 80,
                        color: isDarkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'
                    }
                }
            ],
            showlegend: false
        };

        const config = {
            responsive: true,
            displayModeBar: false,
            scrollZoom: false,
            doubleClick: 'reset'
        };

        Plotly.react('chartScore', [trace], layout, config);
    }







    function formatTimestamp(timestamp) {
        if (!timestamp) return "--:--";

        // Dividir el string por espacios. En este caso, la hora (con segundos) es el quinto elemento.
        const parts = timestamp.split(" ");
        if (parts.length < 5) return "--:--";

        // parts[4] es "09:35:02", extraemos solo "09:35"
        const time = parts[4].slice(0, 5);

        return time;
    }

    function updateTable(data) {
        const tableBody = document.getElementById('data-table-body');
        const tendenciaDisplay = document.getElementById("tendencia-display");
        const scoreDisplay = document.getElementById("score-display");
        const differencePointsBox = document.getElementById("difference-points");
        const differencePercentageBox = document.getElementById("difference-percentage");
        const expectedMoveBox = document.getElementById("expected-move");
        const scaleIndicator = document.getElementById("scale-indicator");
        const spotPriceBox = document.getElementById("spot-price");


        const gravityTrendDisplay = document.getElementById("gravity-trend-display");

        const predOiGexTrendDisplay = document.getElementById("pred-oi-gex-trend-display");
        const predDeltaNeutroTrendDisplay = document.getElementById("pred-delta-neutro-trend-display");
        const predVolumenTrendDisplay = document.getElementById("pred-volumen-trend-display");

        tableBody.innerHTML = '';

        if (!data || data.length === 0) {
            console.warn("⚠️ No Data.");
            return;
        }

        // Invertimos para que el más reciente sea el primero
        let reversedData = data.slice().reverse();
        let latestRow = reversedData[0];
        let prevRow = reversedData[1]; // El segundo más reciente para comparar

        // ============================
        // 1) Actualizar valores "superiores": diferencia, tendencia, score, etc.
        // ============================
        if (latestRow) {



            let tendencia = latestRow.tendencia_30min ?? "-";

            if (latestRow.timestamp) {
                const parts = latestRow.timestamp.split(" ");
                if (parts.length >= 5) {
                    const [hourNY, minuteNY] = parts[4].split(":").map(num => parseInt(num, 10));
                    if (hourNY < 10 || (hourNY === 10 && minuteNY < 5)) {
                        tendencia = "--";
                    }
                }
            }


            let score = (latestRow.score_30min !== undefined) ? parseFloat(latestRow.score_30min).toFixed(4) : "-";

            let spxPrice = parseFloat(latestRow.precio_actual).toFixed(2);
            let gravityPoint = parseFloat(latestRow.punto_de_gravedad).toFixed(2);
            let pointDifference = (spxPrice - gravityPoint).toFixed(2);
            let percentageDifference = ((pointDifference / gravityPoint) * 100).toFixed(2);
            let expectedMove = parseFloat(latestRow.movimiento_esperado).toFixed(2);
            let textColor = pointDifference >= 0 ? "green-text" : "red-text";

            differencePointsBox.innerHTML = `${pointDifference}`;
            differencePercentageBox.innerHTML = `${percentageDifference}%`;
            expectedMoveBox.innerHTML = `± ${expectedMove}`;

            differencePointsBox.className = `value ${textColor}`;
            differencePercentageBox.className = `value ${textColor}`;

            tendenciaDisplay.textContent = tendencia;
            scoreDisplay.textContent = score;


            // --- SPOT (precio actual) ---
            if (!isNaN(spxPrice)) {
                // Color vs fila previa (si existe)
                let spotClass = "value";
                if (prevRow && prevRow.precio_actual !== undefined) {
                    const prevPrice = parseFloat(prevRow.precio_actual);
                    if (!isNaN(prevPrice)) {
                        if (parseFloat(spxPrice) > prevPrice) spotClass += " green-text";
                        else if (parseFloat(spxPrice) < prevPrice) spotClass += " red-text";
                        else spotClass += " gray-text";
                    }
                }
                spotPriceBox.textContent = spxPrice;
                spotPriceBox.className = spotClass;
            } else {
                spotPriceBox.textContent = "--";
                spotPriceBox.className = "value";
            }


            // Color en la tendencia
            if (tendencia === "UP") {
                tendenciaDisplay.className = "value trend-up";
            } else if (tendencia === "DOWN") {
                tendenciaDisplay.className = "value trend-down";
            } else {
                tendenciaDisplay.className = "value trend-neutral";
            }

            // Tendencia del Punto de Gravedad (flecha) comparando la fila previa
            if (prevRow) {
                let currentGrav = parseFloat(latestRow.punto_de_gravedad);
                let oldGrav = parseFloat(prevRow.punto_de_gravedad);

                if (currentGrav > oldGrav) {
                    gravityTrendDisplay.textContent = "▲";
                    gravityTrendDisplay.className = "value trend-up";
                } else if (currentGrav < oldGrav) {
                    gravityTrendDisplay.textContent = "▼";
                    gravityTrendDisplay.className = "value trend-down";
                } else {
                    gravityTrendDisplay.textContent = "=";
                    gravityTrendDisplay.className = "value trend-neutral";
                }
            } else {
                gravityTrendDisplay.textContent = "--";
                gravityTrendDisplay.className = "value trend-neutral";
            }

            // Comparar las "predicciones" para poner flechas
            if (prevRow) {
                let currentPredOiGex = parseFloat(latestRow.prediccion_OI_GEX);
                let oldPredOiGex = parseFloat(prevRow.prediccion_OI_GEX);

                let currentPredDeltaNeutro = parseFloat(latestRow.prediccion_Delta_Neutro);
                let oldPredDeltaNeutro = parseFloat(prevRow.prediccion_Delta_Neutro);

                let currentPredVolumen = parseFloat(latestRow.prediccion_Volumen);
                let oldPredVolumen = parseFloat(prevRow.prediccion_Volumen);

                // OI GEX
                if (currentPredOiGex > oldPredOiGex) {
                    predOiGexTrendDisplay.textContent = "▲";
                    predOiGexTrendDisplay.className = "value trend-up";
                } else if (currentPredOiGex < oldPredOiGex) {
                    predOiGexTrendDisplay.textContent = "▼";
                    predOiGexTrendDisplay.className = "value trend-down";
                } else {
                    predOiGexTrendDisplay.textContent = "=";
                    predOiGexTrendDisplay.className = "value trend-neutral";
                }

                // Delta Neutro
                if (currentPredDeltaNeutro > oldPredDeltaNeutro) {
                    predDeltaNeutroTrendDisplay.textContent = "▲";
                    predDeltaNeutroTrendDisplay.className = "value trend-up";
                } else if (currentPredDeltaNeutro < oldPredDeltaNeutro) {
                    predDeltaNeutroTrendDisplay.textContent = "▼";
                    predDeltaNeutroTrendDisplay.className = "value trend-down";
                } else {
                    predDeltaNeutroTrendDisplay.textContent = "=";
                    predDeltaNeutroTrendDisplay.className = "value trend-neutral";
                }

                // Volumen
                if (currentPredVolumen > oldPredVolumen) {
                    predVolumenTrendDisplay.textContent = "▲";
                    predVolumenTrendDisplay.className = "value trend-up";
                } else if (currentPredVolumen < oldPredVolumen) {
                    predVolumenTrendDisplay.textContent = "▼";
                    predVolumenTrendDisplay.className = "value trend-down";
                } else {
                    predVolumenTrendDisplay.textContent = "=";
                    predVolumenTrendDisplay.className = "value trend-neutral";
                }
            } else {
                // Si no existe una fila anterior
                predOiGexTrendDisplay.textContent = "--";
                predOiGexTrendDisplay.className = "value trend-neutral";

                predDeltaNeutroTrendDisplay.textContent = "--";
                predDeltaNeutroTrendDisplay.className = "value trend-neutral";

                predVolumenTrendDisplay.textContent = "--";
                predVolumenTrendDisplay.className = "value trend-neutral";
            }

            // Posicionar el indicador de "score" en la barra de escala
            if (!isNaN(score) && score !== "-") {
                let scaleValue = Math.min(1, Math.max(-1, score)); // Limitar a [-1,1]
                let percentPosition = ((scaleValue + 1) / 2) * 100;
                scaleIndicator.style.left = `${percentPosition}%`;
            } else {
                scaleIndicator.style.left = "50%";
            }

            // === TENDENCIA CORTA (sin texto descriptivo) ===
            const shortScaleIndicator = document.getElementById("short-scale-indicator");

            if (shortScaleIndicator && latestRow) {
                let totalPos = parseFloat(latestRow.total_pos ?? 0);
                let totalNeg = parseFloat(latestRow.total_neg ?? 0);
                let totalSignals = totalPos + totalNeg;

                let tendenciaCortaValue = 0;

                if (totalSignals > 0) {
                    // Cálculo de tendencia en rango [0, 1]
                    tendenciaCortaValue = totalPos / totalSignals;
                }

                // Mover indicador visual directamente de 0% a 100%
                let tendenciaCortaPosition = tendenciaCortaValue * 99;
                shortScaleIndicator.style.left = `${tendenciaCortaPosition}%`;

            }



        }

        // Función para determinar el color de subidas/bajadas en la tabla
        function determineColor(current, previous, beforePrevious) {
            if (current > previous) return 'style="color: green; font-weight: bold;"';
            if (current < previous) return 'style="color: red; font-weight: bold;"';
            if (current === previous && previous > beforePrevious) return 'style="color: green; font-weight: bold;"';
            if (current === previous && previous < beforePrevious) return 'style="color: red; font-weight: bold;"';
            return '';
        }

        // ============================
        // 2) Reconstruir TODA la tabla en memoria
        // ============================
        let html = ''; // Acumulamos aquí todas las filas

        // Rellenar filas de la tabla
        for (let i = 0; i < reversedData.length; i++) {
            let row = reversedData[i];

            let formattedPrice = parseFloat(row.precio_actual).toFixed(2);
            let formattedGravityPoint = parseFloat(row.punto_de_gravedad).toFixed(2);
            let formattedPredOI_GEX = parseFloat(row.prediccion_OI_GEX).toFixed(2);
            let formattedPredDeltaNeutro = parseFloat(row.prediccion_Delta_Neutro).toFixed(2);
            let formattedPredVolumen = parseFloat(row.prediccion_Volumen).toFixed(2);

            let tendencia = row.tendencia_30min ?? "-";
            let score = (row.score_30min !== undefined) ? parseFloat(row.score_30min).toFixed(4) : "-";

            if (row.timestamp) {
                let rawTimestamp = row.timestamp.trim().replace(/ ET$/, '');
                // Extraer la parte de la hora: es el 5to elemento separado por espacio
                const parts = rawTimestamp.split(' ');
                const timePart = parts[4]; // Ejemplo: "16:01:37"

                if (timePart) {
                    const [hourNY, minuteNY] = timePart.split(':').map(num => parseInt(num, 10));

                    // Si la hora es menor a 10:05, asignar "--" a la tendencia
                    if (hourNY < 10 || (hourNY === 10 && minuteNY < 5)) {
                        tendencia = "--";
                    }
                } else {
                    console.warn(`No timestamp: ${rawTimestamp}`);
                }
            }

            // ----- FIN: Chequeo del timestamp -----

            let nextRow = reversedData[i + 1];
            let beforeNextRow = reversedData[i + 2];

            let priceColor = '';
            let gravityColor = '';
            let predOI_GEX_Color = '';
            let predDeltaNeutroColor = '';
            let predVolumenColor = '';
            let tendenciaColor = '';

            // Color texto de la tendencia
            if (tendencia === "UP") {
                tendenciaColor = 'style="color: green; font-weight: bold;"';
            } else if (tendencia === "DOWN") {
                tendenciaColor = 'style="color: red; font-weight: bold;"';
            } else {
                tendenciaColor = 'style="color: gray; font-weight: bold;"';
            }

            if (nextRow) {
                let nextPrice = parseFloat(nextRow.precio_actual).toFixed(2);
                let nextGravityPoint = parseFloat(nextRow.punto_de_gravedad).toFixed(2);
                let nextPredOI_GEX = parseFloat(nextRow.prediccion_OI_GEX).toFixed(2);
                let nextPredDeltaNeutro = parseFloat(nextRow.prediccion_Delta_Neutro).toFixed(2);
                let nextPredVolumen = parseFloat(nextRow.prediccion_Volumen).toFixed(2);

                let beforeNextPrice = beforeNextRow ? parseFloat(beforeNextRow.precio_actual).toFixed(2) : nextPrice;
                let beforeNextGravity = beforeNextRow ? parseFloat(beforeNextRow.punto_de_gravedad).toFixed(2) : nextGravityPoint;
                let beforeNextPredOI_GEX = beforeNextRow ? parseFloat(beforeNextRow.prediccion_OI_GEX).toFixed(2) : nextPredOI_GEX;
                let beforeNextPredDeltaNeutro = beforeNextRow ? parseFloat(beforeNextRow.prediccion_Delta_Neutro).toFixed(2) : nextPredDeltaNeutro;
                let beforeNextPredVolumen = beforeNextRow ? parseFloat(beforeNextRow.prediccion_Volumen).toFixed(2) : nextPredVolumen;

                priceColor = determineColor(formattedPrice, nextPrice, beforeNextPrice);
                gravityColor = determineColor(formattedGravityPoint, nextGravityPoint, beforeNextGravity);
                predOI_GEX_Color = determineColor(formattedPredOI_GEX, nextPredOI_GEX, beforeNextPredOI_GEX);
                predDeltaNeutroColor = determineColor(formattedPredDeltaNeutro, nextPredDeltaNeutro, beforeNextPredDeltaNeutro);
                predVolumenColor = determineColor(formattedPredVolumen, nextPredVolumen, beforeNextPredVolumen);
            }

            // Construimos UNA fila en string
            let newRow = `
        <tr>
            <td>${formatTimestamp(row.timestamp)}</td>
            <td ${priceColor}>${formattedPrice}</td>
            <td ${gravityColor}>${formattedGravityPoint}</td>
            <td>${row.strikes_OI}</td>
            <td>${row.strikes_Volumen}</td>
            <td>${row.strikes_GEX}</td>
            <td ${predOI_GEX_Color}>${formattedPredOI_GEX}</td>
            <td ${predDeltaNeutroColor}>${formattedPredDeltaNeutro}</td>
            <td ${predVolumenColor}>${formattedPredVolumen}</td>
            <td ${tendenciaColor}>${tendencia}</td>
            <td>${score}</td>
        </tr>
    `;

            // En lugar de tableBody.innerHTML += newRow, acumulamos en `html`
            html += newRow;
        }

        // Al terminar el bucle, volcamos todo el HTML de una sola vez
        tableBody.innerHTML = html;

        // ============================
        // 3) Control del Market Status Marker (LIVE / MERCADO CERRADO)
        // ============================
        const lastIndex = data.length - 1;
        if (lastIndex >= 0) {
            const lastRow = data[lastIndex];
            let rawTimestamp = lastRow.timestamp.trim();


            // Removemos "ET" del timestamp
            rawTimestamp = rawTimestamp.replace(/ ET$/, '');

            const lastTimestamp = new Date(Date.parse(rawTimestamp));
            if (isNaN(lastTimestamp)) {
                console.error("❌ Error: ", rawTimestamp);
                return;
            }

            // Fecha en formato "YYYY-MM-DD" en zona horaria de NY
            const lastTimestampDateNY = lastTimestamp.toLocaleDateString("en-CA", { timeZone: "America/New_York" });

            // Fecha actual en formato "YYYY-MM-DD" en zona NY
            const now = new Date();
            const nowDateNY = now.toLocaleDateString("en-CA", { timeZone: "America/New_York" });

            const marker = document.getElementById("market-status-marker");
            const isSameDayNY = (lastTimestampDateNY === nowDateNY);

            if (!isSameDayNY) {
                marker.classList.add("hidden");
                marker.textContent = "";
                return;
            }

            // Si es el mismo día, verificamos si está dentro del horario de mercado
            const timeOptions = {
                timeZone: "America/New_York",
                hour: "2-digit",
                minute: "2-digit",
                hour12: false
            };
            const nowNYString = now.toLocaleString("en-US", timeOptions);
            const [hourNY, minuteNY] = nowNYString.split(":").map(str => parseInt(str, 10));

            const isTradingTime = (
                (hourNY > 9 || (hourNY === 9 && minuteNY >= 30)) &&
                (hourNY < 16 || (hourNY === 16 && minuteNY === 0))
            );

            marker.classList.remove("hidden");
            marker.classList.remove("market-live", "market-closed");

            if (isTradingTime) {
                marker.textContent = "{{ _('MERCADO ABIERTO') }}";
                marker.classList.add("market-live");
            } else {
                marker.textContent = "{{ _('MERCADO CERRADO') }}";
                marker.classList.add("market-closed");
            }
        }
    }

    function getNYTimeString() {
        // Obtenemos la fecha/hora actual en la zona horaria de Nueva York
        const now = new Date();
        const options = {
            timeZone: "America/New_York",
            hour: "2-digit",
            minute: "2-digit",
            hour12: false
        };
        // Formato "HH:MM" (24h)
        const timeStr = now.toLocaleTimeString("en-US", options); // p. ej. "12:34"
        return timeStr;
    }


    function updateChart(data) {
        const gd = document.getElementById('chart');

        // 1) Recordar visibilidades previas por nombre de traza
        const prevVisibility = {};
        if (gd && gd.data) {
            gd.data.forEach(tr => {
                // Puede ser true, false o 'legendonly'
                prevVisibility[tr.name] = tr.visible ?? true;
            });
        }

        const isDarkMode = isDarkModeActive();
        const lang = document.documentElement.lang || 'es';
        const symbol = document.getElementById("symbolSelect").value;

        const labelsText = {
            es: { price: 'Precio', gravity: 'P. Gravedad', oi_gex: 'P. OI GEX', delta: 'P. Delta Neutro', volumen: 'P. Volumen' },
            en: { price: 'Price', gravity: 'Gravity P', oi_gex: 'OI GEX P', delta: 'Delta Neutral P', volumen: 'Volume P' }
        }[lang];

        const labels = data.map(row => formatTimestamp(row.timestamp));
        const spxPrices = data.map(row => row.precio_actual);
        const gravityPoints = data.map(row => row.punto_de_gravedad);
        const predOI_GEX = data.map(row => row.prediccion_OI_GEX);
        const predDeltaNeutro = data.map(row => row.prediccion_Delta_Neutro);
        const predVolumen = data.map(row => row.prediccion_Volumen);

        const totalPoints = labels.length;
        const startIndex = totalPoints > 100 ? totalPoints - 100 : 0;
        const xRange = [labels[startIndex], labels[totalPoints - 1]];

        const tickSpacing = Math.ceil(totalPoints / 10);
        const tickvals = labels.filter((_, i) => i % tickSpacing === 0);

        // Helper para crear trazas con UID estable y visibilidad previa
        const makeTrace = (name, y, color, dash = null, width = 2, uid) => ({
            x: labels,
            y,
            mode: 'lines',
            name,
            line: { color, width, dash },
            // 2) Respetar lo que el usuario ocultó/mostró
            visible: prevVisibility[name] ?? true,
            // 3) UID estable: ayuda a Plotly a "mapear" la misma serie entre renders
            uid
        });

        const traces = [
            makeTrace(labelsText.price, spxPrices, 'blue', null, 4, 't_price'),
            makeTrace(labelsText.gravity, gravityPoints, 'orange', null, 2, 't_gravity'),
            makeTrace(labelsText.oi_gex, predOI_GEX, 'cyan', 'dot', 2, 't_oigex'),
            makeTrace(labelsText.delta, predDeltaNeutro, 'magenta', 'dot', 2, 't_delta'),
            makeTrace(labelsText.volumen, predVolumen, 'yellow', 'dot', 2, 't_volume'),
        ];

        const layout = {
            // 4) uirevision conserva zoom/pan y estado de leyenda si los UID se mantienen
            //    usa el símbolo para resetear automáticamente cuando cambia de activo
            uirevision: `btm-${symbol}`,
            paper_bgcolor: isDarkMode ? '#1e1e1e' : '#ffffff',
            plot_bgcolor: isDarkMode ? '#1e1e1e' : '#ffffff',
            font: { color: isDarkMode ? '#ffffff' : '#222222' },
            margin: { l: 10, r: 40, t: 10, b: 60 },
            xaxis: {
                type: 'category',
                tickvals,
                ticktext: tickvals,
                tickangle: -45,
                tickfont: { size: 10 },
                gridcolor: isDarkMode ? '#444444' : '#cccccc',
                color: isDarkMode ? '#ffffff' : '#222222',
                fixedrange: false
            },
            yaxis: {
                fixedrange: false,
                side: 'right',
                tickfont: { size: 10 },
                gridcolor: isDarkMode ? '#444444' : '#cccccc',
                color: isDarkMode ? '#ffffff' : '#222222'
            },
            legend: {
                orientation: 'h',
                x: 0, y: 1.05,
                xanchor: 'left', yanchor: 'bottom',
                font: { size: 10 }
            },
            dragmode: 'pan',
            annotations: [{
                text: symbol.toUpperCase(),
                xref: 'paper', yref: 'paper',
                x: 0.5, y: 0.5,
                xanchor: 'center', yanchor: 'middle',
                showarrow: false,
                font: { size: 80, color: isDarkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)' }
            }]
        };

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

        Plotly.react('chart', traces, layout, config);
    }




    document.getElementById("symbolSelect").addEventListener("change", () => {
        const symbol = document.getElementById("symbolSelect").value;

        // Actualizar los títulos con el símbolo seleccionado
        document.getElementById("symbol-title-0dte").textContent = symbol + " ";
        document.getElementById("symbol-title-short").textContent = symbol + " ";
        loadAvailableDates();
    });

    async function loadAvailableDates() {
        try {
            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 (selectedDate) {
                    const selectedSymbol = document.getElementById("symbolSelect").value;

                    // ✅ Actualizar el slider al seleccionar nueva fecha
                    updateSliderFromDatePicker(selectedDate);

                    // 🔄 Actualizar datos
                    fetchData(selectedDate, selectedSymbol, true);
                    fetchGEXData(selectedDate, selectedSymbol, true);
                    handleAutoUpdate(selectedDate, selectedSymbol);
                }
            });

            // if (dates.length > 0) {
            //     const selectedDate = dates[0]; // Última fecha disponible
            //     $("#datePicker").datepicker("setDate", selectedDate);

            //     // ✅ Actualizar slider para la fecha inicial cargada
            //     updateSliderFromDatePicker(selectedDate);

            //     // 🔄 Cargar datos para esa fecha inicial
            //     fetchData(selectedDate, selectedSymbol, true);
            //     fetchGEXData(selectedDate, selectedSymbol, true);
            //     handleAutoUpdate(selectedDate, selectedSymbol);
            // }


            if (dates.length > 0) {
                // Ordenamos por si el backend no las manda ordenadas
                const sortedDates = dates.slice().sort();  // "YYYY-MM-DD" ordena bien con sort()
                const selectedDate = sortedDates[sortedDates.length - 1]; // 👉 la más reciente

                $("#datePicker").datepicker("setDate", selectedDate);

                // ✅ Actualizar slider para la fecha inicial cargada
                updateSliderFromDatePicker(selectedDate);

                // 🔄 Cargar datos para esa fecha inicial
                fetchData(selectedDate, selectedSymbol, true);
                fetchGEXData(selectedDate, selectedSymbol, true);
                handleAutoUpdate(selectedDate, selectedSymbol);
            }


        } catch (error) {
            console.error("❌ Error cargando fechas disponibles:", error);
        } finally {
            document.getElementById("loading-spinner").style.display = "none";
        }
    }






    function handleAutoUpdate(selectedDate, selectedSymbol) {
        clearInterval(updateInterval);

        const options = { timeZone: "America/New_York", year: 'numeric', month: '2-digit', day: '2-digit' };
        const timeOptions = { timeZone: "America/New_York", hour: '2-digit', minute: '2-digit', hour12: false };

        const normalizedToday = new Date().toLocaleDateString('en-CA', options).trim();
        const normalizedSelectedDate = selectedDate.trim();

        const nowNY = new Date().toLocaleTimeString('en-US', timeOptions);
        const [hourNY, minuteNY] = nowNY.split(":").map(num => parseInt(num));

        const isMarketOpen = (hourNY > 9 || (hourNY === 9 && minuteNY >= 30)) &&
            (hourNY < 16 || (hourNY === 16 && minuteNY === 0));


        if (normalizedSelectedDate === normalizedToday && isMarketOpen) {
            console.log("🔄 Activando actualización automática cada 30 segundos...");
            updateInterval = setInterval(() => {
                fetchData(normalizedToday, selectedSymbol, false);
                fetchGEXData(normalizedToday, selectedSymbol);
                // ✅ Si estás en modo LIVE, actualizar también el slider
                if (liveMode) {
                    updateSliderFromDatePicker(normalizedToday);
                }
            }, 30000);
        } else {
            console.log("⏸️ Fecha pasada o fuera de horario de mercado. Deteniendo actualización automática.");
        }
    }

    window.onload = function () {
        loadAvailableDates(); // Solo inicializa datos
    };


    // Etiquetas traducidas usando Babel
    const viewModeLabels = {
        0: "{{ _('Modo Separado') }}",
        1: "{{ _('Modo Juntos') }}"
    };

    // Variables globales
    let currentViewMode = 0; // 0 = separados, 1 = sumados
    let latestGEXData = null;

    // Listener de cambio de modo
    document.getElementById('viewModeSlider_2').addEventListener('input', function () {
        currentViewMode = parseInt(this.value);
        updateGEXMaxChart(latestGEXData);
    });

    function updateGEXMaxChart(data) {

        const lang = document.documentElement.lang || 'es';
        const symbol = document.getElementById("symbolSelect").value;
        const isDarkMode = isDarkModeActive();

        const labelsGEX = {
            es: {
                primary: 'Strike Dominante Primario',
                secondary: 'Strike Dominante Secundario',
                combined: 'Strikes Combinados'
            },
            en: {
                primary: 'Primary Dominant Strike',
                secondary: 'Secondary Dominant Strike',
                combined: 'Combined Strikes'
            }
        }[lang];

        latestGEXData = data;

        const freqMapFirst = {};
        const freqMapSecond = {};

        data.forEach(row => {
            let gexArray;
            try {
                gexArray = JSON.parse(row.strikes_GEX);
            } catch {
                gexArray = [];
            }
            if (!Array.isArray(gexArray) || gexArray.length < 2) return;

            const firstVal = parseFloat(gexArray[0]);
            const secondVal = parseFloat(gexArray[1]);

            freqMapFirst[firstVal] = (freqMapFirst[firstVal] || 0) + 1;
            freqMapSecond[secondVal] = (freqMapSecond[secondVal] || 0) + 1;
        });

        const allKeys = new Set([...Object.keys(freqMapFirst), ...Object.keys(freqMapSecond)]);
        const sortedKeys = Array.from(allKeys).map(Number).sort((a, b) => a - b);

        const currentSPX = data.length > 0 ? parseFloat(data[data.length - 1].precio_actual) : null;

        let traces;
        if (currentViewMode === 0) {
            const firstData = sortedKeys.map(strike => freqMapFirst[strike] || 0);
            const secondData = sortedKeys.map(strike => freqMapSecond[strike] || 0);

            traces = [
                {
                    x: sortedKeys,
                    y: firstData,
                    type: 'bar',
                    name: labelsGEX.primary,
                    marker: { color: 'rgba(0, 51, 102, 0.8)' }
                },
                {
                    x: sortedKeys,
                    y: secondData,
                    type: 'bar',
                    name: labelsGEX.secondary,
                    marker: { color: 'rgba(102, 178, 255, 0.6)' }
                }
            ];
        } else {
            const summedData = sortedKeys.map(strike =>
                (freqMapFirst[strike] || 0) + (freqMapSecond[strike] || 0)
            );
            traces = [{
                x: sortedKeys,
                y: summedData,
                type: 'bar',
                name: labelsGEX.combined,
                marker: { color: 'rgba(0, 102, 204, 0.7)' },
                showlegend: true
            }];
        }

        document.getElementById('viewModeLabel_2').textContent = viewModeLabels[currentViewMode];

        const shapes = currentSPX ? [{
            type: 'line',
            xref: 'x',
            yref: 'paper',
            x0: currentSPX,
            x1: currentSPX,
            y0: 0,
            y1: 1,
            line: {
                color: 'red',
                width: 2,
                dash: 'dash'
            }
        }] : [];

        const layout = {
            barmode: 'group',
            margin: { l: 30, r: 30, t: 40, b: 60 },
            paper_bgcolor: isDarkMode ? '#1e1e1e' : '#ffffff',
            plot_bgcolor: isDarkMode ? '#1e1e1e' : '#ffffff',
            font: { color: isDarkMode ? '#ffffff' : '#222222' },
            xaxis: {
                gridcolor: isDarkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)',
                tickfont: { size: 10 },
                fixedrange: false
            },
            yaxis: {
                gridcolor: isDarkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)',
                tickfont: { size: 10 },
                fixedrange: false
            },
            shapes: shapes,
            annotations: [
                {
                    text: symbol.toUpperCase(),
                    xref: 'paper',
                    yref: 'paper',
                    x: 0.5,
                    y: 0.5,
                    xanchor: 'center',
                    yanchor: 'middle',
                    showarrow: false,
                    font: {
                        size: 80,
                        color: isDarkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'
                    }
                }
            ],
            legend: {
                orientation: 'h',
                x: 0,
                y: 1.15,
                xanchor: 'left',
                yanchor: 'bottom',
                font: { size: 10 }
            }
        };

        const config = {
            responsive: true,
            displayModeBar: false,
            scrollZoom: false,
            doubleClick: 'reset'
        };

        Plotly.react('chartGEXMax', traces, layout, config);
    }



    function updateDominantStrikesChart(data) {
        const lang = document.documentElement.lang || 'es';
        const symbol = document.getElementById("symbolSelect").value;
        const isDarkMode = isDarkModeActive();

        const labelsDominant = {
            es: {
                primary: 'Strike Dominante Primario',
                secondary: 'Strike Dominante Secundario',
                spot: 'Precio Spot'
            },
            en: {
                primary: 'Primary Dominant Strike',
                secondary: 'Secondary Dominant Strike',
                spot: 'Spot Price'
            }
        }[lang];

        const labels = data.map(row => formatTimestamp(row.timestamp));

        const dominant1Raw = [];
        const dominant2Raw = [];
        const spxSpot = [];

        data.forEach(row => {
            let gexArray;
            try {
                gexArray = JSON.parse(row.strikes_GEX);
            } catch {
                gexArray = [];
            }

            if (Array.isArray(gexArray) && gexArray.length >= 2) {
                dominant1Raw.push(parseFloat(gexArray[0]));
                dominant2Raw.push(parseFloat(gexArray[1]));
            } else {
                dominant1Raw.push(null);
                dominant2Raw.push(null);
            }

            spxSpot.push(parseFloat(row.precio_actual));
        });

        function buildSteppedSeries(rawArray, labels) {
            const x = [];
            const y = [];
            for (let i = 0; i < rawArray.length; i++) {
                if (i > 0 && rawArray[i] !== rawArray[i - 1]) {
                    x.push(labels[i]);
                    y.push(null);
                }
                x.push(labels[i]);
                y.push(rawArray[i]);
            }
            return { x, y };
        }

        const stepped1 = buildSteppedSeries(dominant1Raw, labels);
        const stepped2 = buildSteppedSeries(dominant2Raw, labels);

        const traces = [
            {
                x: stepped1.x,
                y: stepped1.y,
                type: 'scatter',
                mode: 'lines',
                name: labelsDominant.primary,
                line: {
                    color: '#1E90FF',
                    width: 3,
                    shape: 'hv'
                }
            },
            {
                x: stepped2.x,
                y: stepped2.y,
                type: 'scatter',
                mode: 'lines',
                name: labelsDominant.secondary,
                line: {
                    color: '#87CEFA',
                    width: 1,
                    shape: 'hv'
                }
            },
            {
                x: labels,
                y: spxSpot,
                type: 'scatter',
                mode: 'lines',
                name: labelsDominant.spot,
                line: {
                    color: 'orange',
                    width: 1
                }
            }
        ];

        const layout = {
            margin: { l: 40, r: 40, t: 40, b: 80 },
            paper_bgcolor: isDarkMode ? '#1e1e1e' : '#ffffff',
            plot_bgcolor: isDarkMode ? '#1e1e1e' : '#ffffff',
            font: { color: isDarkMode ? '#ffffff' : '#222222' },
            xaxis: {
                type: 'category',
                tickangle: -90,
                tickfont: { size: 10 },
                tickmode: 'array',
                tickvals: labels.filter((_, i) => i % 10 === 0),
                ticktext: labels.filter((_, i) => i % 10 === 0),
                gridcolor: isDarkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'
            },
            yaxis: {
                tickfont: { size: 10 },
                gridcolor: isDarkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)',
                fixedrange: false,
                side: 'right'
            },
            legend: {
                orientation: 'h',
                x: 0,
                y: 1.15,
                xanchor: 'left',
                yanchor: 'bottom',
                font: { size: 10 }
            },
            annotations: [
                {
                    text: symbol.toUpperCase(),
                    xref: 'paper',
                    yref: 'paper',
                    x: 0.5,
                    y: 0.5,
                    xanchor: 'center',
                    yanchor: 'middle',
                    showarrow: false,
                    font: {
                        size: 80,
                        color: isDarkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'
                    }
                }
            ]
        };

        const config = {
            responsive: true,
            displayModeBar: false,
            scrollZoom: false,
            doubleClick: 'reset'
        };

        Plotly.react('chartDominantStrikes', traces, layout, config);
    }




    // function updateGEXChartPlotly(gexData) {
    //     const mode = parseInt(document.getElementById('viewModeSlider').value); // 0 = CALL vs PUT, 1 = Difference
    //     const isDarkMode = isDarkModeActive();
    //     const symbol = document.getElementById("symbolSelect").value;

    //     const strikes = gexData.map(d => String(d.strike));
    //     const calls = gexData.map(d => d.GEX_call);
    //     const puts = gexData.map(d => d.GEX_put_neg);
    //     const diff = gexData.map(d => d.GEX_call + d.GEX_put_neg);
    //     const spxPrice = gexData.length > 0 ? gexData[0].underlying_price : null;

    //     const traces = [];

    //     if (mode === 0) {
    //         traces.push(
    //             {
    //                 x: strikes,
    //                 y: calls,
    //                 type: 'bar',
    //                 name: 'GEX Call (+)',
    //                 marker: { color: 'green' }
    //             },
    //             {
    //                 x: strikes,
    //                 y: puts,
    //                 type: 'bar',
    //                 name: 'GEX Put (-)',
    //                 marker: { color: 'red' }
    //             }
    //         );
    //     } else {
    //         traces.push({
    //             x: strikes,
    //             y: diff,
    //             type: 'bar',
    //             name: 'GEX',
    //             marker: {
    //                 color: diff.map(val => val >= 0 ? 'green' : 'red')
    //             }
    //         });
    //     }

    //     // Línea vertical para SPX price
    //     if (spxPrice) {
    //         const closestLabel = getClosestLabel(strikes, spxPrice);
    //         traces.push({
    //             x: [closestLabel, closestLabel],
    //             y: [Math.min(...(mode === 1 ? diff : puts)), Math.max(...(mode === 1 ? diff : calls))],
    //             mode: 'lines',
    //             name: 'Spot',
    //             line: {
    //                 color: 'blue',
    //                 width: 2,
    //                 dash: 'dash'
    //             },
    //             hoverinfo: 'skip',
    //             showlegend: false
    //         });
    //     }

    //     const layout = {
    //         barmode: mode === 0 ? 'relative' : 'overlay',
    //         margin: { l: 40, r: 20, t: 40, b: 80 },
    //         paper_bgcolor: isDarkMode ? '#1e1e1e' : '#ffffff',
    //         plot_bgcolor: isDarkMode ? '#1e1e1e' : '#ffffff',
    //         font: { color: isDarkMode ? '#ffffff' : '#222222' },
    //         xaxis: {
    //             tickangle: -90,
    //             tickfont: { size: 10 },
    //             gridcolor: isDarkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'
    //         },
    //         yaxis: {
    //             gridcolor: isDarkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'
    //         },
    //         legend: {
    //             orientation: 'h',
    //             x: 0,
    //             y: 1.15,
    //             xanchor: 'left',
    //             yanchor: 'bottom',
    //             font: { size: 10 }
    //         },
    //         annotations: [
    //             {
    //                 text: symbol.toUpperCase(),
    //                 xref: 'paper',
    //                 yref: 'paper',
    //                 x: 0.5,
    //                 y: 0.5,
    //                 xanchor: 'center',
    //                 yanchor: 'middle',
    //                 showarrow: false,
    //                 font: {
    //                     size: 80,
    //                     color: isDarkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'
    //                 }
    //             }
    //         ]
    //     };

    //     const config = {
    //         responsive: true,
    //         displayModeBar: false,
    //         scrollZoom: false,
    //         doubleClick: 'reset'
    //     };

    //     Plotly.react('chartStrikesGexPutCall', traces, layout, config);
    // }


    function updateGEXChartPlotly(gexData) {
        const mode = parseInt(document.getElementById('viewModeSlider').value); // 0 = CALL vs PUT, 1 = Difference
        const isDarkMode = isDarkModeActive();
        const symbol = document.getElementById("symbolSelect").value;

        const strikes = gexData.map(d => String(d.strike));
        const calls = gexData.map(d => d.GEX_call);
        const puts = gexData.map(d => d.GEX_put_neg);
        const diff = gexData.map(d => d.GEX_call + d.GEX_put_neg);
        const spxPrice = gexData.length > 0 ? gexData[0].underlying_price : null;

        const traces = [];

        if (mode === 0) {
            traces.push(
                {
                    x: strikes,
                    y: calls,
                    type: 'bar',
                    name: 'GEX Call (+)',
                    marker: { color: 'green' }
                },
                {
                    x: strikes,
                    y: puts,
                    type: 'bar',
                    name: 'GEX Put (-)',
                    marker: { color: 'red' }
                }
            );
        } else {
            // Barras reales con colores dinámicos, SIN leyenda
            traces.push({
                x: strikes,
                y: diff,
                type: 'bar',
                name: 'GEX',
                marker: { color: diff.map(val => val >= 0 ? 'green' : 'red') },
                showlegend: false,
                legendgroup: 'gex'
            });

            // Trace "dummy" para mostrar leyenda en azul (sin afectar el gráfico)
            if (strikes.length > 0) {
                traces.push({
                    x: [strikes[0]],
                    y: [0],
                    type: 'bar',
                    name: 'GEX (Δ)',
                    marker: { color: '#2d7ff9' }, // azul leyenda
                    opacity: 0,                   // invisible en el plot
                    hoverinfo: 'skip',
                    showlegend: true,
                    legendgroup: 'gex'
                });
            }
        }

        // Línea vertical para SPX price
        if (spxPrice && strikes.length > 0) {
            const closestLabel = getClosestLabel(strikes, spxPrice);
            traces.push({
                x: [closestLabel, closestLabel],
                y: [Math.min(...(mode === 1 ? diff : puts)), Math.max(...(mode === 1 ? diff : calls))],
                mode: 'lines',
                name: 'Spot',
                line: { color: 'blue', width: 2, dash: 'dash' },
                hoverinfo: 'skip',
                showlegend: false
            });
        }

        const layout = {
            barmode: mode === 0 ? 'relative' : 'overlay',
            margin: { l: 40, r: 20, t: 40, b: 80 },
            paper_bgcolor: isDarkMode ? '#1e1e1e' : '#ffffff',
            plot_bgcolor: isDarkMode ? '#1e1e1e' : '#ffffff',
            font: { color: isDarkMode ? '#ffffff' : '#222222' },
            xaxis: {
                tickangle: -90,
                tickfont: { size: 10 },
                gridcolor: isDarkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'
            },
            yaxis: {
                gridcolor: isDarkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'
            },
            legend: {
                orientation: 'h',
                x: 0,
                y: 1.15,
                xanchor: 'left',
                yanchor: 'bottom',
                font: { size: 10 }
            },
            annotations: [
                {
                    text: symbol.toUpperCase(),
                    xref: 'paper',
                    yref: 'paper',
                    x: 0.5,
                    y: 0.5,
                    xanchor: 'center',
                    yanchor: 'middle',
                    showarrow: false,
                    font: {
                        size: 80,
                        color: isDarkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'
                    }
                }
            ]
        };

        const config = {
            responsive: true,
            displayModeBar: false,
            scrollZoom: false,
            doubleClick: 'reset'
        };

        Plotly.react('chartStrikesGexPutCall', traces, layout, config);
    }


    // Función para encontrar la etiqueta (strike) más cercana a spxPrice
    function getClosestLabel(strikeLabels, spxPrice) {
        // Convertir etiquetas a números
        const strikes = strikeLabels.map(s => parseFloat(s));
        let minDiff = Infinity, closest = null;
        strikes.forEach((val, i) => {
            let diff = Math.abs(val - spxPrice);
            if (diff < minDiff) {
                minDiff = diff;
                closest = strikeLabels[i];
            }
        });
        return closest;
    }

    // Función para obtener datos y actualizar el gráfico según el modo seleccionado
    // Etiquetas traducidas con Babel
    const viewModeLabelsGEX = {
        0: "{{ _('Modo CALL VS PUT') }}",
        1: "{{ _('Modo Diferencia CALL/PUT') }}"
    };

    // Variable global para redibujar sin volver a pedir datos
    let gexDataCurrent = null;

    // Evento del slider para actualizar el gráfico al cambiar de modo
    document.getElementById('viewModeSlider').addEventListener('input', function () {
        const selectedDate = document.getElementById('datePicker').value;
        const selectedSymbol = document.getElementById("symbolSelect").value;

        const mode = parseInt(this.value);
        document.getElementById('viewModeLabel').textContent = viewModeLabelsGEX[mode];

        // Redibujar sin volver a fetch si ya tenemos los datos
        if (gexDataCurrent) {
            updateGEXChartPlotly(gexDataCurrent);
        } else {
            fetchGEXData(selectedDate, selectedSymbol);
        }
    });


    dataHourSlider.addEventListener("keyup", (e) => {
        if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
            liveMode = false;
            document.getElementById("liveToggleBtn").textContent = "🔴 Not Live";
            document.getElementById("liveToggleBtn").classList.remove("btn-success");
            document.getElementById("liveToggleBtn").classList.add("btn-outline-danger");

            // Actualizar valor visual
            const index = parseInt(dataHourSlider.value);
            document.getElementById("dataHourValue").textContent = validTimes[index];

            // Llamar a la función solo al soltar la tecla
            fetchGEXData();
        }
    });


    dataHourSlider.addEventListener("mouseup", () => {
        liveMode = false; // 🔴 Desactiva Live si el usuario mueve el slider
        document.getElementById("liveToggleBtn").textContent = "🔴 Not Live";
        document.getElementById("liveToggleBtn").classList.remove("btn-success");
        document.getElementById("liveToggleBtn").classList.add("btn-outline-danger");

        fetchGEXData();
    });

    // Soporte para móviles
    dataHourSlider.addEventListener("touchend", () => {
        liveMode = false; // 🔴 Desactiva Live en touch también
        document.getElementById("liveToggleBtn").textContent = "🔴 Not Live";
        document.getElementById("liveToggleBtn").classList.remove("btn-success");
        document.getElementById("liveToggleBtn").classList.add("btn-outline-danger");

        fetchGEXData();
    });

    // Función para obtener datos y actualizar el gráfico
    async function fetchGEXData(selectedDate, selectedSymbol) {
        try {

            const horario = liveMode
                ? getNYTimeString()                // horario real exacto (HH:mm)
                : validTimes[dataHourSlider.value]; // horario del slider

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

            const response = await fetch(`/data_gex?date=${selectedDate}&horario=${horario}&symbol=${selectedSymbol}`);

            const gexPayload = await response.json();

            const gexData = gexPayload.data;
            gexDataCurrent = gexData;

            const mode = parseInt(document.getElementById('viewModeSlider').value);
            document.getElementById('viewModeLabel').textContent = viewModeLabelsGEX[mode];

            updateGEXChartPlotly(gexData);
        } catch (error) {
            console.error("Error al obtener datos GEX:", error);
        }
    }



    function esHorarioValido() {
        const ahora = new Date();

        // Obtener hora en NY
        const opcionesHora = { timeZone: "America/New_York", hour: '2-digit', minute: '2-digit', hour12: false };
        const horaNYStr = ahora.toLocaleTimeString('en-US', opcionesHora);
        const [horaNY, minutoNY] = horaNYStr.split(':').map(Number);

        // Obtener día de la semana en NY
        const fechaNYStr = ahora.toLocaleString('en-US', { timeZone: "America/New_York" });
        const fechaNY = new Date(fechaNYStr);
        const diaNY = fechaNY.getDay(); // 0 = domingo, 1 = lunes, ..., 6 = sábado

        // Validar solo lunes a viernes
        if (diaNY < 1 || diaNY > 5) return false;

        const minutosTotales = horaNY * 60 + minutoNY;
        return minutosTotales >= 600 && minutosTotales <= 900; // Entre 10:00 y 15:00 NY
    }


    function esFechaHoy() {
        const pickerValue = document.getElementById("datePicker").value;
        if (!pickerValue) return false;

        const fechaPicker = new Date(pickerValue);
        const hoy = new Date();

        return fechaPicker.toDateString() === hoy.toDateString();
    }


    const mensajeHorarioInvalido = "{{ _('Solo puede generar el informe para el día actual y únicamente entre las 10 AM y las 3 PM.') }}";


    document.getElementById('btnGenerarInforme').addEventListener('click', async function () {

        // if (!esFechaHoy() || !esHorarioValido()) {
        if (!esHorarioValido()) {

            showFlashMessage(mensajeHorarioInvalido, "warning");
            return;
        }

        const symbol = document.getElementById('symbolSelect').value;
        const date = document.getElementById('datePicker').value;
        const spinner = document.getElementById('loading-spinner');
        spinner.style.display = 'flex';

        try {
            const response = await fetch(`/generar_informe_ai?symbol=${symbol}&date=${date}`);
            const text = await response.text();

            const now = new Date();
            const hora = now.toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' });

            const header = `<p class="small mb-2 text-white-50">🕒 ${symbol} | ${date} | <strong>${hora}</strong></p>`;
            document.getElementById('informeAITexto').innerHTML = header + formatInformeTexto(text);

            const modal = new bootstrap.Modal(document.getElementById('modalInformeAI'));
            modal.show();
        } catch (error) {
            document.getElementById('informeAITexto').innerHTML = "<span class='text-danger fw-bold'>❌ Error al generar el informe.</span>";
            const modal = new bootstrap.Modal(document.getElementById('modalInformeAI'));
            modal.show();
        } finally {
            spinner.style.display = 'none';
        }
    });


    function formatInformeTexto(text) {
        const limpio = text
            .replace(/Análisis técnico:/gi, '<h6 class="mt-3 mb-2"><i class="bi bi-graph-up me-1"></i><strong>Análisis técnico</strong></h6>')
            .replace(/Riesgos gamma:/gi, '<h6 class="mt-3 mb-2"><i class="bi bi-exclamation-triangle me-1"></i><strong>Riesgos gamma</strong></h6>')
            .replace(/\n/g, '<br>')
            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');  // <-- esta línea convierte "**texto**" en <strong>texto</strong>

        // Censura ideas que se filtren igual
        return limpio
            .replace(/idea(s)? de trading[^<]*<br>?/gi, '')
            .replace(/Iron Condor.*?<br>?/gi, '')
            .replace(/Vertical.*?<br>?/gi, '')
            .replace(/CALLS.*?<br>?/gi, '')
            .replace(/PUTS.*?<br>?/gi, '');
    }

</script>

{% endblock %}