{% extends "base.html" %}

{% block title %}
{{ _('Trend 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>

{% endblock %}

{% block content %}
<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 del Crédito') }}</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>

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

        <select id="symbolSelect" class="form-select rounded" style="width: auto;">
            <option value="SPX" selected>SPX</option>
            <option value="RUT">RUT</option>
            <option value="SPY">SPY</option>
            <option value="QQQ">QQQ</option>
            <option value="XSP">XSP</option>
        </select>
        <div class="col-auto d-flex align-items-center gap-2">
            <label for="dateFrom" class="fw-bold mb-0">{{ _('Desde') }}:</label>
            <input type="text" id="dateFrom" class="form-control" readonly>
        </div>
        <div class="col-auto d-flex align-items-center gap-2">
            <label for="dateTo" class="fw-bold mb-0">{{ _('Hasta') }}</label>
            <input type="text" id="dateTo" class="form-control" readonly>
        </div>
        <div class="col-auto d-flex align-items-center gap-2">
            <label for="timeHour" class="fw-bold mb-0">{{ _('Hora:') }}</label>
            <select id="timeHour" class="form-select w-auto">
                {% 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>
        <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="IronCondor">{{ _('Iron Condor') }}</option>
            </select>
        </div>
        <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>
        <div class="col-auto">
            <button id="loadButton" class="btn btn-success fw-bold">{{ _('Mostrar Backtesting') }}</button>
        </div>
    </div>
</div>

<div id="resultSummary" class="container my-4" style="display: none;">
    <div class="row text-center justify-content-center">
        <!-- Ganancia Total -->
        <div class="col-6 col-md-3 mb-3">
            <div class="card border-success shadow-sm">
                <div class="card-body p-2">
                    <h6 class="text-success mb-1 fw-semibold">
                        <i class="fas fa-dollar-sign"></i> {{ _('Ganancia') }}
                    </h6>
                    <div id="profitTotal" class="text-success fw-bold small">$0.00</div>
                </div>
            </div>
        </div>

        <!-- Días Ganadores -->
        <div class="col-6 col-md-3 mb-3">
            <div class="card border-primary shadow-sm">
                <div class="card-body p-2">
                    <h6 class="text-primary mb-1 fw-semibold">
                        <i class="fas fa-trophy"></i> {{ _('Ganadores') }}
                    </h6>
                    <div id="winDays" class="text-primary fw-bold small">0</div>
                </div>
            </div>
        </div>

        <!-- Días Perdedores -->
        <div class="col-6 col-md-3 mb-3">
            <div class="card border-danger shadow-sm">
                <div class="card-body p-2">
                    <h6 class="text-danger mb-1 fw-semibold">
                        <i class="fas fa-times-circle"></i> {{ _('Perdedores') }}
                    </h6>
                    <div id="lossDays" class="text-danger fw-bold small">0</div>
                </div>
            </div>
        </div>

        <!-- Win Rate -->
        <div class="col-6 col-md-3 mb-3">
            <div class="card border-warning shadow-sm">
                <div class="card-body p-2">
                    <h6 class="text-warning mb-1 fw-semibold">
                        <i class="fas fa-percentage"></i> {{ _('Win Rate') }}
                    </h6>
                    <div id="winRate" class="text-warning fw-bold small">0%</div>
                </div>
            </div>
        </div>
    </div>
</div>



<div id="resultTableContainer" class="container mb-5" style="display: none;">
    <div class="table-responsive">
        <table id="resultTable" class="table table-bordered table-striped table-hover">
            <thead class="table-dark text-center">
                <tr id="resultTableHead"></tr>
            </thead>
            <tbody class="text-center"></tbody>
        </table>
    </div>
    <div class="text-center my-4">
        <button id="downloadCSV" class="btn btn-outline-secondary fw-bold">
            <i class="fas fa-download"></i> {{ _('Descargar CSV') }}
        </button>
    </div>

    <div id="chartsContainer">
        <div class="custom-chart-wrapper">
            <div id="chartPLAcumulado" class="custom-chart-box"></div>
        </div>
        <div class="custom-chart-wrapper">
            <div id="chartPLSemanal" class="custom-chart-box"></div>
        </div>
    </div>



</div>

{% endblock %}


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

<script>

    document.getElementById("symbolSelect").addEventListener("change", function () {
        const symbol = this.value;
        const riskSelect = document.getElementById("riskLevel");

        // Mostrar todas primero
        Array.from(riskSelect.options).forEach(opt => opt.hidden = false);

        // Si el símbolo no es SPX o RUT, ocultar agresivo y ultra_agresivo
        if (!["SPX"].includes(symbol)) {
            Array.from(riskSelect.options).forEach(opt => {
                if (["agresivo", "ultra_agresivo"].includes(opt.value)) {
                    opt.hidden = true;
                }
            });

            // Si la opción actual está oculta, cambiar a intermedio
            if (["agresivo", "ultra_agresivo"].includes(riskSelect.value)) {
                riskSelect.value = "intermedio";
            }
        }
    });

    const isDarkMode = document.body.classList.contains('dark-mode');

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

    });


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

    document.addEventListener('DOMContentLoaded', async function () {
        const availableDates = await fetch(`/get_dates?symbol=${selectedSymbol}`).then(res => res.json());
        $("#dateFrom, #dateTo").datepicker({
            dateFormat: "yy-mm-dd",
            beforeShowDay: date => [availableDates.includes($.datepicker.formatDate("yy-mm-dd", date))]
        });
        if (availableDates.length) {
            $("#dateFrom").datepicker("setDate", availableDates.at(-1));
            $("#dateTo").datepicker("setDate", availableDates[0]);
            document.getElementById("dateFrom").value = availableDates.at(-1);
            document.getElementById("dateTo").value = availableDates[0];
        }
    });

    document.getElementById('loadButton').addEventListener('click', async () => {
        document.getElementById('loadingOverlay').style.display = 'flex';
        const desde = document.getElementById('dateFrom').value;
        const hasta = document.getElementById('dateTo').value;
        const estrategia = document.getElementById('strategySelect').value;
        const risk = document.getElementById('riskLevel').value;
        const timeHour = document.getElementById('timeHour').value;
        const symbol = document.getElementById("symbolSelect").value;

        if (!desde || !hasta) {
            showFlashMessage("{{ _('Selecciona ambas fechas.') }}", "warning");
            return;
        }

        try {
            console.log("feching data...");
            console.log(`/backtestingIdea/get_backtesting_idea?desde=${desde}&hasta=${hasta}&symbol=${symbol}&estrategia=${estrategia}&hora=${timeHour}&risk=${risk}`);
            const desdeLuxon = luxon.DateTime.fromISO(desde);
            const response = await fetch(`/backtestingIdea/get_backtesting_idea?desde=${desde}&hasta=${hasta}&symbol=${symbol}&estrategia=${estrategia}&hora=${timeHour}&risk=${risk}`);
            const result = await response.json();
            let finalResult = result;

            // Si es Vertical y la respuesta tiene `task_id`, hacemos polling
            if (estrategia === 'Vertical' && result.task_id) {
                finalResult = await pollForResult(result.task_id);
                if (!finalResult) {
                    showFlashMessage("{{ _('La tarea falló o expiró.') }}", "danger");
                    document.getElementById('loadingOverlay').style.display = 'none';
                    return;
                }
            }

            // Mostrar resultados generales
            document.getElementById('profitTotal').textContent = `$${finalResult.profit_total.toFixed(2)}`;
            document.getElementById('winDays').textContent = finalResult.wins;
            document.getElementById('lossDays').textContent = finalResult.losses;

            const totalDays = finalResult.wins + finalResult.losses;
            const winRate = totalDays > 0 ? ((finalResult.wins / totalDays) * 100).toFixed(1) + "%" : "0%";
            document.getElementById('winRate').textContent = winRate;

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

            const thead = document.getElementById('resultTableHead');
            const tbody = document.querySelector('#resultTable tbody');
            thead.innerHTML = '';
            tbody.innerHTML = '';


            if (estrategia === 'Vertical') {
                thead.innerHTML = `
  <th>{{ _('Fecha') }}</th>
  <th>{{ _('Hora') }}</th>
  <th>{{ _('Strikes') }}</th>
  <th>{{ _('Tipo') }}</th>
  <th>{{ _('Crédito') }}</th>
  <th>{{ _('Precio') }}</th>
  <th>{{ _('Cierre') }}</th>
  <th>{{ _('Resultado') }}</th>
  <th>{{ _('Distancia') }}</th>
  <th>{{ _('Estado') }}</th>
`;
                result.data.forEach(row => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
            <td><a href="#" class="fila-link" style="text-decoration: none;" data-row='${JSON.stringify(row).replace(/'/g, "&apos;")}'>${row.Day}</a></td>
            <td>${row.Time}</td>
            <td>${row.Strikes}</td>
            <td>${row.Option}</td>
            <td>$${parseFloat(row.Credit).toFixed(2)}</td>
            <td>${row.Price != null ? row.Price.toFixed(2) : '-'}</td>
            <td>${row.Close != null ? row.Close.toFixed(2) : '-'}</td>
            <td class="${row['P/L'] >= 0 ? 'text-success' : 'text-danger'} fw-bold">
                $${row['P/L'] != null ? row['P/L'].toFixed(2) : '-'}</td>
            <td>${row.Diff != null ? row.Diff.toFixed(2) : '-'}</td>
            <td class="${row.itmOtm === 'ITM' ? 'text-danger' :
                            row.itmOtm === 'ITM P' ? 'text-warning' :
                                'text-success'
                        } fw-bold">${row.itmOtm}</td>`;
                    tbody.appendChild(tr);
                });


                // Verticales
                document.querySelectorAll(".fila-link").forEach(link => {
                    link.addEventListener("click", async (e) => {
                        e.preventDefault();
                        const rowData = JSON.parse(link.dataset.row);
                        rowData.symbol = document.getElementById("symbolSelect").value;

                        document.getElementById('loadingOverlay').style.display = 'flex';

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

                            const result = await response.json();

                            showFlashMessage(
                                result.message || "{{ _('Vertical procesado correctamente') }}",
                                "success"
                            );

                            if (result.status === "success") {
                                showFlashMessage(
                                    result.message || "{{ _('Evolución cargada correctamente') }}",
                                    "success"
                                );
                                mostrarGraficoEvolucion(result.evolution, result.fecha, result.strikes, result.tipo);
                            } else {
                                showFlashMessage(
                                    result.message || "{{ _('Error al calcular evolución') }}",
                                    "danger"
                                );
                            }

                        } catch (err) {
                            showFlashMessage("{{ _('Error al enviar los datos del vertical') }}", "danger");
                            console.error(err);
                        } finally {
                            document.getElementById('loadingOverlay').style.display = 'none';
                        }
                    });
                });



            } else if (estrategia === 'IronCondor') {
                thead.innerHTML = `<th>Fecha</th><th>Hora</th><th>Strikes</th><th>Precio</th><th>Cierre</th><th>Crédito</th><th>Resultado</th><th>Distancia</th><th>Estado</th>`;
                result.data.forEach(row => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
            <td><a href="#" class="fila-link" style="text-decoration: none;" data-row='${JSON.stringify(row).replace(/'/g, "&apos;")}'>${row.Day}</a></td>
            <td>${row.Time}</td>
            <td>${row.Strikes}</td>
            <td>${row.Price != null ? row.Price.toFixed(2) : '-'}</td>
            <td>${row.Close != null ? row.Close.toFixed(2) : '-'}</td>
            <td>$${row.Credit != null ? parseFloat(row.Credit).toFixed(2) : '-'}</td>
            <td class="${row['P/L'] >= 0 ? 'text-success' : 'text-danger'} fw-bold">
                $${row['P/L'] != null ? row['P/L'].toFixed(2) : '-'}</td>
            <td>${row.Dif}</td>
            <td class="${row.itmOtm === 'ITM' ? 'text-danger' :
                            row.itmOtm === 'ITM P' ? 'text-warning' :
                                'text-success'
                        } fw-bold">${row.itmOtm || '-'}</td>
        `;
                    tbody.appendChild(tr);
                });


                // Iron Condors
                document.querySelectorAll(".fila-link").forEach(link => {
                    link.addEventListener("click", async (e) => {
                        e.preventDefault();
                        const rowData = JSON.parse(link.dataset.row);
                        rowData.symbol = document.getElementById("symbolSelect").value;

                        document.getElementById('loadingOverlay').style.display = 'flex';

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

                            const result = await response.json();

                            if (result.status === "success") {
                                mostrarGraficoEvolucion(result.evolution, result.fecha, result.strikes);
                                showFlashMessage(
                                    result.message || "{{ _('Iron Condor procesado correctamente') }}",
                                    "success"
                                );
                            } else {
                                showFlashMessage(
                                    result.message || "{{ _('Error al procesar Iron Condor') }}",
                                    "danger"
                                );
                            }

                        } catch (err) {
                            showFlashMessage(
                                "{{ _('Error al enviar los datos del Iron Condor') }}",
                                "danger"
                            );
                            console.error(err);

                        } finally {
                            document.getElementById('loadingOverlay').style.display = 'none';
                        }
                    });
                });


            }

            document.getElementById('resultTableContainer').style.display = 'block';
            generarGraficos(result);

        } catch (error) {
            showFlashMessage("{{ _('Hubo un error al procesar la solicitud.') }}", "warning");

        } finally {
            document.getElementById('loadingOverlay').style.display = 'none';
        }
    });


    const plotTexts = {
        xLabel: '{{ _("Fecha") }}',
        yLabel: '{{ _("Ganancia/Pérdida") }}',
        plAcumuladoName: '{{ _("P/L Acumulado") }}',
        plAcumuladoTitle: '{{ _("P/L Acumulado por Día") }}',
        plSemanalName: '{{ _("P/L Semanal") }}',
        plSemanalTitle: '{{ _("P/L por Semana") }}'
    };


    function generarGraficos(result) {
        const data = result.data;
        const ordenado = [...data].sort((a, b) => new Date(a.Day) - new Date(b.Day));

        // === P/L acumulado ===
        let fechas = [];
        let pl_acumulado = [];
        let acumulado = 0;

        ordenado.forEach(row => {
            const fecha = row.Day;
            const ganancia = parseFloat(row['P/L']) || 0;
            acumulado += ganancia;
            fechas.push(fecha);
            pl_acumulado.push(acumulado);
        });

        const layoutBase = {
            xaxis: {
                title: plotTexts.xLabel,
                automargin: true,
                color: 'currentColor',
                gridcolor: '#444',
                zerolinecolor: '#666'
            },
            yaxis: {
                title: plotTexts.yLabel,
                tickprefix: '$',
                tickformat: ',.2f',
                automargin: true,
                color: 'currentColor',
                gridcolor: '#444',
                zerolinecolor: '#666'
            },
            margin: { t: 50, l: 80, r: 40, b: 50 },
            plot_bgcolor: 'rgba(0,0,0,0)',
            paper_bgcolor: 'rgba(0,0,0,0)',
            font: { color: 'currentColor' }
        };

        Plotly.newPlot('chartPLAcumulado', [{
            x: fechas,
            y: pl_acumulado,
            type: 'scatter',
            mode: 'lines',
            name: plotTexts.plAcumuladoName,
            line: { color: 'deepskyblue' }
        }], {
            ...layoutBase,
            title: plotTexts.plAcumuladoTitle
        }, {
            displayModeBar: false,
            responsive: true
        });

        // === P/L semanal ===
        function getISOWeekNumber(date) {
            const target = new Date(date.valueOf());
            const dayNr = (date.getDay() + 6) % 7; // convierte domingo (0) en 6
            target.setDate(target.getDate() - dayNr + 3);
            const firstThursday = new Date(target.getFullYear(), 0, 4);
            const diff = target - firstThursday;
            const week = 1 + Math.round(diff / (7 * 24 * 60 * 60 * 1000));
            const year = target.getFullYear();
            return { year, week };
        }

        const semanas = {};
        ordenado.forEach(row => {
            const fecha = new Date(row.Day);
            const lunes = new Date(fecha);
            lunes.setDate(fecha.getDate() - fecha.getDay() + 1);
            const clave = lunes.toISOString().split('T')[0];  // se agrupa por lunes
            const ganancia = parseFloat(row['P/L']) || 0;
            semanas[clave] = (semanas[clave] || 0) + ganancia;
        });

        const semanas_ordenadas = Object.keys(semanas).sort();
        const valores = semanas_ordenadas.map(sem => semanas[sem]);

        // ⬇️ Etiquetas bonitas como Week 20-2025
        const etiquetas = semanas_ordenadas.map(fechaISO => {
            const date = new Date(fechaISO);
            const { year, week } = getISOWeekNumber(date);
            return `Week ${week}-${year}`;
        });

        Plotly.newPlot('chartPLSemanal', [{
            x: etiquetas,
            y: valores,
            type: 'bar',
            name: plotTexts.plSemanalName,
            marker: {
                color: valores.map(v => v >= 0 ? 'limegreen' : 'tomato')
            }
        }], {
            ...layoutBase,
            title: plotTexts.plSemanalTitle,
            xaxis: {
                ...layoutBase.xaxis,
                type: 'category'  // necesario para evitar interpretación como fecha
            }
        }, {
            displayModeBar: false,
            responsive: true
        });

    }

    document.getElementById("downloadCSV").addEventListener("click", function () {
        const table = document.getElementById("resultTable");
        const rows = table.querySelectorAll("tr");

        // Extract summary metrics
        const profit = document.getElementById("profitTotal").innerText;
        const wins = document.getElementById("winDays").innerText;
        const losses = document.getElementById("lossDays").innerText;
        const winRate = document.getElementById("winRate").innerText;

        // CSV header with summary (in English)
        let csvContent = "Metric,Value\n";
        csvContent += `Total Profit,${profit}\n`;
        csvContent += `Winning Days,${wins}\n`;
        csvContent += `Losing Days,${losses}\n`;
        csvContent += `Win Rate,${winRate}\n\n`;

        // Add table data
        rows.forEach(row => {
            const cols = row.querySelectorAll("th, td");
            const rowData = Array.from(cols).map(col =>
                `"${col.innerText.replace(/"/g, '""')}"`
            );
            csvContent += rowData.join(",") + "\n";
        });

        // Get parameters from inputs
        const symbol = document.getElementById("symbolSelect").value;
        const dateFrom = document.getElementById("dateFrom").value;
        const dateTo = document.getElementById("dateTo").value;
        const time = document.getElementById("timeHour").value;
        const strategy = document.getElementById("strategySelect").value;
        const risk = document.getElementById("riskLevel").value;

        // Sanitize values for filename (replace ":" or "/" if needed)
        const clean = (str) => str.replace(/[:\/\\]/g, "-");

        const fileName = `backtesting_${symbol}_${clean(dateFrom)}_to_${clean(dateTo)}_${time}_${strategy}_${risk}.csv`;

        // Trigger download
        const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
        const url = URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.setAttribute("href", url);
        link.setAttribute("download", fileName);
        link.style.display = "none";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    });


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

        const lang = document.documentElement.lang || "es";
        const texts = {
            es: {
                title: `Evolución de P/L - ${fecha} (${strikes}) ${tipo ? `[${tipo}]` : ''}`,
                xLabel: "Hora",
                yLabel: "Ganancia / Pérdida ($)"
            },
            en: {
                title: `P/L Evolution - ${fecha} (${strikes}) ${tipo ? `[${tipo}]` : ''}`,
                xLabel: "Time",
                yLabel: "Profit / Loss ($)"
            }
        };
        const t = texts[lang] || texts["es"];

        const isDarkMode = document.body.classList.contains("dark-mode");

        const trace = {
            x: x,
            y: y,
            type: 'scatter',
            mode: 'lines',
            name: 'P/L',
            line: { shape: 'spline', width: 2 }
        };

        const layout = {
            title: t.title,
            xaxis: {
                title: t.xLabel,
                color: isDarkMode ? '#ccc' : '#333',
                gridcolor: isDarkMode ? '#444' : '#ccc',
                zerolinecolor: isDarkMode ? '#555' : '#aaa'
            },
            yaxis: {
                title: t.yLabel,
                tickprefix: '$',
                color: isDarkMode ? '#ccc' : '#333',
                gridcolor: isDarkMode ? '#444' : '#ccc',
                zerolinecolor: isDarkMode ? '#555' : '#aaa'
            },
            shapes: [
                {
                    type: 'line',
                    xref: 'paper',
                    x0: 0,
                    x1: 1,
                    y0: 0,
                    y1: 0,
                    line: {
                        color: 'orange',
                        width: 2,
                        dash: 'dot'
                    }
                }
            ],
            margin: { t: 50, l: 60, r: 30, b: 50 },
            plot_bgcolor: 'rgba(0,0,0,0)',
            paper_bgcolor: 'rgba(0,0,0,0)',
            font: { size: 14, color: isDarkMode ? 'white' : 'black' }
        };

        const modal = new bootstrap.Modal(document.getElementById('evolutionModal'));
        modal.show();

        const modalElement = document.getElementById('evolutionModal');
        modalElement.addEventListener('shown.bs.modal', function () {
            Plotly.newPlot('plotlyEvolutionChart', [trace], layout, {
                responsive: true,
                displayModeBar: false
            });
            Plotly.Plots.resize('plotlyEvolutionChart');
        }, { once: true });
    }


    async function pollForResult(taskId) {
        const pollUrl = `/backtestingIdea/get_backtesting_idea_result/${taskId}`;
        let attempts = 0;
        const maxAttempts = 60;

        while (attempts < maxAttempts) {
            const res = await fetch(pollUrl);
            const data = await res.json();

            if (data.status === 'PENDING') {
                await new Promise(resolve => setTimeout(resolve, 2000)); // espera 2s
                attempts++;
            } else if (data.status === 'FAILURE') {
                console.error("Fallo la tarea:", data.message);
                return null;
            } else {
                return data;
            }
        }

        return null;
    }

</script>
{% endblock %}