{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}

{% block content %}
<div x-data="dashboardCommand()" x-init="loadAll()" 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-3">
                <div class="p-2 bg-koin-600/20 rounded-xl">
                    <svg class="w-6 h-6 text-koin-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"/></svg>
                </div>
                Trading Command Center
            </h1>
            <p class="mt-1 text-sm text-gray-400">Profit monitoring, opportunities &amp; market intelligence</p>
        </div>
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-500" x-text="lastRefresh ? 'Updated ' + lastRefresh : ''"></span>
            <button @click="loadAll()" :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-koin-600 hover:bg-koin-500 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>
    </div>

    <!-- ═══ LOADING SKELETON ═══ -->
    <template x-if="loading && !d.wealth_snapshot">
        <div class="space-y-6">
            <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
                <template x-for="i in 5" :key="'sk-'+i">
                    <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 animate-pulse">
                        <div class="h-3 bg-gray-800 rounded w-20 mb-3"></div>
                        <div class="h-7 bg-gray-800 rounded w-28"></div>
                    </div>
                </template>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-gray-900 border border-gray-800 rounded-xl h-52 animate-pulse"></div>
                <div class="bg-gray-900 border border-gray-800 rounded-xl h-52 animate-pulse"></div>
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <div class="bg-gray-900 border border-gray-800 rounded-xl h-64 animate-pulse"></div>
                <div class="bg-gray-900 border border-gray-800 rounded-xl h-64 animate-pulse"></div>
            </div>
        </div>
    </template>

    <!-- ═══ ERROR STATE ═══ -->
    <template x-if="error && !loading">
        <div class="bg-red-900/30 border border-red-700/50 rounded-xl p-4 flex items-center gap-3">
            <svg class="w-5 h-5 text-red-400 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h-14.71c-1.73 0-2.813-1.874-1.948-3.374L10.05 3.378c.866-1.5 3.032-1.5 3.898 0L21.303 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
            <div>
                <p class="text-sm text-red-300 font-medium">Failed to load dashboard</p>
                <p class="text-xs text-red-400 mt-0.5" x-text="error"></p>
            </div>
            <button @click="loadAll()" class="ml-auto text-xs text-red-300 underline hover:text-red-200">Retry</button>
        </div>
    </template>

    <!-- ═══ MAIN CONTENT (when data loaded) ═══ -->
    <template x-if="d.wealth_snapshot">
    <div class="space-y-6">

        <!-- ═══ A. WEALTH SNAPSHOT ═══ -->
        <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
            <!-- Portfolio Value -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Portfolio Value</p>
                <p class="text-xl font-bold text-white mt-1" x-text="fmtIDR(d.wealth_snapshot.total_portfolio_value_idr)"></p>
                <p class="text-xs mt-1" :class="pnlColor(d.wealth_snapshot.today_pnl_idr)"
                   x-text="(d.wealth_snapshot.today_pnl_idr >= 0 ? '+' : '') + fmtIDR(d.wealth_snapshot.today_pnl_idr) + ' today'"></p>
            </div>
            <!-- Unrealized P&L -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Unrealized P&L</p>
                <p class="text-xl font-bold mt-1" :class="pnlColor(d.wealth_snapshot.unrealized_pnl_idr)"
                   x-text="(d.wealth_snapshot.unrealized_pnl_idr >= 0 ? '+' : '') + fmtIDR(d.wealth_snapshot.unrealized_pnl_idr)"></p>
                <p class="text-xs mt-1" :class="pnlColor(d.wealth_snapshot.unrealized_pnl_pct)"
                   x-text="fmtPct(d.wealth_snapshot.unrealized_pnl_pct)"></p>
            </div>
            <!-- Realized P&L -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Realized P&L</p>
                <p class="text-xl font-bold mt-1" :class="pnlColor(d.wealth_snapshot.realized_pnl_idr)"
                   x-text="(d.wealth_snapshot.realized_pnl_idr >= 0 ? '+' : '') + fmtIDR(d.wealth_snapshot.realized_pnl_idr)"></p>
                <p class="text-xs text-gray-600 mt-1" x-text="d.wealth_snapshot.total_closed_trades + ' trades closed'"></p>
            </div>
            <!-- Today's Change -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Today</p>
                <p class="text-xl font-bold mt-1" :class="pnlColor(d.wealth_snapshot.today_pnl_pct)"
                   x-text="fmtPct(d.wealth_snapshot.today_pnl_pct)"></p>
                <p class="text-xs text-gray-600 mt-1" x-text="d.wealth_snapshot.total_positions + ' positions'"></p>
            </div>
            <!-- Win Rate -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Win Rate</p>
                <p class="text-xl font-bold mt-1" :class="d.wealth_snapshot.win_rate >= 50 ? 'text-emerald-400' : 'text-amber-400'"
                   x-text="d.wealth_snapshot.win_rate.toFixed(1) + '%'"></p>
                <p class="text-xs text-gray-600 mt-1" x-text="d.wealth_snapshot.total_closed_trades + ' sells'"></p>
            </div>
        </div>

        <!-- ═══ PENDING USERS ALERT ═══ -->
        <template x-if="d.system_stats && d.system_stats.pending_users > 0">
            <div class="bg-amber-900/30 border border-amber-700/50 rounded-xl p-4 flex items-center gap-3">
                <svg class="w-5 h-5 text-amber-400 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
                </svg>
                <div>
                    <p class="text-sm text-amber-300 font-medium" x-text="d.system_stats.pending_users + ' user menunggu persetujuan'"></p>
                    <a href="/admin/users?status=pending" class="text-xs text-amber-400 hover:text-amber-300 underline transition">Kelola sekarang &rarr;</a>
                </div>
            </div>
        </template>

        <!-- ═══ B. MARKET PULSE ═══ -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- Sentiment Gauge -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-6">
                <h2 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-4">Market Sentiment</h2>
                <div class="flex flex-col items-center">
                    <canvas id="sentimentGauge" width="220" height="130"></canvas>
                    <p class="text-3xl font-bold text-white -mt-2" x-text="d.market_pulse.sentiment_value"></p>
                    <p class="text-sm font-semibold mt-1" :class="sentimentColor(d.market_pulse.sentiment_value)"
                       x-text="d.market_pulse.sentiment_label"></p>
                </div>
                <div class="grid grid-cols-3 gap-2 mt-4 text-center">
                    <div class="bg-emerald-900/20 rounded-lg p-2">
                        <p class="text-lg font-bold text-emerald-400" x-text="d.market_pulse.buy_signals_count"></p>
                        <p class="text-xs text-gray-500">BUY</p>
                    </div>
                    <div class="bg-red-900/20 rounded-lg p-2">
                        <p class="text-lg font-bold text-red-400" x-text="d.market_pulse.sell_signals_count"></p>
                        <p class="text-xs text-gray-500">SELL</p>
                    </div>
                    <div class="bg-amber-900/20 rounded-lg p-2">
                        <p class="text-lg font-bold text-amber-400" x-text="d.market_pulse.hold_signals_count"></p>
                        <p class="text-xs text-gray-500">HOLD</p>
                    </div>
                </div>
            </div>

            <!-- Market Stats + Signal Donut -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-6">
                <h2 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-4">Market Overview</h2>
                <div class="grid grid-cols-2 gap-3 mb-5">
                    <div class="bg-gray-800/50 rounded-lg p-3">
                        <p class="text-xs text-gray-500">BTC Price</p>
                        <p class="text-sm font-bold text-white" x-text="d.market_pulse.btc_price_idr ? fmtPrice(d.market_pulse.btc_price_idr) : '-'"></p>
                        <p class="text-xs" :class="pnlColor(d.market_pulse.btc_change_24h)"
                           x-text="d.market_pulse.btc_change_24h ? fmtPct(d.market_pulse.btc_change_24h) : '-'"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3">
                        <p class="text-xs text-gray-500">Assets Tracked</p>
                        <p class="text-sm font-bold text-white" x-text="d.market_pulse.total_active + ' / ' + d.market_pulse.total_coins_tracked"></p>
                        <p class="text-xs text-gray-600">active / total</p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3">
                        <p class="text-xs text-gray-500">Data Source</p>
                        <p class="text-sm font-bold text-white capitalize" x-text="d.market_pulse.data_source || '-'"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3">
                        <p class="text-xs text-gray-500">Last Sync</p>
                        <p class="text-sm font-bold text-white" x-text="d.market_pulse.last_sync ? fmtTime(d.market_pulse.last_sync) : '-'"></p>
                    </div>
                </div>
                <div class="flex justify-center">
                    <canvas id="signalDonut" width="180" height="180"></canvas>
                </div>
            </div>
        </div>

        <!-- ═══ C. TOP OPPORTUNITIES ═══ -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <!-- Top Buy Recommendations -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-xs font-medium text-gray-500 uppercase tracking-wider flex items-center gap-2">
                        <span class="w-2 h-2 bg-emerald-400 rounded-full"></span>
                        Top Buy Recommendations
                    </h2>
                    <a href="/admin/wealth-dashboard" class="text-xs text-koin-400 hover:text-koin-300 transition">View All &rarr;</a>
                </div>
                <template x-if="d.top_buy_recommendations && d.top_buy_recommendations.length > 0">
                    <div class="space-y-0.5">
                        <template x-for="(r, idx) in d.top_buy_recommendations" :key="r.asset_id">
                            <a :href="'/market/' + r.asset_id"
                               class="flex items-center justify-between py-2.5 px-2 rounded-lg hover:bg-gray-800/50 transition">
                                <div class="flex items-center gap-3">
                                    <span class="text-xs text-gray-600 w-4" x-text="idx + 1"></span>
                                    <img :src="r.icon_thumb_url || '/static/icons/default.png'" class="w-6 h-6 rounded-full" onerror="this.src='/static/icons/default.png'">
                                    <div>
                                        <p class="text-sm font-medium text-white" x-text="r.symbol"></p>
                                        <p class="text-xs text-gray-500" x-text="r.name"></p>
                                    </div>
                                </div>
                                <div class="flex items-center gap-3 text-right">
                                    <div>
                                        <p class="text-sm font-bold text-white" x-text="r.buy_score + 'pts'"></p>
                                        <p class="text-xs text-gray-500" x-text="r.success_rate_pct.toFixed(0) + '% win'"></p>
                                    </div>
                                    <span class="text-xs font-medium px-2 py-0.5 rounded-full"
                                          :class="safetyBadge(r.safety)" x-text="r.safety"></span>
                                </div>
                            </a>
                        </template>
                    </div>
                </template>
                <template x-if="!d.top_buy_recommendations || d.top_buy_recommendations.length === 0">
                    <p class="text-sm text-gray-600 text-center py-8">No buy recommendations available</p>
                </template>
            </div>

            <!-- Top Multibagger Candidates -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-xs font-medium text-gray-500 uppercase tracking-wider flex items-center gap-2">
                        <span class="w-2 h-2 bg-sky-400 rounded-full"></span>
                        Multibagger Candidates
                    </h2>
                    <a href="/admin/multibagger" class="text-xs text-koin-400 hover:text-koin-300 transition">View All &rarr;</a>
                </div>
                <template x-if="d.top_multibagger_candidates && d.top_multibagger_candidates.length > 0">
                    <div class="space-y-0.5">
                        <template x-for="(r, idx) in d.top_multibagger_candidates" :key="r.asset_id">
                            <a :href="'/market/' + r.asset_id"
                               class="flex items-center justify-between py-2.5 px-2 rounded-lg hover:bg-gray-800/50 transition">
                                <div class="flex items-center gap-3">
                                    <span class="text-xs text-gray-600 w-4" x-text="idx + 1"></span>
                                    <img :src="r.icon_thumb_url || '/static/icons/default.png'" class="w-6 h-6 rounded-full" onerror="this.src='/static/icons/default.png'">
                                    <div>
                                        <p class="text-sm font-medium text-white" x-text="r.symbol"></p>
                                        <p class="text-xs text-gray-500" x-text="r.name"></p>
                                    </div>
                                </div>
                                <div class="flex items-center gap-3 text-right">
                                    <div>
                                        <p class="text-sm font-bold text-white" x-text="r.multibagger_score + 'pts'"></p>
                                        <p class="text-xs font-medium" :class="tierColor(r.tier)"
                                           x-text="'~' + r.estimated_multiple.toFixed(1) + 'x'"></p>
                                    </div>
                                    <span class="text-xs font-medium px-2 py-0.5 rounded-full"
                                          :class="tierBadge(r.tier)"
                                          x-text="tierLabel(r.tier)"></span>
                                </div>
                            </a>
                        </template>
                    </div>
                </template>
                <template x-if="!d.top_multibagger_candidates || d.top_multibagger_candidates.length === 0">
                    <p class="text-sm text-gray-600 text-center py-8">No multibagger candidates available</p>
                </template>
            </div>
        </div>

        <!-- ═══ D. PORTFOLIO POSITIONS ═══ -->
        <template x-if="d.portfolio_positions && d.portfolio_positions.length > 0">
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
                <h2 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
                    <span class="w-2 h-2 bg-violet-400 rounded-full"></span>
                    Portfolio Positions
                </h2>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="text-xs text-gray-500 uppercase border-b border-gray-800">
                                <th class="text-left py-2 px-2">Coin</th>
                                <th class="text-right py-2 px-2">Qty</th>
                                <th class="text-right py-2 px-2">Avg Price</th>
                                <th class="text-right py-2 px-2">Current</th>
                                <th class="text-right py-2 px-2">Value</th>
                                <th class="text-right py-2 px-2">P&L</th>
                                <th class="text-right py-2 px-2">24h</th>
                                <th class="text-right py-2 px-2 w-20">7d</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="p in d.portfolio_positions" :key="p.asset_id">
                                <tr class="border-b border-gray-800/50 hover:bg-gray-800/30 transition">
                                    <td class="py-2.5 px-2">
                                        <div class="flex items-center gap-2">
                                            <img :src="p.icon_thumb_url || '/static/icons/default.png'" class="w-5 h-5 rounded-full" onerror="this.src='/static/icons/default.png'">
                                            <div>
                                                <p class="text-sm font-medium text-white" x-text="p.symbol"></p>
                                                <p class="text-xs text-gray-600 truncate max-w-[80px]" x-text="p.name"></p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-2.5 px-2 text-right text-gray-300 text-xs" x-text="p.total_quantity"></td>
                                    <td class="py-2.5 px-2 text-right text-gray-300 text-xs" x-text="fmtPrice(p.avg_buy_price)"></td>
                                    <td class="py-2.5 px-2 text-right text-white text-xs font-medium" x-text="fmtPrice(p.current_price_idr)"></td>
                                    <td class="py-2.5 px-2 text-right text-white text-xs" x-text="fmtIDR(p.market_value_idr)"></td>
                                    <td class="py-2.5 px-2 text-right">
                                        <p class="text-xs font-medium" :class="pnlColor(p.unrealized_pnl_idr)"
                                           x-text="(p.unrealized_pnl_idr >= 0 ? '+' : '') + fmtIDR(p.unrealized_pnl_idr)"></p>
                                        <p class="text-xs" :class="pnlColor(p.unrealized_pnl_pct)"
                                           x-text="fmtPct(p.unrealized_pnl_pct)"></p>
                                    </td>
                                    <td class="py-2.5 px-2 text-right">
                                        <span class="text-xs" :class="pnlColor(p.price_change_24h)"
                                              x-text="fmtPct(p.price_change_24h)"></span>
                                    </td>
                                    <td class="py-2.5 px-2 text-right">
                                        <canvas :data-sparkline="p.asset_id" width="72" height="24" class="inline-block"></canvas>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>
        </template>

        <!-- ═══ E. ACTIVE SIGNALS ═══ -->
        <template x-if="d.active_signals && d.active_signals.length > 0">
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
                <h2 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
                    <span class="w-2 h-2 bg-amber-400 rounded-full"></span>
                    Active Signals
                    <span class="text-gray-600" x-text="'(' + d.active_signals.length + ')'"></span>
                </h2>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="text-xs text-gray-500 uppercase border-b border-gray-800">
                                <th class="text-left py-2 px-2">Coin</th>
                                <th class="text-center py-2 px-2">Type</th>
                                <th class="text-center py-2 px-2">Confidence</th>
                                <th class="text-right py-2 px-2">Score</th>
                                <th class="text-right py-2 px-2">Entry</th>
                                <th class="text-right py-2 px-2">TP1</th>
                                <th class="text-right py-2 px-2">SL</th>
                                <th class="text-center py-2 px-2">Safety</th>
                                <th class="text-right py-2 px-2">Age</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="s in d.active_signals" :key="s.asset_id + s.signal_type">
                                <tr class="border-b border-gray-800/50 hover:bg-gray-800/30 transition">
                                    <td class="py-2 px-2">
                                        <div class="flex items-center gap-2">
                                            <img :src="s.icon_thumb_url || '/static/icons/default.png'" class="w-5 h-5 rounded-full" onerror="this.src='/static/icons/default.png'">
                                            <span class="text-sm text-white font-medium" x-text="s.symbol"></span>
                                        </div>
                                    </td>
                                    <td class="py-2 px-2 text-center">
                                        <span class="text-xs font-medium px-2 py-0.5 rounded-full" :class="signalTypeBadge(s.signal_type)" x-text="s.signal_type"></span>
                                    </td>
                                    <td class="py-2 px-2 text-center">
                                        <span class="text-xs" :class="confidenceColor(s.confidence)" x-text="s.confidence"></span>
                                    </td>
                                    <td class="py-2 px-2 text-right text-white text-xs font-medium" x-text="s.score"></td>
                                    <td class="py-2 px-2 text-right text-gray-300 text-xs" x-text="fmtPrice(s.entry_price)"></td>
                                    <td class="py-2 px-2 text-right text-emerald-400 text-xs" x-text="fmtPrice(s.take_profit_1)"></td>
                                    <td class="py-2 px-2 text-right text-red-400 text-xs" x-text="fmtPrice(s.stop_loss)"></td>
                                    <td class="py-2 px-2 text-center">
                                        <span class="text-xs font-medium" :class="safetyColor(s.safety_rating)" x-text="s.safety_rating"></span>
                                    </td>
                                    <td class="py-2 px-2 text-right text-gray-500 text-xs" x-text="fmtAge(s.created_at)"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>
        </template>

        <!-- ═══ F. RECENT TRADES ═══ -->
        <template x-if="d.recent_trades && d.recent_trades.length > 0">
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
                <h2 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
                    <span class="w-2 h-2 bg-cyan-400 rounded-full"></span>
                    Recent Trades
                </h2>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="text-xs text-gray-500 uppercase border-b border-gray-800">
                                <th class="text-left py-2 px-2">Coin</th>
                                <th class="text-center py-2 px-2">Side</th>
                                <th class="text-right py-2 px-2">Price</th>
                                <th class="text-right py-2 px-2">Qty</th>
                                <th class="text-right py-2 px-2">Value</th>
                                <th class="text-right py-2 px-2">P&L</th>
                                <th class="text-right py-2 px-2">Time</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="t in d.recent_trades" :key="t.asset_id + t.executed_at">
                                <tr class="border-b border-gray-800/50 hover:bg-gray-800/30 transition">
                                    <td class="py-2 px-2">
                                        <div class="flex items-center gap-2">
                                            <img :src="t.icon_thumb_url || '/static/icons/default.png'" class="w-5 h-5 rounded-full" onerror="this.src='/static/icons/default.png'">
                                            <span class="text-sm text-white font-medium" x-text="t.symbol"></span>
                                        </div>
                                    </td>
                                    <td class="py-2 px-2 text-center">
                                        <span class="text-xs font-medium px-2 py-0.5 rounded-full"
                                              :class="t.side === 'BUY' ? 'bg-emerald-900/50 text-emerald-400' : 'bg-red-900/50 text-red-400'"
                                              x-text="t.side"></span>
                                    </td>
                                    <td class="py-2 px-2 text-right text-gray-300 text-xs" x-text="fmtPrice(t.price)"></td>
                                    <td class="py-2 px-2 text-right text-gray-300 text-xs" x-text="t.quantity"></td>
                                    <td class="py-2 px-2 text-right text-white text-xs" x-text="fmtIDR(t.total_value_idr)"></td>
                                    <td class="py-2 px-2 text-right">
                                        <span class="text-xs font-medium" :class="pnlColor(t.pnl_idr)"
                                              x-text="t.pnl_idr ? ((t.pnl_idr >= 0 ? '+' : '') + fmtIDR(t.pnl_idr)) : '-'"></span>
                                    </td>
                                    <td class="py-2 px-2 text-right text-gray-500 text-xs" x-text="fmtTime(t.executed_at)"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
                <div class="flex justify-end mt-3 pt-3 border-t border-gray-800">
                    <span class="text-sm text-gray-400">Total P&L:</span>
                    <span class="text-sm font-bold ml-2" :class="pnlColor(d.recent_trades_total_pnl)"
                          x-text="(d.recent_trades_total_pnl >= 0 ? '+' : '') + fmtIDR(d.recent_trades_total_pnl)"></span>
                </div>
            </div>
        </template>

        <!-- ═══ G. QUICK ACTIONS ═══ -->
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
            <a href="/admin/users" class="bg-gray-900 border border-gray-800 rounded-xl p-4 hover:border-gray-700 transition group text-center">
                <div class="w-10 h-10 mx-auto rounded-lg bg-sky-900/50 flex items-center justify-center mb-2">
                    <svg class="w-5 h-5 text-sky-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
                </div>
                <p class="text-xs font-medium text-white group-hover:text-koin-400 transition">Users</p>
            </a>
            <a href="/data/assets" class="bg-gray-900 border border-gray-800 rounded-xl p-4 hover:border-gray-700 transition group text-center">
                <div class="w-10 h-10 mx-auto rounded-lg bg-emerald-900/50 flex items-center justify-center mb-2">
                    <svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/></svg>
                </div>
                <p class="text-xs font-medium text-white group-hover:text-koin-400 transition">Data</p>
            </a>
            <a href="/settings/data-source" class="bg-gray-900 border border-gray-800 rounded-xl p-4 hover:border-gray-700 transition group text-center">
                <div class="w-10 h-10 mx-auto rounded-lg bg-purple-900/50 flex items-center justify-center mb-2">
                    <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                </div>
                <p class="text-xs font-medium text-white group-hover:text-koin-400 transition">Settings</p>
            </a>
            <a href="/admin/sync" class="bg-gray-900 border border-gray-800 rounded-xl p-4 hover:border-gray-700 transition group text-center">
                <div class="w-10 h-10 mx-auto rounded-lg bg-koin-900/50 flex items-center justify-center mb-2">
                    <svg class="w-5 h-5 text-koin-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182"/></svg>
                </div>
                <p class="text-xs font-medium text-white group-hover:text-koin-400 transition">Sync</p>
            </a>
            <a href="/admin/workflow" class="bg-gray-900 border border-gray-800 rounded-xl p-4 hover:border-gray-700 transition group text-center">
                <div class="w-10 h-10 mx-auto rounded-lg bg-amber-900/50 flex items-center justify-center mb-2">
                    <svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/></svg>
                </div>
                <p class="text-xs font-medium text-white group-hover:text-koin-400 transition">Workflow</p>
            </a>
            <a href="/admin/docs" class="bg-gray-900 border border-gray-800 rounded-xl p-4 hover:border-gray-700 transition group text-center">
                <div class="w-10 h-10 mx-auto rounded-lg bg-rose-900/50 flex items-center justify-center mb-2">
                    <svg class="w-5 h-5 text-rose-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/></svg>
                </div>
                <p class="text-xs font-medium text-white group-hover:text-koin-400 transition">Docs</p>
            </a>
        </div>

    </div>
    </template>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
