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

{% block content %}
<div x-data="signalOrchestrator()" 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-emerald-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
                Signal Orchestrator
            </h1>
            <p class="text-sm text-gray-400 mt-1">Master strategy aggregation — unified signal scoring across all engines</p>
        </div>
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-500" x-text="lastRefresh ? 'Updated: ' + lastRefresh : ''"></span>
            <button @click="loadData()" :disabled="loading"
                    class="px-4 py-2 bg-emerald-700 hover:bg-emerald-600 text-white rounded-lg text-sm font-medium transition disabled:opacity-50">
                <span x-show="!loading">Refresh</span>
                <span x-show="loading" class="flex items-center gap-1">
                    <svg 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>
                    Loading
                </span>
            </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">
        <span x-text="error"></span>
    </div>

    <!-- Loading State -->
    <div x-show="loading && items.length === 0" x-cloak class="text-center py-16">
        <svg class="animate-spin h-10 w-10 text-emerald-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">Orchestrating signals across all engines...</p>
    </div>

    <!-- Top Pick Hero Card -->
    <template x-if="topPick != null">
        <div class="bg-gradient-to-br from-emerald-900/40 via-gray-800 to-gray-900 border border-emerald-700/50 rounded-2xl p-6 relative overflow-hidden">
            <div class="absolute top-3 right-4 text-xs font-bold text-emerald-400 uppercase tracking-widest">Top Pick</div>
            <div class="flex flex-col md:flex-row items-start md:items-center gap-6">
                <!-- Circular Gauge -->
                <div class="relative w-28 h-28 flex-shrink-0">
                    <svg class="w-28 h-28 transform -rotate-90" viewBox="0 0 120 120">
                        <circle cx="60" cy="60" r="50" stroke="#374151" stroke-width="10" fill="none"/>
                        <circle cx="60" cy="60" r="50" stroke-width="10" fill="none"
                                :stroke="topPick.master_score >= 70 ? '#10b981' : topPick.master_score >= 40 ? '#f59e0b' : '#ef4444'"
                                stroke-linecap="round"
                                :stroke-dasharray="(topPick.master_score / 100 * 314.16) + ' 314.16'"/>
                    </svg>
                    <div class="absolute inset-0 flex flex-col items-center justify-center">
                        <span class="text-2xl font-black text-white" x-text="(topPick.master_score || 0).toFixed(0)"></span>
                        <span class="text-[10px] text-gray-400 uppercase">Score</span>
                    </div>
                </div>
                <!-- Symbol + Details -->
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-3 mb-2">
                        <span class="text-3xl font-black text-white" x-text="topPick.symbol || '-'"></span>
                        <span class="px-3 py-1 rounded-full text-sm font-bold"
                              :class="signalBadge(topPick.master_signal)" x-text="(topPick.master_signal || '-').replace('_', ' ')"></span>
                        <span class="px-2 py-0.5 rounded-full text-xs font-semibold"
                              :class="convictionBadge(topPick.conviction)" x-text="topPick.conviction || '-'"></span>
                    </div>
                    <p class="text-sm text-gray-300 mb-3" x-text="topPick.recommended_action || '-'"></p>
                    <div class="flex flex-wrap gap-4 text-sm">
                        <div>
                            <span class="text-gray-500">Position Size:</span>
                            <span class="text-emerald-400 font-bold ml-1" x-text="(topPick.position_size_pct != null ? topPick.position_size_pct.toFixed(1) + '%' : '-')"></span>
                        </div>
                        <div>
                            <span class="text-gray-500">Agreement:</span>
                            <span class="text-white font-bold ml-1" x-text="(topPick.agreement_pct != null ? topPick.agreement_pct.toFixed(0) + '%' : '-')"></span>
                        </div>
                        <div>
                            <span class="text-gray-500">Active Signals:</span>
                            <span class="text-white font-bold ml-1" x-text="topPick.active_signals || '-'"></span>
                        </div>
                        <div>
                            <span class="text-gray-500">Divergences:</span>
                            <span class="text-amber-400 font-bold ml-1" x-text="topPick.divergences || 0"></span>
                        </div>
                    </div>
                    <!-- Mini Factor Bars for Hero -->
                    <div class="grid grid-cols-5 gap-3 mt-4">
                        <template x-for="factor in ['technical', 'ml', 'fundamental', 'sentiment', 'risk']" :key="factor">
                            <div>
                                <div class="flex justify-between text-[10px] mb-1">
                                    <span class="text-gray-400 capitalize" x-text="factor"></span>
                                    <span class="text-gray-300" x-text="(topPick[factor + '_score'] != null ? topPick[factor + '_score'].toFixed(0) : '-')"></span>
                                </div>
                                <div class="w-full bg-gray-700 rounded-full h-1.5">
                                    <div class="h-1.5 rounded-full bg-emerald-500 transition-all" :style="'width:' + (topPick[factor + '_score'] || 0) + '%'"></div>
                                </div>
                            </div>
                        </template>
                    </div>
                    <!-- Top Reasons for Hero -->
                    <div class="mt-3 flex flex-wrap gap-1.5">
                        <template x-for="(reason, ri) in (topPick.top_reasons || []).slice(0, 5)" :key="ri">
                            <span class="px-2 py-0.5 bg-emerald-900/30 border border-emerald-800/40 rounded text-[10px] text-emerald-300" x-text="reason"></span>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- Summary Cards -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
            <div class="text-xs text-gray-400 uppercase tracking-wider">Total Analyzed</div>
            <div class="text-2xl font-bold text-white mt-1" x-text="items.length"></div>
        </div>
        <div class="bg-gray-800 border border-emerald-700/30 rounded-xl p-4">
            <div class="text-xs text-gray-400 uppercase tracking-wider">Strong Buys</div>
            <div class="flex items-center gap-2 mt-1">
                <div class="text-2xl font-bold text-emerald-400" x-text="strongBuys"></div>
                <span x-show="strongBuys > 0" class="relative flex h-2.5 w-2.5">
                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                    <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
                </span>
            </div>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
            <div class="text-xs text-gray-400 uppercase tracking-wider">Avg Master Score</div>
            <div class="text-2xl font-bold text-white mt-1" x-text="avgScore.toFixed(1)"></div>
        </div>
        <div class="bg-gray-800 border border-emerald-700/30 rounded-xl p-4">
            <div class="text-xs text-gray-400 uppercase tracking-wider">Top Pick</div>
            <div class="text-2xl font-bold text-emerald-400 mt-1" x-text="topPick?.symbol || '-'"></div>
        </div>
    </div>

    <!-- Signal Distribution -->
    <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">Signal Distribution</h3>
        <div class="grid grid-cols-5 gap-3">
            <div class="text-center p-3 rounded-lg bg-emerald-900/20 border border-emerald-800/30">
                <div class="text-lg font-bold text-emerald-400" x-text="signalDist.STRONG_BUY || 0"></div>
                <div class="text-[10px] text-gray-400 mt-1">STRONG BUY</div>
            </div>
            <div class="text-center p-3 rounded-lg bg-green-900/20 border border-green-800/30">
                <div class="text-lg font-bold text-green-400" x-text="signalDist.BUY || 0"></div>
                <div class="text-[10px] text-gray-400 mt-1">BUY</div>
            </div>
            <div class="text-center p-3 rounded-lg bg-gray-800/50 border border-gray-700">
                <div class="text-lg font-bold text-gray-400" x-text="signalDist.NEUTRAL || 0"></div>
                <div class="text-[10px] text-gray-400 mt-1">NEUTRAL</div>
            </div>
            <div class="text-center p-3 rounded-lg bg-orange-900/20 border border-orange-800/30">
                <div class="text-lg font-bold text-orange-400" x-text="signalDist.SELL || 0"></div>
                <div class="text-[10px] text-gray-400 mt-1">SELL</div>
            </div>
            <div class="text-center p-3 rounded-lg bg-red-900/20 border border-red-800/30">
                <div class="text-lg font-bold text-red-400" x-text="signalDist.STRONG_SELL || 0"></div>
                <div class="text-[10px] text-gray-400 mt-1">STRONG SELL</div>
            </div>
        </div>
        <!-- Stacked bar distribution -->
        <div class="flex h-3 rounded-full overflow-hidden mt-4 bg-gray-700" x-show="items.length > 0">
            <div class="h-full bg-emerald-500 transition-all" :style="'width:' + ((signalDist.STRONG_BUY || 0) / items.length * 100) + '%'"></div>
            <div class="h-full bg-green-500 transition-all" :style="'width:' + ((signalDist.BUY || 0) / items.length * 100) + '%'"></div>
            <div class="h-full bg-gray-500 transition-all" :style="'width:' + ((signalDist.NEUTRAL || 0) / items.length * 100) + '%'"></div>
            <div class="h-full bg-orange-500 transition-all" :style="'width:' + ((signalDist.SELL || 0) / items.length * 100) + '%'"></div>
            <div class="h-full bg-red-500 transition-all" :style="'width:' + ((signalDist.STRONG_SELL || 0) / items.length * 100) + '%'"></div>
        </div>
    </div>

    <!-- Conviction Distribution -->
    <div class="grid grid-cols-3 gap-4">
        <div class="bg-gray-800 border border-emerald-700/30 rounded-xl p-4 text-center">
            <div class="text-xs text-gray-400 uppercase tracking-wider mb-1">High Conviction</div>
            <div class="text-2xl font-bold text-emerald-400" x-text="convDist.HIGH || 0"></div>
            <div class="w-full bg-gray-700 rounded-full h-1.5 mt-2">
                <div class="h-1.5 rounded-full bg-emerald-500 transition-all" :style="'width:' + (items.length ? ((convDist.HIGH || 0) / items.length * 100) : 0) + '%'"></div>
            </div>
        </div>
        <div class="bg-gray-800 border border-yellow-700/30 rounded-xl p-4 text-center">
            <div class="text-xs text-gray-400 uppercase tracking-wider mb-1">Medium Conviction</div>
            <div class="text-2xl font-bold text-yellow-400" x-text="convDist.MEDIUM || 0"></div>
            <div class="w-full bg-gray-700 rounded-full h-1.5 mt-2">
                <div class="h-1.5 rounded-full bg-yellow-500 transition-all" :style="'width:' + (items.length ? ((convDist.MEDIUM || 0) / items.length * 100) : 0) + '%'"></div>
            </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 mb-1">Low Conviction</div>
            <div class="text-2xl font-bold text-gray-400" x-text="convDist.LOW || 0"></div>
            <div class="w-full bg-gray-700 rounded-full h-1.5 mt-2">
                <div class="h-1.5 rounded-full bg-gray-500 transition-all" :style="'width:' + (items.length ? ((convDist.LOW || 0) / items.length * 100) : 0) + '%'"></div>
            </div>
        </div>
    </div>

    <!-- Search & Filter -->
    <div class="flex flex-col sm:flex-row gap-3">
        <div class="relative flex-1">
            <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 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-emerald-500">
        </div>
        <select x-model="filterSignal" class="bg-gray-800 border border-gray-700 text-gray-300 text-sm rounded-lg px-3 py-2">
            <option value="">All Signals</option>
            <option value="STRONG_BUY">Strong Buy</option>
            <option value="BUY">Buy</option>
            <option value="NEUTRAL">Neutral</option>
            <option value="SELL">Sell</option>
            <option value="STRONG_SELL">Strong Sell</option>
        </select>
        <select x-model="filterConviction" class="bg-gray-800 border border-gray-700 text-gray-300 text-sm rounded-lg px-3 py-2">
            <option value="">All Convictions</option>
            <option value="HIGH">High</option>
            <option value="MEDIUM">Medium</option>
            <option value="LOW">Low</option>
        </select>
    </div>

    <!-- Results Count -->
    <div class="text-xs text-gray-500" x-show="items.length > 0">
        Showing <span class="text-gray-300 font-medium" x-text="filteredItems.length"></span> of <span class="text-gray-300" x-text="items.length"></span> assets
    </div>

    <!-- Data Table -->
    <div x-show="!loading || items.length > 0" x-cloak class="bg-gray-800 border border-gray-700 rounded-xl overflow-hidden">
        <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 cursor-pointer hover:text-white" @click="toggleSort('master_score')">
                            Master Score
                            <span x-show="sortKey === 'master_score'" x-text="sortDir === 'desc' ? ' &#9660;' : ' &#9650;'"></span>
                        </th>
                        <th class="px-4 py-3 text-left font-medium">Signal</th>
                        <th class="px-4 py-3 text-left font-medium">Conviction</th>
                        <th class="px-4 py-3 text-center font-medium cursor-pointer hover:text-white" @click="toggleSort('agreement_pct')">
                            Agreement %
                            <span x-show="sortKey === 'agreement_pct'" x-text="sortDir === 'desc' ? ' &#9660;' : ' &#9650;'"></span>
                        </th>
                        <th class="px-4 py-3 text-center font-medium">Technical</th>
                        <th class="px-4 py-3 text-center font-medium">ML</th>
                        <th class="px-4 py-3 text-center font-medium">Fundamental</th>
                        <th class="px-4 py-3 text-center font-medium">Sentiment</th>
                        <th class="px-4 py-3 text-center font-medium">Risk</th>
                        <th class="px-4 py-3 text-center font-medium">Signals</th>
                        <th class="px-4 py-3 text-center font-medium cursor-pointer hover:text-white" @click="toggleSort('position_size_pct')">
                            Pos Size %
                            <span x-show="sortKey === 'position_size_pct'" x-text="sortDir === 'desc' ? ' &#9660;' : ' &#9650;'"></span>
                        </th>
                        <th class="px-4 py-3 text-center font-medium">Diverge</th>
                        <th class="px-4 py-3 text-left font-medium">Top Reasons</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="(item, idx) in filteredItems" :key="item.symbol || idx">
                        <tr class="border-b border-gray-700/50 hover:bg-gray-750 transition"
                            :class="idx === 0 && !search && !filterSignal && !filterConviction ? 'bg-emerald-900/10' : ''">
                            <td class="px-4 py-3 text-gray-500 text-xs" x-text="idx + 1"></td>
                            <td class="px-4 py-3">
                                <a :href="'/market/assets/' + (item.asset_id || item.symbol)"
                                   class="text-white font-bold hover:text-emerald-400 transition" x-text="item.symbol || '-'"></a>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-2 min-w-[120px]">
                                    <div class="flex-1 bg-gray-700 rounded-full h-2">
                                        <div class="h-2 rounded-full bg-koin-500 transition-all" :style="'width:' + (item.master_score || 0) + '%'"></div>
                                    </div>
                                    <span class="text-white font-bold text-xs w-8 text-right" x-text="(item.master_score || 0).toFixed(0)"></span>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <span class="px-2 py-0.5 rounded-full text-xs font-semibold"
                                      :class="signalBadge(item.master_signal)" x-text="(item.master_signal || '-').replace('_', ' ')"></span>
                            </td>
                            <td class="px-4 py-3">
                                <span class="px-2 py-0.5 rounded-full text-xs font-semibold"
                                      :class="convictionBadge(item.conviction)" x-text="item.conviction || '-'"></span>
                            </td>
                            <td class="px-4 py-3 text-center text-gray-300" x-text="item.agreement_pct != null ? item.agreement_pct.toFixed(0) + '%' : '-'"></td>
                            <td class="px-4 py-3">
                                <div class="w-12 mx-auto bg-gray-700 rounded-full h-1.5" :title="'Technical: ' + (item.technical_score || 0).toFixed(0)">
                                    <div class="h-1.5 rounded-full bg-blue-400" :style="'width:' + (item.technical_score || 0) + '%'"></div>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <div class="w-12 mx-auto bg-gray-700 rounded-full h-1.5" :title="'ML: ' + (item.ml_score || 0).toFixed(0)">
                                    <div class="h-1.5 rounded-full bg-purple-400" :style="'width:' + (item.ml_score || 0) + '%'"></div>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <div class="w-12 mx-auto bg-gray-700 rounded-full h-1.5" :title="'Fundamental: ' + (item.fundamental_score || 0).toFixed(0)">
                                    <div class="h-1.5 rounded-full bg-amber-400" :style="'width:' + (item.fundamental_score || 0) + '%'"></div>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <div class="w-12 mx-auto bg-gray-700 rounded-full h-1.5" :title="'Sentiment: ' + (item.sentiment_score || 0).toFixed(0)">
                                    <div class="h-1.5 rounded-full bg-cyan-400" :style="'width:' + (item.sentiment_score || 0) + '%'"></div>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <div class="w-12 mx-auto bg-gray-700 rounded-full h-1.5" :title="'Risk: ' + (item.risk_score || 0).toFixed(0)">
                                    <div class="h-1.5 rounded-full bg-rose-400" :style="'width:' + (item.risk_score || 0) + '%'"></div>
                                </div>
                            </td>
                            <td class="px-4 py-3 text-center text-gray-300" x-text="item.active_signals || '-'"></td>
                            <td class="px-4 py-3 text-center font-medium"
                                :class="(item.position_size_pct || 0) >= 5 ? 'text-emerald-400' : 'text-gray-400'"
                                x-text="item.position_size_pct != null ? item.position_size_pct.toFixed(1) + '%' : '-'"></td>
                            <td class="px-4 py-3 text-center"
                                :class="(item.divergences || 0) > 0 ? 'text-amber-400' : 'text-gray-600'"
                                x-text="item.divergences || 0"></td>
                            <td class="px-4 py-3 text-xs text-gray-400 max-w-[200px]">
                                <div class="flex flex-wrap gap-1">
                                    <template x-for="(reason, ri) in (item.top_reasons || []).slice(0, 3)" :key="ri">
                                        <span class="px-1.5 py-0.5 bg-gray-700 rounded text-[10px] text-gray-300" x-text="reason"></span>
                                    </template>
                                    <span x-show="(item.top_reasons || []).length === 0" class="text-gray-600">-</span>
                                </div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
        <!-- Empty -->
        <div x-show="!loading && filteredItems.length === 0" class="text-center py-10">
            <svg class="w-12 h-12 text-gray-700 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <p class="text-gray-500">No signals matching your filters</p>
        </div>
    </div>
