{% extends "base.html" %}

{% block title %}
{{ _('Backtesting Idea - 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="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>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles-backtestingidea.css') }}">
<script src="https://cdn.plot.ly/plotly-2.32.0.min.js"></script>
<style>
    .custom-chart-wrapper {
        width: 100%;
        overflow-x: auto;
        margin-bottom: 1rem;
    }

    .custom-chart-box {
        width: 100%;
        min-height: 460px;
    }
</style>
{% endblock %}

{% block content %}
<main>
    <div id="loadingOverlay" class="loading-overlay" style="display: none;">
        <div class="spinner-container text-center">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">{{ _('Cargando...') }}</span>
            </div>
            <p class="mt-2 fw-bold">{{ _('Procesando datos, por favor espera...') }}</p>
            <p id="countdownTimer" class="text-muted small"></p>
        </div>
    </div>


    <!-- Modal para evolución del crédito -->
    <div class="modal fade" id="evolutionModal" tabindex="-1" aria-labelledby="evolutionModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="evolutionModalLabel">{{ _('Evolución de Ganancia/Pérdida') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body">
                    <div id="plotlyEvolutionChart" style="height: 500px;"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 🔁 Rango de fechas (compartido para ambas estrategias) -->
    <div class="text-center mt-4 mb-3">
        <div class="d-flex flex-wrap justify-content-center align-items-center gap-2">

            <!-- Desde -->
            <div class="d-flex flex-column flex-sm-row align-items-center gap-1">
                <label for="dateFrom" class="mb-0">{{ _('Desde') }}:</label>
                <input type="text" id="dateFrom" class="form-control form-control-sm rounded" readonly
                    style="width: auto; min-width: 120px;">
            </div>

            <!-- Hasta -->
            <div class="d-flex flex-column flex-sm-row align-items-center gap-1">
                <label for="dateTo" class="mb-0">{{ _('Hasta') }}:</label>
                <input type="text" id="dateTo" class="form-control form-control-sm rounded" readonly
                    style="width: auto; min-width: 120px;">
            </div>
        </div>
    </div>

    <hr class="my-3">

    <!-- 🎯 Configuración de Estrategia A y B -->
    <div class="container mb-4">
        <div class="row">

            {% for idx in [1, 2] %}
            <div class="col-md-6">
                <div class="card shadow-sm mb-3">
                    <div class="card-header text-center fw-bold">
                        {{ _('Estrategia') }} {{ 'A' if idx == 1 else 'B' }}
                    </div>
                    <div class="card-body d-flex flex-column gap-3">

                        <!-- Símbolo -->
                        <div class="d-flex flex-column">
                            <label for="symbolSelect{{ idx }}">{{ _('Símbolo:') }}</label>
                            <select id="symbolSelect{{ idx }}" class="form-select form-select-sm rounded">
                                <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>

                        <!-- Hora -->
                        <div class="d-flex flex-column">
                            <label for="timeHour{{ idx }}">{{ _('Hora:') }}</label>
                            <select id="timeHour{{ idx }}" class="form-select form-select-sm rounded">
                                {% for hour in range(10, 16) %}
                                {% for minute in [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] %}
                                {% set time_value = "%02d%02d" % (hour, minute) %}
                                {% if (hour == 10 and minute >= 5) or (hour > 10 and hour < 15) or (hour==15 and minute
                                    <=25) %} <option value="{{ time_value }}" {% if time_value=='1340' %}selected{%
                                    endif %}>
                                    {{ time_value[:2] }}:{{ time_value[2:] }}
                                    </option>
                                    {% endif %}
                                    {% endfor %}
                                    {% endfor %}
                            </select>
                        </div>

                        <!-- Estrategia -->
                        <div class="d-flex flex-column">
                            <label for="strategySelect{{ idx }}">{{ _('Estrategia:') }}</label>
                            <select id="strategySelect{{ idx }}" class="form-select form-select-sm rounded">
                                <option value="Vertical">{{ _('Vertical') }}</option>
                                <option value="IronCondor">{{ _('Iron Condor') }}</option>
                            </select>
                        </div>

                        <!-- Riesgo -->
                        <div class="d-flex flex-column">
                            <label for="riskLevel{{ idx }}">{{ _('Riesgo:') }}</label>
                            <select id="riskLevel{{ idx }}" class="form-select form-select-sm rounded">
                                <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>

                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <div class="text-center mt-3">
            <button id="compareButton" class="btn btn-success fw-bold">
                {{ _('Comparar Estrategias') }}
            </button>
        </div>
    </div>

    <!-- Botón de Configuración -->
    <div class="text-center mt-2 mb-4">
        <button id="settingsButton" class="btn btn-outline-secondary btn-sm">
            ⚙️ Configuración
        </button>
    </div>

    <!-- Modal Overlay -->
    <div id="settingsOverlay"
        style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1050;">
        <div id="settingsModal" class="border rounded p-3" style="
        max-width: 400px;
        margin: 10% auto;
        background-color: #f8f9fa;
        box-shadow: 0 0 20px rgba(0,0,0,0.3);">

            <h6 class="fw-bold mb-3 text-center">⚙️ Configuración de Cálculo</h6>

            <div class="mb-2">
                <label for="contractCount" class="form-label mb-1">Cantidad de Contratos:</label>
                <input type="number" id="contractCount" class="form-control form-control-sm" value="1" min="1">
            </div>

            <div class="mb-3">
                <label for="commissionPerTrade" class="form-label mb-1">Comisión por Transacción ($):</label>
                <input type="number" id="commissionPerTrade" class="form-control form-control-sm" value="0" min="0"
                    step="0.01">
            </div>

            <div class="text-center mt-3">
                <button id="saveSettings" class="btn btn-sm btn-success me-2">Guardar</button>
                <button id="cancelSettings" class="btn btn-sm btn-secondary">Cancelar</button>
            </div>
        </div>
    </div>



    <div id="totalsSummary" class="container mb-3" style="display: none;">
        <div class="row justify-content-center text-center fw-bold">
            <!-- Estrategia A -->
            <div class="col-md-4">
                <div class="card bg-light shadow-sm">
                    <div class="card-body">
                        <div class="text-muted small">Total Estrategia A</div>
                        <div id="totalA" class="fs-5 text-success">$0.00</div>
                        <div class="text-muted small mt-1">Comisión Total: <span id="commissionA">$0.00</span></div>
                    </div>
                </div>
            </div>

            <!-- Estrategia B -->
            <div class="col-md-4">
                <div class="card bg-light shadow-sm">
                    <div class="card-body">
                        <div class="text-muted small">Total Estrategia B</div>
                        <div id="totalB" class="fs-5 text-success">$0.00</div>
                        <div class="text-muted small mt-1">Comisión Total: <span id="commissionB">$0.00</span></div>
                    </div>
                </div>
            </div>

            <!-- Total Combinado -->
            <div class="col-md-4">
                <div class="card bg-light shadow-sm">
                    <div class="card-body">
                        <div class="text-muted small">Total Combinado</div>
                        <div id="totalCombined" class="fs-5 text-primary">$0.00</div>
                        <div class="text-muted small mt-1">Comisión Total: <span id="commissionCombined">$0.00</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <!-- 🔍 Comparación de Resultados -->
    <div id="comparisonTableContainer" class="container mb-5" style="display: none;">
        <h5 class="text-center fw-bold mb-3">{{ _('Comparación Diaria de P/L') }}</h5>
        <div class="table-responsive">
            <table id="comparisonTable" class="table table-bordered table-striped table-hover">
                <thead class="table-dark text-center">
                    <tr>
                        <th>{{ _('Fecha') }}</th>
                        <th>{{ _('Estrategia A') }}</th>
                        <th>{{ _('Estrategia B') }}</th>
                        <th>{{ _('Total') }}</th>
                    </tr>
                </thead>
                <tbody class="text-center"></tbody>
            </table>
        </div>
    </div>

    <!-- 📈 Gráfico de Evolución -->
    <div class="container mb-5" id="comparisonChartWrapper" style="display: none;">
        <h5 class="text-center fw-bold mb-3">📊 Evolución Acumulada de Ganancias</h5>
        <div id="comparisonChart" style="width: 100%; height: 500px;"></div>
    </div>

    <!-- 📅 Gráfico Mensual de Ganancia Acumulada -->
    <div class="container mb-5" id="monthlyChartWrapper" style="display: none;">
        <h5 class="text-center fw-bold mb-3">📆 Ganancia Acumulada Mensual</h5>
        <div id="monthlyChart" style="width: 100%; height: 450px;"></div>
    </div>

