{% extends "base.html" %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-8" x-data="strategyBacktesterApp()" x-init="init()">

    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-white mb-2">Strategy Backtester</h1>
        <p class="text-gray-400">Backtest 5 trading strategies — validate before risking real capital</p>
    </div>

    <!-- Info Box -->
    <div class="bg-indigo-500/10 border border-indigo-500/20 rounded-xl p-4 mb-6">
        <p class="text-sm text-indigo-300"><span class="font-semibold">How it works:</span> Each coin is tested against SMA Crossover, RSI, Breakout, Mean Reversion & Momentum strategies using 7-day hourly data. Results show return, Sharpe ratio, drawdown & win rate.</p>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <div class="text-2xl font-bold text-white" x-text="summary.total_analyzed || 0"></div>
            <div class="text-xs text-gray-400 mt-1">Coins Analyzed</div>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <div class="text-2xl font-bold text-koin-400" x-text="summary.best_overall_strategy || '-'"></div>
            <div class="text-xs text-gray-400 mt-1">Best Overall Strategy</div>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <div class="text-2xl font-bold text-emerald-400" x-text="summary.avg_sharpe || '0'"></div>
            <div class="text-xs text-gray-400 mt-1">Avg Sharpe Ratio</div>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <div class="text-2xl font-bold text-red-400" x-text="(summary.avg_max_drawdown || '0') + '%'"></div>
            <div class="text-xs text-gray-400 mt-1">Avg Max Drawdown</div>
        </div>
    </div>

    <!-- Strategy Legend -->
    <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 mb-6">
        <div class="text-xs text-gray-400 mb-2 font-semibold">Strategy Legend</div>
        <div class="flex flex-wrap gap-3">
            <span class="inline-flex items-center gap-1.5 text-xs"><span class="w-2.5 h-2.5 rounded-full bg-blue-400"></span> SMA Crossover</span>
            <span class="inline-flex items-center gap-1.5 text-xs"><span class="w-2.5 h-2.5 rounded-full bg-purple-400"></span> RSI</span>
            <span class="inline-flex items-center gap-1.5 text-xs"><span class="w-2.5 h-2.5 rounded-full bg-emerald-400"></span> Breakout</span>
            <span class="inline-flex items-center gap-1.5 text-xs"><span class="w-2.5 h-2.5 rounded-full bg-amber-400"></span> Mean Reversion</span>
            <span class="inline-flex items-center gap-1.5 text-xs"><span class="w-2.5 h-2.5 rounded-full bg-koin-400"></span> Momentum</span>
        </div>
    </div>

    <!-- Global Performance -->
    <template x-if="summary.global_strategy_performance">
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-5 mb-6">
            <h3 class="text-sm font-semibold text-white mb-3">Global Avg Return by Strategy</h3>
            <div class="space-y-2">
                <template x-for="(name, idx) in ['sma_crossover','rsi','breakout','mean_reversion','momentum']" :key="name">
                    <div class="flex items-center gap-3">
                        <div class="w-28 text-xs text-gray-400 truncate" x-text="name.replace('_',' ')"></div>
                        <div class="flex-1 bg-gray-700 rounded-full h-4 overflow-hidden">
                            <div class="h-full rounded-full transition-all" :class="{'bg-blue-400':idx==0,'bg-purple-400':idx==1,'bg-emerald-400':idx==2,'bg-amber-400':idx==3,'bg-koin-400':idx==4}" :style="'width:'+Math.min(Math.max((summary.global_strategy_performance[name]+50)/100*100,2),100)+'%'"></div>
                        </div>
                        <div class="w-16 text-xs text-right" :class="summary.global_strategy_performance[name]>=0?'text-emerald-400':'text-red-400'" x-text="(summary.global_strategy_performance[name]>=0?'+':'')+summary.global_strategy_performance[name]+'%'"></div>
                    </div>
                </template>
            </div>
        </div>
    </template>

    <!-- Sort -->
    <div class="flex gap-3 mb-6">
        <select x-model="sortBy" class="bg-gray-800 border border-gray-700 text-sm text-white rounded-lg px-3 py-2">
            <option value="score">Composite Score</option>
            <option value="return">Best Return</option>
            <option value="drawdown">Lowest Drawdown</option>
        </select>
        <input type="text" x-model="search" placeholder="Search coin..." class="bg-gray-800 border border-gray-700 text-sm text-white rounded-lg px-3 py-2 flex-1">
    </div>

    <!-- Loading -->
    <template x-if="loading">
        <div class="flex justify-center py-20"><div class="animate-spin rounded-full h-10 w-10 border-b-2 border-koin-400"></div></div>
    </template>

    <!-- Error -->
    <template x-if="error">
        <div class="bg-red-500/10 border border-red-500/20 rounded-xl p-4 text-red-400 text-sm" x-text="error"></div>
    </template>

    <!-- Cards Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <template x-for="item in filtered" :key="item.symbol">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
                <!-- Header -->
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <span class="text-white font-semibold" x-text="item.symbol"></span>
                        <span class="text-gray-500 text-xs ml-1" x-text="item.name"></span>
                    </div>
                    <div class="text-xs font-bold px-2 py-1 rounded-full" :class="item.composite_score>=60?'bg-emerald-500/20 text-emerald-400':item.composite_score>=40?'bg-amber-500/20 text-amber-400':'bg-red-500/20 text-red-400'" x-text="item.composite_score+'/100'"></div>
                </div>

                <!-- Best Strategy Badge -->
                <div class="mb-3">
                    <span class="text-xs text-gray-400">Best:</span>
                    <span class="ml-1 text-xs font-semibold px-2 py-0.5 rounded-full bg-koin-500/20 text-koin-400" x-text="item.best_strategy?.replace('_',' ')"></span>
                    <span class="ml-2 text-xs" :class="item.best_return>=0?'text-emerald-400':'text-red-400'" x-text="(item.best_return>=0?'+':'')+item.best_return+'%'"></span>
                </div>

                <!-- Strategy Comparison Table -->
                <div class="overflow-x-auto">
                    <table class="w-full text-xs">
                        <thead><tr class="text-gray-500">
                            <th class="text-left py-1">Strategy</th>
                            <th class="text-right">Return</th>
                            <th class="text-right">WR</th>
                            <th class="text-right">Sharpe</th>
                            <th class="text-right">DD</th>
                        </tr></thead>
                        <tbody>
                            <template x-for="sn in ['sma_crossover','rsi','breakout','mean_reversion','momentum']" :key="sn">
                                <tr class="border-t border-gray-700/50" x-show="item.strategies && item.strategies[sn]">
                                    <td class="py-1 text-gray-300" x-text="sn.replace('_',' ')"></td>
                                    <td class="text-right" :class="item.strategies[sn]?.total_return>=0?'text-emerald-400':'text-red-400'" x-text="(item.strategies[sn]?.total_return>=0?'+':'')+item.strategies[sn]?.total_return+'%'"></td>
                                    <td class="text-right text-gray-300" x-text="item.strategies[sn]?.win_rate+'%'"></td>
                                    <td class="text-right text-gray-300" x-text="item.strategies[sn]?.sharpe_ratio"></td>
                                    <td class="text-right text-red-400" x-text="item.strategies[sn]?.max_drawdown+'%'"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>

                <!-- Insight -->
                <div class="mt-3 text-xs text-gray-500 italic" x-text="item.insight"></div>
            </div>
        </template>
    </div>

    <!-- Empty -->
    <template x-if="!loading && !error && filtered.length === 0">
        <div class="text-center py-16 text-gray-500">No results found</div>
    </template>
</div>

<script>
function strategyBacktesterApp() {
    return {
        loading: true, error: null,
        items: [], summary: {},
        search: '', sortBy: 'score',
        get filtered() {
            let arr = this.items;
            if (this.search) {
                const q = this.search.toLowerCase();
                arr = arr.filter(i => i.symbol.toLowerCase().includes(q) || (i.name||'').toLowerCase().includes(q));
            }
            if (this.sortBy === 'return') arr = [...arr].sort((a,b) => b.best_return - a.best_return);
            else if (this.sortBy === 'drawdown') arr = [...arr].sort((a,b) => a.best_max_drawdown - b.best_max_drawdown);
            else arr = [...arr].sort((a,b) => b.composite_score - a.composite_score);
            return arr;
        },
        async init() {
            try {
                const res = await fetch('/api/v1/market/strategy-backtester?asset_type={{ asset_mode }}');
                if (res.redirected) { window.location.href = res.url; return; }
                const json = await res.json();
                if (json.status === 'success') {
                    this.items = json.data.results || [];
                    this.summary = json.data;
                } else { this.error = json.message; }
            } catch (e) { this.error = e.message; }
            this.loading = false;
        }
    };
}
</script>
{% endblock %}