function dashboardCommand() {
    return {
        loading: true,
        error: null,
        d: {},
        lastRefresh: null,
        sentimentChart: null,
        signalDonutChart: null,
        refreshTimer: null,

        async loadAll() {
            this.loading = true;
            this.error = null;
            try {
                const resp = await fetch('/api/v1/dashboard/wealth-overview');
                if (resp.redirected) { window.location.href = resp.url; return; }
                if (!resp.ok) throw new Error('HTTP ' + resp.status);
                this.d = await resp.json();
                this.lastRefresh = new Date().toLocaleTimeString('id-ID');
                this.$nextTick(() => {
                    this.renderSentimentGauge();
                    this.renderSignalDonut();
                    this.renderSparklines();
                });
            } catch (e) {
                this.error = e.message;
                console.error('Dashboard load failed:', e);
            } finally {
                this.loading = false;
            }
            if (this.refreshTimer) clearInterval(this.refreshTimer);
            this.refreshTimer = setInterval(() => this.loadAll(), 300000);
        },

        /* ── Chart.js: Sentiment Gauge (half-donut) ── */
        renderSentimentGauge() {
            const ctx = document.getElementById('sentimentGauge');
            if (!ctx) return;
            if (this.sentimentChart) this.sentimentChart.destroy();
            const val = this.d.market_pulse?.sentiment_value || 50;
            this.sentimentChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    datasets: [{
                        data: [val, 100 - val],
                        backgroundColor: [this._gaugeColor(val), 'rgba(55,65,81,0.3)'],
                        borderWidth: 0,
                    }]
                },
                options: {
                    circumference: 180,
                    rotation: 270,
                    cutout: '75%',
                    responsive: false,
                    plugins: { legend: { display: false }, tooltip: { enabled: false } },
                },
            });
        },

        _gaugeColor(val) {
            if (val < 20) return '#ef4444';
            if (val < 40) return '#f97316';
            if (val < 60) return '#eab308';
            if (val < 80) return '#22c55e';
            return '#16a34a';
        },

        /* ── Chart.js: Signal Distribution Donut ── */
        renderSignalDonut() {
            const ctx = document.getElementById('signalDonut');
            if (!ctx) return;
            if (this.signalDonutChart) this.signalDonutChart.destroy();
            const mp = this.d.market_pulse || {};
            const total = (mp.buy_signals_count || 0) + (mp.sell_signals_count || 0) + (mp.hold_signals_count || 0);
            if (total === 0) return;
            this.signalDonutChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['BUY', 'SELL', 'HOLD'],
                    datasets: [{
                        data: [mp.buy_signals_count || 0, mp.sell_signals_count || 0, mp.hold_signals_count || 0],
                        backgroundColor: ['#10b981', '#ef4444', '#f59e0b'],
                        borderWidth: 0,
                    }]
                },
                options: {
                    cutout: '60%',
                    responsive: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: { color: '#9ca3af', font: { size: 11 }, padding: 12, usePointStyle: true, pointStyleWidth: 8 },
                        },
                        tooltip: {
                            callbacks: {
                                label: (ctx) => ` ${ctx.label}: ${ctx.raw} (${Math.round(ctx.raw / total * 100)}%)`
                            }
                        }
                    },
                },
            });
        },

        /* ── Canvas 2D: Mini Sparklines for portfolio rows ── */
        renderSparklines() {
            const positions = this.d.portfolio_positions || [];
            positions.forEach(p => {
                const el = document.querySelector(`[data-sparkline="${p.asset_id}"]`);
                if (!el || !p.sparkline_7d || p.sparkline_7d.length < 2) return;
                const ctx = el.getContext('2d');
                const w = el.width, h = el.height;
                const prices = p.sparkline_7d;
                const min = Math.min(...prices);
                const max = Math.max(...prices);
                const range = max - min || 1;
                const step = w / (prices.length - 1);
                ctx.clearRect(0, 0, w, h);
                ctx.beginPath();
                ctx.strokeStyle = prices[prices.length - 1] >= prices[0] ? '#10b981' : '#ef4444';
                ctx.lineWidth = 1.5;
                prices.forEach((price, i) => {
                    const x = i * step;
                    const y = h - ((price - min) / range) * (h - 4) - 2;
                    i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
                });
                ctx.stroke();
            });
        },

        /* ── Formatting helpers ── */
        fmtIDR(val) {
            if (val == null || isNaN(val)) return 'Rp 0';
            const abs = Math.abs(Math.round(val));
            const formatted = abs.toLocaleString('id-ID');
            return (val < 0 ? '-' : '') + 'Rp ' + formatted;
        },
        fmtPct(val) {
            if (val == null || isNaN(val)) return '0.0%';
            return (val >= 0 ? '+' : '') + val.toFixed(1) + '%';
        },
        fmtPrice(val) {
            if (val == null || val === 0) return '-';
            if (val >= 1e12) return 'Rp ' + (val / 1e12).toFixed(2) + 'T';
            if (val >= 1e9) return 'Rp ' + (val / 1e9).toFixed(2) + 'B';
            if (val >= 1e6) return 'Rp ' + (val / 1e6).toFixed(2) + 'M';
            if (val >= 1e3) return 'Rp ' + (val / 1e3).toFixed(1) + 'K';
            return 'Rp ' + val.toFixed(2);
        },
        fmtTime(iso) {
            if (!iso) return '-';
            try {
                const d = new Date(iso);
                return d.toLocaleDateString('id-ID', { day: '2-digit', month: 'short' })
                     + ' ' + d.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
            } catch { return iso; }
        },
        fmtAge(iso) {
            if (!iso) return '-';
            const mins = Math.floor((Date.now() - new Date(iso)) / 60000);
            if (mins < 60) return mins + 'm';
            if (mins < 1440) return Math.floor(mins / 60) + 'h';
            return Math.floor(mins / 1440) + 'd';
        },

        /* ── Color helpers ── */
        pnlColor(val) { return (val || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'; },
        sentimentColor(val) {
            if (val < 20) return 'text-red-400';
            if (val < 40) return 'text-orange-400';
            if (val < 60) return 'text-yellow-400';
            if (val < 80) return 'text-emerald-400';
            return 'text-emerald-500';
        },
        confidenceColor(c) {
            return { High: 'text-emerald-400', Medium: 'text-amber-400', Low: 'text-gray-400' }[c] || 'text-gray-500';
        },
        safetyColor(r) {
            return { SAFE: 'text-emerald-400', MODERATE: 'text-amber-400', RISKY: 'text-red-400', DANGEROUS: 'text-red-500' }[r] || 'text-gray-400';
        },
        safetyBadge(r) {
            return { SAFE: 'bg-emerald-900/50 text-emerald-400', MODERATE: 'bg-amber-900/50 text-amber-400', RISKY: 'bg-red-900/50 text-red-400', DANGEROUS: 'bg-red-900/50 text-red-500' }[r] || 'bg-gray-800 text-gray-400';
        },
        signalTypeBadge(t) {
            return { BUY: 'bg-emerald-900/50 text-emerald-400', SELL: 'bg-red-900/50 text-red-400', HOLD: 'bg-amber-900/50 text-amber-400' }[t] || 'bg-gray-800 text-gray-400';
        },
        tierColor(t) {
            return { STRONG_MULTIBAGGER: 'text-emerald-400', POTENTIAL: 'text-sky-400', WATCH_LIST: 'text-amber-400', SPECULATIVE: 'text-gray-400' }[t] || 'text-gray-500';
        },
        tierBadge(t) {
            return { STRONG_MULTIBAGGER: 'bg-emerald-900/50 text-emerald-400', POTENTIAL: 'bg-sky-900/50 text-sky-400', WATCH_LIST: 'bg-amber-900/50 text-amber-400', SPECULATIVE: 'bg-gray-800 text-gray-400' }[t] || 'bg-gray-800 text-gray-400';
        },
        tierLabel(t) {
            return { STRONG_MULTIBAGGER: 'Strong', POTENTIAL: 'Potential', WATCH_LIST: 'Watch', SPECULATIVE: 'Spec' }[t] || t;
        },
    };
}
</script>
{% endblock %}