{% extends "base.html" %}

{% block title %}
{{ _('Mejores Horarios — BackTestingMarket') }}
{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles-backtestingall.css') }}">
<script src="https://cdn.jsdelivr.net/npm/luxon@3/build/global/luxon.min.js"></script>
{% endblock %}

{% block content %}
<main>

    <!-- ═══════════════════════════════════════
         DASHBOARD LAYOUT
    ═══════════════════════════════════════ -->
    <div class="dashboard-layout">

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

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

            <hr class="sidebar-divider">

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

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

                <div class="sidebar-field">
                    <label class="sidebar-label">{{ _('Riesgo') }}</label>
                    <select id="riskSelect" class="form-select form-select-sm sidebar-select">
                        <option value="cons">🛡️ {{ _('Conservador') }}</option>
                        <option value="inte" selected>⚖️ {{ _('Intermedio') }}</option>
                        <option value="agre">🔥 {{ _('Agresivo') }}</option>
                        <option value="ultr">⚡ {{ _('Ultra Agresivo') }}</option>
                    </select>
                </div>

                <button id="loadButton" class="btn btn-success btn-sm fw-bold sidebar-btn-load mt-2">
                    <i class="fas fa-bolt me-1"></i> {{ _('Analizar') }}
                </button>

            </div>

            <hr class="sidebar-divider">

            <!-- KPIs globales -->
            <div id="globalKPIs" style="display:none;">
                <div class="sidebar-section-title">{{ _('Resumen Global') }}</div>

                <div class="sidebar-profit-row mb-2" id="profitRow">
                    <div class="sidebar-profit-label">{{ _('P&L Total') }}</div>
                    <div id="kpiPLTotal" class="sidebar-profit-value">$0</div>
                </div>

                <div class="sidebar-kpi-list">
                    <div class="sidebar-kpi-item">
                        <span class="sidebar-kpi-item-label">{{ _('Días Analizados') }}</span>
                        <span id="kpiDias" class="fw-semibold">—</span>
                    </div>
                    <div class="sidebar-kpi-item">
                        <span class="sidebar-kpi-item-label">{{ _('Win Rate') }}</span>
                        <span id="kpiWinRate" class="fw-semibold text-warning">—</span>
                    </div>
                    <div class="sidebar-kpi-item">
                        <span class="sidebar-kpi-item-label">{{ _('Profit Factor') }}</span>
                        <span id="kpiProfitFactor" class="fw-semibold">—</span>
                    </div>
                    <div class="sidebar-kpi-item">
                        <span class="sidebar-kpi-item-label">{{ _('Mejor Hora') }}</span>
                        <span id="kpiBestHora" class="fw-semibold text-success">—</span>
                    </div>
                    <div class="sidebar-kpi-item">
                        <span class="sidebar-kpi-item-label">{{ _('Peor Hora') }}</span>
                        <span id="kpiWorstHora" class="fw-semibold text-danger">—</span>
                    </div>
                    <div class="sidebar-kpi-item">
                        <span class="sidebar-kpi-item-label">{{ _('Max Racha +') }}</span>
                        <span id="kpiRachaPos" class="fw-semibold text-success">—</span>
                    </div>
                    <div class="sidebar-kpi-item">
                        <span class="sidebar-kpi-item-label">{{ _('Max Racha -') }}</span>
                        <span id="kpiRachaNeg" class="fw-semibold text-danger">—</span>
                    </div>
                </div>
            </div>

            <div class="sidebar-footer-note mt-auto pt-3">
                {{ _('Detecta los mejores horarios de entrada con datos reales.') }}
            </div>

        </aside>

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

            <!-- Empty state -->
            <div id="emptyState" class="dashboard-empty-state">
                <div class="dashboard-empty-icon">⚡</div>
                <div class="dashboard-empty-title">{{ _('Selecciona símbolo y riesgo') }}</div>
                <div class="dashboard-empty-sub">{{ _('Presiona "Analizar" para descubrir los mejores horarios.') }}</div>
            </div>

            <!-- Dashboard content -->
            <div id="dashboardContent" style="display:none;">

                <!-- Header del símbolo activo -->
                <div class="symbol-header mb-4">
                    <div class="symbol-header-left">
                        <div class="symbol-badge" id="activeSymbol">SPX</div>
                        <div>
                            <div class="symbol-title" id="activeTitle">{{ _('Análisis de Mejores Horarios') }}</div>
                            <div class="symbol-subtitle" id="activePeriod">—</div>
                        </div>
                    </div>
                    <div class="symbol-header-right">
                        <span class="risk-badge" id="activeRisk">Intermedio</span>
                    </div>
                </div>

                <!-- Tabs Vertical / Iron Condor -->
                <div class="strategy-tabs mb-4">
                    <button class="strategy-tab active" id="tabVertical" data-strategy="vertical">
                        📈 {{ _('Vertical') }}
                    </button>
                    <button class="strategy-tab" id="tabIC" data-strategy="ironcondor">
                        🦅 {{ _('Iron Condor') }}
                    </button>
                </div>

                <!-- ── VERTICAL PANEL ── -->
                <div id="panelVertical">

                    <!-- Top 3 Ranking Cards -->
                    <div class="section-label mb-3">🏆 {{ _('TOP 3 MEJORES HORARIOS') }}</div>
                    <div class="ranking-grid mb-4" id="rankingVertical">
                        <!-- populated by JS -->
                    </div>

                    <!-- Tabla comparativa -->
                    <div class="section-label mb-3">📊 {{ _('TABLA COMPARATIVA — TODOS LOS HORARIOS') }}</div>
                    <div class="table-card">
                        <div class="table-card-controls">
                            <div class="d-flex gap-2 align-items-center flex-wrap">
                                <span class="small fw-semibold" style="opacity:0.6;">{{ _('Ordenar por:') }}</span>
                                <button class="sort-btn active" data-sort="profit">P&L</button>
                                <button class="sort-btn" data-sort="hora">{{ _('Hora') }}</button>
                            </div>
                            <div id="tableCountV" class="table-count-badge">—</div>
                        </div>
                        <div class="table-responsive">
                            <table class="bkt-table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{ _('Hora') }}</th>
                                        <th>{{ _('Ganancia Total') }}</th>
                                        <th>{{ _('Notas') }}</th>
                                    </tr>
                                </thead>
                                <tbody id="tbodyVertical"></tbody>
                            </table>
                        </div>
                    </div>

                </div>

                <!-- ── IRON CONDOR PANEL ── -->
                <div id="panelIC" style="display:none;">

                    <div class="section-label mb-3">🏆 {{ _('TOP 3 MEJORES HORARIOS') }}</div>
                    <div class="ranking-grid mb-4" id="rankingIC">
                        <!-- populated by JS -->
                    </div>

                    <div class="section-label mb-3">📊 {{ _('TABLA COMPARATIVA — TODOS LOS HORARIOS') }}</div>
                    <div class="table-card">
                        <div class="table-card-controls">
                            <div class="d-flex gap-2 align-items-center flex-wrap">
                                <span class="small fw-semibold" style="opacity:0.6;">{{ _('Ordenar por:') }}</span>
                                <button class="sort-btn active" data-sort="profit">P&L</button>
                                <button class="sort-btn" data-sort="hora">{{ _('Hora') }}</button>
                            </div>
                            <div id="tableCountIC" class="table-count-badge">—</div>
                        </div>
                        <div class="table-responsive">
                            <table class="bkt-table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{ _('Hora') }}</th>
                                        <th>{{ _('Ganancia Total') }}</th>
                                        <th>{{ _('Notas') }}</th>
                                    </tr>
                                </thead>
                                <tbody id="tbodyIC"></tbody>
                            </table>
                        </div>
                    </div>

                </div>

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

</main>

<script>
/* ═══════════════════════════════════════
   backtestingAll.js — usa /api/top-horarios
   Misma data shape que el carousel original
═══════════════════════════════════════ */

const fmtUSD = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 });
const MEDALS       = ['🥇', '🥈', '🥉'];
const MEDAL_CLASSES = ['gold', 'silver', 'bronze'];

