{% extends "base.html" %}
{% block title %}Signal Performance Tracker{% endblock %}

{% block content %}
<div x-data="signalPerformancePanel()" x-init="fetchData()" class="space-y-5">
    <!-- Header -->
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div class="flex items-center gap-3">
            <a href="{{ tools_base }}/" class="text-gray-500 hover:text-gray-300 transition">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-white flex items-center gap-2">
                    <svg class="w-6 h-6 text-teal-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/>
                    </svg>
                    Signal Performance Tracker
                </h1>
                <p class="text-sm text-gray-500 mt-0.5">Evaluasi akurasi sinyal trading — win rate, return, dan breakdown per strategi.</p>
            </div>
        </div>
        <button @click="fetchData()" :disabled="loading"
                class="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition"
                :class="loading ? 'bg-gray-800 text-gray-500 cursor-not-allowed' : 'bg-teal-600 hover:bg-teal-700 text-white'">
            <svg :class="loading && 'animate-spin'" 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
            <span x-text="loading ? 'Loading...' : 'Refresh'"></span>
        </button>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
        <div class="glass rounded-xl border border-teal-800 p-3">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Total Sinyal</p>
            <p class="text-xl font-bold text-white mt-1" x-text="summary ? summary.total_signals : '-'"></p>
        </div>
        <div class="glass rounded-xl border border-teal-800 p-3">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Terevaluasi</p>
            <p class="text-xl font-bold text-teal-400 mt-1" x-text="summary ? summary.evaluated_signals : '-'"></p>
        </div>
        <div class="glass rounded-xl border border-teal-800 p-3">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Win Rate</p>
            <p class="text-xl font-bold mt-1"
               :class="summary && summary.win_rate_pct >= 50 ? 'text-emerald-400' : 'text-red-400'"
               x-text="summary ? summary.win_rate_pct.toFixed(1) + '%' : '-'"></p>
        </div>
        <div class="glass rounded-xl border border-teal-800 p-3">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Avg Return</p>
            <p class="text-xl font-bold mt-1"
               :class="summary && summary.avg_return_pct >= 0 ? 'text-emerald-400' : 'text-red-400'"
               x-text="summary ? formatPercent(summary.avg_return_pct) : '-'"></p>
        </div>
        <div class="glass rounded-xl border border-teal-800 p-3">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Total P&L</p>
            <p class="text-xl font-bold mt-1"
               :class="summary && summary.total_pnl_pct >= 0 ? 'text-emerald-400' : 'text-red-400'"
               x-text="summary ? formatPercent(summary.total_pnl_pct) : '-'"></p>
        </div>
        <div class="glass rounded-xl border border-teal-800 p-3">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Best Return</p>
            <p class="text-xl font-bold text-emerald-400 mt-1"
               x-text="summary ? formatPercent(summary.best_return_pct) : '-'"></p>
        </div>
        <div class="glass rounded-xl border border-teal-800 p-3">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Worst Return</p>
            <p class="text-xl font-bold text-red-400 mt-1"
               x-text="summary ? formatPercent(summary.worst_return_pct) : '-'"></p>
        </div>
        <div class="glass rounded-xl border border-teal-800 p-3">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Top Akurasi</p>
            <p class="text-xl font-bold text-teal-400 mt-1"
               x-text="summary && summary.top_accurate_coins && summary.top_accurate_coins.length ? summary.top_accurate_coins[0].symbol + ' ' + summary.top_accurate_coins[0].win_rate.toFixed(0) + '%' : '-'"></p>
        </div>
    </div>

    <!-- Filters -->
    <div class="flex flex-wrap items-center gap-2">
        <!-- Days -->
        <div class="flex items-center gap-1">
            <span class="text-xs text-gray-500 mr-1">Periode:</span>
            <template x-for="d in [7, 14, 30, 60, 90]" :key="d">
                <button @click="days = d; fetchData()"
                        class="px-3 py-1 text-xs rounded-full transition"
                        :class="days === d ? 'bg-teal-600 text-white' : 'bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700'">
                    <span x-text="d + 'h'"></span>
                </button>
            </template>
        </div>

        <div class="w-px h-5 bg-gray-700 mx-1"></div>

        <!-- Signal Type -->
        <select x-model="filters.signal_type" @change="fetchData()"
                class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-300 focus:outline-none focus:ring-1 focus:ring-teal-500">
            <option value="all">Semua Sinyal</option>
            <option value="BUY">BUY</option>
            <option value="SELL">SELL</option>
            <option value="HOLD">HOLD</option>
        </select>

        <!-- Strategy -->
        <select x-model="filters.strategy" @change="fetchData()"
                class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-300 focus:outline-none focus:ring-1 focus:ring-teal-500">
            <option value="all">Semua Strategi</option>
            <option value="scalping">Scalping</option>
            <option value="swing">Swing</option>
            <option value="short_term">Short Term</option>
            <option value="medium_term">Medium Term</option>
            <option value="long_term">Long Term</option>
        </select>

        <!-- Asset Type -->
        <select x-model="filters.asset_type" @change="fetchData()"
                class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-300 focus:outline-none focus:ring-1 focus:ring-teal-500">
            <option value="all">Semua Aset</option>
            <option value="crypto">Kripto</option>
            <option value="stock">Saham IDX</option>
            <option value="stock_us">Saham US</option>
        </select>

        <!-- Outcome (history only) -->
        <select x-show="activeTab === 'history'" x-model="filters.outcome" @change="fetchHistory(1)"
                class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-300 focus:outline-none focus:ring-1 focus:ring-teal-500">
            <option value="all">Semua Outcome</option>
            <option value="win">Win</option>
            <option value="loss">Loss</option>
            <option value="breakeven">Breakeven</option>
        </select>

        <!-- Search -->
        <div class="relative ml-auto">
            <input type="text" x-model.debounce.400ms="searchQ" @input="fetchData()"
                   placeholder="Cari simbol..."
                   class="bg-gray-800 border border-gray-700 rounded-lg pl-8 pr-3 py-1.5 text-sm text-gray-300 w-40 focus:outline-none focus:ring-1 focus:ring-teal-500 focus:w-56 transition-all">
            <svg class="w-4 h-4 text-gray-500 absolute left-2.5 top-2" 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>
        </div>
    </div>

    <!-- Tab System -->
    <div class="flex items-center gap-1 border-b border-gray-800">
        <button @click="activeTab = 'summary'"
                class="px-4 py-2.5 text-sm font-medium transition border-b-2 -mb-px"
                :class="activeTab === 'summary' ? 'border-teal-500 text-teal-400' : 'border-transparent text-gray-500 hover:text-gray-300'">
            Summary
        </button>
        <button @click="activeTab = 'history'; if(!items.length) fetchHistory(1)"
                class="px-4 py-2.5 text-sm font-medium transition border-b-2 -mb-px"
                :class="activeTab === 'history' ? 'border-teal-500 text-teal-400' : 'border-transparent text-gray-500 hover:text-gray-300'">
            History
            <span x-show="total > 0" class="ml-1 text-xs opacity-60" x-text="'(' + total + ')'"></span>
        </button>
    </div>

    <!-- ===================== SUMMARY TAB ===================== -->
    <div x-show="activeTab === 'summary'" x-cloak>
        <!-- Loading -->
        <div x-show="loading" class="text-center py-12">
            <svg class="animate-spin h-8 w-8 text-teal-500 mx-auto mb-3" 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-sm text-gray-500">Memuat data performance...</p>
        </div>

        <!-- Empty State -->
        <div x-show="!loading && !summary" class="glass rounded-xl border border-gray-800 p-12 text-center">
            <svg class="w-16 h-16 text-gray-600 mx-auto mb-4" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/>
            </svg>
            <p class="text-gray-400 font-medium mb-2">Belum Ada Data Performance</p>
            <p class="text-sm text-gray-500 mb-4">Sinyal perlu di-generate dan dievaluasi terlebih dahulu melalui Pipeline Workflow.</p>
            <a href="/admin/workflow" class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition">
                <svg 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="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
                Buka Pipeline Workflow
            </a>
        </div>

        <!-- Summary Content -->
        <div x-show="!loading && summary" class="space-y-5">
            <!-- Breakdown Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- By Signal Type -->
                <div class="glass rounded-xl border border-teal-800 p-4">
                    <h3 class="text-sm font-semibold text-teal-400 uppercase tracking-wider mb-3">Per Tipe Sinyal</h3>
                    <div class="space-y-2">
                        <template x-for="item in (summary?.by_signal_type || [])" :key="item.label">
                            <div class="flex items-center gap-3">
                                <span class="text-xs font-bold w-10 text-right"
                                      :class="item.label === 'BUY' ? 'text-emerald-400' : item.label === 'SELL' ? 'text-red-400' : 'text-gray-400'"
                                      x-text="item.label"></span>
                                <div class="flex-1 h-2 bg-gray-800 rounded-full overflow-hidden">
                                    <div class="h-full rounded-full transition-all duration-500"
                                         :class="item.win_rate >= 60 ? 'bg-emerald-500' : item.win_rate >= 40 ? 'bg-amber-500' : 'bg-red-500'"
                                         :style="'width:' + Math.min(item.win_rate, 100) + '%'"></div>
                                </div>
                                <span class="text-xs text-gray-400 w-20 text-right" x-text="item.wins + '/' + item.total + ' (' + item.win_rate.toFixed(0) + '%)'"></span>
                                <span class="text-xs w-16 text-right"
                                      :class="item.avg_return >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                      x-text="formatPercent(item.avg_return)"></span>
                            </div>
                        </template>
                        <div x-show="!summary?.by_signal_type?.length" class="text-xs text-gray-600 text-center py-2">Belum ada data</div>
                    </div>
                </div>

                <!-- By Strategy -->
                <div class="glass rounded-xl border border-teal-800 p-4">
                    <h3 class="text-sm font-semibold text-teal-400 uppercase tracking-wider mb-3">Per Strategi</h3>
                    <div class="space-y-2">
                        <template x-for="item in (summary?.by_strategy || [])" :key="item.label">
                            <div class="flex items-center gap-3">
                                <span class="text-xs font-medium text-gray-300 w-20 text-right capitalize" x-text="item.label.replace('_', ' ')"></span>
                                <div class="flex-1 h-2 bg-gray-800 rounded-full overflow-hidden">
                                    <div class="h-full rounded-full transition-all duration-500"
                                         :class="item.win_rate >= 60 ? 'bg-teal-500' : item.win_rate >= 40 ? 'bg-amber-500' : 'bg-red-500'"
                                         :style="'width:' + Math.min(item.win_rate, 100) + '%'"></div>
                                </div>
                                <span class="text-xs text-gray-400 w-20 text-right" x-text="item.wins + '/' + item.total + ' (' + item.win_rate.toFixed(0) + '%)'"></span>
                                <span class="text-xs w-16 text-right"
                                      :class="item.avg_return >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                      x-text="formatPercent(item.avg_return)"></span>
                            </div>
                        </template>
                        <div x-show="!summary?.by_strategy?.length" class="text-xs text-gray-600 text-center py-2">Belum ada data</div>
                    </div>
                </div>

                <!-- By Confidence -->
                <div class="glass rounded-xl border border-teal-800 p-4">
                    <h3 class="text-sm font-semibold text-teal-400 uppercase tracking-wider mb-3">Per Confidence</h3>
                    <div class="space-y-2">
                        <template x-for="item in (summary?.by_confidence || [])" :key="item.label">
                            <div class="flex items-center gap-3">
                                <span class="text-xs font-medium w-14 text-right"
                                      :class="item.label === 'High' ? 'text-emerald-400' : item.label === 'Medium' ? 'text-amber-400' : 'text-gray-400'"
                                      x-text="item.label"></span>
                                <div class="flex-1 h-2 bg-gray-800 rounded-full overflow-hidden">
                                    <div class="h-full bg-teal-500 rounded-full transition-all duration-500"
                                         :style="'width:' + Math.min(item.win_rate, 100) + '%'"></div>
                                </div>
                                <span class="text-xs text-gray-400 w-20 text-right" x-text="item.wins + '/' + item.total + ' (' + item.win_rate.toFixed(0) + '%)'"></span>
                                <span class="text-xs w-16 text-right"
                                      :class="item.avg_return >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                      x-text="formatPercent(item.avg_return)"></span>
                            </div>
                        </template>
                        <div x-show="!summary?.by_confidence?.length" class="text-xs text-gray-600 text-center py-2">Belum ada data</div>
                    </div>
                </div>

                <!-- By Safety -->
                <div class="glass rounded-xl border border-teal-800 p-4">
                    <h3 class="text-sm font-semibold text-teal-400 uppercase tracking-wider mb-3">Per Safety Rating</h3>
                    <div class="space-y-2">
                        <template x-for="item in (summary?.by_safety || [])" :key="item.label">
                            <div class="flex items-center gap-3">
                                <span class="text-xs font-medium w-16 text-right"
                                      :class="item.label === 'SAFE' ? 'text-emerald-400' : item.label === 'RISKY' ? 'text-red-400' : 'text-amber-400'"
                                      x-text="item.label"></span>
                                <div class="flex-1 h-2 bg-gray-800 rounded-full overflow-hidden">
                                    <div class="h-full rounded-full transition-all duration-500"
                                         :class="item.label === 'SAFE' ? 'bg-emerald-500' : item.label === 'RISKY' ? 'bg-red-500' : 'bg-amber-500'"
                                         :style="'width:' + Math.min(item.win_rate, 100) + '%'"></div>
                                </div>
                                <span class="text-xs text-gray-400 w-20 text-right" x-text="item.wins + '/' + item.total + ' (' + item.win_rate.toFixed(0) + '%)'"></span>
                                <span class="text-xs w-16 text-right"
                                      :class="item.avg_return >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                      x-text="formatPercent(item.avg_return)"></span>
                            </div>
                        </template>
                        <div x-show="!summary?.by_safety?.length" class="text-xs text-gray-600 text-center py-2">Belum ada data</div>
                    </div>
                </div>
            </div>

            <!-- Daily Performance Mini Chart -->
            <div x-show="summary?.daily_performance?.length" class="glass rounded-xl border border-teal-800 p-4">
                <h3 class="text-sm font-semibold text-teal-400 uppercase tracking-wider mb-3">Performa Harian</h3>
                <div class="flex items-end gap-1 h-24 overflow-x-auto pb-1">
                    <template x-for="dp in (summary?.daily_performance || []).slice(-30)" :key="dp.date">
                        <div class="flex flex-col items-center gap-0.5 flex-shrink-0" style="min-width:20px">
                            <span class="text-[9px] font-mono"
                                  :class="dp.avg_return >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                  x-text="dp.avg_return >= 0 ? '+' : ''" x-show="false"></span>
                            <div class="w-3 rounded-sm transition-all duration-300"
                                 :class="dp.wins >= dp.total / 2 ? 'bg-teal-500/70' : 'bg-red-500/50'"
                                 :style="'height:' + Math.max(4, Math.min(80, dp.total * 8)) + 'px'"
                                 :title="dp.date + ': ' + dp.wins + '/' + dp.total + ' win, avg ' + (dp.avg_return >= 0 ? '+' : '') + dp.avg_return.toFixed(1) + '%'"></div>
                            <span class="text-[8px] text-gray-600 rotate-[-45deg] origin-top-left whitespace-nowrap"
                                  x-text="dp.date.slice(5)"></span>
                        </div>
                    </template>
                </div>
            </div>

            <!-- Top Accurate Coins -->
            <div x-show="summary?.top_accurate_coins?.length" class="glass rounded-xl border border-teal-800 p-4">
                <h3 class="text-sm font-semibold text-teal-400 uppercase tracking-wider mb-3">Top Akurasi Aset</h3>
                <div class="space-y-2">
                    <template x-for="(coin, idx) in (summary?.top_accurate_coins || []).slice(0, 10)" :key="coin.asset_id">
                        <div class="flex items-center gap-3 py-1">
                            <span class="text-xs text-gray-600 w-5 text-right font-mono" x-text="idx + 1"></span>
                            <!-- Icon -->
                            <img :src="coin.icon_thumb_url || (coin.asset_type==='stock' && coin.symbol ? __stockIconUrl(coin.symbol) : '')"
                                 :data-symbol="coin.symbol"
                                 class="w-8 h-8 rounded-full" loading="lazy" onerror="__iconError(this)"
                                 x-show="coin.icon_thumb_url || coin.asset_type==='stock'">
                            <span x-show="!coin.icon_thumb_url && coin.asset_type!=='stock'"
                                  class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-xs text-gray-400"
                                  x-text="(coin.symbol || '?')[0].toUpperCase()"></span>
                            <!-- Name -->
                            <div class="flex-1 min-w-0">
                                <p class="text-sm text-white font-medium truncate" x-text="coin.name || coin.symbol"></p>
                                <p class="text-xs text-gray-500" x-text="coin.symbol + ' &middot; ' + coin.total + ' sinyal'"></p>
                            </div>
                            <!-- Win Rate Bar -->
                            <div class="w-24 flex items-center gap-2">
                                <div class="flex-1 h-1.5 bg-gray-800 rounded-full overflow-hidden">
                                    <div class="h-full bg-teal-500 rounded-full" :style="'width:' + Math.min(coin.win_rate, 100) + '%'"></div>
                                </div>
                                <span class="text-xs font-bold text-teal-400 w-10 text-right" x-text="coin.win_rate.toFixed(0) + '%'"></span>
                            </div>
                            <!-- Avg Return -->
                            <span class="text-xs font-medium w-16 text-right"
                                  :class="coin.avg_return >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                  x-text="formatPercent(coin.avg_return)"></span>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>

    <!-- ===================== HISTORY TAB ===================== -->
    <div x-show="activeTab === 'history'" x-cloak>
        <!-- Loading -->
        <div x-show="loading && !items.length" class="text-center py-12">
            <svg class="animate-spin h-8 w-8 text-teal-500 mx-auto mb-3" 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-sm text-gray-500">Memuat riwayat sinyal...</p>
        </div>

        <!-- Sort (history) -->
        <div x-show="items.length" class="flex items-center gap-2 mb-3">
            <span class="text-xs text-gray-500">Urutkan:</span>
            <template x-for="s in [{k:'date',l:'Tanggal'},{k:'return',l:'Return'},{k:'score',l:'Skor'}]" :key="s.k">
                <button @click="sortBy = s.k; fetchHistory(1)"
                        class="px-3 py-1 text-xs rounded-full transition"
                        :class="sortBy === s.k ? 'bg-teal-600 text-white' : 'bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700'"
                        x-text="s.l"></button>
            </template>
        </div>

        <!-- Empty State -->
        <div x-show="!loading && !items.length" class="glass rounded-xl border border-gray-800 p-12 text-center">
            <svg class="w-16 h-16 text-gray-600 mx-auto mb-4" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>
            </svg>
            <p class="text-gray-400 font-medium mb-2">Belum Ada Riwayat Sinyal</p>
            <p class="text-sm text-gray-500">Sinyal yang sudah dievaluasi akan muncul di sini.</p>
        </div>

        <!-- History Cards -->
        <div x-show="items.length" class="space-y-2">
            <template x-for="item in items" :key="item.id">
                <div class="glass rounded-xl border border-gray-800 p-4 hover:border-gray-700 transition">
                    <div class="flex items-center gap-3">
                        <!-- Icon -->
                        <img :src="item.icon_thumb_url || (item.asset_type==='stock' && item.symbol ? __stockIconUrl(item.symbol) : '')"
                             :data-symbol="item.symbol"
                             class="w-8 h-8 rounded-full" loading="lazy" onerror="__iconError(this)"
                             x-show="item.icon_thumb_url || item.asset_type==='stock'">
                        <span x-show="!item.icon_thumb_url && item.asset_type!=='stock'"
                              class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-xs text-gray-400"
                              x-text="(item.symbol || '?')[0].toUpperCase()"></span>

                        <!-- Info -->
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 flex-wrap">
                                <span class="text-sm font-bold text-white" x-text="item.symbol"></span>
                                <span class="text-xs text-gray-500 truncate" x-text="item.name"></span>
                            </div>
                            <div class="flex items-center gap-2 mt-0.5 flex-wrap">
                                <!-- Signal Badge -->
                                <span class="text-[10px] px-1.5 py-0.5 rounded font-bold"
                                      :class="item.signal_type === 'BUY' ? 'bg-emerald-900/50 text-emerald-400' : item.signal_type === 'SELL' ? 'bg-red-900/50 text-red-400' : 'bg-gray-800 text-gray-400'"
                                      x-text="item.signal_type"></span>
                                <!-- Confidence -->
                                <span class="text-[10px] px-1.5 py-0.5 rounded"
                                      :class="item.confidence === 'High' ? 'bg-emerald-900/30 text-emerald-400' : item.confidence === 'Medium' ? 'bg-amber-900/30 text-amber-400' : 'bg-gray-800 text-gray-500'"
                                      x-text="item.confidence"></span>
                                <!-- Strategy -->
                                <span class="text-[10px] text-gray-500 capitalize" x-text="(item.strategy || '').replace('_', ' ')"></span>
                                <!-- Safety -->
                                <span class="text-[10px] px-1.5 py-0.5 rounded"
                                      :class="item.safety_rating === 'SAFE' ? 'bg-emerald-900/20 text-emerald-500' : item.safety_rating === 'RISKY' ? 'bg-red-900/20 text-red-500' : 'bg-amber-900/20 text-amber-500'"
                                      x-text="item.safety_rating" x-show="item.safety_rating"></span>
                            </div>
                        </div>

                        <!-- Prices -->
                        <div class="hidden md:flex flex-col items-end text-xs text-gray-400 gap-0.5">
                            <span>Entry: <span class="text-white font-mono" x-text="formatNumber(item.entry_price)"></span></span>
                            <span>SL: <span class="text-red-400 font-mono" x-text="formatNumber(item.stop_loss)"></span></span>
                            <span>TP1: <span class="text-emerald-400 font-mono" x-text="formatNumber(item.take_profit_1)"></span></span>
                        </div>

                        <!-- Score -->
                        <div class="text-center px-2">
                            <p class="text-lg font-bold text-white" x-text="item.score ? item.score.toFixed(0) : '-'"></p>
                            <p class="text-[10px] text-gray-500 uppercase">Skor</p>
                        </div>

                        <!-- Outcome -->
                        <div class="text-center min-w-[72px]">
                            <span class="inline-block px-2.5 py-1 rounded-lg text-xs font-bold border"
                                  :class="outcomeColor(item.actual_outcome)"
                                  x-text="(item.actual_outcome || item.status || 'pending').toUpperCase()"></span>
                            <p class="text-xs font-mono mt-1"
                               :class="item.actual_return_pct != null && item.actual_return_pct >= 0 ? 'text-emerald-400' : 'text-red-400'"
                               x-text="item.actual_return_pct != null ? formatPercent(item.actual_return_pct) : '-'"></p>
                        </div>

                        <!-- Date -->
                        <div class="hidden sm:block text-right">
                            <p class="text-xs text-gray-500" x-text="formatDate(item.created_at)"></p>
                        </div>
                    </div>
                </div>
            </template>
        </div>

        <!-- Load More -->
        <div x-show="hasMore && items.length" class="text-center mt-4">
            <button @click="loadMore()" :disabled="loadingMore"
                    class="px-6 py-2 text-sm font-medium rounded-lg transition"
                    :class="loadingMore ? 'bg-gray-800 text-gray-500 cursor-not-allowed' : 'bg-teal-900/50 text-teal-400 hover:bg-teal-900 border border-teal-800'">
                <span x-show="!loadingMore">Muat Lebih Banyak</span>
                <span x-show="loadingMore" class="flex items-center gap-2 justify-center">
                    <svg class="animate-spin h-4 w-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>
                    Memuat...
                </span>
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function signalPerformancePanel() {
    return {
        // State
        items: [],
        loading: false,
        loadingMore: false,
        total: 0,
        hasMore: false,
        page: 1,
        activeTab: 'summary',
        summary: null,
        filters: {
            asset_type: '{{ asset_mode }}',
            strategy: 'all',
            signal_type: 'all',
            outcome: 'all'
        },
        days: 30,
        sortBy: 'date',
        searchQ: '',

        // ── Core Methods ──────────────────────────────────
        async fetchData() {
            this.loading = true;
            await Promise.all([
                this.fetchSummary(),
                this.fetchHistory(1)
            ]);
            this.loading = false;
        },

        async fetchSummary() {
            try {
                const params = new URLSearchParams({
                    asset_type: this.filters.asset_type,
                    strategy: this.filters.strategy,
                    signal_type: this.filters.signal_type,
                    days: this.days
                });
                if (this.searchQ) params.set('q', this.searchQ);
                const res = await fetch('/api/v1/market/screener/signal-performance?' + params);
                if (res.redirected) { window.location.href = '/auth/login'; return; }
                if (res.ok) {
                    const data = await res.json();
                    this.summary = data;
                } else {
                    this.summary = null;
                }
            } catch (e) {
                console.error('fetchSummary error:', e);
                this.summary = null;
            }
        },

        async fetchHistory(page) {
            try {
                this.page = page;
                const params = new URLSearchParams({
                    sort: this.sortBy,
                    limit: 20,
                    page: page,
                    asset_type: this.filters.asset_type,
                    strategy: this.filters.strategy,
                    outcome: this.filters.outcome
                });
                if (this.searchQ) params.set('q', this.searchQ);
                const res = await fetch('/api/v1/market/screener/signal-performance/history?' + params);
                if (res.redirected) { window.location.href = '/auth/login'; return; }
                if (res.ok) {
                    const data = await res.json();
                    if (page === 1) {
                        this.items = data.items || [];
                    } else {
                        this.items = this.items.concat(data.items || []);
                    }
                    this.total = data.total || 0;
                    this.hasMore = data.has_more || false;
                } else {
                    if (page === 1) this.items = [];
                }
            } catch (e) {
                console.error('fetchHistory error:', e);
                if (page === 1) this.items = [];
            }
        },

        async loadMore() {
            if (this.loadingMore || !this.hasMore) return;
            this.loadingMore = true;
            await this.fetchHistory(this.page + 1);
            this.loadingMore = false;
        },

        // ── Helpers ───────────────────────────────────────
        outcomeColor(outcome) {
            const map = {
                win: 'text-emerald-400 bg-emerald-900/30 border-emerald-800',
                loss: 'text-red-400 bg-red-900/30 border-red-800',
                breakeven: 'text-gray-400 bg-gray-800 border-gray-700'
            };
            return map[outcome] || 'text-gray-500 bg-gray-800/50 border-gray-700';
        },

        formatNumber(n) {
            if (n == null) return '-';
            if (Math.abs(n) >= 1) {
                return n.toLocaleString('id-ID', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
            }
            return n.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 6 });
        },

        formatPercent(n) {
            if (n == null) return '-';
            return (n >= 0 ? '+' : '') + n.toFixed(2) + '%';
        },

        formatDate(iso) {
            if (!iso) return '-';
            try {
                const d = new Date(iso);
                return d.toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' })
                     + ' ' + d.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
            } catch { return iso; }
        }
    };
}
</script>
{% endblock %}