{% extends "base.html" %}

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

{% block extra_head %}
<!-- jQuery y jQuery UI -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

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

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

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

<style>
/* ═══════════════════════════════════════════
   DASHBOARD LAYOUT — Sidebar + Main Content
═══════════════════════════════════════════ */
.dashboard-layout {
    display: flex;
    min-height: calc(100vh - 60px);
    align-items: flex-start;
    background-color: inherit;
}

/* ── Sidebar ── */
.dashboard-sidebar {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    padding: 1.25rem 1rem;
    border-right: 1px solid rgba(128,128,128,0.2);
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    scrollbar-width: thin;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.sidebar-brand-icon {
    font-size: 1.5rem;
    line-height: 1;
}
.sidebar-brand-title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
}
.sidebar-brand-sub {
    font-size: 0.68rem;
    opacity: 0.55;
    line-height: 1;
}

.sidebar-divider {
    margin: 0.6rem 0;
    opacity: 0.15;
}

.sidebar-controls {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sidebar-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.sidebar-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
    margin-bottom: 0;
}
.sidebar-select {
    font-size: 0.82rem !important;
    padding: 0.28rem 0.5rem !important;
}

.sidebar-btn-load {
    font-size: 0.82rem;
    padding: 0.4rem 0.75rem;
    letter-spacing: 0.02em;
}

/* ── Sidebar KPIs ── */
.sidebar-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.5;
    margin-bottom: 0.5rem;
}