const RISK_META = {
    cons: { label: '{{ _("Conservador") }}', icon: '🛡️' },
    inte: { label: '{{ _("Intermedio") }}',  icon: '⚖️' },
    agre: { label: '{{ _("Agresivo") }}',    icon: '🔥' },
    ultr: { label: '{{ _("Ultra Agresivo") }}', icon: '⚡' }
};

// Riesgos válidos por estrategia + símbolo (mismo que el carousel)
const RISKS_BY_STRATEGY = {
    Vertical: {
        SPX: ['cons', 'inte', 'agre', 'ultr'],
        RUT: ['cons', 'inte', 'agre'],
        XSP: ['cons', 'inte', 'agre'],
    },
    IronCondor: {
        SPX: ['cons', 'inte', 'agre'],
        RUT: ['cons', 'inte'],
        XSP: ['cons', 'inte'],
    }
};

let currentData    = null;  // raw json from API
let currentSymbol  = 'SPX';
let currentRisk    = 'inte';
let currentSort    = { Vertical: 'profit', IronCondor: 'profit' };

// ── Auto-load on DOMContentLoaded ──
document.addEventListener('DOMContentLoaded', () => {
    loadData();

    // Re-load when symbol or risk changes
    document.getElementById('symbolSelect').addEventListener('change', () => {
        currentSymbol = document.getElementById('symbolSelect').value;
        currentRisk   = document.getElementById('riskSelect').value;
        if (currentData) renderAll(currentData);
    });
    document.getElementById('riskSelect').addEventListener('change', () => {
        currentRisk = document.getElementById('riskSelect').value;
        if (currentData) renderAll(currentData);
    });
});