</main>
{% endblock %}


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

<script>


    let contractMultiplier = 1;
    let commissionPerTrade = 0.5;
    let cachedResultA = null;
    let cachedResultB = null;
    let cachedStrategies = { A: 'Vertical', B: 'Vertical' };  // Por defecto ambas verticales


    document.getElementById('settingsButton').addEventListener('click', () => {
        document.getElementById('settingsOverlay').style.display = 'block';
    });

    document.getElementById('cancelSettings').addEventListener('click', () => {
        document.getElementById('settingsOverlay').style.display = 'none';
    });

    document.getElementById('saveSettings').addEventListener('click', () => {
        const contracts = parseInt(document.getElementById('contractCount').value, 10);
        const commission = parseFloat(document.getElementById('commissionPerTrade').value);

        if (!isNaN(contracts) && contracts > 0) contractMultiplier = contracts;
        if (!isNaN(commission) && commission >= 0) commissionPerTrade = commission;

        document.getElementById('settingsOverlay').style.display = 'none';

        if (cachedResultA && cachedResultB) {
            renderComparisonTable(cachedResultA, cachedResultB);  // Recalcular y redibujar
        }
    });




    $(function () {
        const today = luxon.DateTime.now().toFormat("yyyy-MM-dd");
        const sevenDaysAgo = luxon.DateTime.now().minus({ days: 7 }).toFormat("yyyy-MM-dd");

        $("#dateFrom").val(sevenDaysAgo);
        $("#dateTo").val(today);

        $("#dateFrom, #dateTo").datepicker({
            dateFormat: "yy-mm-dd",
            changeMonth: true,
            changeYear: true
        });
    });

    document.getElementById("compareButton").addEventListener("click", async () => {
        // Mostrar overlay y reiniciar temporizador
        const overlay = document.getElementById("loadingOverlay");
        const countdown = document.getElementById("countdownTimer");
        overlay.style.display = "flex";
        let seconds = 0;
        countdown.textContent = `⏳ Tiempo transcurrido: 0s`;

        const timer = setInterval(() => {
            seconds++;
            countdown.textContent = `⏳ Tiempo transcurrido: ${seconds}s`;
        }, 1000);

        const dateFrom = document.getElementById("dateFrom").value;
        const dateTo = document.getElementById("dateTo").value;

        // Construye los dos sets de parámetros
        const estrategias = [1, 2].map(i => ({
            symbol: document.getElementById(`symbolSelect${i}`).value,
            hora: document.getElementById(`timeHour${i}`).value,
            estrategia: document.getElementById(`strategySelect${i}`).value,
            risk: document.getElementById(`riskLevel${i}`).value
        }));

        const results = [];

        try {
            for (let i = 0; i < estrategias.length; i++) {
                const params = new URLSearchParams({
                    desde: dateFrom,
                    hasta: dateTo,
                    symbol: estrategias[i].symbol,
                    estrategia: estrategias[i].estrategia,
                    hora: estrategias[i].hora,
                    risk: estrategias[i].risk
                });

                const res = await fetch(`/backtestingIdea/get_backtesting_idea?${params.toString()}`);
                const data = await res.json();

                results.push({
                    estrategia: i === 0 ? 'A' : 'B',
                    symbol: estrategias[i].symbol,
                    profit: data.profit_total,
                    wins: data.wins,
                    losses: data.losses,
                    data: data.data,
                    tipo: estrategias[i].estrategia  // guardar tipo (Vertical o IronCondor)

                });
            }

            console.log("📊 Resultados comparados:", results);

            if (results.length === 2) {
                cachedResultA = results[0];
                cachedResultB = results[1];
                cachedStrategies.A = cachedResultA.tipo;
                cachedStrategies.B = cachedResultB.tipo;
                renderComparisonTable(cachedResultA, cachedResultB);
            }

        } catch (error) {
            console.error("❌ Error en la consulta:", error);
        } finally {
            // Ocultar overlay y detener contador
            clearInterval(timer);
            overlay.style.display = "none";
            countdown.textContent = "";
        }
    });





    function renderComparisonTable(resultA, resultB) {
        const tbody = document.querySelector('#comparisonTable tbody');
        tbody.innerHTML = '';

        // Mapear por día
        const profitsA = {};
        let commissionTotalA = 0;

        // Procesar Estrategia A
        resultA.data.forEach(row => {
            const day = row.Day;
            const rawProfit = parseFloat(row['P/L']) || 0;
            const transA = (cachedStrategies.A === 'IronCondor') ? 4 : 2;
            const commission = contractMultiplier * transA * commissionPerTrade;

            const adjusted = rawProfit * contractMultiplier - commission;
            profitsA[day] = (profitsA[day] || 0) + adjusted;
            commissionTotalA += commission;
        });

        const profitsB = {};
        let commissionTotalB = 0;

        // Procesar Estrategia B
        resultB.data.forEach(row => {
            const day = row.Day;
            const rawProfit = parseFloat(row['P/L']) || 0;
            const transB = (cachedStrategies.B === 'IronCondor') ? 4 : 2;
            const commission = contractMultiplier * transB * commissionPerTrade;

            const adjusted = rawProfit * contractMultiplier - commission;
            profitsB[day] = (profitsB[day] || 0) + adjusted;
            commissionTotalB += commission;
        });


        // Mostrar totales en resumen
        const totalProfitA = Object.values(profitsA).reduce((acc, val) => acc + val, 0);
        const totalProfitB = Object.values(profitsB).reduce((acc, val) => acc + val, 0);
        const totalCombined = totalProfitA + totalProfitB;

        document.getElementById('totalA').textContent = `$${totalProfitA.toFixed(2)}`;
        document.getElementById('totalB').textContent = `$${totalProfitB.toFixed(2)}`;
        document.getElementById('totalCombined').textContent = `$${totalCombined.toFixed(2)}`;
        document.getElementById('totalsSummary').style.display = 'block';
        // Mostrar comisiones en pantalla
        document.getElementById("commissionA").textContent = "$" + commissionTotalA.toFixed(2);
        document.getElementById("commissionB").textContent = "$" + commissionTotalB.toFixed(2);
        document.getElementById("commissionCombined").textContent = "$" + (commissionTotalA + commissionTotalB).toFixed(2);

        // Combinar fechas únicas
        const allDays = Array.from(new Set([...Object.keys(profitsA), ...Object.keys(profitsB)])).sort();

        allDays.forEach(day => {
            const profitA = profitsA[day] || 0;
            const profitB = profitsB[day] || 0;
            const total = profitA + profitB;

            const tr = document.createElement('tr');
            tr.innerHTML = `
            <td>${day}</td>
            <td class="${profitA >= 0 ? 'text-success' : 'text-danger'} fw-semibold">$${profitA.toFixed(2)}</td>
            <td class="${profitB >= 0 ? 'text-success' : 'text-danger'} fw-semibold">$${profitB.toFixed(2)}</td>
            <td class="${total >= 0 ? 'text-success' : 'text-danger'} fw-bold">$${total.toFixed(2)}</td>
        `;
            tbody.appendChild(tr);
        });

        document.getElementById('comparisonTableContainer').style.display = 'block';

        // Calcular evolución acumulada diaria
        const dailyData = [];
        let accA = 0, accB = 0, accTotal = 0;

        allDays.forEach(day => {
            const pA = profitsA[day] || 0;
            const pB = profitsB[day] || 0;
            accA += pA;
            accB += pB;
            accTotal += pA + pB;
            dailyData.push({ day, accA, accB, accTotal });
        });

        // Construir trazas de Plotly
        // Construir trazas de Plotly optimizadas
        const traceA = {
            x: dailyData.map(d => d.day),
            y: dailyData.map(d => d.accA),
            mode: 'lines',
            name: 'Estrategia A',
            line: { shape: 'linear', color: 'green', width: 2 }
        };

        const traceB = {
            x: dailyData.map(d => d.day),
            y: dailyData.map(d => d.accB),
            mode: 'lines',
            name: 'Estrategia B',
            line: { shape: 'linear', color: 'red', width: 2 }
        };

        const traceTotal = {
            x: dailyData.map(d => d.day),
            y: dailyData.map(d => d.accTotal),
            mode: 'lines',
            name: 'Total Combinado',
            line: { shape: 'linear', color: 'blue', width: 4 }  // más gruesa
        };

        // Renderizar gráfico
        Plotly.newPlot('comparisonChart', [traceA, traceB, traceTotal], {
            margin: { t: 30, b: 50, l: 50, r: 30 },
            yaxis: { title: 'Ganancia Acumulada ($)', tickformat: '$.2f' },
            xaxis: { title: 'Fecha', type: 'category' },
            legend: { orientation: 'h', y: -0.2 },
            template: 'plotly_dark'
        }, {
            responsive: true,
            displayModeBar: false  // ❌ Eliminar menú contextual
        });

        document.getElementById('comparisonChartWrapper').style.display = 'block';
        Plotly.Plots.resize(document.getElementById('comparisonChart'));


        // Agrupar y acumular ganancias por mes
        const monthlyProfits = {};
        allDays.forEach(day => {
            const month = day.slice(0, 7); // yyyy-MM
            const dailyProfit = (profitsA[day] || 0) + (profitsB[day] || 0);
            monthlyProfits[month] = (monthlyProfits[month] || 0) + dailyProfit;
        });

        // Ordenar meses y preparar datos
        const sortedMonths = Object.keys(monthlyProfits).sort();
        const monthlyBarData = sortedMonths.map(month => ({
            month,
            profit: monthlyProfits[month]
        }));

        // Construir traza de barra
        const barTrace = {
            x: monthlyBarData.map(d => d.month),
            y: monthlyBarData.map(d => d.profit),
            type: 'bar',
            name: 'Ganancia Mensual',
            marker: {
                color: monthlyBarData.map(d => d.profit >= 0 ? 'green' : 'red')
            }
        };

        // Renderizar gráfico de barras
        Plotly.newPlot('monthlyChart', [barTrace], {
            margin: { t: 30, b: 50, l: 50, r: 30 },
            yaxis: { title: 'Ganancia Mensual ($)', tickformat: '$.2f' },
            xaxis: { title: 'Mes', type: 'category' },
            legend: { orientation: 'h', y: -0.2 },
            template: 'plotly_dark'
        }, {
            responsive: true,
            displayModeBar: false
        });

        document.getElementById('monthlyChartWrapper').style.display = 'block';
        Plotly.Plots.resize(document.getElementById('monthlyChart'));




    }


</script>


{% endblock %}