.sidebar-kpi-row {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.sidebar-kpi {
    flex: 1;
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    text-align: center;
    color: #fff;
}
.sidebar-kpi-full {
    flex: 1 1 100%;
}
.sidebar-kpi-success { background-color: #198754; }

/* ── LIVE indicator ── */
.live-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #10b981;
    box-shadow: 0 0 6px #10b981;
    animation: livePulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes livePulse {
    0%, 100% { opacity: 1;   transform: scale(1);    box-shadow: 0 0 6px #10b981; }
    50%       { opacity: 0.4; transform: scale(0.85); box-shadow: 0 0 2px #10b981; }
}
.live-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #10b981;
    text-transform: uppercase;
}
.live-time {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-family: monospace;
}
body:not(.dark-mode) .live-time { color: #718096; }

/* Hora cell + clickable row */
.hora-link-cell {
    color: var(--accent-cyan, #06b6d4) !important;
    font-weight: 600;
}
body:not(.dark-mode) .hora-link-cell { color: #3182ce !important; }
tr.idea-row { cursor: pointer; }
tr.idea-row:hover td { background: rgba(139, 92, 246, 0.12) !important; }
.sidebar-kpi-danger  { background-color: #dc3545; }
.sidebar-kpi-primary { background-color: #0d6efd; }
.sidebar-kpi-warning { background-color: #ffc107; color: #212529 !important; }

.sidebar-kpi-label {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.85;
    line-height: 1;
}
.sidebar-kpi-value {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.sidebar-footer-note {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.65rem;
    opacity: 0.4;
    line-height: 1.4;
}

/* ── Main Content ── */
.dashboard-main {
    flex: 1;
    min-width: 0;
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
}

/* ── Empty State ── */
.dashboard-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    opacity: 0.35;
    text-align: center;
    gap: 0.5rem;
}
.dashboard-empty-icon  { font-size: 3rem; }
.dashboard-empty-title { font-size: 1rem; font-weight: 600; }
.dashboard-empty-sub   { font-size: 0.82rem; }

/* Dark mode adjustments */
body.dark-mode .dashboard-sidebar {
    border-right-color: rgba(255,255,255,0.1);
    background-color: transparent;
}

/* Responsive: collapse sidebar on small screens */
@media (max-width: 768px) {
    .dashboard-layout {
        flex-direction: column;
    }
    .dashboard-sidebar {
        width: 100%;
        max-width: 100%;
        min-width: unset;
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid rgba(128,128,128,0.2);
    }
    .sidebar-controls {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }
    .sidebar-field {
        flex: 1 1 140px;
    }
    .sidebar-btn-load {
        flex: 0 0 auto;
        align-self: flex-end;
    }
    .dashboard-main {
        padding: 1rem;
    }
}
</style>

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


{% endblock %}

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

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

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

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

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

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

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

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

                <!-- Pie del modal -->
                <div class="modal-footer">
                    <!-- refrescarEvolucion button removed — auto-refresh handles this -->
                    <div id="liveIndicator" class="d-none me-auto d-flex align-items-center gap-2">
                        <span class="live-dot"></span>
                        <span class="live-label">LIVE</span>
                        <span id="liveTime" class="live-time"></span>
                    </div>
                    <button type="button" class="btn btn-primary" id="copiarResumen">
                        📋 {{ _('Copiar al portapapeles') }}
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        ❌ {{ _('Cerrar') }}
                    </button>
                </div>



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



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


    <!-- Dashboard Layout: Sidebar + Main Content -->
    <div class="dashboard-layout">

        <!-- ═══ SIDEBAR ═══ -->
        <aside class="dashboard-sidebar">
            <!-- Brand / Title -->
            <div class="sidebar-brand">
                <div class="sidebar-brand-icon">📊</div>
                <div>
                    <div class="sidebar-brand-title">{{ _('Ideas Intradía') }}</div>
                    <div class="sidebar-brand-sub">BackTestingMarket</div>
                </div>
            </div>

            <hr class="sidebar-divider">

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

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

                <div class="sidebar-field">
                    <label for="strategySelect" class="sidebar-label">{{ _('Estrategia') }}</label>
                    <select id="strategySelect" class="form-select form-select-sm sidebar-select">
                        <option value="VERTICAL">{{ _('Vertical') }}</option>
                        <option value="IRON_CONDOR">{{ _('Iron Condor') }}</option>
                    </select>
                </div>

                <div class="sidebar-field">
                    <label for="riskLevel" class="sidebar-label">{{ _('Riesgo') }}</label>
                    <select id="riskLevel" class="form-select form-select-sm sidebar-select">
                        <option value="conservador">{{ _('Conservador') }}</option>
                        <option value="intermedio" selected>{{ _('Intermedio') }}</option>
                        <option value="agresivo">{{ _('Agresivo') }}</option>
                        <option value="ultra_agresivo">{{ _('Ultra Agresivo') }}</option>
                    </select>
                </div>

                <button id="loadButton" class="btn btn-success btn-sm fw-bold w-100 mt-3 sidebar-btn-load">
                    <i class="fas fa-bolt me-1"></i> {{ _('Mostrar Ideas') }}
                </button>
            </div>

            <hr class="sidebar-divider">

            <!-- KPIs Vertical -->
            <div id="sidebarKPIsVertical" style="display:none;">
                <div class="sidebar-section-title">{{ _('Verticales') }}</div>

                <div class="sidebar-kpi-row">
                    <div class="sidebar-kpi sidebar-kpi-success">
                        <div class="sidebar-kpi-label">{{ _('Positivos') }}</div>
                        <div id="totalWins" class="sidebar-kpi-value">0</div>
                    </div>
                    <div class="sidebar-kpi sidebar-kpi-danger">
                        <div class="sidebar-kpi-label">{{ _('Negativos') }}</div>
                        <div id="totalLosses" class="sidebar-kpi-value">0</div>
                    </div>
                </div>
                <div class="sidebar-kpi-row">
                    <div class="sidebar-kpi sidebar-kpi-primary sidebar-kpi-full">
                        <div class="sidebar-kpi-label">{{ _('Win Rate') }}</div>
                        <div id="winRate" class="sidebar-kpi-value">0%</div>
                    </div>
                </div>
                <div class="sidebar-kpi-row mt-1">
                    <div class="sidebar-kpi sidebar-kpi-success">
                        <div class="sidebar-kpi-label">OTM</div>
                        <div id="countOTM" class="sidebar-kpi-value">0</div>
                    </div>
                    <div class="sidebar-kpi sidebar-kpi-danger">
                        <div class="sidebar-kpi-label">ITM</div>
                        <div id="countITM" class="sidebar-kpi-value">0</div>
                    </div>
                </div>
                <div class="sidebar-kpi-row">
                    <div class="sidebar-kpi sidebar-kpi-warning sidebar-kpi-full">
                        <div class="sidebar-kpi-label">ITM P</div>
                        <div id="countITMP" class="sidebar-kpi-value">0</div>
                    </div>
                </div>
            </div>

            <!-- KPIs Iron Condor -->
            <div id="sidebarKPIsIC" style="display:none;">
                <div class="sidebar-section-title">{{ _('Iron Condors') }}</div>

                <div class="sidebar-kpi-row">
                    <div class="sidebar-kpi sidebar-kpi-success">
                        <div class="sidebar-kpi-label">{{ _('Positivos') }}</div>
                        <div id="totalWinsIC" class="sidebar-kpi-value">0</div>
                    </div>
                    <div class="sidebar-kpi sidebar-kpi-danger">
                        <div class="sidebar-kpi-label">{{ _('Negativos') }}</div>
                        <div id="totalLossesIC" class="sidebar-kpi-value">0</div>
                    </div>
                </div>
                <div class="sidebar-kpi-row">
                    <div class="sidebar-kpi sidebar-kpi-primary sidebar-kpi-full">
                        <div class="sidebar-kpi-label">{{ _('Win Rate') }}</div>
                        <div id="winRateIC" class="sidebar-kpi-value">0%</div>
                    </div>
                </div>
                <div class="sidebar-kpi-row mt-1">
                    <div class="sidebar-kpi sidebar-kpi-success">
                        <div class="sidebar-kpi-label">OTM</div>
                        <div id="countOTMIC" class="sidebar-kpi-value">0</div>
                    </div>
                    <div class="sidebar-kpi sidebar-kpi-danger">
                        <div class="sidebar-kpi-label">ITM</div>
                        <div id="countITMIC" class="sidebar-kpi-value">0</div>
                    </div>
                </div>
                <div class="sidebar-kpi-row">
                    <div class="sidebar-kpi sidebar-kpi-warning sidebar-kpi-full">
                        <div class="sidebar-kpi-label">ITM P</div>
                        <div id="countITMPIC" class="sidebar-kpi-value">0</div>
                    </div>
                </div>
            </div>

            <!-- Footer note -->
            <div class="sidebar-footer-note">
                {{ _('Uso exclusivo con fines educativos o analíticos.') }}
            </div>
        </aside>

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

            <!-- Empty state when no data loaded yet -->
            <div id="emptyState" class="dashboard-empty-state">
                <div class="dashboard-empty-icon">📈</div>
                <div class="dashboard-empty-title">{{ _('Selecciona los parámetros y presiona "Mostrar Ideas"') }}</div>
                <div class="dashboard-empty-sub">{{ _('Las ideas aparecerán aquí una vez cargadas.') }}</div>
            </div>

            <!-- Sección Vertical -->
            <div id="verticalSection" style="display: none;">
                <div id="summaryContainer"></div>
                <div id="predictionTableContainer" style="display:none;">
                    <div class="card p-0 pb-4">
                        <div class="px-3 py-2 d-flex flex-wrap gap-3 small text-secondary" id="infoResumenVertical"></div>
                        <div class="card-header text-white card-header-darkmode d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">{{ _('Listado de Ideas - Verticales') }}</h5>
                            <div id="spxActual" class="spx-badge rounded px-3 py-1" style="font-size: 16px; font-weight: bold;"></div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table id="predictionTable" class="table custom-dark-table table-bordered table-striped table-hover mb-0">
                                    <thead class="text-center thead-darkmode">
                                        <tr>
                                            <th>{{ _('Hora') }}</th>
                                            <th>{{ _('Lado') }}</th>
                                            <th>{{ _('Strikes') }}</th>
                                            <th>{{ _('Crédito') }}</th>
                                            <th>{{ _('Dist. Pts') }}</th>
                                            <th>{{ _('Dist. %%') }}</th>
                                            <th>{{ _('Estado') }}</th>
                                            <th>{{ _('P/L') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sección Iron Condor -->
            <div id="ironCondorSection" style="display: none;">
                <div id="summaryContainerIC"></div>
                <div id="predictionTableContainerIC" style="display:none;">
                    <div class="card p-0 pb-4">
                        <div class="px-3 py-2 d-flex flex-wrap gap-3 small text-secondary" id="infoResumenIronCondor"></div>
                        <div class="card-header text-white card-header-darkmode d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">{{ _('Listado de Ideas - Iron Condors') }}</h5>
                            <div id="spxActualIC" class="spx-badge rounded px-3 py-1" style="font-size: 16px; font-weight: bold;"></div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table id="predictionTableIC" class="table custom-dark-table table-bordered table-striped table-hover mb-0">
                                    <thead class="table-secondary text-center">
                                        <tr>
                                            <th>Hora</th>
                                            <th>Strikes IC</th>
                                            <th>Crédito</th>
                                            <th>Dist. Pts PUT</th>
                                            <th>Dist. % PUT</th>
                                            <th>Estado PUT</th>
                                            <th>Dist. Pts CALL</th>
                                            <th>Dist. % CALL</th>
                                            <th>Estado CALL</th>
                                            <th>P/L</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div><!-- end dashboard-main -->
    </div><!-- end dashboard-layout -->
</main>
{% endblock %}

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

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

    });




    let plotlyLoaded = false;
    let plotlyLoadingPromise = null;

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

        if (plotlyLoadingPromise) return plotlyLoadingPromise;

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

        return plotlyLoadingPromise;
    }







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

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

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

        // Hide live indicator when on IDEA tab
        document.getElementById('liveIndicator').classList.add('d-none');
    });


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

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

        // Show live indicator if market is open
        const { DateTime } = luxon;
        const nowNY = DateTime.now().setZone('America/New_York');
        const h = nowNY.hour, m = nowNY.minute;
        const marketOpen = (h > 10 || (h === 10 && m >= 5)) && (h < 16 || (h === 16 && m === 0));
        const liveEl = document.getElementById('liveIndicator');
        if (marketOpen) {
            liveEl.classList.remove('d-none');
            document.getElementById('liveTime').textContent = nowNY.toFormat('HH:mm:ss') + ' NY';
        } else {
            liveEl.classList.add('d-none');
        }

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

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

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

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

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

            const result = await response.json();

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

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

    let autoRefreshInterval = null;




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

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

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

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

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

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

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

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

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

        // Cancelar auto-refresh inmediatamente para evitar que datos viejos sobreescriban
        if (autoRefreshInterval) {
            clearInterval(autoRefreshInterval);
            autoRefreshInterval = null;
        }

        // Limpiar tabla ANTES del spinner para que no se vean datos viejos
        clearTables();

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

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

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

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







    let lastSPXVertical = null;
    let lastSPXIC = null;

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

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

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

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

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



    //function updateRiskOptions() { 
    //    const selectedSymbol = document.getElementById("symbolSelect").value.toUpperCase();
    //    const selectedStrategy = document.getElementById("strategySelect").value; // "VERTICAL" o "IRON_CONDOR"
    //    const riskSelect = document.getElementById("riskLevel");
//
//        const isHighRiskSymbol = ["SPX", "XSP"].includes(selectedSymbol);
//        const isIronCondor = (selectedStrategy === "IRON_CONDOR");

//       for (const option of riskSelect.options) {
//            const value = option.value;

//            // Ultra agresivo: SOLO si (SPX/XSP) y NO es Iron Condor
//            if (value === "ultra_agresivo") {
//                option.style.display = (isHighRiskSymbol && !isIronCondor) ? "block" : "none";
//            }
//            // Agresivo: SOLO si (SPX/XSP). (tú decides si también lo bloqueas en IC)
//            else if (value === "agresivo") {
//                option.style.display = isHighRiskSymbol ? "block" : "none";
//            }
//            // Resto siempre visible
//            else {
//               option.style.display = "block";
//            }
//        }
//
//        // Si lo que está seleccionado quedó inválido, resetea
//        const currentRisk = riskSelect.value;
//
//        const ultraInvalid = (currentRisk === "ultra_agresivo") && (isIronCondor || !isHighRiskSymbol);
//        const agresivoInvalid = (currentRisk === "agresivo") && (!isHighRiskSymbol);//
//
//        if (ultraInvalid || agresivoInvalid) {
//            riskSelect.value = "intermedio";
//        }
//    }

    
    //document.getElementById("symbolSelect").addEventListener("change", () => {
    //    clearTables();
    //    loadAvailableDates();
    //    updateRiskOptions();
    //});

    //document.getElementById("strategySelect").addEventListener("change", () => {
    //    clearTables();
    //    updateRiskOptions();
    //});


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

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

        // SPX y XSP permiten agresivo y ultra
        const isHighRiskSymbol = ["SPX", "XSP"].includes(selectedSymbol.toUpperCase());

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

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

        // Si ya hay datos visibles, recargar automáticamente con el nuevo símbolo
        const hayDatos = document.getElementById('predictionTableContainer').style.display !== 'none'
                      || document.getElementById('predictionTableContainerIC').style.display !== 'none';
        if (hayDatos) {
            loadButton.click();
        }
    });

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

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

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


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

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

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

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

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

            lastSPXVertical = spxActual;
        }

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

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

        data.forEach(row => {

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

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

            const lado = row.Lado || '';
            const ladoBadge = `<span class="badge-${lado.toLowerCase()}">${lado}</span>`;
            const tr = document.createElement('tr');
            tr.classList.add('idea-row');
            tr.dataset.info = JSON.stringify(row);
            tr.style.cursor = 'pointer';
            tr.innerHTML = `
<td class="hora-link-cell">${row.Hora}</td>
                    <td>${ladoBadge}</td>
                    <td>${row.Strikes}</td>
                    <td>${row.Credito.toFixed(2)}</td>
                    <td>${row.DiffPts}</td>
                    <td>${row.DiffPct.toFixed(2)}%</td>
                    <td class="${row.Moneyness === 'ITM' ? 'text-danger fw-bold' :
                    row.Moneyness === 'ITM P' ? 'text-warning fw-bold' :
                        'text-success fw-bold'
                }">${row.Moneyness}</td>
                    <td class="${pl >= 0 ? 'text-success' : 'text-danger'} text-end">$${pl.toFixed(2)}</td>
                `;
            tableBody.appendChild(tr);
        });

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


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

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

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


    document.addEventListener('click', function (e) {
        const tr = e.target.closest('tr.idea-row');
        if (!tr) return;

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

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

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

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

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

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

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

        let resumen = "";

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

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

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

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

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

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

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

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

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

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

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

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

        let payload = {};

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

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

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

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

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

        // Guardamos el payload globalmente
        rowDataGlobal = payload;

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

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


    });


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

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

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

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

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

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

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

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

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

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






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

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

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

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


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

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

            lastSPXIC = spxActual;
        }



        // 🚫 Descartar registros inválidos de Iron Condor:
        //    put_sell debe ser <= call_sell. Formato: "put_sell/put_buy-call_sell/call_buy"
        const totalAntes = data.length;
        const dataValida = data.filter(row => {
            if (!row.Strikes_IC) return false;
            const partes = row.Strikes_IC.split('-');
            if (partes.length < 2) return true;
            const putSell  = parseFloat(partes[0].split('/')[0]);
            const callSell = parseFloat(partes[1].split('/')[0]);
            if (isNaN(putSell) || isNaN(callSell)) return true;
            return putSell <= callSell;  // válido: put_sell no puede cruzar al call_sell
        });
        const descartados = totalAntes - dataValida.length;
        if (descartados > 0) {
            console.warn(`[IronCondor TrendIdea] Se descartaron ${descartados} registros inválidos (put_sell > call_sell).`);
        }

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

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

        dataValida.forEach(row => {

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

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


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

            const tr = document.createElement('tr');
            tr.classList.add('idea-row');
            tr.dataset.info = JSON.stringify(row);
            tr.style.cursor = 'pointer';
            tr.innerHTML = `
<td class="hora-link-cell">${row.Hora}</td>
                <td style="white-space:nowrap;">${(()=>{
                    const parts = (row.Strikes_IC||'').split('-');
                    const put  = parts[0] || '';
                    const call = parts[1] || '';
                    return '<span class=\"badge-put\">PUT</span>'
                         + ' ' + put
                         + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
                         + '<span class=\"badge-call\">CALL</span>'
                         + ' ' + call;
                })()}</td>
                <td>${row.Credito.toFixed(2)}</td>

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

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

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

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

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

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


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

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

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

                    startAutoRefresh();
                }
            });

            return dates;

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

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

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

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

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

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

                    // Si el modal está abierto en tab ACTUAL, refrescar el gráfico automáticamente
                    const modalVisible = document.getElementById('resumenModal').classList.contains('show');
                    const actualTabActive = !document.getElementById('contenedorActual').classList.contains('d-none');
                    if (modalVisible && actualTabActive && rowDataGlobal) {
                        refreshEvolucion();
                        // Update live clock
                        document.getElementById('liveTime').textContent = nowNY.toFormat('HH:mm:ss') + ' NY';
                    }

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

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

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

        // Reset sidebar KPI values
        ['totalWins','totalLosses','winRate','countOTM','countITM','countITMP'].forEach(id => {
            const el = document.getElementById(id);
            if (el) el.textContent = id === 'winRate' ? '0%' : '0';
        });
        ['totalWinsIC','totalLossesIC','winRateIC','countOTMIC','countITMIC','countITMPIC'].forEach(id => {
            const el = document.getElementById(id);
            if (el) el.textContent = id === 'winRateIC' ? '0%' : '0';
        });
    }



    function mostrarGraficoEvolucion(evolutionData, fecha, strikes, tipo = "") {
        const x = evolutionData.map(p => p.timestamp);
        const yPL = evolutionData.map(p => p.profit_loss);
        const yPrice = evolutionData.map(p => p.underlying_price);

        const lang = document.documentElement.lang || "es";
        const texts = {
            es: {
                title: `Evolución de P/L - (${strikes}) ${tipo ? `[${tipo}]` : ''}`,
                xLabel: "Hora",
                yLabelPL: "Ganancia / Pérdida ($)",
                yLabelPrice: "Precio",
                legendPL: "Ganancia / Pérdida"
            },
            en: {
                title: `P/L Evolution - (${strikes}) ${tipo ? `[${tipo}]` : ''}`,
                xLabel: "Time",
                yLabelPL: "Profit / Loss ($)",
                yLabelPrice: "Price",
                legendPL: "P/L"
            }
        };
        const t = texts[lang] || texts["es"];
        const isDarkMode = document.body.classList.contains("dark-mode");

        const strikeBandLegend = {
            x: [null],
            y: [null],
            type: 'scatter',
            mode: 'markers',
            name: lang === 'es' ? 'Zona de Strikes' : 'Strike Zone',
            marker: {
                size: 10,
                color: 'rgba(255, 165, 0, 0.4)',  // color similar a fill de la banda
                symbol: 'square'
            },
            showlegend: true,
            hoverinfo: 'skip'
        };

        const tracePL = {
            x: x,
            y: yPL,
            type: 'scatter',
            mode: 'lines',
            name: t.legendPL,
            line: { shape: 'spline', width: 2 },
            yaxis: 'y1'
        };

        const tracePrice = {
            x: x,
            y: yPrice,
            type: 'scatter',
            mode: 'lines',
            name: t.yLabelPrice,
            line: { dash: 'dot', width: 1.5 },
            yaxis: 'y2'
        };

        const layout = {
            title: {
                text: t.title,
                font: { size: 16 }
            },
            xaxis: {
                title: { text: t.xLabel, font: { size: 11 } },
                color: isDarkMode ? '#ccc' : '#333',
                gridcolor: isDarkMode ? '#444' : '#ccc',
                zerolinecolor: isDarkMode ? '#555' : '#aaa'
            },
            yaxis: {
                title: { text: t.yLabelPL, font: { size: 11 } },
                tickprefix: '$',
                color: isDarkMode ? '#ccc' : '#333',
                gridcolor: isDarkMode ? '#444' : '#ccc',
                zerolinecolor: isDarkMode ? '#555' : '#aaa'
            },
            yaxis2: {
                title: { text: t.yLabelPrice, font: { size: 11 } },
                overlaying: 'y',
                side: 'right',
                showgrid: false,
                color: isDarkMode ? '#ccc' : '#333'
            },
            legend: {
                orientation: 'h',
                x: 0.5,
                xanchor: 'center',
                y: 1.12
            },
            margin: { t: 100, l: 60, r: 60, b: 50 },
            shapes: [
                {
                    type: 'line',
                    xref: 'paper',
                    x0: 0,
                    x1: 1,
                    y0: 0,
                    y1: 0,
                    line: {
                        color: 'orange',
                        width: 2,
                        dash: 'dot'
                    }
                }
            ],
            plot_bgcolor: 'rgba(0,0,0,0)',
            paper_bgcolor: 'rgba(0,0,0,0)',
            font: { size: 12, color: isDarkMode ? 'white' : 'black' }
        };

        // Agregar bandas de strikes (rectángulos)
        if (strikes && typeof strikes === 'string') {
            const partes = strikes.trim().split(" ");
            partes.forEach(strikeStr => {
                const nums = strikeStr.split("/").map(s => parseFloat(s));
                if (nums.length === 2 && !isNaN(nums[0]) && !isNaN(nums[1])) {
                    const y0 = Math.min(nums[0], nums[1]);
                    const y1 = Math.max(nums[0], nums[1]);
                    layout.shapes.push({
                        type: 'rect',
                        xref: 'paper',
                        yref: 'y2',
                        x0: 0,
                        x1: 1,
                        y0: y0,
                        y1: y1,
                        fillcolor: 'rgba(255, 165, 0, 0.15)',
                        line: { width: 0 }
                    });
                }
            });
        }

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

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

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

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

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

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



    // Auto-refresh evolution chart when modal ACTUAL tab is open
    async function refreshEvolucion() {
        if (!rowDataGlobal) return;

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

        if (estrategia === "VERTICAL") {
            endpoint = "/backtestingIdea/procesar_fila_vertical";
        } else if (estrategia === "IRON_CONDOR") {
            endpoint = "/backtestingIdea/procesar_fila_ironcondor";
        } else {
            return;
        }

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

            const result = await response.json();

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

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

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

                // 📈 Mostrar gráfico con PL actualizado
                mostrarGraficoEvolucion(
                    result.evolution,
                    result.fecha,
                    result.strikes,
                    result.tipo || ""
                );
            }

        } catch (err) {
            console.error("❌ Error al actualizar evolución:", err);
        }
    }

    // Keep old click handler wired (button is hidden but just in case)
    // refrescarEvolucion button removed — auto-refresh handles chart updates

</script>
{% endblock %}