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

{% block content %}
<div x-data="leaderboardPanel()" x-init="fetchData()" class="space-y-5">

    <!-- Header -->
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <a href="/market/assets" class="text-gray-500 hover:text-gray-300 transition">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </a>
            <div class="flex items-center gap-2">
                <svg class="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 013 3h-15a3 3 0 013-3m9 0v-4.5A3.375 3.375 0 0012.75 10.5h-.75a.75.75 0 01-.75-.75V6.75a3 3 0 00-3-3H6.375m0 0H3.75m2.625 0L12 .75l5.625 3H21v3.375a3 3 0 01-3 3h-1.875a.75.75 0 00-.75.75v2.625a3.375 3.375 0 01-3.375 3.375h-.75"/>
                </svg>
                <h1 class="text-2xl font-bold text-white">Leaderboard</h1>
            </div>
        </div>
        <button @click="fetchData()" class="p-2 rounded-lg bg-gray-800 border border-gray-700 hover:border-amber-700 text-gray-400 hover:text-amber-400 transition" title="Refresh">
            <svg class="w-4 h-4" :class="loading && 'animate-spin'" 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>
        </button>
    </div>

    <!-- Summary Stats -->
    <div x-show="!loading && summary.total_coins" x-cloak class="grid grid-cols-3 gap-3">
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-3 text-center">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Total Aset</p>
            <p class="text-lg font-bold text-white mt-0.5" x-text="formatNumber(summary.total_coins)"></p>
        </div>
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-3 text-center">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Rata-rata Perubahan</p>
            <p class="text-lg font-bold mt-0.5" :class="(summary.avg_change||0) >= 0 ? 'text-emerald-400' : 'text-red-400'" x-text="formatPct(summary.avg_change)"></p>
        </div>
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-3 text-center">
            <p class="text-xs text-gray-500 uppercase tracking-wider">% Positif</p>
            <p class="text-lg font-bold text-amber-400 mt-0.5" x-text="(summary.positive_pct||0).toFixed(1) + '%'"></p>
        </div>
    </div>

    <!-- ============================================================ -->
    <!-- PODIUM SECTION (Top 3)                                       -->
    <!-- ============================================================ -->
    <div x-show="!loading && podium.length >= 3" x-cloak class="glass rounded-xl border border-amber-900/50 p-4 md:p-6 bg-gradient-to-b from-amber-950/20 to-transparent">
        <h2 class="text-sm font-semibold text-amber-400 uppercase tracking-wider mb-5 text-center">Podium</h2>
        <div class="flex items-end justify-center gap-3 md:gap-5">

            <!-- #2 Silver (Left) -->
            <div class="flex flex-col items-center w-28 md:w-36">
                <div class="glass rounded-xl border border-gray-600 bg-gray-800/60 p-3 md:p-4 w-full text-center relative">
                    <div class="absolute -top-3 left-1/2 -translate-x-1/2 text-2xl">🥈</div>
                    <div class="mt-3 mb-2 flex justify-center">
                        <template x-if="podium[1]">
                            <div>
                                <img :src="podium[1].icon_thumb_url || (podium[1].asset_type==='stock' && podium[1].symbol ? __stockIconUrl(podium[1].symbol) : '')"
                                     :data-symbol="podium[1].symbol" class="w-10 h-10 md:w-12 md:h-12 rounded-full mx-auto" loading="lazy" onerror="__iconError(this)"
                                     x-show="podium[1].icon_thumb_url || podium[1].asset_type==='stock'">
                                <span x-show="!podium[1].icon_thumb_url && podium[1].asset_type!=='stock'"
                                      class="w-10 h-10 md:w-12 md:h-12 rounded-full bg-gray-700 flex items-center justify-center text-sm text-gray-400 mx-auto"
                                      x-text="(podium[1].symbol || '?')[0].toUpperCase()"></span>
                            </div>
                        </template>
                    </div>
                    <p class="text-sm font-bold text-white" x-text="podium[1]?.symbol || '-'"></p>
                    <p class="text-[10px] text-gray-400 truncate" x-text="podium[1]?.name || ''"></p>
                    <p class="text-lg font-bold text-gray-300 mt-1" x-text="(podium[1]?.leaderboard_score||0).toFixed(1)"></p>
                    <p class="text-xs font-medium mt-0.5" :class="(podium[1]?.price_change||0) >= 0 ? 'text-emerald-400' : 'text-red-400'" x-text="formatPct(podium[1]?.price_change)"></p>
                </div>
                <!-- Silver pedestal -->
                <div class="w-full h-16 md:h-20 bg-gradient-to-t from-gray-700/40 to-gray-600/20 rounded-b-lg border-x border-b border-gray-600/50 flex items-center justify-center">
                    <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">Silver</span>
                </div>
            </div>

            <!-- #1 Gold (Center - taller) -->
            <div class="flex flex-col items-center w-32 md:w-40 -mt-6">
                <div class="glass rounded-xl border-2 border-amber-600/60 bg-amber-950/30 p-4 md:p-5 w-full text-center relative shadow-lg shadow-amber-500/10 ring-1 ring-amber-500/20">
                    <div class="absolute -top-4 left-1/2 -translate-x-1/2 text-3xl">🥇</div>
                    <div class="mt-4 mb-2 flex justify-center">
                        <template x-if="podium[0]">
                            <div>
                                <img :src="podium[0].icon_thumb_url || (podium[0].asset_type==='stock' && podium[0].symbol ? __stockIconUrl(podium[0].symbol) : '')"
                                     :data-symbol="podium[0].symbol" class="w-12 h-12 md:w-14 md:h-14 rounded-full mx-auto ring-2 ring-amber-500/40" loading="lazy" onerror="__iconError(this)"
                                     x-show="podium[0].icon_thumb_url || podium[0].asset_type==='stock'">
                                <span x-show="!podium[0].icon_thumb_url && podium[0].asset_type!=='stock'"
                                      class="w-12 h-12 md:w-14 md:h-14 rounded-full bg-amber-900/50 flex items-center justify-center text-base text-amber-300 mx-auto ring-2 ring-amber-500/40"
                                      x-text="(podium[0].symbol || '?')[0].toUpperCase()"></span>
                            </div>
                        </template>
                    </div>
                    <p class="text-base font-bold text-amber-300" x-text="podium[0]?.symbol || '-'"></p>
                    <p class="text-[10px] text-amber-400/60 truncate" x-text="podium[0]?.name || ''"></p>
                    <p class="text-2xl font-bold text-amber-400 mt-1" x-text="(podium[0]?.leaderboard_score||0).toFixed(1)"></p>
                    <p class="text-sm font-semibold mt-0.5" :class="(podium[0]?.price_change||0) >= 0 ? 'text-emerald-400' : 'text-red-400'" x-text="formatPct(podium[0]?.price_change)"></p>
                </div>
                <!-- Gold pedestal -->
                <div class="w-full h-24 md:h-28 bg-gradient-to-t from-amber-800/30 to-amber-700/10 rounded-b-lg border-x border-b border-amber-700/40 flex items-center justify-center">
                    <span class="text-xs font-bold text-amber-500 uppercase tracking-wider">Gold</span>
                </div>
            </div>

            <!-- #3 Bronze (Right) -->
            <div class="flex flex-col items-center w-28 md:w-36">
                <div class="glass rounded-xl border border-orange-800/50 bg-orange-950/20 p-3 md:p-4 w-full text-center relative">
                    <div class="absolute -top-3 left-1/2 -translate-x-1/2 text-2xl">🥉</div>
                    <div class="mt-3 mb-2 flex justify-center">
                        <template x-if="podium[2]">
                            <div>
                                <img :src="podium[2].icon_thumb_url || (podium[2].asset_type==='stock' && podium[2].symbol ? __stockIconUrl(podium[2].symbol) : '')"
                                     :data-symbol="podium[2].symbol" class="w-10 h-10 md:w-12 md:h-12 rounded-full mx-auto" loading="lazy" onerror="__iconError(this)"
                                     x-show="podium[2].icon_thumb_url || podium[2].asset_type==='stock'">
                                <span x-show="!podium[2].icon_thumb_url && podium[2].asset_type!=='stock'"
                                      class="w-10 h-10 md:w-12 md:h-12 rounded-full bg-gray-700 flex items-center justify-center text-sm text-gray-400 mx-auto"
                                      x-text="(podium[2].symbol || '?')[0].toUpperCase()"></span>
                            </div>
                        </template>
                    </div>
                    <p class="text-sm font-bold text-white" x-text="podium[2]?.symbol || '-'"></p>
                    <p class="text-[10px] text-gray-400 truncate" x-text="podium[2]?.name || ''"></p>
                    <p class="text-lg font-bold text-orange-300 mt-1" x-text="(podium[2]?.leaderboard_score||0).toFixed(1)"></p>
                    <p class="text-xs font-medium mt-0.5" :class="(podium[2]?.price_change||0) >= 0 ? 'text-emerald-400' : 'text-red-400'" x-text="formatPct(podium[2]?.price_change)"></p>
                </div>
                <!-- Bronze pedestal -->
                <div class="w-full h-12 md:h-16 bg-gradient-to-t from-orange-800/30 to-orange-700/10 rounded-b-lg border-x border-b border-orange-800/40 flex items-center justify-center">
                    <span class="text-xs font-bold text-orange-400 uppercase tracking-wider">Bronze</span>
                </div>
            </div>

        </div>
    </div>

    <!-- ============================================================ -->
    <!-- CATEGORY TABS                                                -->
    <!-- ============================================================ -->
    <div class="flex flex-wrap gap-2">
        <button @click="setCategory('overall')"
                class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-sm font-medium border transition"
                :class="category === 'overall'
                    ? 'border-amber-700 text-amber-300 bg-amber-900/30'
                    : 'border-gray-700 text-gray-400 bg-gray-800/50 hover:border-gray-600 hover:text-gray-300'">
            <span>Overall</span>
        </button>
        <button @click="setCategory('gainers')"
                class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-sm font-medium border transition"
                :class="category === 'gainers'
                    ? 'border-emerald-700 text-emerald-300 bg-emerald-900/30'
                    : 'border-gray-700 text-gray-400 bg-gray-800/50 hover:border-gray-600 hover:text-gray-300'">
            <span>Top Gainers</span>
        </button>
        <button @click="setCategory('consistent')"
                class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-sm font-medium border transition"
                :class="category === 'consistent'
                    ? 'border-sky-700 text-sky-300 bg-sky-900/30'
                    : 'border-gray-700 text-gray-400 bg-gray-800/50 hover:border-gray-600 hover:text-gray-300'">
            <span>Consistent</span>
        </button>
        <button @click="setCategory('momentum')"
                class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-sm font-medium border transition"
                :class="category === 'momentum'
                    ? 'border-purple-700 text-purple-300 bg-purple-900/30'
                    : 'border-gray-700 text-gray-400 bg-gray-800/50 hover:border-gray-600 hover:text-gray-300'">
            <span>Momentum</span>
        </button>
        <button @click="setCategory('recovery')"
                class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-sm font-medium border transition"
                :class="category === 'recovery'
                    ? 'border-orange-700 text-orange-300 bg-orange-900/30'
                    : 'border-gray-700 text-gray-400 bg-gray-800/50 hover:border-gray-600 hover:text-gray-300'">
            <span>Recovery</span>
        </button>
    </div>

    <!-- ============================================================ -->
    <!-- TIMEFRAME PILLS + FILTERS                                    -->
    <!-- ============================================================ -->
    <div class="flex flex-wrap items-center gap-3">
        <!-- Timeframe Pills -->
        <div class="flex items-center gap-1 bg-gray-800/50 rounded-lg p-0.5 border border-gray-700">
            <template x-for="tf in ['24h','7d','30d']" :key="tf">
                <button @click="setTimeframe(tf)"
                        class="px-3 py-1 text-xs font-medium rounded-md transition"
                        :class="timeframe === tf
                            ? 'bg-amber-600 text-white shadow-sm'
                            : 'text-gray-400 hover:text-white'">
                    <span x-text="tf"></span>
                </button>
            </template>
        </div>

        <!-- Asset Type Filter -->
        <select x-model="filters.asset_type" @change="fetchData()"
                class="bg-gray-800 border border-gray-700 text-gray-300 text-xs rounded-lg px-3 py-1.5 focus:ring-amber-500 focus:border-amber-500">
            <option value="all">Semua Aset</option>
            <option value="crypto">Crypto</option>
            <option value="stock">Saham</option>
        </select>

        <!-- Search -->
        <div class="relative flex-1 min-w-[180px] max-w-xs">
            <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 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.debounce.400ms="searchQ" @input.debounce.400ms="fetchData()"
                   placeholder="Cari nama atau simbol..."
                   class="w-full bg-gray-800 border border-gray-700 text-gray-300 text-xs rounded-lg pl-8 pr-3 py-1.5 focus:ring-amber-500 focus:border-amber-500 placeholder-gray-500">
        </div>
    </div>

    <!-- ============================================================ -->
    <!-- LOADING SKELETON                                             -->
    <!-- ============================================================ -->
    <div x-show="loading" x-cloak class="space-y-3">
        <template x-for="i in 5" :key="i">
            <div class="glass rounded-xl border border-gray-800 p-4 animate-pulse">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-gray-700 rounded-full"></div>
                    <div class="flex-1 space-y-2">
                        <div class="h-3 bg-gray-700 rounded w-32"></div>
                        <div class="h-2 bg-gray-800 rounded w-48"></div>
                    </div>
                    <div class="h-5 bg-gray-700 rounded w-16"></div>
                </div>
            </div>
        </template>
    </div>

    <!-- ============================================================ -->
    <!-- EMPTY STATE                                                  -->
    <!-- ============================================================ -->
    <div x-show="!loading && items.length === 0" x-cloak class="glass rounded-xl border border-gray-800 p-12 text-center">
        <svg class="w-16 h-16 text-gray-700 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.5 18.75h-9m9 0a3 3 0 013 3h-15a3 3 0 013-3m9 0v-4.5A3.375 3.375 0 0012.75 10.5h-.75a.75.75 0 01-.75-.75V6.75a3 3 0 00-3-3H6.375m0 0H3.75m2.625 0L12 .75l5.625 3H21v3.375a3 3 0 01-3 3h-1.875a.75.75 0 00-.75.75v2.625a3.375 3.375 0 01-3.375 3.375h-.75"/>
        </svg>
        <p class="text-gray-500 text-sm">Belum Ada Data Leaderboard</p>
        <p class="text-gray-600 text-xs mt-1">Coba ubah kategori atau timeframe</p>
    </div>

    <!-- ============================================================ -->
    <!-- RANKED LIST                                                  -->
    <!-- ============================================================ -->
    <div x-show="!loading && items.length > 0" x-cloak class="space-y-2">
        <template x-for="item in items" :key="item.asset_id + '-' + item.rank">
            <a :href="'/market/asset/' + item.asset_id"
               class="block glass rounded-xl border transition hover:border-amber-800/60 hover:bg-gray-800/40"
               :class="tierBorderColor(item.tier)">
                <div class="p-3 md:p-4">
                    <!-- Top Row: Rank + Icon + Name + Tier + Score + Change -->
                    <div class="flex items-center gap-3">
                        <!-- Rank -->
                        <div class="flex-shrink-0 w-8 text-center">
                            <span x-show="item.rank <= 3" class="text-xl" x-text="rankMedal(item.rank)"></span>
                            <span x-show="item.rank > 3" class="text-sm font-bold text-gray-500" x-text="'#' + item.rank"></span>
                        </div>

                        <!-- Icon -->
                        <div class="flex-shrink-0">
                            <img :src="item.icon_thumb_url || (item.asset_type==='stock' && item.symbol ? __stockIconUrl(item.symbol) : '')"
                                 :data-symbol="item.symbol" class="w-10 h-10 rounded-full" loading="lazy" onerror="__iconError(this)"
                                 x-show="item.icon_thumb_url || item.asset_type==='stock'">
                            <span x-show="!item.icon_thumb_url && item.asset_type!=='stock'"
                                  class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-sm text-gray-400"
                                  x-text="(item.symbol || '?')[0].toUpperCase()"></span>
                        </div>

                        <!-- Name + Symbol + Badges -->
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 flex-wrap">
                                <span class="text-sm font-semibold text-white truncate" x-text="item.name"></span>
                                <span class="text-xs text-gray-500" x-text="item.symbol"></span>
                                <!-- Tier Badge -->
                                <span class="px-1.5 py-0.5 text-[10px] font-semibold rounded border" :class="tierColor(item.tier)" x-text="tierLabel(item.tier)"></span>
                            </div>
                            <!-- Badges Row -->
                            <div class="flex items-center gap-1.5 mt-0.5" x-show="item.badges && item.badges.length > 0">
                                <template x-for="b in (item.badges || [])" :key="b">
                                    <span class="inline-flex items-center gap-0.5 text-[10px] text-amber-400/80" :title="badgeLabel(b)">
                                        <span x-text="badgeIcon(b)"></span>
                                        <span class="hidden md:inline" x-text="badgeLabel(b)"></span>
                                    </span>
                                </template>
                            </div>
                        </div>

                        <!-- Score + Change + Trend -->
                        <div class="flex-shrink-0 text-right">
                            <div class="flex items-center gap-2 justify-end">
                                <span class="text-base font-bold text-amber-400" x-text="(item.leaderboard_score||0).toFixed(1)"></span>
                                <span class="text-xs font-medium" :class="trendColor(item.trend_direction)" x-text="trendArrow(item.trend_direction)"></span>
                            </div>
                            <span class="text-xs font-medium" :class="(item.price_change||0) >= 0 ? 'text-emerald-400' : 'text-red-400'" x-text="formatPct(item.price_change)"></span>
                        </div>
                    </div>

                    <!-- Sub-scores Bar (collapsed on mobile, visible on md+) -->
                    <div class="mt-3 grid grid-cols-4 gap-2 md:gap-3">
                        <!-- Performance -->
                        <div>
                            <div class="flex items-center justify-between mb-0.5">
                                <span class="text-[10px] text-gray-500">Performance</span>
                                <span class="text-[10px] font-medium text-gray-400" x-text="(item.performance_score||0).toFixed(0) + '/35'"></span>
                            </div>
                            <div class="h-1 bg-gray-800 rounded-full overflow-hidden">
                                <div class="h-full bg-amber-500 rounded-full transition-all duration-500"
                                     :style="'width:' + Math.min(100, (item.performance_score||0)/35*100) + '%'"></div>
                            </div>
                        </div>
                        <!-- Consistency -->
                        <div>
                            <div class="flex items-center justify-between mb-0.5">
                                <span class="text-[10px] text-gray-500">Consistency</span>
                                <span class="text-[10px] font-medium text-gray-400" x-text="(item.consistency_score||0).toFixed(0) + '/25'"></span>
                            </div>
                            <div class="h-1 bg-gray-800 rounded-full overflow-hidden">
                                <div class="h-full bg-sky-500 rounded-full transition-all duration-500"
                                     :style="'width:' + Math.min(100, (item.consistency_score||0)/25*100) + '%'"></div>
                            </div>
                        </div>
                        <!-- Momentum -->
                        <div>
                            <div class="flex items-center justify-between mb-0.5">
                                <span class="text-[10px] text-gray-500">Momentum</span>
                                <span class="text-[10px] font-medium text-gray-400" x-text="(item.momentum_score||0).toFixed(0) + '/25'"></span>
                            </div>
                            <div class="h-1 bg-gray-800 rounded-full overflow-hidden">
                                <div class="h-full bg-purple-500 rounded-full transition-all duration-500"
                                     :style="'width:' + Math.min(100, (item.momentum_score||0)/25*100) + '%'"></div>
                            </div>
                        </div>
                        <!-- Recovery -->
                        <div>
                            <div class="flex items-center justify-between mb-0.5">
                                <span class="text-[10px] text-gray-500">Recovery</span>
                                <span class="text-[10px] font-medium text-gray-400" x-text="(item.recovery_score||0).toFixed(0) + '/15'"></span>
                            </div>
                            <div class="h-1 bg-gray-800 rounded-full overflow-hidden">
                                <div class="h-full bg-emerald-500 rounded-full transition-all duration-500"
                                     :style="'width:' + Math.min(100, (item.recovery_score||0)/15*100) + '%'"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Extra Info Row -->
                    <div class="mt-2 flex items-center gap-3 text-[10px] text-gray-500 flex-wrap">
                        <span x-show="item.current_price_idr">Rp <span x-text="formatNumber(item.current_price_idr)"></span></span>
                        <span x-show="item.bullish_score != null">Bullish: <span class="text-gray-400" x-text="(item.bullish_score||0).toFixed(0) + '%'"></span></span>
                        <span x-show="item.market_cap_rank">MCap Rank: <span class="text-gray-400" x-text="'#' + item.market_cap_rank"></span></span>
                        <span class="uppercase" x-text="item.asset_type" x-show="item.asset_type"></span>
                    </div>
                </div>
            </a>
        </template>
    </div>

    <!-- ============================================================ -->
    <!-- LOAD MORE                                                    -->
    <!-- ============================================================ -->
    <div x-show="!loading && hasMore" x-cloak class="text-center pt-2">
        <button @click="loadMore()" :disabled="loadingMore"
                class="inline-flex items-center gap-2 px-6 py-2 text-sm font-medium rounded-lg border transition"
                :class="loadingMore
                    ? 'border-amber-800 text-amber-400 bg-amber-900/20 cursor-wait'
                    : 'border-gray-700 text-gray-300 bg-gray-800 hover:border-amber-700 hover:text-amber-400'">
            <svg x-show="loadingMore" x-cloak class="w-4 h-4 animate-spin" 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>
            <span x-text="loadingMore ? 'Memuat...' : 'Muat Lebih Banyak'"></span>
        </button>
        <p class="text-[10px] text-gray-600 mt-1">Menampilkan <span x-text="items.length"></span> dari <span x-text="total"></span></p>
    </div>

