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

{% block content %}
<div x-data="adminDash()" 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-violet-600/20 rounded-xl">
                    <svg class="w-6 h-6 text-violet-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                </div>
                Admin Panel
            </h1>
            <p class="mt-1 text-sm text-gray-400">Kelola user, pembayaran, dan sistem</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-violet-600 hover:bg-violet-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 ═══ -->
    <template x-if="loading && !stats.total_users">
        <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-16"></div>
                </div>
            </template>
        </div>
    </template>

    <!-- ═══ STAT CARDS ═══ -->
    <template x-if="stats.total_users !== undefined">
        <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 hover:border-gray-700 transition">
                <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Total Users</p>
                <p class="text-2xl font-bold text-white" x-text="stats.total_users"></p>
            </div>
            <a href="/admin/users?status=pending" class="bg-gray-900 border rounded-xl p-4 hover:border-amber-700/50 transition"
               :class="stats.pending_users > 0 ? 'border-amber-700/40 bg-amber-950/20' : 'border-gray-800'">
                <p class="text-xs uppercase tracking-wider mb-1" :class="stats.pending_users > 0 ? 'text-amber-400' : 'text-gray-500'">Pending</p>
                <p class="text-2xl font-bold" :class="stats.pending_users > 0 ? 'text-amber-300' : 'text-white'" x-text="stats.pending_users"></p>
            </a>
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 hover:border-gray-700 transition">
                <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Active</p>
                <p class="text-2xl font-bold text-emerald-400" x-text="stats.active_users"></p>
            </div>
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 hover:border-gray-700 transition">
                <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Disabled</p>
                <p class="text-2xl font-bold text-gray-400" x-text="stats.disabled_users"></p>
            </div>
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 hover:border-gray-700 transition">
                <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Total Coins</p>
                <p class="text-2xl font-bold text-sky-400" x-text="stats.total_coins"></p>
            </div>
        </div>
    </template>

    <!-- ═══ TIER DISTRIBUTION + PENDING PAYMENTS ═══ -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">

        <!-- Tier Distribution -->
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
            <h2 class="text-sm font-semibold text-white mb-4 flex items-center gap-2">
                <svg class="w-4 h-4 text-violet-400" fill="none" stroke="currentColor" stroke-width="2" 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>
                Distribusi Tier
            </h2>
            <template x-if="tierDist.length > 0">
                <div class="space-y-3">
                    <template x-for="t in tierDist" :key="t.tier">
                        <div>
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-sm font-medium capitalize" :class="{
                                    'text-gray-400': t.tier === 'free',
                                    'text-sky-400': t.tier === 'starter',
                                    'text-violet-400': t.tier === 'pro',
                                    'text-amber-400': t.tier === 'ultimate'
                                }" x-text="t.tier"></span>
                                <span class="text-sm text-gray-400" x-text="t.count + ' user'"></span>
                            </div>
                            <div class="w-full bg-gray-800 rounded-full h-2">
                                <div class="h-2 rounded-full transition-all duration-500" :class="{
                                    'bg-gray-600': t.tier === 'free',
                                    'bg-sky-500': t.tier === 'starter',
                                    'bg-violet-500': t.tier === 'pro',
                                    'bg-amber-500': t.tier === 'ultimate'
                                }" :style="'width:' + (stats.active_users > 0 ? Math.max(4, t.count / stats.active_users * 100) : 4) + '%'"></div>
                            </div>
                        </div>
                    </template>
                </div>
            </template>
            <template x-if="tierDist.length === 0 && !loading">
                <p class="text-sm text-gray-500">Belum ada data tier</p>
            </template>
        </div>

        <!-- Pending Payments -->
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-sm font-semibold text-white flex items-center gap-2">
                    <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"/></svg>
                    Pending Payments
                    <template x-if="pendingPayments.length > 0">
                        <span class="bg-amber-600 text-white text-xs font-bold px-1.5 py-0.5 rounded-full" x-text="pendingPayments.length"></span>
                    </template>
                </h2>
                <a href="/admin/subscription-payments" class="text-xs text-sky-400 hover:text-sky-300 transition">Lihat Semua</a>
            </div>
            <template x-if="pendingPayments.length > 0">
                <div class="space-y-2 max-h-64 overflow-y-auto">
                    <template x-for="p in pendingPayments.slice(0, 8)" :key="p.id">
                        <div class="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
                            <div class="min-w-0">
                                <p class="text-sm text-white truncate" x-text="p.username || p.email || ('User #'+p.user_id)"></p>
                                <p class="text-xs text-gray-500">
                                    <span x-text="p.from_tier"></span> → <span class="text-amber-400 font-medium" x-text="p.to_tier"></span>
                                </p>
                            </div>
                            <div class="text-right flex-shrink-0 ml-3">
                                <p class="text-sm font-mono text-white" x-text="'Rp ' + (p.total_amount || 0).toLocaleString('id-ID')"></p>
                                <p class="text-xs text-gray-500" x-text="timeAgo(p.created_at)"></p>
                            </div>
                        </div>
                    </template>
                </div>
            </template>
            <template x-if="pendingPayments.length === 0 && !loading">
                <div class="text-center py-8">
                    <svg class="w-10 h-10 text-gray-700 mx-auto mb-2" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    <p class="text-sm text-gray-500">Tidak ada pembayaran pending</p>
                </div>
            </template>
        </div>
    </div>

    <!-- ═══ RECENT REGISTRATIONS + SYNC STATUS ═══ -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">

        <!-- Recent Registrations -->
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-sm font-semibold text-white flex items-center gap-2">
                    <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/></svg>
                    Registrasi Terbaru
                </h2>
                <a href="/admin/users" class="text-xs text-sky-400 hover:text-sky-300 transition">Kelola Users</a>
            </div>
            <template x-if="recentUsers.length > 0">
                <div class="space-y-2">
                    <template x-for="u in recentUsers" :key="u.id">
                        <div class="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
                            <div class="flex items-center gap-3 min-w-0">
                                <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0"
                                     :class="u.is_approved ? 'bg-emerald-900/40 text-emerald-400' : 'bg-amber-900/40 text-amber-400'"
                                     x-text="(u.username || u.email || '?')[0].toUpperCase()"></div>
                                <div class="min-w-0">
                                    <p class="text-sm text-white truncate" x-text="u.username || u.email"></p>
                                    <p class="text-xs text-gray-500 truncate" x-text="u.email"></p>
                                </div>
                            </div>
                            <div class="flex-shrink-0 ml-3">
                                <span class="inline-block px-2 py-0.5 rounded-full text-xs font-medium"
                                      :class="u.is_approved ? 'bg-emerald-900/40 text-emerald-400' : 'bg-amber-900/40 text-amber-400'"
                                      x-text="u.is_approved ? 'Active' : 'Pending'"></span>
                            </div>
                        </div>
                    </template>
                </div>
            </template>
            <template x-if="recentUsers.length === 0 && !loading">
                <p class="text-sm text-gray-500 text-center py-6">Belum ada registrasi</p>
            </template>
        </div>

        <!-- Sync Status -->
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-sm font-semibold text-white flex items-center gap-2">
                    <svg class="w-4 h-4 text-sky-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg>
                    Sync Status
                </h2>
                <a href="/admin/sync" class="text-xs text-sky-400 hover:text-sky-300 transition">Kelola Sync</a>
            </div>
            <template x-if="syncStatus">
                <div class="space-y-3">
                    <div class="grid grid-cols-2 gap-3">
                        <div class="p-3 bg-gray-800/50 rounded-lg">
                            <p class="text-xs text-gray-500 mb-1">Role</p>
                            <p class="text-sm font-medium text-white capitalize" x-text="syncStatus.role || '-'"></p>
                        </div>
                        <div class="p-3 bg-gray-800/50 rounded-lg">
                            <p class="text-xs text-gray-500 mb-1">Status</p>
                            <p class="text-sm font-medium" :class="syncStatus.role ? 'text-emerald-400' : 'text-gray-500'" x-text="syncStatus.role ? 'Configured' : 'Not configured'"></p>
                        </div>
                    </div>
                    <template x-if="syncStatus.tables">
                        <div class="space-y-1.5 max-h-48 overflow-y-auto">
                            <template x-for="(info, table) in syncStatus.tables" :key="table">
                                <div class="flex items-center justify-between px-3 py-1.5 bg-gray-800/30 rounded text-xs">
                                    <span class="text-gray-400" x-text="table"></span>
                                    <span class="text-gray-500 font-mono" x-text="info.count !== undefined ? info.count + ' rows' : '-'"></span>
                                </div>
                            </template>
                        </div>
                    </template>
                </div>
            </template>
            <template x-if="!syncStatus && !loading">
                <p class="text-sm text-gray-500 text-center py-6">Sync tidak dikonfigurasi</p>
            </template>
        </div>
    </div>

    <!-- ═══ QUICK ACTIONS ═══ -->
    <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
        <h2 class="text-sm font-semibold text-white mb-4">Quick Actions</h2>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-3">
            <a href="/admin/users?status=pending"
               class="flex flex-col items-center gap-2 p-4 bg-gray-800/50 rounded-xl hover:bg-gray-800 transition text-center group">
                <svg class="w-6 h-6 text-amber-400 group-hover:scale-110 transition" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z"/></svg>
                <span class="text-xs text-gray-400">Approve Users</span>
            </a>
            <a href="/admin/subscription-payments"
               class="flex flex-col items-center gap-2 p-4 bg-gray-800/50 rounded-xl hover:bg-gray-800 transition text-center group">
                <svg class="w-6 h-6 text-emerald-400 group-hover:scale-110 transition" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"/></svg>
                <span class="text-xs text-gray-400">Payments</span>
            </a>
            <a href="/admin/tier-management"
               class="flex flex-col items-center gap-2 p-4 bg-gray-800/50 rounded-xl hover:bg-gray-800 transition text-center group">
                <svg class="w-6 h-6 text-violet-400 group-hover:scale-110 transition" fill="none" stroke="currentColor" stroke-width="1.5" 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.325.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.241-.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-.991a6.932 6.932 0 010-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.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>
                <span class="text-xs text-gray-400">Tier Config</span>
            </a>
            <a href="/admin/sync"
               class="flex flex-col items-center gap-2 p-4 bg-gray-800/50 rounded-xl hover:bg-gray-800 transition text-center group">
                <svg class="w-6 h-6 text-sky-400 group-hover:scale-110 transition" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg>
                <span class="text-xs text-gray-400">Data Sync</span>
            </a>
            <a href="/admin/ml"
               class="flex flex-col items-center gap-2 p-4 bg-gray-800/50 rounded-xl hover:bg-gray-800 transition text-center group">
                <svg class="w-6 h-6 text-rose-400 group-hover:scale-110 transition" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"/></svg>
                <span class="text-xs text-gray-400">ML Panel</span>
            </a>
            <a href="/admin/landing-page"
               class="flex flex-col items-center gap-2 p-4 bg-gray-800/50 rounded-xl hover:bg-gray-800 transition text-center group">
                <svg class="w-6 h-6 text-teal-400 group-hover:scale-110 transition" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z"/></svg>
                <span class="text-xs text-gray-400">Landing CMS</span>
            </a>
        </div>
    </div>

