{% 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-predictor2.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://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.32.0/plotly.min.js" crossorigin="anonymous"
    defer></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 id="market-status-marker" class="market-status hidden"></div>

<!-- ═══════════════════════════════════════
     DASHBOARD LAYOUT — Sidebar + Main
═══════════════════════════════════════ -->
<div class="dashboard-layout">

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

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

        <hr class="sidebar-divider">

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

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

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

            <div class="sidebar-info-note">
                <i class="fas fa-info-circle"></i>
                <span>{{ _('Datos desde 9:35 AM (NY)') }}</span>
            </div>

        </div>

        <hr class="sidebar-divider">

        <!-- Informe AI -->
        <button id="btnGenerarInforme" class="btn-informe-sidebar" data-bs-toggle="tooltip"
            title="{{ _('Genera un informe con IA que analiza datos clave del mercado') }}">
            <i class="fas fa-file-alt me-2"></i>
            {{ _('Generar Informe') }}
            <span class="badge-beta">Beta</span>
        </button>

        <hr class="sidebar-divider">

        <!-- KPIs en sidebar -->
        <div class="sidebar-section-title">{{ _('Métricas') }}</div>

        <div class="sidebar-kpi-list">
            <div class="sidebar-kpi-item kpi-highlight">
                <span class="sidebar-kpi-item-label">{{ _('Spot') }}</span>
                <span id="spot-price" class="kbv fw-bold">--</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Cambio Día') }}</span>
                <span id="day-change-pct" class="kbv fw-bold">--</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('HOD') }}</span>
                <span id="hod-display" class="kbv fw-bold green-text">--</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('LOD') }}</span>
                <span id="lod-display" class="kbv fw-bold red-text">--</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Dist PG $') }}</span>
                <span id="difference-points" class="kbv fw-bold">--</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Dist PG %%') }}</span>
                <span id="difference-percentage" class="kbv fw-bold">--</span>
            </div>
        </div>

        <hr class="sidebar-divider">

        <div class="sidebar-section-title">{{ _('Movimiento') }}</div>
        <div class="sidebar-kpi-list">
            <div class="sidebar-kpi-item kpi-highlight-me">
                <span class="sidebar-kpi-item-label">{{ _('ME') }}</span>
                <span id="expected-move" class="kbv fw-bold">--</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('ME ↗') }}</span>
                <span id="me-trend" class="kbv fw-bold">--</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('ME Rango') }}</span>
                <span id="me-range" class="kbv fw-bold">--</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('ME vs Hist') }}</span>
                <span id="me-vs-hist" class="kbv fw-bold">--</span>
            </div>
        </div>

        <hr class="sidebar-divider">

        <div class="sidebar-section-title">{{ _('Tendencia') }}</div>
        <div class="sidebar-kpi-list">
            <div class="sidebar-kpi-item kpi-highlight">
                <span class="sidebar-kpi-item-label">{{ _('Tendencia') }}</span>
                <span id="tendencia-display" class="kbv fw-bold trend-neutral">--</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Score') }}</span>
                <span id="score-display" class="kbv fw-bold">--</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Score ↗') }}</span>
                <span id="score-trend" class="kbv fw-bold">--</span>
            </div>
        </div>

        <hr class="sidebar-divider">

        <div class="sidebar-section-title">{{ _('Desviaciones') }}</div>
        <div class="sidebar-kpi-list">
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('+2DE') }}</span>
                <span id="sd2-up" class="kbv fw-bold">--</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('+1DE') }}</span>
                <span id="sd1-up" class="kbv fw-bold">--</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('-1DE') }}</span>
                <span id="sd1-dn" class="kbv fw-bold">--</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('-2DE') }}</span>
                <span id="sd2-dn" class="kbv fw-bold">--</span>
            </div>
        </div>

        <hr class="sidebar-divider">

        <div class="sidebar-section-title">{{ _('Strikes') }}</div>
        <div class="sidebar-kpi-list">
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Strike P.') }}</span>
                <span id="strike-primary" class="kbv fw-bold">--</span>
            </div>
            <div class="sidebar-kpi-item">
                <span class="sidebar-kpi-item-label">{{ _('Strike S.') }}</span>
                <span id="strike-secondary" class="kbv fw-bold">--</span>
            </div>
        </div>
        <div class="sidebar-footer-note mt-auto pt-3">
            {{ _('Datos desde la cadena de opciones. Solo para fines analíticos.') }}
        </div>

    </aside>

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

        <!-- Charts grid -->
        <div class="charts-grid">

            <!-- Fila 1 -->
            <div class="chart-card">
                <div class="scale-label"><span>{{ _('Principal') }}</span></div>
                <div id="chart"></div>
            </div>

            <div class="chart-card">
                <div class="scale-label"><span>{{ _('Strikes GEX Put/Call') }}</span></div>
                <div id="chartStrikesGexPutCall"></div>
                <div class="chart-controls">
                    <div class="control-group">
                        <span id="dataHourLabel">{{ _('Horario') }}</span>
                        <input type="range" id="dataHourSlider" min="0" max="0" step="1" value="0">
                        <span id="dataHourValue">--:--</span>
                        <button id="liveToggleBtn" class="btn-live">🟢 Live</button>
                    </div>
                    <div class="control-group">
                        <span id="viewModeLabel">{{ _('Modo CALL VS PUT') }}</span>
                        <input type="range" id="viewModeSlider" min="0" max="1" step="1" value="0">
                    </div>
                </div>
            </div>

            <!-- Fila 2 -->
            <div class="chart-card">
                <div class="scale-label"><span>{{ _('Strikes Dominantes GEX') }}</span></div>
                <div id="chartDominantStrikes"></div>
            </div>

            <div class="chart-card">
                <div class="scale-label"><span>{{ _('Acumulado GEX Dominantes') }}</span></div>
                <div id="chartGEXMax"></div>
                <div class="chart-controls">
                    <div class="control-group justify-end">
                        <span id="viewModeLabel_2">{{ _('Modo Juntos') }}</span>
                        <input type="range" id="viewModeSlider_2" min="0" max="1" step="1" value="0">
                    </div>
                </div>
            </div>

            <!-- Fila 3 -->
            <div class="chart-card">
                <div class="scale-label"><span>{{ _('Evolución del Score') }}</span></div>
                <div id="chartScore"></div>
                <div id="score-warning" style="display:none;">
                    {{ _('Este gráfico comienza a mostrar resultados a partir de las 10:05 AM (hora local de mercado).')
                    }}
                </div>
            </div>

            <div class="chart-card">
                <div class="scale-label"><span>{{ _('Tendencias') }}</span></div>
                <div class="trend-box panel-elegante" id="chart-containerTrend">
                    <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">
                            <span class="label">{{ _('Gravedad') }}</span>
                            <span id="gravity-trend-display" class="value trend-neutral">--</span>
                        </div>
                        <div class="difference-box">
                            <span class="label">{{ _('OI GEX') }}</span>
                            <span id="pred-oi-gex-trend-display" class="value trend-neutral">--</span>
                        </div>
                        <div class="difference-box">
                            <span class="label">{{ _('Delta Neutro') }}</span>
                            <span id="pred-delta-neutro-trend-display" class="value trend-neutral">--</span>
                        </div>
                        <div class="difference-box">
                            <span class="label">{{ _('Volumen') }}</span>
                            <span id="pred-volumen-trend-display" class="value trend-neutral">--</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Fila 4 -->
            <div class="chart-card">
                <div class="scale-label"><span>{{ _('Evolución del Movimiento Esperado') }}</span></div>
                <div id="chartExpectedMove"></div>
                <div class="chart-controls">
                    <div class="control-group justify-end">
                        <span id="emModeLabel">{{ _('Histórico: Absoluto') }}</span>
                        <input type="range" id="emModeSlider" min="0" max="1" step="1" value="0"
                            style="flex:0 0 60px;width:60px;">
                    </div>
                </div>
            </div>

            <div class="chart-card">
                <div class="scale-label"><span>{{ _('Desviaciones Estándar') }}</span></div>
                <div id="chartIndexSD"></div>
                <div class="chart-controls">
                    <div class="control-group justify-end">
                        <span id="sdModeLabel">{{ _('SD: Apertura') }}</span>
                        <input type="range" id="sdModeSlider" min="0" max="1" step="1" value="0"
                            style="flex:0 0 60px;width:60px;">
                    </div>
                </div>
            </div>

        </div><!-- end charts-grid -->

        <!-- Tabla de datos -->
        <div class="table-responsive mt-4">
            <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>

    </div><!-- end dashboard-main -->