// ── Tab switching ──
document.querySelectorAll('.strategy-tab').forEach(tab => {
    tab.addEventListener('click', () => {
        document.querySelectorAll('.strategy-tab').forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
        const strat = tab.dataset.strategy;
        document.getElementById('panelVertical').style.display = strat === 'vertical'    ? 'block' : 'none';
        document.getElementById('panelIC').style.display       = strat === 'ironcondor'  ? 'block' : 'none';
    });
});

// ── Sort buttons ──
document.querySelectorAll('.sort-btn').forEach(btn => {
    btn.addEventListener('click', function () {
        const panel  = this.closest('[id^="panel"]');
        const isIC   = panel.id === 'panelIC';
        const strat  = isIC ? 'IronCondor' : 'Vertical';
        panel.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        currentSort[strat] = this.dataset.sort;
        if (currentData) renderTable(strat, currentData);
    });
});

// ── Load button ──
document.getElementById('loadButton').addEventListener('click', loadData);

async function loadData() {
    currentSymbol = document.getElementById('symbolSelect').value;
    currentRisk   = document.getElementById('riskSelect').value;

    const btn = document.getElementById('loadButton');
    btn.disabled = true;
    btn.innerHTML = '⏳ {{ _("Cargando...") }}';

    try {
        // Fetch both strategies in parallel — same endpoint as carousel
        const [respV, respIC] = await Promise.all([
            fetch('/api/top-horarios?strategy=Vertical'),
            fetch('/api/top-horarios?strategy=IronCondor')
        ]);
        const [jsonV, jsonIC] = await Promise.all([respV.json(), respIC.json()]);

        if (!jsonV.ok)  throw new Error(jsonV.error  || 'API error Vertical');
        if (!jsonIC.ok) throw new Error(jsonIC.error || 'API error IronCondor');

        // Merge into one object
        currentData = { Vertical: jsonV, IronCondor: jsonIC };
        renderAll(currentData);

    } catch (err) {
        console.error(err);
        alert('{{ _("Error al cargar datos") }}: ' + err.message);
    } finally {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-bolt me-1"></i> {{ _("Analizar") }}';
    }
}

function renderAll(data) {
    document.getElementById('emptyState').style.display       = 'none';
    document.getElementById('dashboardContent').style.display = 'block';
    document.getElementById('globalKPIs').style.display       = 'block';

    // Header info
    document.getElementById('activeSymbol').textContent = currentSymbol;
    const riskMeta = RISK_META[currentRisk] || {};
    document.getElementById('activeRisk').textContent   = (riskMeta.icon || '') + ' ' + (riskMeta.label || currentRisk);

    const ftV = data.Vertical?.from_to?.[currentSymbol] || {};
    document.getElementById('activePeriod').textContent =
        (ftV.from || '—') + ' → ' + (ftV.to || '—');

    // Global KPIs — compute from Vertical data for selected symbol+risk
    const rowsV  = getRows('Vertical',   data);
    const rowsIC = getRows('IronCondor', data);
    const allRows = [...rowsV, ...rowsIC];

    const totalProfit = allRows.reduce((s, r) => s + (r.profit || 0), 0);
    const bestV  = rowsV.length  ? rowsV[0]  : null;
    const bestIC = rowsIC.length ? rowsIC[0] : null;

    document.getElementById('kpiPLTotal').textContent = fmtUSD.format(totalProfit);
    document.getElementById('profitRow').classList.toggle('is-loss', totalProfit < 0);
    document.getElementById('kpiDias').textContent    = rowsV[0]?.dias != null ? rowsV[0].dias : '—';
    document.getElementById('kpiBestHora').textContent  = bestV  ? bestV.hora  : '—';
    document.getElementById('kpiWorstHora').textContent = rowsV.length ? rowsV[rowsV.length - 1].hora : '—';

    // Hide KPIs that the API doesn't provide
    document.getElementById('kpiWinRate').textContent      = '—';
    document.getElementById('kpiProfitFactor').textContent = '—';
    document.getElementById('kpiRachaPos').textContent     = '—';
    document.getElementById('kpiRachaNeg').textContent     = '—';

    // Render rankings + tables
    renderRanking('Vertical',   data);
    renderRanking('IronCondor', data);
    renderTable('Vertical',   data);
    renderTable('IronCondor', data);
}