</div>

<script>
function adminDash() {
    return {
        loading: false,
        lastRefresh: null,
        stats: {},
        tierDist: [],
        pendingPayments: [],
        recentUsers: [],
        syncStatus: null,

        async loadAll() {
            this.loading = true;
            try {
                const [statsRes, paymentsRes, syncRes] = await Promise.allSettled([
                    fetch('/api/v1/admin/stats'),
                    fetch('/api/v1/admin/tier/payments?status=pending'),
                    fetch('/api/v1/sync/status'),
                ]);

                if (statsRes.status === 'fulfilled' && statsRes.value.ok) {
                    const d = await statsRes.value.json();
                    this.stats = {
                        total_users: d.total_users ?? 0,
                        pending_users: d.pending_users ?? 0,
                        active_users: d.active_users ?? 0,
                        disabled_users: d.disabled_users ?? 0,
                        total_coins: d.total_coins ?? 0,
                    };
                    this.recentUsers = d.recent_registrations ?? [];
                    this.tierDist = d.tier_distribution ?? [];
                }

                if (paymentsRes.status === 'fulfilled' && paymentsRes.value.ok) {
                    const d = await paymentsRes.value.json();
                    this.pendingPayments = d.payments ?? d ?? [];
                }

                if (syncRes.status === 'fulfilled' && syncRes.value.ok) {
                    this.syncStatus = await syncRes.value.json();
                }

                this.lastRefresh = new Date().toLocaleTimeString('id-ID', {hour:'2-digit', minute:'2-digit'});
            } catch (e) {
                console.error('Admin dash load error', e);
            } finally {
                this.loading = false;
            }
        },

        timeAgo(dateStr) {
            if (!dateStr) return '';
            const diff = (Date.now() - new Date(dateStr)) / 1000;
            if (diff < 60) return 'baru saja';
            if (diff < 3600) return Math.floor(diff/60) + 'm lalu';
            if (diff < 86400) return Math.floor(diff/3600) + 'j lalu';
            return Math.floor(diff/86400) + 'h lalu';
        }
    };
}
</script>
{% endblock %}