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

{% block content %}
<div class="space-y-6" x-data="marketDashboard()">
    <!-- Header + Search -->
    <div class="flex items-center justify-between gap-4">
        <div class="flex items-center gap-3">
            <h1 class="text-2xl font-bold text-white">Market</h1>
            {% if last_synced %}
            <span class="text-xs text-gray-600 hidden sm:inline-flex items-center gap-1">
                <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse-dot"></span>
                Update {{ last_synced|wib_short }}
            </span>
            {% endif %}
        </div>
        <!-- Search Bar -->
        <div class="relative flex-shrink-0" @click.outside="searchResults = []" @keydown.escape.window="searchResults = []">
            <div class="relative">
                <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                <input type="text" x-model="searchQuery" @input.debounce.300ms="searchCoins()" @focus="if (searchQuery.length >= 1) searchCoins()"
                       placeholder="Cari {{ item_label|lower }}..."
                       class="w-48 sm:w-64 bg-gray-800 border border-gray-700 rounded-lg pl-9 pr-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-koin-500 focus:border-koin-500 transition">
            </div>
            <!-- Search Results Dropdown -->
            <div x-show="searchResults.length > 0" x-cloak x-transition
                 class="absolute top-full right-0 mt-1 w-80 bg-gray-800 border border-gray-700 rounded-xl shadow-2xl z-50 max-h-80 overflow-y-auto">
                <template x-for="coin in searchResults" :key="coin.id">
                    <a :href="'/market/asset/' + coin.id" class="flex items-center gap-3 px-4 py-2.5 hover:bg-gray-700/50 transition text-sm border-b border-gray-800/50 last:border-0">
                        <img :src="coin.icon_thumb_url || (coin.asset_type==='stock' && coin.symbol ? __stockIconUrl(coin.symbol) : '')" :data-symbol="coin.symbol" class="w-6 h-6 rounded-full flex-shrink-0" loading="lazy" onerror="__iconError(this)" x-show="coin.icon_thumb_url || coin.asset_type==='stock'">
                        <span x-show="!coin.icon_thumb_url && coin.asset_type!=='stock'" class="w-6 h-6 rounded-full bg-gray-700 flex items-center justify-center text-[10px] text-gray-400 flex-shrink-0" x-text="(coin.symbol || '?')[0]"></span>
                        <div class="flex-1 min-w-0">
                            <span class="text-white truncate block" x-text="coin.name"></span>
                        </div>
                        <span class="text-gray-500 text-xs font-mono flex-shrink-0" x-text="coin.symbol"></span>
                        <span class="text-gray-600 text-xs flex-shrink-0" x-show="coin.market_cap_rank" x-text="'#' + coin.market_cap_rank"></span>
                    </a>
                </template>
            </div>
        </div>
    </div>

    <!-- Market Sentiment + Stats Row -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <!-- Sentiment Gauge -->
        <div class="glass rounded-xl border border-gray-800 p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider mb-2">Market Sentiment</p>
            <div class="flex items-center gap-3">
                <div class="relative w-14 h-14 flex-shrink-0">
                    <svg viewBox="0 0 36 36" class="w-14 h-14 -rotate-90">
                        <circle cx="18" cy="18" r="15" fill="none" stroke="#1f2937" stroke-width="3"/>
                        <circle cx="18" cy="18" r="15" fill="none"
                                stroke="{% if sentiment.color == 'emerald' %}#10b981{% elif sentiment.color == 'red' %}#ef4444{% else %}#6b7280{% endif %}"
                                stroke-width="3" stroke-dasharray="{{ (sentiment.score / 100 * 94.2)|round(1) }} 94.2"
                                stroke-linecap="round"/>
                    </svg>
                    <span class="absolute inset-0 flex items-center justify-center text-sm font-bold text-white">{{ sentiment.score }}</span>
                </div>
                <div>
                    <p class="text-lg font-bold {% if sentiment.color == 'emerald' %}text-emerald-400{% elif sentiment.color == 'red' %}text-red-400{% else %}text-gray-400{% endif %}">
                        {{ sentiment.label }}
                    </p>
                    <div class="flex items-center gap-2 text-xs mt-0.5">
                        <span class="text-emerald-400">▲ {{ sentiment.gainers }}</span>
                        <span class="text-red-400">▼ {{ sentiment.losers }}</span>
                        <span class="text-gray-500">― {{ sentiment.neutral }}</span>
                    </div>
                    <p class="text-xs text-gray-500 mt-0.5">
                        Avg: <span class="{% if sentiment.avg_change >= 0 %}text-emerald-400{% else %}text-red-400{% endif %}">{{ sentiment.avg_change|spct2 }}</span>
                    </p>
                </div>
            </div>
        </div>

        <!-- Synced Coins -->
        <a href="/market/screener?tab=gainers" class="glass rounded-xl border border-gray-800 p-4 hover:border-gray-700 transition group">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Synced {{ item_label }}</p>
            <p class="text-2xl font-bold text-white mt-1">{{ total_synced }}</p>
            <p class="text-xs text-gray-600 mt-1 group-hover:text-gray-400 transition">Lihat screener →</p>
        </a>

        <!-- Market Status (stock_us only) -->
        {% if is_stock_us_mode %}
        <div class="glass rounded-xl border border-gray-800 p-4" x-data="marketStatusWidget()" x-init="load()">
            <p class="text-xs text-gray-500 uppercase tracking-wider">US Market</p>
            <template x-if="loading">
                <div class="mt-2"><div class="inline-block w-4 h-4 border-2 border-gray-600 border-t-cyan-400 rounded-full animate-spin"></div></div>
            </template>
            <template x-if="!loading && status">
                <div class="mt-1">
                    <div class="flex items-center gap-2">
                        <span class="w-2.5 h-2.5 rounded-full" :class="isOpen ? 'bg-emerald-400 animate-pulse' : 'bg-red-400'"></span>
                        <span class="text-lg font-bold" :class="isOpen ? 'text-emerald-400' : 'text-red-400'" x-text="isOpen ? 'Open' : 'Closed'"></span>
                    </div>
                    <p class="text-[10px] text-gray-500 mt-1" x-text="statusDetail"></p>
                </div>
            </template>
            <template x-if="!loading && !status">
                <p class="text-xs text-gray-500 mt-2">-</p>
            </template>
        </div>
        {% endif %}

        <!-- Total Market Cap -->
        <div class="glass rounded-xl border border-gray-800 p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Total Market Cap</p>
            <p class="text-2xl font-bold text-white mt-1">Rp {{ total_mcap|abbr }}</p>
        </div>

        <!-- Volume 24h -->
        <div class="glass rounded-xl border border-gray-800 p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Volume 24h</p>
            <p class="text-2xl font-bold text-white mt-1">Rp {{ total_vol|abbr }}</p>
        </div>
    </div>

    <!-- Price Filter -->
    <div class="flex items-center gap-2 flex-wrap">
        <span class="text-xs text-gray-500 uppercase tracking-wider">Filter Harga:</span>
        <template x-for="opt in priceOptions" :key="opt.key">
            <button @click="selectPriceFilter(opt.key)"
                    :class="activePriceFilter === opt.key ? 'bg-koin-600 text-white border-koin-500' : 'bg-gray-800 text-gray-400 border-gray-700 hover:bg-gray-700'"
                    class="px-3 py-1 rounded-full text-xs border transition" x-text="opt.label"></button>
        </template>
    </div>

    <!-- Top Movers -->
    {% if synced_coins %}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Top Gainer 24h -->
        <div class="glass rounded-xl border border-emerald-900/50 overflow-hidden">
            <div class="px-4 py-3 bg-emerald-900/20 border-b border-emerald-900/30 flex items-center justify-between">
                <h3 class="text-sm font-semibold text-emerald-400">🚀 Top Gainer 24h</h3>
                <a href="/market/screener?tab=gainers" class="text-xs text-emerald-500 hover:text-emerald-300 transition">Lihat Semua →</a>
            </div>
            <div class="divide-y divide-gray-800/50">
                {% for item in top_gainers %}
                <a href="/market/asset/{{ item.asset.id }}" data-price="{{ item.profile.current_price_idr|float if item.profile.current_price_idr else 0 }}" class="mover-row flex items-center justify-between px-4 py-2.5 hover:bg-gray-800/50 transition group">
                    <div class="flex items-center gap-2 min-w-0">
                        {% set _ic = coin_icon(item.coin) %}
                        {% if _ic %}
                        <img src="{{ _ic }}" alt="" data-symbol="{{ item.asset.symbol }}" class="w-6 h-6 rounded-full flex-shrink-0" loading="lazy" onerror="__iconError(this)">
                        {% else %}
                        <span class="w-6 h-6 rounded-full bg-gray-700 flex items-center justify-center text-[10px] text-gray-400 flex-shrink-0">{{ item.asset.symbol[:1] }}</span>
                        {% endif %}
                        <div class="min-w-0">
                            <span class="text-sm text-white truncate block">{{ item.asset.name }}</span>
                            <span class="text-[10px] text-gray-500">{{ item.asset.symbol }}</span>
                        </div>
                    </div>
                    <div class="text-right flex-shrink-0">
                        <span class="text-sm font-medium text-emerald-400 block">+{{ item.profile.price_change_24h|float|num2 }}%</span>
                        <span class="text-[10px] text-gray-500">Rp {{ item.profile.current_price_idr|float|price }}</span>
                    </div>
                </a>
                {% endfor %}
                {% if not top_gainers %}
                <div class="px-4 py-4 text-center text-gray-600 text-sm">No data</div>
                {% endif %}
            </div>
        </div>

        <!-- Top Loser 24h -->
        <div class="glass rounded-xl border border-red-900/50 overflow-hidden">
            <div class="px-4 py-3 bg-red-900/20 border-b border-red-900/30 flex items-center justify-between">
                <h3 class="text-sm font-semibold text-red-400">📉 Top Loser 24h</h3>
                <a href="/market/screener?tab=losers" class="text-xs text-red-500 hover:text-red-300 transition">Lihat Semua →</a>
            </div>
            <div class="divide-y divide-gray-800/50">
                {% for item in top_losers %}
                <a href="/market/asset/{{ item.asset.id }}" data-price="{{ item.profile.current_price_idr|float if item.profile.current_price_idr else 0 }}" class="mover-row flex items-center justify-between px-4 py-2.5 hover:bg-gray-800/50 transition group">
                    <div class="flex items-center gap-2 min-w-0">
                        {% set _ic = coin_icon(item.coin) %}
                        {% if _ic %}
                        <img src="{{ _ic }}" alt="" data-symbol="{{ item.asset.symbol }}" class="w-6 h-6 rounded-full flex-shrink-0" loading="lazy" onerror="__iconError(this)">
                        {% else %}
                        <span class="w-6 h-6 rounded-full bg-gray-700 flex items-center justify-center text-[10px] text-gray-400 flex-shrink-0">{{ item.asset.symbol[:1] }}</span>
                        {% endif %}
                        <div class="min-w-0">
                            <span class="text-sm text-white truncate block">{{ item.asset.name }}</span>
                            <span class="text-[10px] text-gray-500">{{ item.asset.symbol }}</span>
                        </div>
                    </div>
                    <div class="text-right flex-shrink-0">
                        <span class="text-sm font-medium text-red-400 block">{{ item.profile.price_change_24h|float|num2 }}%</span>
                        <span class="text-[10px] text-gray-500">Rp {{ item.profile.current_price_idr|float|price }}</span>
                    </div>
                </a>
                {% endfor %}
                {% if not top_losers %}
                <div class="px-4 py-4 text-center text-gray-600 text-sm">No data</div>
                {% endif %}
            </div>
        </div>

        <!-- Top Volume 24h -->
        <div class="glass rounded-xl border border-blue-900/50 overflow-hidden">
            <div class="px-4 py-3 bg-blue-900/20 border-b border-blue-900/30 flex items-center justify-between">
                <h3 class="text-sm font-semibold text-blue-400">💎 Top Volume 24h</h3>
                <a href="/market/screener?tab=volume" class="text-xs text-blue-500 hover:text-blue-300 transition">Lihat Semua →</a>
            </div>
            <div class="divide-y divide-gray-800/50">
                {% for item in top_volume %}
                <a href="/market/asset/{{ item.asset.id }}" data-price="{{ item.profile.current_price_idr|float if item.profile.current_price_idr else 0 }}" class="mover-row flex items-center justify-between px-4 py-2.5 hover:bg-gray-800/50 transition group">
                    <div class="flex items-center gap-2 min-w-0">
                        {% set _ic = coin_icon(item.coin) %}
                        {% if _ic %}
                        <img src="{{ _ic }}" alt="" data-symbol="{{ item.asset.symbol }}" class="w-6 h-6 rounded-full flex-shrink-0" loading="lazy" onerror="__iconError(this)">
                        {% else %}
                        <span class="w-6 h-6 rounded-full bg-gray-700 flex items-center justify-center text-[10px] text-gray-400 flex-shrink-0">{{ item.asset.symbol[:1] }}</span>
                        {% endif %}
                        <div class="min-w-0">
                            <span class="text-sm text-white truncate block">{{ item.asset.name }}</span>
                            <span class="text-[10px] text-gray-500">{{ item.asset.symbol }}</span>
                        </div>
                    </div>
                    <div class="text-right flex-shrink-0">
                        {% set vol = item.profile.total_volume_idr or 0 %}
                        <span class="text-sm font-medium text-blue-400 block">Rp {{ vol|abbr }}</span>
                        <span class="text-[10px] text-gray-500">Rp {{ item.profile.current_price_idr|float|price }}</span>
                    </div>
                </a>
                {% endfor %}
                {% if not top_volume %}
                <div class="px-4 py-4 text-center text-gray-600 text-sm">No data</div>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Strategy Picks -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        {% set strat_tab_map = {'scalping': 'scalping', 'swing': 'swing', 'long_term': 'investment'} %}
        {% set strategies = [
            ('scalping', 'Scalping', 'Profit cepat dari fluktuasi kecil', 'text-amber-400', 'border-amber-900/50', 'bg-amber-900/20', 'border-amber-900/30', 'text-amber-500 hover:text-amber-300'),
            ('swing', 'Swing Trading', 'Profit dari swing harga beberapa hari', 'text-purple-400', 'border-purple-900/50', 'bg-purple-900/20', 'border-purple-900/30', 'text-purple-500 hover:text-purple-300'),
            ('long_term', 'Investment', 'Investasi jangka panjang', 'text-cyan-400', 'border-cyan-900/50', 'bg-cyan-900/20', 'border-cyan-900/30', 'text-cyan-500 hover:text-cyan-300')
        ] %}
        {% for strat_key, strat_name, strat_desc, text_color, border_color, bg_color, header_border, link_color in strategies %}
        <div class="glass rounded-xl {{ border_color }} overflow-hidden">
            <div class="px-4 py-3 {{ bg_color }} border-b {{ header_border }}">
                <div class="flex items-center justify-between">
                    <h3 class="text-sm font-semibold {{ text_color }}">Best for {{ strat_name }}</h3>
                    <a href="/market/screener?tab={{ strat_tab_map[strat_key] }}" class="text-xs {{ link_color }} transition">Lihat Semua →</a>
                </div>
                <p class="text-xs text-gray-500 mt-0.5">{{ strat_desc }}</p>
            </div>
            <div class="divide-y divide-gray-800/50">
                {% if strat_key in strategy_picks %}
                {% for pick in strategy_picks[strat_key] %}
                <a href="/market/asset/{{ pick.asset.id }}?tab=analysis" data-price="{{ pick.price }}" class="strat-row flex items-center gap-3 px-4 py-3 hover:bg-white/[0.03] transition">
                    {% set _ic_p = coin_icon(pick.coin) %}
                    {% if _ic_p %}
                    <img src="{{ _ic_p }}" alt="" data-symbol="{{ pick.asset.symbol }}" class="w-8 h-8 rounded-full" loading="lazy" onerror="__iconError(this)">
                    {% else %}
                    <span class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-sm text-gray-400">{{ pick.asset.symbol[:1] }}</span>
                    {% endif %}
                    <div class="flex-1 min-w-0">
                        <p class="text-white font-medium text-sm truncate">{{ pick.asset.name }} <span class="text-gray-500 text-xs">{{ pick.asset.symbol }}</span></p>
                        <div class="flex items-center gap-2 mt-0.5">
                            <span class="text-xs px-1.5 py-0.5 rounded
                                {% if pick.signal.signal_type == 'BUY' %}bg-emerald-900/50 text-emerald-400
                                {% elif pick.signal.signal_type == 'SELL' %}bg-red-900/50 text-red-400
                                {% else %}bg-gray-800 text-gray-400{% endif %}">{{ pick.signal.signal_type }}</span>
                            <span class="text-xs text-gray-400">Score: {{ pick.signal.score|float|num1 }}</span>
                            <span class="text-xs text-gray-500">{{ pick.signal.confidence }}</span>
                        </div>
                    </div>
                    <span class="text-xs text-gray-500 tabular-nums whitespace-nowrap">{{ "Rp {:,.0f}".format(pick.price) if pick.price else '-' }}</span>
                </a>
                {% endfor %}
                {% else %}
                <div class="text-center py-4 px-4">
                    <p class="text-sm text-gray-600">Belum ada sinyal</p>
                    <p class="text-xs text-gray-700 mt-1">Generate via Analysis tab di {{ item_label|lower }} detail</p>
                </div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Buy Recommendations CTA -->
    <a href="/market/buy-now" class="block p-4 bg-gradient-to-r from-emerald-900/30 to-koin-900/30 border border-emerald-800/50 rounded-xl hover:border-emerald-600 transition group">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-lg font-bold text-emerald-400">Rekomendasi Beli Sekarang</h3>
                <p class="text-sm text-gray-400 mt-1">{{ item_label }} dengan probabilitas profit tertinggi saat ini — profit kecil, berkali-kali, pasti.</p>
            </div>
            <svg class="w-6 h-6 text-emerald-500 group-hover:translate-x-1 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
        </div>
    </a>

    <!-- Yahoo Screener & Sector Explorer CTAs (stocks only) -->
    {% if asset_mode in ('stock', 'stock_us') %}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
        <a href="/market/yahoo-screener" class="block p-4 bg-gradient-to-r from-cyan-900/30 to-blue-900/30 border border-cyan-800/50 rounded-xl hover:border-cyan-600 transition group">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-base font-bold text-cyan-400">🔍 Yahoo Screener</h3>
                    <p class="text-xs text-gray-400 mt-1">Day gainers, losers, most active, undervalued stocks</p>
                </div>
                <svg class="w-5 h-5 text-cyan-500 group-hover:translate-x-1 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </div>
        </a>
        <a href="/market/sectors" class="block p-4 bg-gradient-to-r from-purple-900/30 to-violet-900/30 border border-purple-800/50 rounded-xl hover:border-purple-600 transition group">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-base font-bold text-purple-400">📊 Sector & Industry</h3>
                    <p class="text-xs text-gray-400 mt-1">Explore sektor, industri, top companies & ETFs</p>
                </div>
                <svg class="w-5 h-5 text-purple-500 group-hover:translate-x-1 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </div>
        </a>
    </div>
    {% endif %}

    <!-- ═══ Category Filter Chips ═══ -->
    <div x-show="categoryChips.length > 0" x-cloak class="flex items-center gap-2 flex-wrap">
        <span class="text-xs text-gray-500 uppercase tracking-wider">Kategori:</span>
        <button @click="activeCategory = ''; loadTable(1)"
                :class="!activeCategory ? 'bg-koin-600 text-white border-koin-500' : 'bg-gray-800 text-gray-400 border-gray-700 hover:bg-gray-700'"
                class="px-2.5 py-1 rounded-full text-[11px] border transition">Semua</button>
        <template x-for="cat in categoryChips" :key="cat.name">
            <button @click="activeCategory = (activeCategory === cat.name ? '' : cat.name); loadTable(1)"
                    :class="activeCategory === cat.name ? 'bg-koin-600 text-white border-koin-500' : 'bg-gray-800 text-gray-400 border-gray-700 hover:bg-gray-700'"
                    class="px-2.5 py-1 rounded-full text-[11px] border transition">
                <span x-text="cat.name"></span>
                <span class="text-gray-500 ml-0.5" x-text="'(' + cat.count + ')'"></span>
            </button>
        </template>
    </div>

    <!-- ═══ Full Coin Table ═══ -->
    <div class="glass rounded-xl border border-gray-800 overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-800 flex items-center justify-between flex-wrap gap-2">
            <h2 class="text-lg font-semibold text-white">Semua {{ item_label }}</h2>
            <div class="flex items-center gap-2">
                <!-- Table Search -->
                <div class="relative">
                    <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="tableSearch" @input.debounce.400ms="loadTable(1)"
                           placeholder="Filter..."
                           class="w-40 bg-gray-900 border border-gray-700 rounded-lg pl-8 pr-3 py-1.5 text-xs text-gray-200 placeholder-gray-600 focus:outline-none focus:ring-1 focus:ring-koin-500 transition">
                </div>
                <span class="text-xs text-gray-500" x-show="tableData.total > 0" x-text="tableData.total + ' ' + __itemLabelLower"></span>
                <!-- Auto-refresh with countdown -->
                <div class="flex items-center gap-1.5">
                    <div class="relative w-5 h-5 flex-shrink-0" x-show="autoRefreshOn" x-cloak>
                        <svg viewBox="0 0 20 20" class="w-5 h-5 -rotate-90">
                            <circle cx="10" cy="10" r="8" fill="none" stroke="#374151" stroke-width="2"/>
                            <circle cx="10" cy="10" r="8" fill="none" stroke="#10b981" stroke-width="2"
                                    :stroke-dasharray="(refreshCountdown / 60 * 50.3) + ' 50.3'"
                                    stroke-linecap="round" class="transition-all duration-1000"/>
                        </svg>
                        <span class="absolute inset-0 flex items-center justify-center text-[8px] font-mono text-gray-400" x-text="refreshCountdown + 's'"></span>
                    </div>
                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse-dot" x-show="autoRefreshOn" x-cloak></span>
                </div>
                <button @click="toggleAutoRefresh()"
                        class="px-2 py-1 rounded text-[10px] border transition"
                        :class="autoRefreshOn ? 'border-emerald-700 text-emerald-400 bg-emerald-900/20' : 'border-gray-700 text-gray-500 bg-gray-800'">
                    <span x-text="autoRefreshOn ? 'Live ON' : 'Live OFF'"></span>
                </button>
            </div>
        </div>

        <!-- Loading State -->
        <div x-show="tableLoading && tableData.items.length === 0" x-cloak class="flex items-center justify-center py-12">
            <div class="flex items-center gap-3 text-gray-500">
                <svg class="animate-spin w-5 h-5" 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 class="text-sm">Memuat data...</span>
            </div>
        </div>

        <!-- Table (responsive with horizontal scroll on mobile) -->
        <div x-show="tableData.items.length > 0" class="overflow-x-auto scrollbar-thin scrollbar-thumb-gray-700 scrollbar-track-transparent">
            <table class="w-full text-sm min-w-[900px]">
                <thead class="bg-gray-800/50 text-gray-400 text-xs uppercase tracking-wider sticky top-0 z-10">
                    <tr>
                        <th class="px-2 py-3 text-left w-8 sticky left-0 bg-gray-800/90 z-20">#</th>
                        <th class="px-2 py-3 text-center w-8">
                            <svg class="w-3.5 h-3.5 text-gray-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>
                        </th>
                        <th class="px-2 py-3 text-left min-w-[140px]">{{ item_label }}</th>
                        <th class="px-2 py-3 text-right cursor-pointer hover:text-white transition select-none group"
                            @click="toggleSort('price')">
                            <span class="inline-flex items-center gap-1">Harga
                                <span class="text-[10px]" x-show="sortBy === 'price'" x-text="sortDir === 'asc' ? '▲' : '▼'"></span>
                                <span class="text-[10px] text-gray-600 group-hover:text-gray-400" x-show="sortBy !== 'price'">⇅</span>
                            </span>
                        </th>
                        <th class="px-2 py-3 text-right w-14 cursor-pointer hover:text-white transition select-none group"
                            @click="toggleSort('1h')">
                            <span class="inline-flex items-center gap-1">1h
                                <span class="text-[10px]" x-show="sortBy === '1h'" x-text="sortDir === 'asc' ? '▲' : '▼'"></span>
                                <span class="text-[10px] text-gray-600 group-hover:text-gray-400" x-show="sortBy !== '1h'">⇅</span>
                            </span>
                        </th>
                        <th class="px-2 py-3 text-right w-14 cursor-pointer hover:text-white transition select-none group"
                            @click="toggleSort('24h')">
                            <span class="inline-flex items-center gap-1">24h
                                <span class="text-[10px]" x-show="sortBy === '24h'" x-text="sortDir === 'asc' ? '▲' : '▼'"></span>
                                <span class="text-[10px] text-gray-600 group-hover:text-gray-400" x-show="sortBy !== '24h'">⇅</span>
                            </span>
                        </th>
                        <th class="px-2 py-3 text-right w-14 cursor-pointer hover:text-white transition select-none group"
                            @click="toggleSort('7d')">
                            <span class="inline-flex items-center gap-1">7d
                                <span class="text-[10px]" x-show="sortBy === '7d'" x-text="sortDir === 'asc' ? '▲' : '▼'"></span>
                                <span class="text-[10px] text-gray-600 group-hover:text-gray-400" x-show="sortBy !== '7d'">⇅</span>
                            </span>
                        </th>
                        <th class="px-2 py-3 text-right w-14 cursor-pointer hover:text-white transition select-none group"
                            @click="toggleSort('30d')">
                            <span class="inline-flex items-center gap-1">30d
                                <span class="text-[10px]" x-show="sortBy === '30d'" x-text="sortDir === 'asc' ? '▲' : '▼'"></span>
                                <span class="text-[10px] text-gray-600 group-hover:text-gray-400" x-show="sortBy !== '30d'">⇅</span>
                            </span>
                        </th>
                        <th class="px-2 py-3 text-right w-16" title="% dari All-Time High">
                            <span class="text-[10px]">ATH Dist</span>
                        </th>
                        <th class="px-2 py-3 text-right hidden sm:table-cell w-20">
                            <span>Sparkline</span>
                        </th>
                        <th class="px-2 py-3 text-right cursor-pointer hover:text-white transition select-none group"
                            @click="toggleSort('volume')">
                            <span class="inline-flex items-center gap-1">Volume
                                <span class="text-[10px]" x-show="sortBy === 'volume'" x-text="sortDir === 'asc' ? '▲' : '▼'"></span>
                                <span class="text-[10px] text-gray-600 group-hover:text-gray-400" x-show="sortBy !== 'volume'">⇅</span>
                            </span>
                        </th>
                        <th class="px-2 py-3 text-right cursor-pointer hover:text-white transition select-none group"
                            @click="toggleSort('mcap')">
                            <span class="inline-flex items-center gap-1">MCap
                                <span class="text-[10px]" x-show="sortBy === 'mcap'" x-text="sortDir === 'asc' ? '▲' : '▼'"></span>
                                <span class="text-[10px] text-gray-600 group-hover:text-gray-400" x-show="sortBy !== 'mcap'">⇅</span>
                            </span>
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-800/50">
                    <template x-for="item in tableData.items" :key="item.asset_id">
                        <tr class="hover:bg-gray-800/30 transition cursor-pointer group/row"
                            @click="window.location.href = '/market/asset/' + item.asset_id">
                            <td class="px-2 py-3 text-gray-500 text-xs sticky left-0 bg-gray-900/90 group-hover/row:bg-gray-800/90 z-10" x-text="item.rank"></td>
                            <!-- Watchlist Star -->
                            <td class="px-2 py-3 text-center" @click.stop>
                                <button @click="toggleWatchlist(item.asset_id)"
                                        class="transition hover:scale-110 focus:outline-none"
                                        :title="watchlistSet.has(item.asset_id) ? 'Hapus dari watchlist' : 'Tambah ke watchlist'">
                                    <svg class="w-4 h-4 transition-colors" :class="watchlistSet.has(item.asset_id) ? 'text-amber-400 fill-amber-400' : 'text-gray-600 hover:text-amber-400/60 fill-none'"
                                         stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
                                    </svg>
                                </button>
                            </td>
                            <td class="px-2 py-3">
                                <div class="flex items-center gap-2">
                                    <img x-show="item.icon_thumb_url || item.asset_type==='stock'" :src="item.icon_thumb_url || (item.asset_type==='stock' && item.symbol ? __stockIconUrl(item.symbol) : '')" :data-symbol="item.symbol" class="w-6 h-6 rounded-full flex-shrink-0" loading="lazy" onerror="__iconError(this)">
                                    <span x-show="!item.icon_thumb_url && item.asset_type!=='stock'" class="w-6 h-6 rounded-full bg-gray-700 flex items-center justify-center text-[10px] text-gray-400 flex-shrink-0" x-text="item.symbol?.charAt(0)"></span>
                                    <div class="min-w-0">
                                        <span class="text-white font-medium truncate block max-w-[120px]" x-text="item.name"></span>
                                        <span class="text-[10px] text-gray-500 font-mono" x-text="item.symbol"></span>
                                    </div>
                                </div>
                            </td>
                            <td class="px-2 py-3 text-right text-white font-mono text-xs" x-text="formatPrice(item.current_price_idr)"></td>
                            <td class="px-2 py-3 text-right text-xs font-mono"
                                :class="changeColor(item.price_change_1h)"
                                x-text="formatChange(item.price_change_1h)"></td>
                            <td class="px-2 py-3 text-right text-xs font-mono font-medium"
                                :class="changeColor(item.price_change_24h)"
                                x-text="formatChange(item.price_change_24h)"></td>
                            <td class="px-2 py-3 text-right text-xs font-mono"
                                :class="changeColor(item.price_change_7d)"
                                x-text="formatChange(item.price_change_7d)"></td>
                            <!-- 30d Column -->
                            <td class="px-2 py-3 text-right text-xs font-mono"
                                :class="changeColor(item.price_change_30d)"
                                x-text="formatChange(item.price_change_30d)"></td>
                            <!-- ATH Distance -->
                            <td class="px-2 py-3 text-right text-xs font-mono" @click.stop>
                                <template x-if="item.ath_distance != null">
                                    <span class="inline-flex items-center gap-0.5" :title="'ATH: Rp ' + (item.ath_idr ? formatPrice(item.ath_idr) : '-')">
                                        <span class="text-red-400/80" x-text="item.ath_distance.toFixed(1) + '%'"></span>
                                    </span>
                                </template>
                                <template x-if="item.ath_distance == null">
                                    <span class="text-gray-600">-</span>
                                </template>
                            </td>
                            <td class="px-2 py-3 text-right hidden sm:table-cell">
                                <svg :id="'spark-' + item.asset_id" class="w-20 h-8 inline-block" viewBox="0 0 80 32" preserveAspectRatio="none"
                                     x-init="$nextTick(() => drawSparkline(item))">
                                </svg>
                            </td>
                            <td class="px-2 py-3 text-right text-gray-300 text-xs font-mono" x-text="formatVolume(item.total_volume_idr)"></td>
                            <td class="px-2 py-3 text-right text-gray-300 text-xs font-mono" x-text="formatVolume(item.market_cap_idr)"></td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

        <!-- Empty State -->
        <div x-show="!tableLoading && tableData.items.length === 0 && tableData.loaded" x-cloak
             class="flex flex-col items-center justify-center py-12 text-gray-500">
            <svg class="w-10 h-10 mb-2 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/></svg>
            <p class="text-sm" x-text="tableSearch ? 'Tidak ada ' + __itemLabelLower + ' cocok dengan &quot;' + tableSearch + '&quot;' : 'Belum ada data. Sync ' + __itemLabelLower + ' terlebih dahulu.'"></p>
        </div>

        <!-- Pagination -->
        <div x-show="tableData.total_pages > 1" x-cloak
             class="px-4 py-3 border-t border-gray-800 flex items-center justify-between text-xs">
            <span class="text-gray-500" x-text="'Halaman ' + tableData.page + ' dari ' + tableData.total_pages"></span>
            <div class="flex items-center gap-1">
                <button @click="loadTable(tableData.page - 1)" :disabled="!tableData.has_prev"
                        class="px-3 py-1.5 rounded bg-gray-800 text-gray-400 border border-gray-700 hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed transition">
                    ← Prev
                </button>
                <!-- Page numbers -->
                <template x-for="p in pageNumbers()" :key="'pg'+p">
                    <button @click="if (p !== '...') loadTable(p)"
                            class="px-3 py-1.5 rounded border transition"
                            :class="p === tableData.page ? 'bg-koin-600 text-white border-koin-500' : p === '...' ? 'border-transparent text-gray-600 cursor-default' : 'bg-gray-800 text-gray-400 border-gray-700 hover:bg-gray-700'"
                            x-text="p"></button>
                </template>
                <button @click="loadTable(tableData.page + 1)" :disabled="!tableData.has_next"
                        class="px-3 py-1.5 rounded bg-gray-800 text-gray-400 border border-gray-700 hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed transition">
                    Next →
                </button>
            </div>
        </div>
    </div>