</div>
{% endblock %}

{% block scripts %}
<script>
function leaderboardPanel() {
    return {
        items: [],
        podium: [],
        loading: false,
        loadingMore: false,
        total: 0,
        hasMore: false,
        page: 1,
        summary: {},
        category: 'overall',
        timeframe: '7d',
        filters: { asset_type: '{{ asset_mode }}' },
        sortBy: 'rank',
        searchQ: '',

        async fetchData() {
            this.page = 1;
            this.loading = true;
            try {
                const params = new URLSearchParams({
                    category: this.category,
                    timeframe: this.timeframe,
                    sort: this.sortBy,
                    limit: 20,
                    page: 1,
                    q: this.searchQ,
                    asset_type: this.filters.asset_type
                });
                const res = await fetch('/api/v1/market/screener/leaderboard?' + params);
                const data = await res.json();
                this.items = data.items || [];
                this.podium = data.podium || [];
                this.total = data.total || 0;
                this.hasMore = data.has_more || false;
                this.summary = data.summary || {};
            } catch(e) {
                console.error('Leaderboard fetch error:', e);
            } finally {
                this.loading = false;
            }
        },

        async loadMore() {
            this.loadingMore = true;
            this.page++;
            try {
                const params = new URLSearchParams({
                    category: this.category,
                    timeframe: this.timeframe,
                    sort: this.sortBy,
                    limit: 20,
                    page: this.page,
                    q: this.searchQ,
                    asset_type: this.filters.asset_type
                });
                const res = await fetch('/api/v1/market/screener/leaderboard?' + params);
                const data = await res.json();
                this.items = [...this.items, ...(data.items || [])];
                this.hasMore = data.has_more || false;
            } catch(e) {
                console.error('Leaderboard loadMore error:', e);
            } finally {
                this.loadingMore = false;
            }
        },

        setCategory(c) {
            this.category = c;
            this.fetchData();
        },

        setTimeframe(tf) {
            this.timeframe = tf;
            this.fetchData();
        },

        tierColor(t) {
            return {
                champion: 'text-amber-400 bg-amber-900/30 border-amber-800',
                contender: 'text-sky-400 bg-sky-900/30 border-sky-800',
                rising: 'text-emerald-400 bg-emerald-900/30 border-emerald-800',
                participant: 'text-gray-400 bg-gray-800 border-gray-700'
            }[t] || 'text-gray-400 bg-gray-800 border-gray-700';
        },

        tierBorderColor(t) {
            return {
                champion: 'border-amber-800/50',
                contender: 'border-sky-800/50',
                rising: 'border-emerald-800/50',
                participant: 'border-gray-800'
            }[t] || 'border-gray-800';
        },

        tierLabel(t) {
            return {
                champion: 'Champion',
                contender: 'Contender',
                rising: 'Rising',
                participant: 'Participant'
            }[t] || t;
        },

        rankMedal(r) {
            return { 1: '\u{1F947}', 2: '\u{1F948}', 3: '\u{1F949}' }[r] || '#' + r;
        },

        badgeIcon(b) {
            return {
                top_gainer: '\u{1F3C6}',
                most_consistent: '\u{1F4CA}',
                momentum_king: '\u{1F680}',
                recovery_star: '\u2B50'
            }[b] || '';
        },

        badgeLabel(b) {
            return {
                top_gainer: 'Top Gainer',
                most_consistent: 'Most Consistent',
                momentum_king: 'Momentum King',
                recovery_star: 'Recovery Star'
            }[b] || b;
        },

        trendArrow(d) {
            return {
                accelerating: '\u2191\u2191',
                steady: '\u2192',
                decelerating: '\u2193',
                reversing: '\u2193\u2193'
            }[d] || '';
        },

        trendColor(d) {
            return {
                accelerating: 'text-emerald-400',
                steady: 'text-gray-400',
                decelerating: 'text-amber-400',
                reversing: 'text-red-400'
            }[d] || 'text-gray-500';
        },

        formatNumber(n) {
            if (n == null) return '-';
            return new Intl.NumberFormat('id-ID').format(n);
        },

        formatPct(n) {
            if (n == null) return '-';
            return (n >= 0 ? '+' : '') + n.toFixed(2) + '%';
        }
    };
}
</script>
{% endblock %}