{% extends "base.html" %}
{% block title %}Backtest Engine{% endblock %}

{% block content %}
<div x-data="backtestEngine()" x-init="loadData()" class="space-y-6">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white flex items-center gap-2">
                <svg class="w-7 h-7 text-blue-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"/></svg>
                Backtest Engine
            </h1>
            <p class="text-sm text-gray-400 mt-1">Strategy backtesting with historical signal performance analysis</p>
        </div>
        <div class="flex items-center gap-2">
            <span class="text-xs text-gray-500" x-text="lastRefresh ? 'Updated: ' + lastRefresh : ''"></span>
        </div>
    </div>

    <!-- Strategy Controls -->
    <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
        <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Strategy Configuration</h3>
        <div class="flex flex-wrap items-end gap-4">
            <div>
                <label class="block text-xs text-gray-400 mb-1">Strategy</label>
                <select x-model="strategy" class="bg-gray-900 border border-gray-600 text-gray-200 text-sm rounded-lg px-3 py-2 min-w-[180px]">
                    <option value="score_based">Score Based</option>
                    <option value="rsi_reversal">RSI Reversal</option>
                    <option value="trend_following">Trend Following</option>
                    <option value="ml_consensus">ML Consensus</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-400 mb-1">Backtest Period</label>
                <select x-model="days" class="bg-gray-900 border border-gray-600 text-gray-200 text-sm rounded-lg px-3 py-2">
                    <option value="30">30 Days</option>
                    <option value="60">60 Days</option>
                    <option value="90" selected>90 Days</option>
                    <option value="180">180 Days</option>
                </select>
            </div>
            <button @click="loadData()" :disabled="loading"
                    class="px-5 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-sm font-semibold transition disabled:opacity-50 flex items-center gap-2">
                <svg x-show="!loading" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <svg x-show="loading" x-cloak class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                Run Backtest
            </button>
        </div>
    </div>

    <!-- Error State -->
    <div x-show="error" x-cloak class="bg-red-900/30 border border-red-700/50 rounded-xl p-4 text-sm text-red-300" x-text="error"></div>

    <!-- Loading State -->
    <div x-show="loading && !hasData" x-cloak class="text-center py-16">
        <svg class="animate-spin h-10 w-10 text-blue-400 mx-auto" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
        </svg>
        <p class="text-gray-400 mt-4">Running backtest simulation...</p>
    </div>

    <!-- Summary Cards -->
    <template x-if="hasData">
        <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
                <div class="text-xs text-gray-400 uppercase tracking-wider">Total Return</div>
                <div class="text-2xl font-bold mt-1"
                     :class="(data.total_return_pct || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                     x-text="(data.total_return_pct != null ? (data.total_return_pct >= 0 ? '+' : '') + data.total_return_pct.toFixed(2) + '%' : '-')"></div>
            </div>
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
                <div class="text-xs text-gray-400 uppercase tracking-wider">Win Rate</div>
                <div class="text-2xl font-bold mt-1"
                     :class="(data.win_rate || 0) >= 50 ? 'text-emerald-400' : 'text-red-400'"
                     x-text="(data.win_rate != null ? data.win_rate.toFixed(1) + '%' : '-')"></div>
            </div>
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
                <div class="text-xs text-gray-400 uppercase tracking-wider">Profit Factor</div>
                <div class="text-2xl font-bold mt-1"
                     :class="(data.profit_factor || 0) >= 1.0 ? 'text-emerald-400' : 'text-red-400'"
                     x-text="(data.profit_factor != null ? data.profit_factor.toFixed(2) : '-')"></div>
            </div>
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
                <div class="text-xs text-gray-400 uppercase tracking-wider">Max Drawdown</div>
                <div class="text-2xl font-bold text-red-400 mt-1"
                     x-text="(data.max_drawdown_pct != null ? data.max_drawdown_pct.toFixed(2) + '%' : '-')"></div>
            </div>
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
                <div class="text-xs text-gray-400 uppercase tracking-wider">Sharpe Ratio</div>
                <div class="text-2xl font-bold mt-1"
                     :class="(data.sharpe_ratio || 0) >= 1.0 ? 'text-emerald-400' : (data.sharpe_ratio || 0) >= 0 ? 'text-yellow-400' : 'text-red-400'"
                     x-text="(data.sharpe_ratio != null ? data.sharpe_ratio.toFixed(2) : '-')"></div>
            </div>
        </div>
    </template>

    <!-- Detailed Metrics -->
    <template x-if="hasData">
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
            <div class="bg-gray-800/50 border border-gray-700/50 rounded-lg p-3 text-center">
                <div class="text-[10px] text-gray-500 uppercase">Avg Win</div>
                <div class="text-lg font-bold text-emerald-400 mt-1" x-text="(data.avg_win_pct != null ? '+' + data.avg_win_pct.toFixed(2) + '%' : '-')"></div>
            </div>
            <div class="bg-gray-800/50 border border-gray-700/50 rounded-lg p-3 text-center">
                <div class="text-[10px] text-gray-500 uppercase">Avg Loss</div>
                <div class="text-lg font-bold text-red-400 mt-1" x-text="(data.avg_loss_pct != null ? data.avg_loss_pct.toFixed(2) + '%' : '-')"></div>
            </div>
            <div class="bg-gray-800/50 border border-gray-700/50 rounded-lg p-3 text-center">
                <div class="text-[10px] text-gray-500 uppercase">Sortino</div>
                <div class="text-lg font-bold text-white mt-1" x-text="(data.sortino_ratio != null ? data.sortino_ratio.toFixed(2) : '-')"></div>
            </div>
            <div class="bg-gray-800/50 border border-gray-700/50 rounded-lg p-3 text-center">
                <div class="text-[10px] text-gray-500 uppercase">Calmar</div>
                <div class="text-lg font-bold text-white mt-1" x-text="(data.calmar_ratio != null ? data.calmar_ratio.toFixed(2) : '-')"></div>
            </div>
            <div class="bg-gray-800/50 border border-gray-700/50 rounded-lg p-3 text-center">
                <div class="text-[10px] text-gray-500 uppercase">Total Trades</div>
                <div class="text-lg font-bold text-white mt-1" x-text="data.total_trades || 0"></div>
            </div>
            <div class="bg-gray-800/50 border border-gray-700/50 rounded-lg p-3 text-center">
                <div class="text-[10px] text-gray-500 uppercase">Avg Hold Days</div>
                <div class="text-lg font-bold text-white mt-1" x-text="(data.avg_hold_days != null ? data.avg_hold_days.toFixed(1) : '-')"></div>
            </div>
        </div>
    </template>

    <!-- Benchmark Comparison -->
    <template x-if="hasData && data.benchmark_return_pct != null">
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
            <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Strategy vs Buy &amp; Hold</h3>
            <div class="grid grid-cols-2 gap-6">
                <div class="text-center">
                    <div class="text-xs text-gray-400 mb-2">Strategy Return</div>
                    <div class="text-3xl font-black" :class="(data.total_return_pct || 0) >= 0 ? 'text-blue-400' : 'text-red-400'"
                         x-text="(data.total_return_pct != null ? (data.total_return_pct >= 0 ? '+' : '') + data.total_return_pct.toFixed(2) + '%' : '-')"></div>
                    <div class="mt-2 w-full bg-gray-700 rounded-full h-3">
                        <div class="h-3 rounded-full bg-blue-500 transition-all" :style="'width:' + Math.min(Math.max((data.total_return_pct || 0) + 50, 0), 100) + '%'"></div>
                    </div>
                </div>
                <div class="text-center">
                    <div class="text-xs text-gray-400 mb-2">Buy &amp; Hold Return</div>
                    <div class="text-3xl font-black" :class="(data.benchmark_return_pct || 0) >= 0 ? 'text-gray-300' : 'text-red-400'"
                         x-text="(data.benchmark_return_pct != null ? (data.benchmark_return_pct >= 0 ? '+' : '') + data.benchmark_return_pct.toFixed(2) + '%' : '-')"></div>
                    <div class="mt-2 w-full bg-gray-700 rounded-full h-3">
                        <div class="h-3 rounded-full bg-gray-500 transition-all" :style="'width:' + Math.min(Math.max((data.benchmark_return_pct || 0) + 50, 0), 100) + '%'"></div>
                    </div>
                </div>
            </div>
            <div class="mt-4 text-center">
                <span class="text-sm" :class="(data.total_return_pct || 0) > (data.benchmark_return_pct || 0) ? 'text-emerald-400' : 'text-red-400'">
                    Alpha: <span x-text="((data.total_return_pct || 0) - (data.benchmark_return_pct || 0) >= 0 ? '+' : '') + ((data.total_return_pct || 0) - (data.benchmark_return_pct || 0)).toFixed(2) + '%'"></span>
                </span>
            </div>
        </div>
    </template>

    <!-- Win/Loss Breakdown -->
    <template x-if="hasData">
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
            <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Win / Loss Breakdown</h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="text-center">
                    <div class="text-xs text-gray-400 mb-1">Winning Trades</div>
                    <div class="text-2xl font-bold text-emerald-400" x-text="data.winning_trades || 0"></div>
                </div>
                <div class="text-center">
                    <div class="text-xs text-gray-400 mb-1">Losing Trades</div>
                    <div class="text-2xl font-bold text-red-400" x-text="data.losing_trades || 0"></div>
                </div>
                <div class="text-center">
                    <div class="text-xs text-gray-400 mb-1">Best Trade</div>
                    <div class="text-2xl font-bold text-emerald-400" x-text="(data.best_trade_pct != null ? '+' + data.best_trade_pct.toFixed(2) + '%' : '-')"></div>
                </div>
                <div class="text-center">
                    <div class="text-xs text-gray-400 mb-1">Worst Trade</div>
                    <div class="text-2xl font-bold text-red-400" x-text="(data.worst_trade_pct != null ? data.worst_trade_pct.toFixed(2) + '%' : '-')"></div>
                </div>
            </div>
            <!-- Win/Loss ratio bar -->
            <div class="mt-4">
                <div class="flex h-4 rounded-full overflow-hidden bg-gray-700">
                    <div class="h-full bg-emerald-500 transition-all flex items-center justify-center text-[10px] text-white font-bold"
                         :style="'width:' + ((data.total_trades || 0) > 0 ? ((data.winning_trades || 0) / (data.total_trades || 1) * 100) : 0) + '%'"
                         x-text="(data.total_trades || 0) > 0 ? ((data.winning_trades || 0) / (data.total_trades || 1) * 100).toFixed(0) + '%' : ''"></div>
                    <div class="h-full bg-red-500 transition-all flex items-center justify-center text-[10px] text-white font-bold"
                         :style="'width:' + ((data.total_trades || 0) > 0 ? ((data.losing_trades || 0) / (data.total_trades || 1) * 100) : 0) + '%'"
                         x-text="(data.total_trades || 0) > 0 ? ((data.losing_trades || 0) / (data.total_trades || 1) * 100).toFixed(0) + '%' : ''"></div>
                </div>
                <div class="flex justify-between text-[10px] text-gray-500 mt-1">
                    <span>Wins</span>
                    <span>Losses</span>
                </div>
            </div>
            <!-- Consecutive streaks -->
            <div class="grid grid-cols-2 gap-4 mt-4">
                <div class="bg-gray-900/50 rounded-lg p-3 text-center">
                    <div class="text-[10px] text-gray-500 uppercase">Max Win Streak</div>
                    <div class="text-lg font-bold text-emerald-400 mt-1" x-text="data.max_win_streak || '-'"></div>
                </div>
                <div class="bg-gray-900/50 rounded-lg p-3 text-center">
                    <div class="text-[10px] text-gray-500 uppercase">Max Loss Streak</div>
                    <div class="text-lg font-bold text-red-400 mt-1" x-text="data.max_loss_streak || '-'"></div>
                </div>
            </div>
        </div>
    </template>

    <!-- Strategy Description -->
    <template x-if="hasData">
        <div class="bg-blue-900/20 border border-blue-700/30 rounded-xl p-4">
            <div class="flex items-start gap-3">
                <svg class="w-5 h-5 text-blue-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <div>
                    <h4 class="text-sm font-medium text-blue-300" x-text="'Strategy: ' + (strategy || '').replace('_', ' ').toUpperCase()"></h4>
                    <p class="text-xs text-gray-400 mt-1" x-text="strategyDesc"></p>
                </div>
            </div>
        </div>
    </template>

    <!-- Equity Curve (SVG) -->
    <template x-if="hasData && equityCurve.length > 1">
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
            <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Equity Curve</h3>
            <div class="relative w-full h-48">
                <svg class="w-full h-full" :viewBox="'0 0 ' + equityCurve.length + ' 100'" preserveAspectRatio="none">
                    <polyline fill="none" stroke="#3b82f6" stroke-width="0.5"
                              :points="equityCurve.map((v, i) => i + ',' + (100 - v)).join(' ')"/>
                    <polyline fill="url(#eqGrad)" stroke="none"
                              :points="'0,100 ' + equityCurve.map((v, i) => i + ',' + (100 - v)).join(' ') + ' ' + (equityCurve.length - 1) + ',100'"/>
                    <defs>
                        <linearGradient id="eqGrad" x1="0" y1="0" x2="0" y2="1">
                            <stop offset="0%" stop-color="#3b82f6" stop-opacity="0.3"/>
                            <stop offset="100%" stop-color="#3b82f6" stop-opacity="0"/>
                        </linearGradient>
                    </defs>
                </svg>
                <div class="absolute top-0 left-0 text-[10px] text-gray-500" x-text="eqMax.toFixed(1) + '%'"></div>
                <div class="absolute bottom-0 left-0 text-[10px] text-gray-500" x-text="eqMin.toFixed(1) + '%'"></div>
            </div>
        </div>
    </template>

    <!-- Monthly Returns Grid -->
    <template x-if="hasData && data.monthly_returns && Object.keys(data.monthly_returns).length > 0">
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
            <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Monthly Returns</h3>
            <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
                <template x-for="(ret, month) in data.monthly_returns" :key="month">
                    <div class="rounded-lg p-3 text-center" :class="ret >= 0 ? 'bg-emerald-900/30' : 'bg-red-900/30'">
                        <div class="text-[10px] text-gray-400" x-text="month"></div>
                        <div class="text-sm font-bold mt-1" :class="ret >= 0 ? 'text-emerald-400' : 'text-red-400'"
                             x-text="(ret >= 0 ? '+' : '') + ret.toFixed(2) + '%'"></div>
                    </div>
                </template>
            </div>
        </div>
    </template>

    <!-- Drawdown Analysis -->
    <template x-if="hasData && data.max_drawdown_pct != null">
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
            <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Drawdown Analysis</h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="bg-gray-900/50 rounded-lg p-3 text-center">
                    <div class="text-[10px] text-gray-500 uppercase">Max Drawdown</div>
                    <div class="text-xl font-bold text-red-400 mt-1" x-text="data.max_drawdown_pct.toFixed(2) + '%'"></div>
                </div>
                <div class="bg-gray-900/50 rounded-lg p-3 text-center">
                    <div class="text-[10px] text-gray-500 uppercase">Avg Drawdown</div>
                    <div class="text-xl font-bold text-amber-400 mt-1" x-text="data.avg_drawdown_pct != null ? data.avg_drawdown_pct.toFixed(2) + '%' : '-'"></div>
                </div>
                <div class="bg-gray-900/50 rounded-lg p-3 text-center">
                    <div class="text-[10px] text-gray-500 uppercase">Recovery Days</div>
                    <div class="text-xl font-bold text-white mt-1" x-text="data.recovery_days || '-'"></div>
                </div>
                <div class="bg-gray-900/50 rounded-lg p-3 text-center">
                    <div class="text-[10px] text-gray-500 uppercase">Time in Drawdown</div>
                    <div class="text-xl font-bold text-white mt-1" x-text="data.time_in_drawdown_pct != null ? data.time_in_drawdown_pct.toFixed(0) + '%' : '-'"></div>
                </div>
            </div>
            <!-- Drawdown depth bar -->
            <div class="mt-4">
                <div class="flex items-center gap-3">
                    <span class="text-[10px] text-gray-500 w-12 text-right">0%</span>
                    <div class="flex-1 bg-gray-700 rounded-full h-4 relative overflow-hidden">
                        <div class="h-full bg-gradient-to-r from-red-700 to-red-500 rounded-full transition-all flex items-center justify-end pr-2"
                             :style="'width:' + Math.min(Math.abs(data.max_drawdown_pct || 0), 100) + '%'">
                            <span class="text-[10px] text-white font-bold" x-show="Math.abs(data.max_drawdown_pct || 0) > 10"
                                  x-text="data.max_drawdown_pct.toFixed(1) + '%'"></span>
                        </div>
                    </div>
                    <span class="text-[10px] text-gray-500 w-12">-100%</span>
                </div>
            </div>
        </div>
    </template>

    <!-- Risk-Adjusted Metrics -->
    <template x-if="hasData">
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
            <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Risk-Adjusted Performance</h3>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
                <div class="bg-gray-900/50 rounded-lg p-3">
                    <div class="text-[10px] text-gray-500 uppercase mb-1">Expectancy</div>
                    <div class="text-lg font-bold"
                         :class="(data.expectancy || 0) > 0 ? 'text-emerald-400' : 'text-red-400'"
                         x-text="data.expectancy != null ? (data.expectancy >= 0 ? '+' : '') + data.expectancy.toFixed(4) : '-'"></div>
                    <div class="text-[10px] text-gray-500 mt-1">Per trade avg</div>
                </div>
                <div class="bg-gray-900/50 rounded-lg p-3">
                    <div class="text-[10px] text-gray-500 uppercase mb-1">Payoff Ratio</div>
                    <div class="text-lg font-bold"
                         :class="(data.payoff_ratio || 0) >= 1 ? 'text-emerald-400' : 'text-amber-400'"
                         x-text="data.payoff_ratio != null ? data.payoff_ratio.toFixed(2) : '-'"></div>
                    <div class="text-[10px] text-gray-500 mt-1">Avg Win / Avg Loss</div>
                </div>
                <div class="bg-gray-900/50 rounded-lg p-3">
                    <div class="text-[10px] text-gray-500 uppercase mb-1">Kelly %</div>
                    <div class="text-lg font-bold text-white"
                         x-text="data.kelly_pct != null ? data.kelly_pct.toFixed(1) + '%' : '-'"></div>
                    <div class="text-[10px] text-gray-500 mt-1">Optimal bet size</div>
                </div>
                <div class="bg-gray-900/50 rounded-lg p-3">
                    <div class="text-[10px] text-gray-500 uppercase mb-1">Ulcer Index</div>
                    <div class="text-lg font-bold text-white"
                         x-text="data.ulcer_index != null ? data.ulcer_index.toFixed(2) : '-'"></div>
                    <div class="text-[10px] text-gray-500 mt-1">Drawdown severity</div>
                </div>
                <div class="bg-gray-900/50 rounded-lg p-3">
                    <div class="text-[10px] text-gray-500 uppercase mb-1">Tail Ratio</div>
                    <div class="text-lg font-bold"
                         :class="(data.tail_ratio || 0) > 1 ? 'text-emerald-400' : 'text-red-400'"
                         x-text="data.tail_ratio != null ? data.tail_ratio.toFixed(2) : '-'"></div>
                    <div class="text-[10px] text-gray-500 mt-1">Right / Left tail</div>
                </div>
                <div class="bg-gray-900/50 rounded-lg p-3">
                    <div class="text-[10px] text-gray-500 uppercase mb-1">CAGR</div>
                    <div class="text-lg font-bold"
                         :class="(data.cagr_pct || 0) > 0 ? 'text-emerald-400' : 'text-red-400'"
                         x-text="data.cagr_pct != null ? (data.cagr_pct >= 0 ? '+' : '') + data.cagr_pct.toFixed(2) + '%' : '-'"></div>
                    <div class="text-[10px] text-gray-500 mt-1">Annualized return</div>
                </div>
            </div>
        </div>
    </template>

    <!-- Search -->
    <div x-show="hasData" x-cloak class="relative">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
        <input type="text" x-model="search" placeholder="Search trades by symbol..."
               class="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500">
    </div>

    <!-- Trades Table -->
    <template x-if="hasData && trades.length > 0">
        <div class="bg-gray-800 border border-gray-700 rounded-xl overflow-hidden">
            <div class="px-5 py-3 border-b border-gray-700">
                <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider">Trade History</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-700 text-gray-400 text-xs uppercase tracking-wider">
                            <th class="px-4 py-3 text-left font-medium">#</th>
                            <th class="px-4 py-3 text-left font-medium">Symbol</th>
                            <th class="px-4 py-3 text-left font-medium">Entry Date</th>
                            <th class="px-4 py-3 text-right font-medium">Entry Price</th>
                            <th class="px-4 py-3 text-left font-medium">Exit Date</th>
                            <th class="px-4 py-3 text-right font-medium">Exit Price</th>
                            <th class="px-4 py-3 text-right font-medium">Return %</th>
                            <th class="px-4 py-3 text-center font-medium">Hold Days</th>
                            <th class="px-4 py-3 text-left font-medium">Signal</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="(t, idx) in filteredTrades" :key="idx">
                            <tr class="border-b border-gray-700/50 hover:bg-gray-750 transition">
                                <td class="px-4 py-3 text-gray-500 text-xs" x-text="idx + 1"></td>
                                <td class="px-4 py-3 text-white font-bold" x-text="t.symbol || '-'"></td>
                                <td class="px-4 py-3 text-gray-300 text-xs" x-text="t.entry_date || '-'"></td>
                                <td class="px-4 py-3 text-right text-gray-300" x-text="t.entry_price != null ? formatNum(t.entry_price) : '-'"></td>
                                <td class="px-4 py-3 text-gray-300 text-xs" x-text="t.exit_date || '-'"></td>
                                <td class="px-4 py-3 text-right text-gray-300" x-text="t.exit_price != null ? formatNum(t.exit_price) : '-'"></td>
                                <td class="px-4 py-3 text-right font-bold"
                                    :class="(t.return_pct || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                    x-text="t.return_pct != null ? ((t.return_pct >= 0 ? '+' : '') + t.return_pct.toFixed(2) + '%') : '-'"></td>
                                <td class="px-4 py-3 text-center text-gray-400" x-text="t.hold_days || '-'"></td>
                                <td class="px-4 py-3">
                                    <span class="px-2 py-0.5 rounded-full text-xs font-semibold"
                                          :class="(t.signal || '').includes('BUY') ? 'bg-green-900/50 text-green-300' : (t.signal || '').includes('SELL') ? 'bg-red-900/50 text-red-300' : 'bg-gray-700/50 text-gray-400'"
                                          x-text="t.signal || '-'"></span>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
            <div x-show="filteredTrades.length === 0" class="text-center py-8">
                <p class="text-gray-500">No trades matching your search</p>
            </div>
        </div>
    </template>