</div>
{% endblock %}

{% block scripts %}
<script>
function marketDashboard() {
    return {
        // --- Search ---
        searchQuery: '',
        searchResults: [],

        // --- Price Filter ---
        activePriceFilter: 'all',
        priceOptions: [
            { key: 'all',   label: 'Semua',          min: 0,       max: Infinity },
            { key: 'micro', label: '< Rp 100',       min: 0,       max: 100 },
            { key: 'low',   label: 'Rp 100 - 10K',   min: 100,     max: 10000 },
            { key: 'mid',   label: 'Rp 10K - 1M',    min: 10000,   max: 1000000 },
            { key: 'high',  label: 'Rp 1M - 100M',   min: 1000000, max: 100000000 },
            { key: 'mega',  label: '> Rp 100M',       min: 100000000, max: Infinity },
        ],

        // --- Sort ---
        sortBy: '',
        sortDir: 'desc',

        // --- Category Filter ---
        categoryChips: [],
        activeCategory: '',

        // --- Full Coin Table ---
        tableSearch: '',
        tableLoading: false,
        tableData: { items: [], total: 0, page: 1, total_pages: 0, has_next: false, has_prev: false, loaded: false },

        // --- Watchlist ---
        watchlistSet: new Set(),

        // --- Auto-refresh ---
        autoRefreshOn: true,
        refreshInterval: null,
        countdownInterval: null,
        refreshCountdown: 60,

        init() {
            this.loadTable(1);
            this.loadCategories();
            this.startAutoRefresh();
        },

        // --- Search ---
        async searchCoins() {
            if (this.searchQuery.length < 1) { this.searchResults = []; return; }
            try {
                const resp = await fetch(`/api/v1/market/search?q=${encodeURIComponent(this.searchQuery)}`);
                this.searchResults = await resp.json();
            } catch (e) { console.error(e); }
        },

        // --- Price Filter (for top movers sections) ---
        selectPriceFilter(key) {
            this.activePriceFilter = key;
            const opt = this.priceOptions.find(o => o.key === key);
            document.querySelectorAll('.mover-row, .strat-row').forEach(el => {
                const price = parseFloat(el.dataset.price) || 0;
                if (key === 'all' || (price >= opt.min && price < opt.max)) {
                    el.style.display = '';
                } else {
                    el.style.display = 'none';
                }
            });
        },

        // --- Categories ---
        async loadCategories() {
            try {
                const resp = await fetch('/api/v1/market/categories?limit=15');
                this.categoryChips = await resp.json();
            } catch (e) { console.error('Categories error:', e); }
        },

        // --- Sort ---
        toggleSort(col) {
            if (this.sortBy === col) {
                this.sortDir = this.sortDir === 'desc' ? 'asc' : 'desc';
            } else {
                this.sortBy = col;
                this.sortDir = 'desc';
            }
            this.loadTable(1);
        },

        // --- Full Coin Table ---
        async loadTable(page) {
            if (page < 1) return;
            this.tableLoading = true;
            try {
                const params = new URLSearchParams({
                    type: 'gainers',
                    limit: '25',
                    page: String(page),
                });
                if (this.sortBy) {
                    params.set('sort', this.sortBy);
                    params.set('dir', this.sortDir);
                }
                if (this.tableSearch) {
                    params.set('q', this.tableSearch);
                }
                if (this.activeCategory) {
                    params.set('category', this.activeCategory);
                }
                const url = `/api/v1/market/screener?${params}`;
                const resp = await fetch(url);
                const data = await resp.json();
                if (resp.ok) {
                    this.tableData = {
                        items: data.items || [],
                        total: data.total,
                        page: data.page,
                        total_pages: Math.ceil(data.total / 25),
                        has_next: data.has_more,
                        has_prev: data.page > 1,
                        loaded: true,
                    };
                    // Load watchlist status for visible coins
                    this.loadWatchlistStatus();
                }
            } catch (e) { console.error('Table load error:', e); }
            this.tableLoading = false;
        },

        // --- Watchlist ---
        async loadWatchlistStatus() {
            const ids = this.tableData.items.map(i => i.asset_id).join(',');
            if (!ids) return;
            try {
                const resp = await fetch(`/api/v1/market/watchlist/check?ids=${encodeURIComponent(ids)}`);
                const data = await resp.json();
                const s = new Set();
                for (const [k, v] of Object.entries(data)) { if (v) s.add(k); }
                this.watchlistSet = s;
            } catch (e) { console.error('Watchlist check error:', e); }
        },

        async toggleWatchlist(coinId) {
            try {
                const resp = await fetch('/api/v1/market/watchlist/toggle', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ asset_id: coinId }),
                });
                const data = await resp.json();
                const s = new Set(this.watchlistSet);
                if (data.in_watchlist) {
                    s.add(coinId);
                } else {
                    s.delete(coinId);
                }
                this.watchlistSet = s;
                // Toast (safe — KKToast may not be ready on first page load)
                if (window.KKToast) {
                    data.in_watchlist ? KKToast.success('Ditambahkan ke watchlist') : KKToast.info('Dihapus dari watchlist');
                }
            } catch (e) {
                console.error('Watchlist toggle error:', e);
                if (window.KKToast) KKToast.error('Gagal update watchlist');
            }
        },

        pageNumbers() {
            const total = this.tableData.total_pages;
            const current = this.tableData.page;
            if (total <= 7) return Array.from({length: total}, (_, i) => i + 1);
            const pages = [];
            pages.push(1);
            if (current > 3) pages.push('...');
            for (let i = Math.max(2, current - 1); i <= Math.min(total - 1, current + 1); i++) {
                pages.push(i);
            }
            if (current < total - 2) pages.push('...');
            pages.push(total);
            return pages;
        },

        // --- Auto Refresh ---
        toggleAutoRefresh() {
            this.autoRefreshOn = !this.autoRefreshOn;
            if (this.autoRefreshOn) {
                this.startAutoRefresh();
            } else {
                this.stopAutoRefresh();
            }
        },

        startAutoRefresh() {
            this.stopAutoRefresh();
            this.refreshCountdown = 60;
            // Countdown timer (ticks every second)
            this.countdownInterval = setInterval(() => {
                if (this.autoRefreshOn) {
                    this.refreshCountdown--;
                    if (this.refreshCountdown <= 0) {
                        this.refreshCountdown = 60;
                        this.loadTable(this.tableData.page || 1);
                    }
                }
            }, 1000);
        },
        stopAutoRefresh() {
            if (this.countdownInterval) {
                clearInterval(this.countdownInterval);
                this.countdownInterval = null;
            }
            if (this.refreshInterval) {
                clearInterval(this.refreshInterval);
                this.refreshInterval = null;
            }
            this.refreshCountdown = 60;
        },

        // --- Sparkline ---
        drawSparkline(item) {
            const el = document.getElementById('spark-' + item.asset_id);
            if (!el) return;

            const price = item.current_price_idr || 0;
            const c7d = item.price_change_7d || 0;
            const c24h = item.price_change_24h || 0;
            const c1h = item.price_change_1h || 0;

            const p0 = price / (1 + c7d / 100);
            const p3 = price / (1 + c24h / 100);
            const p6 = price;
            const p1 = p0 + (p3 - p0) * 0.33;
            const p2 = p0 + (p3 - p0) * 0.66;
            const p4 = p3 + (p6 - p3) * 0.33;
            const p5 = p3 + (p6 - p3) * 0.66 + (price * c1h / 100 * 0.2);

            const points = [p0, p1, p2, p3, p4, p5, p6];
            const minP = Math.min(...points);
            const maxP = Math.max(...points);
            const range = maxP - minP || 1;

            const coords = points.map((p, i) => {
                const x = (i / 6) * 80;
                const y = 30 - ((p - minP) / range) * 28;
                return `${x.toFixed(1)},${y.toFixed(1)}`;
            });

            const isUp = p6 >= p0;
            const color = isUp ? '#10b981' : '#ef4444';
            const fillColor = isUp ? 'rgba(16,185,129,0.1)' : 'rgba(239,68,68,0.1)';

            el.innerHTML = `
                <polyline fill="none" stroke="${color}" stroke-width="1.5" points="${coords.join(' ')}"/>
                <polygon fill="${fillColor}" points="0,32 ${coords.join(' ')} 80,32"/>
            `;
        },

        // --- Formatters ---
        formatPrice(val) { return val == null ? '-' : KK.fmtRp(val); },
        formatVolume(val) { return val == null ? '-' : KK.fmtVol(val); },
        formatChange(val) { return val == null ? '-' : KK.fmtSpct(val, 2); },
        changeColor(val) {
            if (val == null) return 'text-gray-500';
            return val >= 0 ? 'text-emerald-400' : 'text-red-400';
        },

        // Cleanup on destroy
        destroy() { this.stopAutoRefresh(); }
    };
}

function marketStatusWidget() {
    return {
        loading: false,
        status: null,
        isOpen: false,
        statusDetail: '',
        async load() {
            this.loading = true;
            try {
                const r = await fetch('/api/v1/market/market-status/us_market');
                if (r.ok) {
                    const d = await r.json();
                    this.status = d;
                    // Parse status
                    if (d && d.status) {
                        const st = typeof d.status === 'string' ? d.status : (d.status.market || d.status.state || '');
                        this.isOpen = st.toLowerCase().includes('open') || st.toLowerCase().includes('regular');
                        this.statusDetail = st;
                    } else if (d && d.summary) {
                        this.isOpen = false;
                        this.statusDetail = typeof d.summary === 'string' ? d.summary : JSON.stringify(d.summary).substring(0, 60);
                    }
                }
            } catch (e) { /* ignore */ }
            this.loading = false;
        }
    };
}
</script>
{% endblock %}