</div>

<script>
function signalOrchestrator() {
    return {
        items: [],
        topPick: null,
        loading: false,
        error: '',
        lastRefresh: null,
        search: '',
        filterSignal: '',
        filterConviction: '',
        sortKey: 'master_score',
        sortDir: 'desc',

        get strongBuys() {
            return this.items.filter(i => i.master_signal === 'STRONG_BUY').length;
        },

        get avgScore() {
            if (this.items.length === 0) return 0;
            return this.items.reduce((s, i) => s + (i.master_score || 0), 0) / this.items.length;
        },

        get signalDist() {
            const dist = { STRONG_BUY: 0, BUY: 0, NEUTRAL: 0, SELL: 0, STRONG_SELL: 0 };
            this.items.forEach(i => {
                const sig = i.master_signal || 'NEUTRAL';
                if (dist.hasOwnProperty(sig)) dist[sig]++;
                else dist.NEUTRAL++;
            });
            return dist;
        },

        get convDist() {
            const dist = { HIGH: 0, MEDIUM: 0, LOW: 0 };
            this.items.forEach(i => {
                const c = i.conviction || 'LOW';
                if (dist.hasOwnProperty(c)) dist[c]++;
                else dist.LOW++;
            });
            return dist;
        },

        get filteredItems() {
            let list = [...this.items];
            if (this.search) {
                const q = this.search.toUpperCase();
                list = list.filter(i => (i.symbol || '').toUpperCase().includes(q));
            }
            if (this.filterSignal) {
                list = list.filter(i => i.master_signal === this.filterSignal);
            }
            if (this.filterConviction) {
                list = list.filter(i => i.conviction === this.filterConviction);
            }
            list.sort((a, b) => {
                const av = a[this.sortKey] || 0;
                const bv = b[this.sortKey] || 0;
                return this.sortDir === 'desc' ? bv - av : av - bv;
            });
            return list;
        },

        toggleSort(key) {
            if (this.sortKey === key) {
                this.sortDir = this.sortDir === 'desc' ? 'asc' : 'desc';
            } else {
                this.sortKey = key;
                this.sortDir = 'desc';
            }
        },

        signalBadge(signal) {
            const map = {
                'STRONG_BUY': 'bg-emerald-900/50 text-emerald-300',
                'BUY': 'bg-green-900/50 text-green-300',
                'NEUTRAL': 'bg-gray-700/50 text-gray-300',
                'SELL': 'bg-orange-900/50 text-orange-300',
                'STRONG_SELL': 'bg-red-900/50 text-red-300',
            };
            return map[signal] || 'bg-gray-700/50 text-gray-400';
        },

        convictionBadge(conv) {
            const map = {
                'HIGH': 'bg-emerald-900/50 text-emerald-300',
                'MEDIUM': 'bg-yellow-900/50 text-yellow-300',
                'LOW': 'bg-gray-700/50 text-gray-400',
            };
            return map[conv] || 'bg-gray-700/50 text-gray-400';
        },

        async loadData() {
            this.loading = true;
            this.error = '';
            try {
                const r = await fetch(`/api/v1/market/signal-orchestrator?limit=50&asset_type={{ asset_mode }}`);
                if (r.redirected) { window.location.href = '/auth/login'; return; }
                const data = await r.json();
                if (data.error) { this.error = data.error; this.loading = false; return; }
                this.items = data.items || data.results || [];
                this.items.sort((a, b) => (b.master_score || 0) - (a.master_score || 0));
                this.topPick = this.items.length > 0 ? this.items[0] : null;
                this.lastRefresh = new Date().toLocaleTimeString('id-ID');
            } catch (e) {
                this.error = 'Failed to load data: ' + e.message;
            }
            this.loading = false;
        }
    };
}
</script>
{% endblock %}