{% extends "base.html" %}

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

{% block extra_head %}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<link rel="stylesheet" href="{{ url_for('static', filename='css/styles-predictor.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<script src="https://cdn.jsdelivr.net/npm/luxon@3/build/global/luxon.min.js"></script>

{% endblock %}

{% block content %}

<div class="spx-predictor-title mb-3">
    <h2 style="margin: 0; font-size: 24px; color: #333;">{{ _('SPX Predictor') }}</h2>
</div>

<div id="controls" class="container my-4">
    <div class="row justify-content-center align-items-center g-3">

        <!-- Fecha -->
        <div class="col-auto d-flex align-items-center gap-2">
            <label for="datePicker" class="fw-bold mb-0">Fecha:</label>
            <input type="text" id="datePicker" class="form-control" readonly>
        </div>

        <!-- Estrategia -->
        <div class="col-auto d-flex align-items-center gap-2">
            <label for="strategySelect" class="fw-bold mb-0">Estrategia:</label>
            <select id="strategySelect" class="form-select w-auto">
                <option value="VERTICAL">Vertical</option>
                <option value="IRON_CONDOR">Iron Condor</option>
            </select>
        </div>

        <!-- Riesgo -->
        <div class="col-auto d-flex align-items-center gap-2">
            <label for="riskLevel" class="fw-bold mb-0">Riesgo:</label>
            <select id="riskLevel" class="form-select w-auto">
                <option value="conservador">Conservador</option>
                <option value="intermedio" selected>Intermedio</option>
                <option value="agresivo">Agresivo</option>
                <option value="ultra_agresivo">Ultra Agresivo</option>
            </select>
        </div>

        <!-- Botón Submit -->
        <div class="col-auto">
            <button id="loadButton" class="btn btn-success fw-bold">
                Mostrar Estrategias
            </button>
        </div>

    </div>
</div>
<!-- Sección Vertical -->
<div id="verticalSection" style="display: none;">
    <div id="summaryContainer" class="container my-4">
        <div class="row justify-content-center g-3 text-center">
            <div class="col-auto">
                <div class="px-4 py-2 bg-success text-white rounded shadow-sm">
                    <div class="small">Aciertos</div>
                    <div id="totalWins" class="fw-bold fs-5">0</div>
                </div>
            </div>
            <div class="col-auto">
                <div class="px-4 py-2 bg-danger text-white rounded shadow-sm">
                    <div class="small">Errores</div>
                    <div id="totalLosses" class="fw-bold fs-5">0</div>
                </div>
            </div>
        </div>
    </div>

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

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

            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Estrategias 0DTE</h5>
                <div id="spxActual" class="badge bg-light text-dark rounded-pill px-3 py-2" style="font-size: 14px;">
                    <!-- SPX actual se mostrará aquí -->
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table id="predictionTable" class="table table-bordered table-striped table-hover mb-0">
                        <thead class="table-primary text-center">
                            <tr>
                                <th>Hora</th>
                                <th>Lado</th>
                                <th>Strikes</th>
                                <th>Crédito</th>
                                <th>Dist. Pts</th>
                                <th>Dist. %</th>
                                <th>Estado</th>
                                <th>P/L</th>
                            </tr>
                        </thead>
                        <tbody class="text-center"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Sección Iron Condor -->
<div id="ironCondorSection" style="display: none;">
    <div id="summaryContainerIC" class="container my-4">
        <div class="row justify-content-center g-3 text-center">
            <div class="col-auto">
                <div class="px-4 py-2 bg-success text-white rounded shadow-sm">
                    <div class="small">Aciertos</div>
                    <div id="totalWinsIC" class="fw-bold fs-5">0</div>
                </div>
            </div>
            <div class="col-auto">
                <div class="px-4 py-2 bg-danger text-white rounded shadow-sm">
                    <div class="small">Errores</div>
                    <div id="totalLossesIC" class="fw-bold fs-5">0</div>
                </div>
            </div>
        </div>
    </div>

    <div id="predictionTableContainerIC" class="container my-4 mb-5">
        <div class="card p-0 pb-4">
            <div class="px-3 py-2 d-flex flex-wrap justify-content-center gap-3 small text-secondary"
                id="infoResumenIronCondor">
                <!-- Aquí insertaremos Estrategia, Símbolo y Expiración -->
            </div>
            <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Estrategias 0DTE</h5>
                <div id="spxActualIC" class="badge bg-light text-dark rounded-pill px-3 py-2" style="font-size: 14px;">
                    <!-- SPX actual se mostrará aquí también -->
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table id="predictionTableIC" class="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>





{% endblock %}

{% block scripts %}
<script>


    document.getElementById('loadButton').addEventListener('click', () => {
        const selectedDate = document.getElementById('datePicker').value;
        const strategy = document.getElementById('strategySelect').value;
        const risk = document.getElementById('riskLevel').value;

        if (!selectedDate) {
            alert("Selecciona una fecha primero.");
            return;
        }

        clearTables();

        if (strategy === "VERTICAL") {
            currentMode = "VERTICAL";
            document.getElementById('verticalSection').style.display = 'block';
            document.getElementById('ironCondorSection').style.display = 'none';
            loadPredictionTable(selectedDate);
        } else if (strategy === "IRON_CONDOR") {
            currentMode = "IRON_CONDOR";
            document.getElementById('verticalSection').style.display = 'none';
            document.getElementById('ironCondorSection').style.display = 'block';
            loadPredictionTableIC(selectedDate);
        }

        startAutoRefresh();
    });

    let lastSPXVertical = null;
    let lastSPXIC = null;

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

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

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

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

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

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

        if (dateParam) {
            document.getElementById('datePicker').value = dateParam;
            $("#datePicker").datepicker("setDate", dateParam);
        }
    });

    let currentMode = "VERTICAL"; // "VERTICAL" o "IRON_CONDOR"

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

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

        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 = `SPX ${spxActual}`;
            animateSPXUpdate('spxActual', movement);

            lastSPXVertical = spxActual;
        }


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

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

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

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

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

        document.getElementById('predictionTableContainer').style.display = 'block';
        console.log(data);
    }



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

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

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

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


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

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

            lastSPXIC = spxActual;
        }



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

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

            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${row.Hora}</td>
                <td>${row.Strikes_IC}</td>
                <td>${row.Credito.toFixed(2)}</td>

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

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

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

        document.getElementById('infoResumenIronCondor').innerHTML = `
        <span><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('summaryContainerIC').style.display = 'block';
        document.getElementById('totalWinsIC').textContent = wins;
        document.getElementById('totalLossesIC').textContent = losses;
        document.getElementById('predictionTableContainerIC').style.display = 'block';

        console.log(data);
    }


    async function loadAvailableDates() {
        const response = await fetch('/get_dates');
        const dates = await response.json();

        $("#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();

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

                startAutoRefresh();
            }
        });
    }

    function startAutoRefresh() {
        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) {
                    if (currentMode === "VERTICAL") {
                        loadPredictionTable(selectedDate);
                    } else if (currentMode === "IRON_CONDOR") {
                        loadPredictionTableIC(selectedDate);
                    }
                    console.log(`Actualización a las ${nowNY.toFormat('HH:mm:ss')} NY`);
                }
            } else {
                console.log(`Fuera de horario de mercado NY: ${nowNY.toFormat('HH:mm:ss')}`);
            }
        }, 5000); // Cada 5 segundos
    }

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



</script>


{% endblock %}