</div><!-- end dashboard-layout -->

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

<!-- 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"></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 id="market-status-marker" class="market-status hidden"></div>


<!-- Botón volver al top -->
<button id="btn-top" title="{{ _('Volver al inicio') }}">↑ TOP</button>

{% endblock %}

{% block scripts %}
{{ super() }}
<script>
    let liveMode = true;
    // ─── PLOTLY SHARED THEME ─────────────────────────────────────────────────────
    function _pTheme(dark) {
        return {
            bg: dark ? '#111827' : 'rgba(0,0,0,0)',
            grid: dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)',
            axis: dark ? '#9ca3af' : '#6b7280',
            txt: dark ? '#e5e7eb' : '#111827',
            mono: 'Oxanium, sans-serif'
        };
    }
    function _pLayout(dark, symbol, marginExtra) {
        const t = _pTheme(dark);
        const xBase = {
            color: t.axis, tickfont: { size: 9, family: t.mono }, gridcolor: t.grid,
            linecolor: 'rgba(255,255,255,0.04)', zeroline: false, fixedrange: false
        };
        const yBase = { ...xBase, side: 'right' };
        const wm = {
            text: symbol.toUpperCase(), xref: 'paper', yref: 'paper',
            x: 0.5, y: 0.5, xanchor: 'center', yanchor: 'middle', showarrow: false,
            font: {
                size: 80, color: dark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.03)',
                family: 'Poppins, sans-serif'
            }
        };
        return {
            bg: t.bg, grid: t.grid, axis: t.axis, txt: t.txt, mono: t.mono,
            xBase, yBase, wm,
            paperBg: t.bg, plotBg: t.bg,
            margin: { l: 8, r: 52, t: 28, b: 52, ...marginExtra },
            legend: {
                orientation: 'h', x: 0, y: 1.06, xanchor: 'left', yanchor: 'bottom',
                bgcolor: 'transparent', font: { family: t.mono, size: 10, color: t.txt },
                itemsizing: 'constant'
            },
            hoverlabel: {
                bgcolor: dark ? '#1f2937' : '#f9fafb',
                bordercolor: dark ? '#374151' : '#d1d5db',
                font: { family: t.mono, size: 11, color: t.txt }
            }
        };
    }
    const _pCfg = {
        responsive: true, scrollZoom: false, doubleClick: 'reset',
        displayModeBar: true, displaylogo: false,
        modeBarButtonsToRemove: ['lasso2d', 'select2d', 'autoScale2d', 'toImage']
    };
    // ──────────────────────────────────────────────────────────────────────────────


    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;
        } else {
            dataHourValue.textContent = "Sin horarios válidos";
            dataHourSlider.disabled = true;
        }
    }

    // Fix: listener registrado UNA SOLA VEZ (antes estaba dentro de updateSliderFromDatePicker,
    // lo que causaba que se acumulara un nuevo listener en cada llamada)
    dataHourSlider.addEventListener("input", () => {
        const index = parseInt(dataHourSlider.value);
        dataHourValue.textContent = validTimes[index] || "--:--";
    });




    let predictorData = null;
    let historicalEMData = null;   // cache global del histórico
    let openingPriceCache = null;  // precio apertura 9:30 del chain
    let previousCloseCache = null; // cierre del día anterior

    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);
            updateExpectedMove(predictorData);
            updateIndexSD(predictorData);

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

        // Forzar resize de todos los gráficos Plotly al terminar la carga completa de la página
        // Esto resuelve el problema de contenedores con height:0 en primer render
        window.addEventListener('load', () => {
            setTimeout(() => {
                ['chart', 'chartStrikesGexPutCall', 'chartDominantStrikes',
                    'chartGEXMax', 'chartScore', 'chartExpectedMove', 'chartIndexSD'].forEach(id => {
                        const el = document.getElementById(id);
                        if (el && el._fullLayout) Plotly.Plots.resize(el);
                    });
            }, 300);
        });

    });


    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;

            // Fetch precio apertura y cierre anterior en paralelo
            const sym = selectedSymbol.replace('$', '');
            await Promise.all([
                // Precio apertura 9:30
                !openingPriceCache ? fetch(`/opening_price?symbol=${sym}&date=${selectedDate}`)
                    .then(r => r.json())
                    .then(json => { if (json.price) openingPriceCache = json.price; })
                    .catch(() => { openingPriceCache = parseFloat(data[0].precio_actual); })
                    : Promise.resolve(),
                // Cierre del día anterior
                !previousCloseCache ? fetch(`/previous_close?symbol=${sym}&date=${selectedDate}`)
                    .then(r => r.json())
                    .then(json => { if (json.price) previousCloseCache = json.price; })
                    .catch(e => { console.warn('No se pudo cargar cierre anterior:', e); })
                    : Promise.resolve()
            ]);

            updateTable(data);
            updateChart(data);
            updateScore(data);
            updateGEXMaxChart(data);
            updateDominantStrikesChart(data);
            updateExpectedMove(data);
            updateIndexSD(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 dark = isDarkModeActive();
        const symbol = document.getElementById("symbolSelect").value;
        const L = _pLayout(dark, symbol, {});
        const t = _pTheme(dark);

        const filteredData = data.filter(row => {
            const parts = row.timestamp.split(" ");
            if (parts.length < 5) return false;
            const timeParts = parts[4].split(":");
            const h = parseInt(timeParts[0], 10), m = parseInt(timeParts[1], 10);
            return h > 10 || (h === 10 && m >= 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(" ");
            return parts.length < 5 ? "--:--" : parts[4].slice(0, 5);
        });
        const scores = filteredData.map(row => row.score_30min);

        const scoreMin = Math.min(...scores), 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);

        // Colored multi-segment line
        // Band thresholds (same as bgBands below — keeps line color in sync with bands)
        const b1 = maxY - range * 1 / 5;   // dark green / green boundary
        const b2 = maxY - range * 2 / 5;   // green / yellow boundary
        const b3 = minY + range * 2 / 5;   // yellow / dark red boundary
        const b4 = minY + range * 1 / 5;   // dark red / darkest red boundary

        const coloredTraces = scores.map((v, i) => {
            if (i === 0) return null;
            const col = v > b1 ? '#10b981'   // dark green band
                : v > b2 ? '#6ee7b7'   // green band
                    : v > b3 ? '#f59e0b'   // yellow band
                        : v > b4 ? '#f97316'   // dark red band
                            : '#ef4444';  // darkest red band
            return {
                x: [labels[i - 1], labels[i]], y: [scores[i - 1], v],
                type: 'scatter', mode: 'lines',
                line: { color: col, width: 3 },
                showlegend: false, hoverinfo: 'skip'
            };
        }).filter(Boolean);

        // Hover ghost trace
        const hoverTrace = {
            x: labels, y: scores, type: 'scatter', mode: 'lines',
            line: { color: 'transparent', width: 1 },
            showlegend: false, name: 'Score',
            hovertemplate: '%{x}  <b>%{y:.4f}</b><extra>Score</extra>'
        };

        const bgBands = [
            { y0: maxY - range * 0 / 5, y1: maxY - range * 1 / 5, color: 'rgba(5,  90,  5,  0.55)' },
            { y0: maxY - range * 1 / 5, y1: maxY - range * 2 / 5, color: 'rgba(10, 150, 10, 0.45)' },
            { y0: maxY - range * 2 / 5, y1: minY + range * 2 / 5, color: 'rgba(180,130, 0,  0.42)' },
            { y0: minY + range * 2 / 5, y1: minY + range * 1 / 5, color: 'rgba(150, 10, 10, 0.45)' },
            { y0: minY + range * 1 / 5, y1: minY, color: 'rgba(90,   0,  0, 0.55)' }
        ].map(b => ({
            type: 'rect', xref: 'paper', yref: 'y',
            x0: 0, x1: 1, y0: b.y0, y1: b.y1,
            fillcolor: b.color, opacity: 1, line: { width: 0 }, layer: 'below'
        }));

        const layout = {
            uirevision: `score-${symbol}`,
            paper_bgcolor: L.paperBg, plot_bgcolor: L.plotBg,
            font: { color: L.txt, family: L.mono, size: 10 },
            margin: L.margin, dragmode: 'pan', hoverlabel: L.hoverlabel,
            showlegend: false,
            shapes: [...bgBands, { type: 'line', xref: 'paper', yref: 'y', x0: 0, x1: 1, y0: 0, y1: 0, line: { color: dark ? 'rgba(255,255,255,0.75)' : 'rgba(0,0,0,0.7)', width: 1.5, dash: 'dot' }, layer: 'above' }],
            xaxis: { ...L.xBase, type: 'category', tickvals, ticktext: tickvals, tickangle: -45 },
            yaxis: { ...L.yBase, range: [minY, maxY], tickformat: '.2f' },
            annotations: [L.wm]
        };

        Plotly.react('chartScore', [...coloredTraces, hoverTrace], layout, _pCfg);
    }


    async function updateExpectedMove(data) {
        if (!data || data.length === 0) return;

        const dark = isDarkModeActive();
        const symbol = document.getElementById("symbolSelect").value;
        const L = _pLayout(dark, symbol, {});
        const t = _pTheme(dark);

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

        const values = data.map(row => parseFloat(row.movimiento_esperado));

        const validValues = values.filter(v => !isNaN(v));
        if (validValues.length === 0) return;

        const minY = Math.min(...validValues);
        const maxY = Math.max(...validValues);

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

        // ── Modo slider: 0 = absoluto, 1 = anclado (escalado) ────────────────
        const emMode = parseInt(document.getElementById('emModeSlider')?.value ?? 0);
        const emModeLabels = { 0: "{{ _('Histórico: Absoluto') }}", 1: "{{ _('Histórico: Anclado') }}" };
        const emModeLabelEl = document.getElementById('emModeLabel');
        if (emModeLabelEl) emModeLabelEl.textContent = emModeLabels[emMode];

        // ── Línea histórica (escalada o absoluta según slider) ───────────────
        let histTrace = null;
        try {
            if (!historicalEMData) {
                const histResp = await fetch(`/historical_expected_move?symbol=${symbol}`);
                historicalEMData = await histResp.json();
            }
            const histData = historicalEMData;

            if (Array.isArray(histData) && histData.length > 0) {
                const firstSlot = labels[0];
                const firstReal = values[0];
                const firstHistRow = histData.find(h => h.time_slot === firstSlot && h.avg != null);

                // Modo 0: absoluto (sin escalar) | Modo 1: anclado al primer punto real
                const scaleFactor = (emMode === 1 && firstHistRow && firstHistRow.avg > 0)
                    ? firstReal / firstHistRow.avg
                    : 1;

                const hx = histData.map(h => h.time_slot);
                const hAvg = histData.map(h => h.avg != null ? parseFloat((h.avg * scaleFactor).toFixed(2)) : null);

                const histLabel = emMode === 1 ? 'Histórico avg (anclado)' : 'Histórico avg (absoluto)';
                histTrace = {
                    x: hx, y: hAvg,
                    type: 'scatter', mode: 'lines',
                    name: histLabel,
                    line: { color: 'rgba(167,139,250,0.8)', width: 1.5, dash: 'dot' },
                    hovertemplate: `%{x}  <b>± %{y:.2f}</b><extra>${histLabel}</extra>`
                };
            }
        } catch (e) {
            console.warn('No se pudo cargar histórico:', e);
        }
        // ─────────────────────────────────────────────────────────────────────

        // ── Lookup histórico (respeta el modo) para colorear por distancia ───
        const histLookup = {};
        if (historicalEMData && Array.isArray(historicalEMData)) {
            const firstHistRow = historicalEMData.find(h => h.time_slot === labels[0] && h.avg != null);
            const sf = (emMode === 1 && firstHistRow && firstHistRow.avg > 0)
                ? values[0] / firstHistRow.avg
                : 1;
            historicalEMData.forEach(h => {
                if (h.avg != null) histLookup[h.time_slot] = h.avg * sf;
            });
        }

        // Gradiente relativo al histórico:
        // por encima → rojo intenso | por debajo → azul
        const coloredTraces = values.map((v, i) => {
            if (i === 0 || isNaN(v) || isNaN(values[i - 1])) return null;

            const slotHist = histLookup[labels[i]];
            let col;

            if (slotHist != null) {
                const delta = v - slotHist;
                const ref = Math.abs(slotHist) || 1;
                const norm = Math.max(-1, Math.min(1, delta / (ref * 0.5)));

                if (slotHist != null) {
                    const delta = v - slotHist;
                    const ref = Math.abs(slotHist) || 1;
                    // Más sensible: 0.3 en lugar de 0.5
                    const norm = Math.max(-1, Math.min(1, delta / (ref * 0.3)));

                    if (norm >= 0) {
                        // Por encima del histórico: ámbar → naranja → rojo intenso
                        // norm=0 → #f59e0b (ámbar), norm=1 → #ef4444 (rojo)
                        const r = Math.round(245 + norm * (239 - 245));  // 245→239
                        const g = Math.round(158 - norm * (158 - 68));   // 158→68
                        const b = Math.round(11 - norm * (11 - 68));    // 11→68
                        col = `rgb(${r},${g},${b})`;
                    } else {
                        // Por debajo del histórico: ámbar → azul
                        // norm=0 → #f59e0b (ámbar), norm=-1 → #38bdf8 (azul)
                        const t2 = -norm;
                        const r = Math.round(245 - t2 * (245 - 56));    // 245→56
                        const g = Math.round(158 + t2 * (189 - 158));   // 158→189
                        const b = Math.round(11 + t2 * (248 - 11));    // 11→248
                        col = `rgb(${r},${g},${b})`;
                    }
                }
            } else {
                // Fallback sin histórico: gradiente por rango del día
                const norm2 = (v - minY) / (maxY - minY + 0.0001);
                col = norm2 > 0.75 ? '#ef4444' : norm2 > 0.50 ? '#f97316' : norm2 > 0.25 ? '#f59e0b' : '#38bdf8';
            }

            return {
                x: [labels[i - 1], labels[i]],
                y: [values[i - 1], v],
                type: 'scatter', mode: 'lines',
                line: { color: col, width: 2.5 },
                showlegend: false, hoverinfo: 'skip'
            };
        }).filter(Boolean);
        // ─────────────────────────────────────────────────────────────────────

        // Área rellena debajo de la curva (sutil)
        const areaTrace = {
            x: labels, y: values,
            type: 'scatter', mode: 'none',
            fill: 'tozeroy',
            fillcolor: dark ? 'rgba(56,189,248,0.06)' : 'rgba(56,189,248,0.10)',
            showlegend: false, hoverinfo: 'skip'
        };

        // Trace hover invisible
        const hoverTrace = {
            x: labels, y: values,
            type: 'scatter', mode: 'lines',
            line: { color: 'transparent', width: 1 },
            showlegend: false, name: 'Mov. Esp.',
            hovertemplate: '%{x}  <b>± %{y:.2f}</b><extra>Mov. Esperado</extra>'
        };

        // Línea de promedio diario
        const avg = validValues.reduce((a, b) => a + b, 0) / validValues.length;
        const avgLine = {
            type: 'line', xref: 'paper', yref: 'y',
            x0: 0, x1: 1, y0: avg, y1: avg,
            line: { color: dark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.15)', width: 1, dash: 'dot' }
        };

        const avgAnnotation = {
            xref: 'paper', yref: 'y',
            x: 1, y: avg,
            xanchor: 'right', yanchor: 'bottom',
            text: `avg ± ${avg.toFixed(2)}`,
            showarrow: false,
            font: { size: 9, color: t.axis, family: t.mono }
        };

        // Eje X basado en el histórico completo (si disponible), sino en labels reales
        const fullXAxis = (historicalEMData && Array.isArray(historicalEMData) && historicalEMData.length > 0)
            ? historicalEMData.map(h => h.time_slot)
            : labels;

        const tickSpacingFull = Math.ceil(fullXAxis.length / 12);
        const tickvalsFull = fullXAxis.filter((_, i) => i % tickSpacingFull === 0);

        // Rango Y: incluye valores reales e históricos (respetando el modo)
        let yMin = minY, yMax = maxY;
        if (historicalEMData && Array.isArray(historicalEMData)) {
            const firstHistRow = historicalEMData.find(h => h.time_slot === labels[0]);
            const sf = (emMode === 1 && firstHistRow && firstHistRow.avg > 0)
                ? values[0] / firstHistRow.avg
                : 1;
            const histVals = historicalEMData.map(h => h.avg != null ? h.avg * sf : null).filter(v => v != null);
            if (histVals.length > 0) {
                yMin = Math.min(yMin, ...histVals);
                yMax = Math.max(yMax, ...histVals);
            }
        }
        const padFull = (yMax - yMin) * 0.12 || 1;

        const layout = {
            uirevision: `em-${symbol}`,
            paper_bgcolor: L.paperBg,
            plot_bgcolor: L.plotBg,
            font: { color: L.txt, family: L.mono, size: 10 },
            margin: { ...L.margin, b: 72 },
            dragmode: 'pan',
            hoverlabel: L.hoverlabel,
            showlegend: histTrace !== null,
            legend: { ...L.legend, traceorder: 'normal' },
            annotations: [L.wm],
            xaxis: {
                ...L.xBase,
                type: 'category',
                categoryarray: fullXAxis,
                categoryorder: 'array',
                tickvals: tickvalsFull, ticktext: tickvalsFull,
                tickangle: -45
            },
            yaxis: {
                ...L.yBase,
                range: [yMin - padFull, yMax + padFull],
                tickformat: '.2f',
                title: { text: 'ME (pts)', font: { size: 9, color: t.axis } }
            }
        };

        const traces = [areaTrace, ...coloredTraces, hoverTrace];
        if (histTrace) traces.push(histTrace);

        Plotly.react('chartExpectedMove', traces, layout, _pCfg)
            .then(() => Plotly.Plots.resize(document.getElementById('chartExpectedMove')));
    }

    async function updateIndexSD(data) {
        if (!data || data.length === 0) return;

        const dark = isDarkModeActive();
        const symbol = document.getElementById("symbolSelect").value;
        const L = _pLayout(dark, symbol, {});
        const t = _pTheme(dark);

        const labels = data.map(row => {
            const parts = row.timestamp.split(" ");
            return parts.length < 5 ? "--:--" : parts[4].slice(0, 5);
        });
        const curPrices = data.map(row => parseFloat(row.precio_actual)).map(v => isNaN(v) ? null : v);
        const curME = data.map(row => parseFloat(row.movimiento_esperado)).map(v => isNaN(v) ? 0 : v);
        const validPrices = curPrices.filter(v => v !== null);
        const openME = curME[0];
        const sdMode = parseInt(document.getElementById('sdModeSlider').value);

        // Precio de apertura desde cache global (ya cargado en fetchData)
        let openPrice = openingPriceCache ?? validPrices[0];

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

        const mkLine = (name, yArr, color, dash, width = 1.2) => ({
            x: labels, y: yArr,
            type: 'scatter', mode: 'lines', name,
            line: { color, width, dash },
            hovertemplate: `%{x}  <b>%{y:.2f}</b><extra>${name}</extra>`
        });

        // Precio del índice
        const priceTrace = mkLine(symbol, curPrices, '#f59e0b', null, 2);

        const lastI = n - 1;

        // Bandas SD
        let sd1Up, sd1Dn, sd2Up, sd2Dn;
        if (sdMode === 0) {
            // Apertura: horizontales fijas basadas en precio y ME de apertura
            const base = openPrice;
            const me = openME;
            sd1Up = mkLine('+1DE', Array(n).fill(parseFloat((base + me).toFixed(2))), 'rgba(34,197,94,0.8)', 'dash');
            sd1Dn = mkLine('-1DE', Array(n).fill(parseFloat((base - me).toFixed(2))), 'rgba(34,197,94,0.8)', 'dash');
            sd2Up = mkLine('+2DE', Array(n).fill(parseFloat((base + me * 2).toFixed(2))), 'rgba(251,191,36,0.7)', 'dot');
            sd2Dn = mkLine('-2DE', Array(n).fill(parseFloat((base - me * 2).toFixed(2))), 'rgba(251,191,36,0.7)', 'dot');
        } else {
            // Actual: horizontales basadas en el último precio y ME del día
            const base = validPrices[validPrices.length - 1];
            const me = curME[lastI];
            sd1Up = mkLine('+1DE', Array(n).fill(parseFloat((base + me).toFixed(2))), 'rgba(34,197,94,0.8)', 'dash');
            sd1Dn = mkLine('-1DE', Array(n).fill(parseFloat((base - me).toFixed(2))), 'rgba(34,197,94,0.8)', 'dash');
            sd2Up = mkLine('+2DE', Array(n).fill(parseFloat((base + me * 2).toFixed(2))), 'rgba(251,191,36,0.7)', 'dot');
            sd2Dn = mkLine('-2DE', Array(n).fill(parseFloat((base - me * 2).toFixed(2))), 'rgba(251,191,36,0.7)', 'dot');
        }

        // Valores de las bandas en el último punto (para labels y rango Y)
        const refPrice = sdMode === 0 ? openPrice : validPrices[validPrices.length - 1];
        const refME = sdMode === 0 ? openME : curME[lastI];

        const v_sd1Up = parseFloat((refPrice + refME).toFixed(2));
        const v_sd1Dn = parseFloat((refPrice - refME).toFixed(2));
        const v_sd2Up = parseFloat((refPrice + refME * 2).toFixed(2));
        const v_sd2Dn = parseFloat((refPrice - refME * 2).toFixed(2));

        // Rango Y: siempre muestra precio y todas las bandas ±2σ
        const priceMin = Math.min(...validPrices);
        const priceMax = Math.max(...validPrices);
        const allPoints = [priceMin, priceMax, v_sd2Up, v_sd2Dn];
        const rawMin = Math.min(...allPoints);
        const rawMax = Math.max(...allPoints);
        const pad = (rawMax - rawMin) * 0.12 || refME * 0.5;
        const yMin = rawMin - pad;
        const yMax = rawMax + pad;

        // Anotaciones sobre cada banda a la derecha
        const lastLabel = labels[lastI];
        const mkAnnot = (text, yVal, solidColor, bgSolid) => ({
            xref: 'paper', yref: 'y',
            x: 1.01, y: yVal,
            xanchor: 'left', yanchor: 'middle',
            text: `<b>${text}</b> ${yVal.toFixed(2)}`,
            showarrow: false,
            font: { size: 11, color: dark ? '#ffffff' : '#111827', family: t.mono },
            bgcolor: dark ? bgSolid.replace('0.25)', '0.35)') : bgSolid.replace('0.25)', '0.85)'),
            bordercolor: solidColor,
            borderwidth: 1.5,
            borderpad: 4,
            opacity: 1
        });

        const bandAnnotations = [
            mkAnnot('+2DE', v_sd2Up, 'rgba(251,191,36,1)', 'rgba(251,191,36,0.25)'),
            mkAnnot('+1DE', v_sd1Up, 'rgba(34,197,94,1)', 'rgba(34,197,94,0.25)'),
            mkAnnot('-1DE', v_sd1Dn, 'rgba(34,197,94,1)', 'rgba(34,197,94,0.25)'),
            mkAnnot('-2DE', v_sd2Dn, 'rgba(251,191,36,1)', 'rgba(251,191,36,0.25)'),
        ];

        const date = document.getElementById('datePicker').value;
        const layout = {
            uirevision: `indexSD-${symbol}-${sdMode}-${date}`,
            paper_bgcolor: L.paperBg, plot_bgcolor: L.plotBg,
            font: { color: L.txt, family: L.mono, size: 10 },
            margin: { ...L.margin, r: 90 },
            dragmode: 'pan',
            hoverlabel: L.hoverlabel,
            showlegend: false,
            annotations: [L.wm, ...bandAnnotations],
            xaxis: { ...L.xBase, type: 'category', tickvals, ticktext: tickvals, tickangle: -45 },
            yaxis: { ...L.yBase, range: [yMin, yMax], tickformat: '.2f' }
        };

        const el = document.getElementById('chartIndexSD');

        // Actualizar el rango ANTES del react para que el listener ya tenga el valor correcto
        el._customYRange = [yMin, yMax];

        Plotly.react('chartIndexSD', [priceTrace, sd1Up, sd1Dn, sd2Up, sd2Dn], layout, _pCfg)
            .then(() => {
                Plotly.relayout('chartIndexSD', { 'yaxis.range': [yMin, yMax], 'yaxis.autorange': false });
                Plotly.Plots.resize(el);

                // Registrar listener solo una vez
                if (!el._sdRangeListenerAttached) {
                    el._sdRangeListenerAttached = true;
                    el.on('plotly_relayout', (eventData) => {
                        if (eventData['yaxis.autorange'] === true) {
                            const r = el._customYRange;
                            Plotly.relayout('chartIndexSD', { 'yaxis.range': r, 'yaxis.autorange': false });
                        }
                    });
                }
            });
    }


    const sdModeLabels = {
        0: "{{ _('SD: Apertura') }}",
        1: "{{ _('SD: Actual') }}"
    };

    document.getElementById('sdModeSlider').addEventListener('input', function () {
        document.getElementById('sdModeLabel').textContent = sdModeLabels[parseInt(this.value)];
        if (predictorData) updateIndexSD(predictorData);
    });

    // ── Slider modo histórico ME (anclado vs absoluto) ────────────────────────
    document.getElementById('emModeSlider').addEventListener('input', function () {
        const emModeLabels = { 0: "{{ _('Histórico: Absoluto') }}", 1: "{{ _('Histórico: Anclado') }}" };
        document.getElementById('emModeLabel').textContent = emModeLabels[parseInt(this.value)];
        if (predictorData) updateExpectedMove(predictorData);
    });
    // ─────────────────────────────────────────────────────────────────────────

    // ── Botón volver al top ───────────────────────────────────────────────────
    const btnTop = document.getElementById('btn-top');
    window.addEventListener('scroll', () => {
        btnTop.classList.toggle('visible', window.scrollY > 1200);
    });
    btnTop.addEventListener('click', () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
    // ─────────────────────────────────────────────────────────────────────────

    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 = `kbv ${textColor}`;
            differencePercentageBox.className = `kbv ${textColor}`;

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

            // ── HOD / LOD ─────────────────────────────────────────────────────
            const allPrices = data.map(r => parseFloat(r.precio_actual)).filter(v => !isNaN(v));
            if (allPrices.length > 0) {
                const hod = Math.max(...allPrices).toFixed(2);
                const lod = Math.min(...allPrices).toFixed(2);
                const hodEl = document.getElementById('hod-display');
                const lodEl = document.getElementById('lod-display');
                if (hodEl) { hodEl.textContent = hod; hodEl.className = 'kbv green-text'; }
                if (lodEl) { lodEl.textContent = lod; lodEl.className = 'kbv red-text'; }
            }
            // ─────────────────────────────────────────────────────────────────

            // ── ME Trend y Rango del día ──────────────────────────────────────
            const meTrendEl = document.getElementById('me-trend');
            const meRangeEl = document.getElementById('me-range');
            const allME = data.map(r => parseFloat(r.movimiento_esperado)).filter(v => !isNaN(v));
            if (allME.length >= 2 && meTrendEl) {
                const recentME = allME.slice(-10);
                const meDelta = recentME.at(-1) - recentME[0];
                const arrow = meDelta > 0.05 ? '▲' : meDelta < -0.05 ? '▼' : '▬';
                meTrendEl.textContent = `${arrow} ${Math.abs(meDelta).toFixed(2)}`;
                // ME subiendo = más volatilidad = rojo, bajando = verde
                meTrendEl.className = `kbv ${meDelta > 0.05 ? 'red-text' : meDelta < -0.05 ? 'green-text' : ''}`;
            }
            if (allME.length > 0 && meRangeEl) {
                const meMin = Math.min(...allME).toFixed(2);
                const meMax = Math.max(...allME).toFixed(2);
                meRangeEl.textContent = `${meMin}–${meMax}`;
                meRangeEl.className = 'kbv';
            }
            // ─────────────────────────────────────────────────────────────────

            // ── Score Trend (últimos 10 registros) ───────────────────────────
            const scoreTrendEl = document.getElementById('score-trend');
            if (data.length >= 2) {
                const recent = data.slice(-10).map(r => parseFloat(r.score_30min)).filter(v => !isNaN(v));
                if (recent.length >= 2) {
                    const delta = recent.at(-1) - recent[0];
                    const arrow = delta > 0.001 ? '▲' : delta < -0.001 ? '▼' : '▬';
                    scoreTrendEl.textContent = `${arrow} ${Math.abs(delta).toFixed(4)}`;
                    scoreTrendEl.className = `kbv ${delta > 0.001 ? 'green-text' : delta < -0.001 ? 'red-text' : ''}`;
                }
            }
            // ─────────────────────────────────────────────────────────────────

            // ── ME vs Histórico ───────────────────────────────────────────────
            const meVsHistEl = document.getElementById('me-vs-hist');
            if (historicalEMData && historicalEMData.length > 0) {
                const lastRow = data[data.length - 1];
                const curTime = formatTimestamp(lastRow.timestamp).slice(0, 5);
                const curMEval = parseFloat(lastRow.movimiento_esperado);
                const histRow = historicalEMData.find(h => h.time_slot === curTime);
                if (histRow && !isNaN(curMEval)) {
                    const diff = curMEval - histRow.avg;
                    const diffPct = ((diff / histRow.avg) * 100).toFixed(1);
                    const arrow = diff > 0 ? '▲' : '▼';
                    meVsHistEl.textContent = `${arrow} ${diffPct}%`;
                    meVsHistEl.className = `kbv ${diff > 0 ? 'red-text' : 'green-text'}`;
                    meVsHistEl.title = `ME actual: ${curMEval.toFixed(2)} | Hist avg: ${histRow.avg.toFixed(2)}`;
                }
            }
            // ─────────────────────────────────────────────────────────────────

            // ── Strikes dominantes (último registro) ──────────────────────────
            const lastRow2 = data[data.length - 1];
            let gexArr = [];
            try { gexArr = JSON.parse(lastRow2.strikes_GEX); } catch { }
            const elP = document.getElementById('strike-primary');
            const elS = document.getElementById('strike-secondary');
            const spotNow = parseFloat(lastRow2.precio_actual);
            if (Array.isArray(gexArr) && gexArr.length >= 1 && elP) {
                const s1 = parseFloat(gexArr[0]);
                elP.textContent = s1;
                elP.className = `kbv ${spotNow >= s1 ? 'green-text' : 'red-text'}`;
            }
            if (Array.isArray(gexArr) && gexArr.length >= 2 && elS) {
                const s2 = parseFloat(gexArr[1]);
                elS.textContent = s2;
                elS.className = `kbv ${spotNow >= s2 ? 'green-text' : 'red-text'}`;
            }
            // ─────────────────────────────────────────────────────────────────
            const openME = parseFloat(data[0].movimiento_esperado);
            const openPx = openingPriceCache ?? parseFloat(data[0].precio_actual); // fallback 9:35
            if (!isNaN(openPx) && !isNaN(openME)) {
                const spot = parseFloat(spxPrice);
                const levels = {
                    'sd2-up': openPx + openME * 2,
                    'sd1-up': openPx + openME,
                    'sd1-dn': openPx - openME,
                    'sd2-dn': openPx - openME * 2,
                };
                for (const [id, val] of Object.entries(levels)) {
                    const el = document.getElementById(id);
                    el.textContent = val.toFixed(2);
                    el.className = `kbv ${spot >= val ? 'green-text' : 'red-text'}`;
                }
            }
            // ─────────────────────────────────────────────────────────────────


            // --- SPOT (precio actual) ---
            if (!isNaN(spxPrice)) {
                // Color vs fila previa (si existe)
                let spotClass = "kbv";
                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 = "kbv";
            }

            // ── Cambio % del día vs cierre anterior ──────────────────────────
            const dayChangePctEl = document.getElementById('day-change-pct');
            if (dayChangePctEl && previousCloseCache && !isNaN(parseFloat(spxPrice))) {
                const changePct = ((parseFloat(spxPrice) - previousCloseCache) / previousCloseCache * 100).toFixed(2);
                const arrow = changePct > 0 ? '▲' : '▼';
                dayChangePctEl.innerHTML = `<span class="kbv-arrow">${arrow}</span>${Math.abs(changePct)}%`;
                dayChangePctEl.className = `kbv ${changePct > 0 ? 'green-text' : 'red-text'}`;
            }
            // ─────────────────────────────────────────────────────────────────


            // Color en la tendencia
            if (tendencia === "UP") {
                tendenciaDisplay.className = "kbv trend-up";
            } else if (tendencia === "DOWN") {
                tendenciaDisplay.className = "kbv trend-down";
            } else {
                tendenciaDisplay.className = "kbv 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 'class="green-text"';
            if (current < previous) return 'class="red-text"';
            if (current === previous && previous > beforePrevious) return 'class="green-text"';
            if (current === previous && previous < beforePrevious) return 'class="red-text"';
            return '';
        }

        // ============================
        // 2) Reconstruir TODA la tabla en memoria
        // ============================
        let html = '';

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

            // Badge para la tendencia
            let tendenciaBadge;
            if (tendencia === "UP") {
                tendenciaBadge = `<span class="trend-badge trend-badge-up">&#9650; UP</span>`;
            } else if (tendencia === "DOWN") {
                tendenciaBadge = `<span class="trend-badge trend-badge-down">&#9660; DOWN</span>`;
            } else {
                tendenciaBadge = `<span class="trend-badge trend-badge-neutral">${tendencia}</span>`;
            }

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


    }

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

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

        // Preserve legend visibility across updates
        const prevVis = {};
        if (gd && gd.data) gd.data.forEach(tr => { prevVis[tr.name] = tr.visible ?? true; });

        const dark = isDarkModeActive();
        const lang = document.documentElement.lang || 'es';
        const symbol = document.getElementById("symbolSelect").value;
        const L = _pLayout(dark, symbol, {});

        const lbl = {
            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] || { price: 'Precio', gravity: 'P. Gravedad', oi_gex: 'P. OI GEX', delta: 'P. Delta Neutro', volumen: 'P. Volumen' };

        const labels = data.map(row => formatTimestamp(row.timestamp));
        const prices = data.map(row => row.precio_actual);
        const gravity = data.map(row => row.punto_de_gravedad);
        const oiGex = data.map(row => row.prediccion_OI_GEX);
        const deltaN = data.map(row => row.prediccion_Delta_Neutro);
        const vol = data.map(row => row.prediccion_Volumen);

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

        const mk = (name, y, color, dash, width, uid, defVis) => ({
            x: labels, y, mode: 'lines', name, uid,
            line: { color, width, dash },
            visible: prevVis[name] ?? (defVis ? true : 'legendonly'),
            hovertemplate: `%{x}  <b>%{y:.2f}</b><extra>${name}</extra>`
        });

        const traces = [
            mk(lbl.price, prices, '#f59e0b', null, 2.5, 't_price', true),
            mk(lbl.gravity, gravity, '#38bdf8', null, 2, 't_gravity', true),
            mk(lbl.oi_gex, oiGex, '#a78bfa', 'dot', 1.5, 't_oigex', false),
            mk(lbl.delta, deltaN, '#f472b6', 'dot', 1.5, 't_delta', false),
            mk(lbl.volumen, vol, '#34d399', 'dot', 1.5, 't_volume', false),
        ];

        const layout = {
            uirevision: `btm-${symbol}`,
            paper_bgcolor: L.paperBg, plot_bgcolor: L.plotBg,
            font: { color: L.txt, family: L.mono, size: 10 },
            margin: L.margin, dragmode: 'pan',
            hoverlabel: L.hoverlabel, legend: L.legend,
            xaxis: { ...L.xBase, type: 'category', tickvals, ticktext: tickvals, tickangle: -45 },
            yaxis: { ...L.yBase },
            annotations: [L.wm]
        };

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




    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 + " ";

        // Invalidar caches al cambiar símbolo
        historicalEMData = null;
        openingPriceCache = null;
        previousCloseCache = null;

        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",
                beforeShow: function (input, inst) {
                    // Reposicionar como fixed para que no se mueva con el scroll del sidebar
                    const rect = input.getBoundingClientRect();
                    $(inst.dpDiv).css({
                        position: 'fixed',
                        top: (rect.bottom + 4) + 'px',
                        left: rect.left + 'px'
                    });
                },
                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);

                    // Invalidar cache de precio apertura al cambiar fecha
                    openingPriceCache = null;
                    previousCloseCache = null;

                    // 🔄 Mostrar spinner manualmente y esperar ambos fetches
                    document.getElementById("loading-spinner").style.display = "flex";
                    Promise.all([
                        fetchData(selectedDate, selectedSymbol, false),
                        fetchGEXData(selectedDate, selectedSymbol)
                    ]).finally(() => {
                        document.getElementById("loading-spinner").style.display = "none";
                    });
                    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
                // ⚠️ Await ambos para que el spinner no se oculte antes de que terminen
                await Promise.all([
                    fetchData(selectedDate, selectedSymbol, false),
                    fetchGEXData(selectedDate, selectedSymbol)
                ]);
                handleAutoUpdate(selectedDate, selectedSymbol);
            }


        } catch (error) {
            console.error("❌ Error cargando fechas disponibles:", error);
        } finally {
            // Ocultar spinner AQUÍ, después de que fetchData y fetchGEXData hayan terminado
            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(() => {
                // Fix: escalonado — fetchData primero (charts 1-5), fetchGEXData 600ms después (charts 6-7)
                // Evita que los 7 gráficos Plotly se redibuj en al mismo tiempo y generen un pico de CPU
                fetchData(normalizedToday, selectedSymbol, false).then(() => {
                    if (liveMode) {
                        updateSliderFromDatePicker(normalizedToday);
                    }
                });
                setTimeout(() => {
                    fetchGEXData(normalizedToday, selectedSymbol);
                }, 600);
            }, 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 dark = isDarkModeActive();
        const L = _pLayout(dark, symbol, { l: 8, r: 12, t: 28, b: 52 });

        const lbl = {
            es: { primary: 'Strike Dom. Primario', secondary: 'Strike Dom. Secundario', combined: 'Strikes Combinados' },
            en: { primary: 'Primary Dom. Strike', secondary: 'Secondary Dom. Strike', combined: 'Combined Strikes' }
        }[lang] || { primary: 'Strike Dom. Primario', secondary: 'Strike Dom. Secundario', combined: 'Strikes Combinados' };

        latestGEXData = data;

        const freqMapFirst = {}, freqMapSecond = {};
        data.forEach(row => {
            let gexArray;
            try { gexArray = JSON.parse(row.strikes_GEX); } catch { gexArray = []; }
            if (!Array.isArray(gexArray) || gexArray.length < 2) return;
            const f = parseFloat(gexArray[0]), s = parseFloat(gexArray[1]);
            freqMapFirst[f] = (freqMapFirst[f] || 0) + 1;
            freqMapSecond[s] = (freqMapSecond[s] || 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) {
            traces = [
                {
                    x: sortedKeys, y: sortedKeys.map(s => freqMapFirst[s] || 0),
                    type: 'bar', name: lbl.primary,
                    marker: { color: 'rgba(14,165,233,0.82)', line: { color: 'rgba(56,189,248,0.9)', width: 0.5 } },
                    hovertemplate: 'Strike %{x}  <b>%{y}</b><extra>' + lbl.primary + '</extra>'
                },
                {
                    x: sortedKeys, y: sortedKeys.map(s => freqMapSecond[s] || 0),
                    type: 'bar', name: lbl.secondary,
                    marker: { color: 'rgba(103,232,249,0.65)', line: { color: 'rgba(103,232,249,0.9)', width: 0.5 } },
                    hovertemplate: 'Strike %{x}  <b>%{y}</b><extra>' + lbl.secondary + '</extra>'
                }
            ];
        } else {
            const summed = sortedKeys.map(s => (freqMapFirst[s] || 0) + (freqMapSecond[s] || 0));
            const maxV = Math.max(...summed);
            traces = [{
                x: sortedKeys, y: summed, type: 'bar', name: lbl.combined,
                marker: {
                    color: summed.map(v => {
                        const p = v / maxV;
                        return `rgba(${Math.round(14 + p * 30)},${Math.round(165 - p * 50)},${Math.round(233 - p * 80)},0.85)`;
                    }),
                    line: { color: 'rgba(56,189,248,0.5)', width: 0.5 }
                },
                hovertemplate: 'Strike %{x}  <b>%{y}</b><extra>' + lbl.combined + '</extra>'
            }];
        }

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

        // Spot vertical line
        const spotShapes = currentSPX ? [{
            type: 'line', xref: 'x', yref: 'paper',
            x0: currentSPX, x1: currentSPX, y0: 0, y1: 1,
            line: { color: '#f87171', width: 2, dash: 'dash' }
        }] : [];

        const layout = {
            barmode: 'group',
            uirevision: `gexmax-${symbol}`,
            paper_bgcolor: L.paperBg, plot_bgcolor: L.plotBg,
            font: { color: L.txt, family: L.mono, size: 10 },
            margin: L.margin, dragmode: 'pan',
            hoverlabel: L.hoverlabel, legend: L.legend,
            shapes: spotShapes,
            xaxis: { ...L.xBase, tickangle: -45, tickfont: { size: 9, family: L.mono } },
            yaxis: { ...L.yBase, side: 'left', visible: false },
            annotations: [L.wm]
        };

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



    function updateDominantStrikesChart(data) {
        const lang = document.documentElement.lang || 'es';
        const symbol = document.getElementById("symbolSelect").value;
        const dark = isDarkModeActive();
        const L = _pLayout(dark, symbol, { l: 8, r: 52, t: 28, b: 60 });

        const lbl = {
            es: { primary: 'Strike Dom. 1', secondary: 'Strike Dom. 2', spot: 'Precio Spot' },
            en: { primary: 'Dom. Strike 1', secondary: 'Dom. Strike 2', spot: 'Spot Price' }
        }[lang] || { primary: 'Strike Dom. 1', secondary: 'Strike Dom. 2', spot: 'Precio Spot' };

        const labels = data.map(row => formatTimestamp(row.timestamp));
        const dom1Raw = [], dom2Raw = [], spxSpot = [];

        data.forEach(row => {
            let gexArray;
            try { gexArray = JSON.parse(row.strikes_GEX); } catch { gexArray = []; }
            if (Array.isArray(gexArray) && gexArray.length >= 2) {
                dom1Raw.push(parseFloat(gexArray[0]));
                dom2Raw.push(parseFloat(gexArray[1]));
            } else { dom1Raw.push(null); dom2Raw.push(null); }
            spxSpot.push(parseFloat(row.precio_actual));
        });

        function buildStepped(raw, labs) {
            const x = [], y = [];
            for (let i = 0; i < raw.length; i++) {
                if (i > 0 && raw[i] !== raw[i - 1]) { x.push(labs[i]); y.push(null); }
                x.push(labs[i]); y.push(raw[i]);
            }
            return { x, y };
        }
        const s1 = buildStepped(dom1Raw, labels);
        const s2 = buildStepped(dom2Raw, labels);

        const step = Math.ceil(labels.length / 12);
        const tickvals = labels.filter((_, i) => i % step === 0);

        const traces = [
            {
                x: s1.x, y: s1.y, type: 'scatter', mode: 'lines', name: lbl.primary,
                line: { color: '#0ea5e9', width: 3, shape: 'hv' },
                hovertemplate: '%{x}  <b>%{y}</b><extra>' + lbl.primary + '</extra>'
            },
            {
                x: s2.x, y: s2.y, type: 'scatter', mode: 'lines', name: lbl.secondary,
                line: { color: '#67e8f9', width: 1.5, shape: 'hv' },
                hovertemplate: '%{x}  <b>%{y}</b><extra>' + lbl.secondary + '</extra>'
            },
            {
                x: labels, y: spxSpot, type: 'scatter', mode: 'lines', name: lbl.spot,
                line: { color: '#f59e0b', width: 1.5 },
                hovertemplate: '%{x}  <b>%{y:.2f}</b><extra>' + lbl.spot + '</extra>'
            }
        ];

        const layout = {
            uirevision: `dominant-${symbol}`,
            paper_bgcolor: L.paperBg, plot_bgcolor: L.plotBg,
            font: { color: L.txt, family: L.mono, size: 10 },
            margin: L.margin, dragmode: 'pan',
            hoverlabel: L.hoverlabel, legend: L.legend,
            xaxis: { ...L.xBase, type: 'category', tickvals, ticktext: tickvals, tickangle: -45 },
            yaxis: { ...L.yBase },
            annotations: [L.wm]
        };

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



    function updateGEXChartPlotly(gexData) {
        const mode = parseInt(document.getElementById('viewModeSlider').value);
        const dark = isDarkModeActive();
        const symbol = document.getElementById("symbolSelect").value;
        const L = _pLayout(dark, symbol, { l: 8, r: 12, t: 28, b: 60 });

        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: 'rgba(16,185,129,0.8)', line: { color: 'rgba(52,211,153,0.9)', width: 0.5 } },
                    hovertemplate: '%{x}  <b>%{y:,.0f}</b><extra>Call</extra>'
                },
                {
                    x: strikes, y: puts, type: 'bar', name: 'GEX Put (−)',
                    marker: { color: 'rgba(239,68,68,0.8)', line: { color: 'rgba(252,165,165,0.9)', width: 0.5 } },
                    hovertemplate: '%{x}  <b>%{y:,.0f}</b><extra>Put</extra>'
                }
            );
        } else {
            traces.push(
                {
                    x: strikes, y: diff, type: 'bar', name: 'GEX Δ',
                    marker: {
                        color: diff.map(v => v >= 0 ? 'rgba(16,185,129,0.82)' : 'rgba(239,68,68,0.82)'),
                        line: { color: diff.map(v => v >= 0 ? 'rgba(52,211,153,0.9)' : 'rgba(252,165,165,0.9)'), width: 0.5 }
                    },
                    showlegend: false, legendgroup: 'gex',
                    hovertemplate: '%{x}  <b>%{y:,.0f}</b><extra>GEX Δ</extra>'
                },
                // dummy legend entry
                strikes.length > 0 ? {
                    x: [strikes[0]], y: [0], type: 'bar', name: 'GEX (Δ)',
                    marker: { color: '#38bdf8' }, opacity: 0,
                    hoverinfo: 'skip', showlegend: true, legendgroup: 'gex'
                } : null
            );
        }

        // Spot vertical line
        if (spxPrice && strikes.length > 0) {
            const cl = getClosestLabel(strikes, spxPrice);
            const ys = mode === 1 ? diff : [...calls, ...puts];
            traces.push({
                x: [cl, cl], y: [Math.min(...ys), Math.max(...ys)],
                mode: 'lines', name: 'Spot',
                line: { color: '#60a5fa', width: 2, dash: 'dash' },
                hoverinfo: 'skip', showlegend: false
            });
        }

        // Helper: formato legible para annotations y ticks
        function fmtGEX(v) {
            const a = Math.abs(v);
            if (a >= 1e9) return (v / 1e9).toFixed(1) + 'B';
            if (a >= 1e6) return (v / 1e6).toFixed(1) + 'M';
            if (a >= 1e3) return (v / 1e3).toFixed(0) + 'K';
            return v.toFixed(0);
        }

        // Annotations: pico Call y valle Put
        const annFont = { family: L.mono, size: 10 };
        const gexAnnotations = [L.wm];
        const maxCallIdx = calls.reduce((b, v, i) => v > calls[b] ? i : b, 0);
        const minPutIdx = puts.reduce((b, v, i) => v < puts[b] ? i : b, 0);

        if (mode === 0 && strikes.length > 0) {
            gexAnnotations.push({
                x: strikes[maxCallIdx], y: calls[maxCallIdx],
                xref: 'x', yref: 'y',
                text: `▲ ${strikes[maxCallIdx]}  <b>${fmtGEX(calls[maxCallIdx])}</b>`,
                showarrow: true, arrowhead: 0,
                arrowcolor: 'rgba(52,211,153,0.9)', ax: 0, ay: -36,
                font: { ...annFont, color: 'rgba(52,211,153,1)' },
                bgcolor: 'rgba(16,185,129,0.22)', bordercolor: 'rgba(52,211,153,0.6)',
                borderwidth: 1, borderpad: 4
            });
            gexAnnotations.push({
                x: strikes[minPutIdx], y: puts[minPutIdx],
                xref: 'x', yref: 'y',
                text: `▼ ${strikes[minPutIdx]}  <b>${fmtGEX(puts[minPutIdx])}</b>`,
                showarrow: true, arrowhead: 0,
                arrowcolor: 'rgba(252,165,165,0.9)', ax: 0, ay: 36,
                font: { ...annFont, color: 'rgba(252,165,165,1)' },
                bgcolor: 'rgba(239,68,68,0.22)', bordercolor: 'rgba(252,165,165,0.6)',
                borderwidth: 1, borderpad: 4
            });
        } else if (mode === 1 && strikes.length > 0) {
            const maxDiffIdx = diff.reduce((b, v, i) => v > diff[b] ? i : b, 0);
            const minDiffIdx = diff.reduce((b, v, i) => v < diff[b] ? i : b, 0);
            if (diff[maxDiffIdx] > 0) gexAnnotations.push({
                x: strikes[maxDiffIdx], y: diff[maxDiffIdx],
                xref: 'x', yref: 'y',
                text: `▲ ${strikes[maxDiffIdx]}  <b>${fmtGEX(diff[maxDiffIdx])}</b>`,
                showarrow: true, arrowhead: 0,
                arrowcolor: 'rgba(52,211,153,0.9)', ax: 0, ay: -36,
                font: { ...annFont, color: 'rgba(52,211,153,1)' },
                bgcolor: 'rgba(16,185,129,0.22)', bordercolor: 'rgba(52,211,153,0.6)',
                borderwidth: 1, borderpad: 4
            });
            if (diff[minDiffIdx] < 0) gexAnnotations.push({
                x: strikes[minDiffIdx], y: diff[minDiffIdx],
                xref: 'x', yref: 'y',
                text: `▼ ${strikes[minDiffIdx]}  <b>${fmtGEX(diff[minDiffIdx])}</b>`,
                showarrow: true, arrowhead: 0,
                arrowcolor: 'rgba(252,165,165,0.9)', ax: 0, ay: 36,
                font: { ...annFont, color: 'rgba(252,165,165,1)' },
                bgcolor: 'rgba(239,68,68,0.22)', bordercolor: 'rgba(252,165,165,0.6)',
                borderwidth: 1, borderpad: 4
            });
        }

        // Calcular tick values manualmente para formatearlos con fmtGEX
        const allY = mode === 1 ? diff : [...calls, ...puts];
        const yMin = Math.min(...allY.filter(isFinite));
        const yMax = Math.max(...allY.filter(isFinite));
        const ySpan = yMax - yMin || 1;
        // Generar ~6 ticks uniformes
        const nTicks = 6;
        const rawStep = ySpan / nTicks;
        const magnitude = Math.pow(10, Math.floor(Math.log10(Math.abs(rawStep) || 1)));
        const step = Math.ceil(rawStep / magnitude) * magnitude;
        const tickStart = Math.ceil(yMin / step) * step;
        const tickVals = [];
        for (let t = tickStart; t <= yMax + step * 0.1; t += step) tickVals.push(parseFloat(t.toFixed(10)));
        const tickText = tickVals.map(fmtGEX);

        const layout = {
            barmode: mode === 0 ? 'relative' : 'overlay',
            uirevision: `gex-${symbol}`,
            paper_bgcolor: L.paperBg, plot_bgcolor: L.plotBg,
            font: { color: L.txt, family: L.mono, size: 10 },
            margin: { ...L.margin, l: 52 }, dragmode: 'pan',
            hoverlabel: L.hoverlabel, legend: L.legend,
            xaxis: { ...L.xBase, tickangle: -45, tickfont: { size: 9, family: L.mono } },
            yaxis: { ...L.yBase, side: 'left', tickvals: tickVals, ticktext: tickText, tickfont: { size: 9, family: L.mono } },
            annotations: gexAnnotations
        };

        Plotly.react('chartStrikesGexPutCall', traces.filter(Boolean), layout, _pCfg);
    }


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