// Extract rows for symbol+risk from raw API data
// API shape: json.data[symbol][risk] = [{hora, profit}, ...]
function getRows(strategy, data) {
    const json   = data[strategy];
    if (!json) return [];
    const sym    = currentSymbol;
    const rk     = currentRisk;
    const risks  = RISKS_BY_STRATEGY[strategy]?.[sym] || [];
    const riskKey = risks.includes(rk) ? rk : risks[0];
    return (json.data?.[sym]?.[riskKey] || []).slice(); // [{hora, profit}]
}

function renderRanking(strategy, data) {
    const isIC      = strategy === 'IronCondor';
    const container = document.getElementById(isIC ? 'rankingIC' : 'rankingVertical');
    const rows      = getRows(strategy, data).sort((a, b) => b.profit - a.profit).slice(0, 3);

    if (!rows.length) {
        container.innerHTML = '<div style="opacity:0.4;font-size:0.85rem;">{{ _("Sin datos para este símbolo/riesgo") }}</div>';
        return;
    }

    container.innerHTML = rows.map((row, i) => `
        <div class="ranking-card ${MEDAL_CLASSES[i]}">
            <div class="ranking-medal">${MEDALS[i]}</div>
            <div class="ranking-hora">${row.hora}</div>
            <div class="ranking-pl positive">
                ${fmtUSD.format(row.profit)}
            </div>
            <div class="ranking-stats">
                <div class="ranking-stat">
                    <span class="ranking-stat-label">{{ _('Ganancia') }}</span>
                    <span class="ranking-stat-value">${fmtUSD.format(row.profit)}</span>
                </div>
                <div class="ranking-stat">
                    <span class="ranking-stat-label">{{ _('Posición') }}</span>
                    <span class="ranking-stat-value">#${i + 1}</span>
                </div>
            </div>
        </div>
    `).join('');
}

function renderTable(strategy, data) {
    const isIC  = strategy === 'IronCondor';
    const tbody = document.getElementById(isIC ? 'tbodyIC' : 'tbodyVertical');
    const countEl = document.getElementById(isIC ? 'tableCountIC' : 'tableCountV');
    const sort  = currentSort[strategy];

    const rows = getRows(strategy, data).sort((a, b) => {
        if (sort === 'profit') return b.profit - a.profit;
        if (sort === 'hora')   return a.hora.localeCompare(b.hora);
        return 0;
    });

    countEl.textContent = rows.length + ' {{ _("horarios") }}';

    if (!rows.length) {
        tbody.innerHTML = `<tr><td colspan="4" style="text-align:center;opacity:0.4;padding:2rem;">{{ _("Sin datos para este símbolo/riesgo") }}</td></tr>`;
        return;
    }

    tbody.innerHTML = rows.map((row, i) => {
        const plClass = row.profit >= 0 ? 'cell-positive' : 'cell-negative';
        const medal   = i < 3 ? `<span class="mini-medal">${MEDALS[i]}</span>` : '';
        return `<tr>
            <td class="cell-rank">${medal}${i + 1}</td>
            <td class="cell-hora"><strong>${row.hora}</strong></td>
            <td class="${plClass}">${fmtUSD.format(row.profit)}</td>
            <td class="cell-neutral">—</td>
        </tr>`;
    }).join('');
}
</script>

{% endblock %}