</div>

<script>
function backtestEngine() {
    return {
        data: {},
        trades: [],
        equityCurve: [],
        eqMin: 0,
        eqMax: 100,
        loading: false,
        error: '',
        lastRefresh: null,
        search: '',
        strategy: 'score_based',
        days: '90',

        get hasData() {
            return Object.keys(this.data).length > 0 && !this.error;
        },

        get strategyDesc() {
            const descs = {
                'score_based': 'Ranks assets by a composite score combining technical, momentum, and volume signals. Enters long positions on high-scoring assets and exits when the score drops below the threshold.',
                'rsi_reversal': 'Identifies oversold RSI conditions (<30) for entry and overbought (>70) for exit. Combines RSI with volume confirmation to filter false signals and improve timing accuracy.',
                'trend_following': 'Follows the direction of the dominant trend using EMA crossover signals. Enters on bullish crossovers with ADX confirmation and exits on bearish crossovers or trailing stop-loss triggers.',
                'ml_consensus': 'Uses ensemble machine learning predictions from multiple models (Random Forest, XGBoost, LightGBM). Enters when consensus probability exceeds 65% and exits on reversal predictions.'
            };
            return descs[this.strategy] || 'Select a strategy and run the backtest to see results.';
        },

        get filteredTrades() {
            if (!this.search) return this.trades;
            const q = this.search.toUpperCase();
            return this.trades.filter(t => (t.symbol || '').toUpperCase().includes(q));
        },

        formatNum(v) {
            if (v == null) return '-';
            return Number(v).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 6 });
        },

        async loadData() {
            this.loading = true;
            this.error = '';
            try {
                const r = await fetch(`/api/v1/market/backtest?strategy=${this.strategy}&days=${this.days}&asset_type={{ asset_mode }}`);
                if (r.redirected) { window.location.href = '/auth/login'; return; }
                const json = await r.json();
                if (json.error) { this.error = json.error; this.loading = false; return; }
                this.data = json;
                this.trades = json.trades || [];
                const raw = json.equity_curve || [];
                if (raw.length > 1) {
                    const mn = Math.min(...raw);
                    const mx = Math.max(...raw);
                    const range = mx - mn || 1;
                    this.eqMin = mn;
                    this.eqMax = mx;
                    this.equityCurve = raw.map(v => ((v - mn) / range) * 90 + 5);
                } else {
                    this.equityCurve = [];
                }
                this.lastRefresh = new Date().toLocaleTimeString('id-ID');
            } catch (e) {
                this.error = 'Failed to load backtest: ' + e.message;
            }
            this.loading = false;
        }
    };
}
</script>
{% endblock %}