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

{% block content %}
<div x-data="screenerApp()" 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>
            <h1 class="text-2xl font-bold text-white">Market Screener</h1>
        </div>
    </div>

    <!-- Tab Chips -->
    <div class="flex flex-wrap gap-2">
        <template x-for="tab in tabs" :key="tab.key">
            <button @click="switchTab(tab.key)"
                    class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-sm font-medium border transition"
                    :class="activeTab === tab.key
                        ? tab.activeClass
                        : 'border-gray-700 text-gray-400 bg-gray-800/50 hover:border-gray-600 hover:text-gray-300'">
                <span x-text="tab.label"></span>
                <span x-show="cache[tab.key] && cache[tab.key].loaded" x-cloak
                      class="text-[10px] font-normal opacity-70 ml-0.5"
                      x-text="'(' + cache[tab.key].total + ')'"></span>
            </button>
        </template>
    </div>

    <!-- Range Trading Controls (price filter + scan button) -->
    <div x-show="isRangeTradingTab(activeTab)" x-cloak
         class="flex flex-wrap items-center gap-3">
        <!-- Price Filter -->
        <div class="flex items-center gap-2">
            <span class="text-xs text-gray-400">Max Harga:</span>
            <select x-model="rtPriceFilter" @change="fetchRangeTrading()"
                    class="bg-gray-800 border border-gray-700 text-gray-300 text-xs rounded-lg px-3 py-1.5 focus:ring-pink-500 focus:border-pink-500">
                <option value="0">Semua</option>
                <option value="100">&lt; Rp 100</option>
                <option value="1000">&lt; Rp 1.000</option>
                <option value="10000">&lt; Rp 10.000</option>
            </select>
        </div>

        <!-- Scan Button -->
        <button @click="startScan()"
                :disabled="scanning || cycleScanning"
                class="inline-flex items-center gap-2 px-4 py-1.5 text-sm font-medium rounded-lg transition"
                :class="scanning
                    ? 'bg-pink-900/30 text-pink-400 border border-pink-700 cursor-wait'
                    : 'bg-pink-600 hover:bg-pink-500 text-white disabled:opacity-50'">
            <svg x-show="!scanning" 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>
            <svg x-show="scanning" 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="scanning ? 'Scanning...' : '🔍 Scan Oscillation'"></span>
        </button>

        <!-- Scan Progress -->
        <div x-show="scanning && scanProgress.total > 0" x-cloak class="flex items-center gap-2 text-xs text-gray-400">
            <div class="w-32 h-1.5 bg-gray-700 rounded-full overflow-hidden">
                <div class="h-full bg-pink-500 rounded-full transition-all duration-300"
                     :style="'width:' + Math.round(scanProgress.processed / scanProgress.total * 100) + '%'"></div>
            </div>
            <span x-text="scanProgress.processed + '/' + scanProgress.total"></span>
        </div>

        <!-- Cycle Frequency Scan Button -->
        <button @click="startCycleScan()"
                :disabled="scanning || cycleScanning"
                class="inline-flex items-center gap-2 px-4 py-1.5 text-sm font-medium rounded-lg transition"
                :class="cycleScanning
                    ? 'bg-purple-900/30 text-purple-400 border border-purple-700 cursor-wait'
                    : 'bg-purple-600 hover:bg-purple-500 text-white disabled:opacity-50'">
            <svg x-show="!cycleScanning" 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="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
            <svg x-show="cycleScanning" 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="cycleScanning ? 'Scanning Cycles...' : '⚡ Scan Cycle Frequency'"></span>
        </button>

        <!-- Cycle Scan Progress -->
        <div x-show="cycleScanning && cycleScanProgress.total > 0" x-cloak class="flex items-center gap-2 text-xs text-gray-400">
            <div class="w-32 h-1.5 bg-gray-700 rounded-full overflow-hidden">
                <div class="h-full bg-purple-500 rounded-full transition-all duration-300"
                     :style="'width:' + Math.round(cycleScanProgress.processed / cycleScanProgress.total * 100) + '%'"></div>
            </div>
            <span x-text="cycleScanProgress.processed + '/' + cycleScanProgress.total"></span>
        </div>
    </div>

    <!-- Quick Filters & Sort (range trading) -->
    <div x-show="isRangeTradingTab(activeTab) && hasCycleData" x-cloak
         class="flex flex-wrap items-center gap-2">
        <span class="text-xs text-gray-500">Filter:</span>
        <button @click="setQuickFilter('')"
                class="px-3 py-1 text-xs rounded-full transition"
                :class="rtQuickFilter === '' ? 'bg-gray-600 text-white' : 'bg-gray-800 text-gray-400 hover:text-white'">
            Semua
        </button>
        <button @click="setQuickFilter('top_cyclers')"
                class="px-3 py-1 text-xs rounded-full transition"
                :class="rtQuickFilter === 'top_cyclers' ? 'bg-purple-600 text-white' : 'bg-gray-800 text-gray-400 hover:text-white'">
            Top Cyclers (&ge;1/day)
        </button>
        <button @click="setQuickFilter('high_success')"
                class="px-3 py-1 text-xs rounded-full transition"
                :class="rtQuickFilter === 'high_success' ? 'bg-emerald-600 text-white' : 'bg-gray-800 text-gray-400 hover:text-white'">
            High Success (&ge;60%)
        </button>
        <div class="ml-2 flex items-center gap-1">
            <select x-model="rtSortBy" @change="fetchRangeTrading()"
                    class="bg-gray-800 border border-gray-700 text-gray-300 text-xs rounded-lg px-3 py-1.5">
                <option value="">Sort: Score</option>
                <option value="cpd">Sort: Cycles/Day</option>
                <option value="success">Sort: Success Rate</option>
                <option value="profit">Sort: Adp. Profit</option>
                <option value="duration">Sort: Avg Duration</option>
                <option value="range">Sort: Range %</option>
                <option value="bounces">Sort: Bounces</option>
            </select>
            <button @click="toggleSortDir()" class="text-gray-400 hover:text-white transition text-xs px-2 py-1.5 bg-gray-800 border border-gray-700 rounded-lg"
                    x-text="rtSortDir === 'desc' ? '↓' : '↑'" :title="rtSortDir === 'desc' ? 'Descending' : 'Ascending'"></button>
        </div>
    </div>

    <!-- Early Bullish Controls -->
    <div x-show="isEarlyBullishTab(activeTab)" x-cloak
         class="flex flex-wrap items-center gap-3">
        <!-- Scan Button -->
        <button @click="startBullishScan()"
                :disabled="bullishScanning"
                class="inline-flex items-center gap-2 px-4 py-1.5 text-sm font-medium rounded-lg transition"
                :class="bullishScanning
                    ? 'bg-lime-900/30 text-lime-400 border border-lime-700 cursor-wait'
                    : 'bg-lime-600 hover:bg-lime-500 text-white disabled:opacity-50'">
            <svg x-show="!bullishScanning" 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="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
            <svg x-show="bullishScanning" 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="bullishScanning ? 'Scanning...' : '🚀 Scan Bullish Momentum'"></span>
        </button>

        <!-- Scan Progress -->
        <div x-show="bullishScanning && bullishScanProgress.total > 0" x-cloak class="flex items-center gap-2 text-xs text-gray-400">
            <div class="w-32 h-1.5 bg-gray-700 rounded-full overflow-hidden">
                <div class="h-full bg-lime-500 rounded-full transition-all duration-300"
                     :style="'width:' + Math.round(bullishScanProgress.processed / bullishScanProgress.total * 100) + '%'"></div>
            </div>
            <span x-text="bullishScanProgress.processed + '/' + bullishScanProgress.total"></span>
        </div>
    </div>

    <!-- Early Bullish Quick Filters & Sort -->
    <div x-show="isEarlyBullishTab(activeTab) && cache['early_bullish'] && cache['early_bullish'].loaded" x-cloak
         class="flex flex-wrap items-center gap-2">
        <span class="text-xs text-gray-500">Filter:</span>
        <button @click="setEbFilter('')"
                class="px-3 py-1 text-xs rounded-full transition"
                :class="ebQuickFilter === '' ? 'bg-lime-600 text-white' : 'bg-gray-800 text-gray-400 hover:text-white'">
            Early Bullish
        </button>
        <button @click="setEbFilter('high_confidence')"
                class="px-3 py-1 text-xs rounded-full transition"
                :class="ebQuickFilter === 'high_confidence' ? 'bg-emerald-600 text-white' : 'bg-gray-800 text-gray-400 hover:text-white'">
            High Confidence
        </button>
        <button @click="setEbFilter('safe_only')"
                class="px-3 py-1 text-xs rounded-full transition"
                :class="ebQuickFilter === 'safe_only' ? 'bg-emerald-600 text-white' : 'bg-gray-800 text-gray-400 hover:text-white'">
            Safe Only
        </button>
        <button @click="setEbFilter('strong_momentum')"
                class="px-3 py-1 text-xs rounded-full transition"
                :class="ebQuickFilter === 'strong_momentum' ? 'bg-amber-600 text-white' : 'bg-gray-800 text-gray-400 hover:text-white'">
            Strong Momentum
        </button>
        <button @click="setEbFilter('ml_bullish')"
                class="px-3 py-1 text-xs rounded-full transition"
                :class="ebQuickFilter === 'ml_bullish' ? 'bg-purple-600 text-white' : 'bg-gray-800 text-gray-400 hover:text-white'">
            ML Bullish
        </button>
        <button @click="setEbFilter('all_phases')"
                class="px-3 py-1 text-xs rounded-full transition"
                :class="ebQuickFilter === 'all_phases' ? 'bg-gray-600 text-white' : 'bg-gray-800 text-gray-400 hover:text-white'">
            All Phases
        </button>
        <div class="ml-2 flex items-center gap-1">
            <select x-model="ebSortBy" @change="fetchEarlyBullish()"
                    class="bg-gray-800 border border-gray-700 text-gray-300 text-xs rounded-lg px-3 py-1.5">
                <option value="">Sort: Upside %</option>
                <option value="score">Sort: Score</option>
                <option value="rsi">Sort: RSI</option>
                <option value="ml_pct">Sort: ML Prediction</option>
                <option value="conditions">Sort: Conditions Met</option>
                <option value="price">Sort: Harga</option>
            </select>
            <button @click="toggleEbSortDir()" class="text-gray-400 hover:text-white transition text-xs px-2 py-1.5 bg-gray-800 border border-gray-700 rounded-lg"
                    x-text="ebSortDir === 'desc' ? '↓' : '↑'" :title="ebSortDir === 'desc' ? 'Descending' : 'Ascending'"></button>
        </div>
    </div>

    <!-- Signal Scan Controls (scalping/swing/investment) -->
    <div x-show="isSignalsTab(activeTab)" x-cloak
         class="flex flex-wrap items-center gap-3">
        <button @click="startSignalScan()"
                :disabled="signalScanning"
                class="inline-flex items-center gap-2 px-4 py-1.5 text-sm font-medium rounded-lg transition"
                :class="signalScanning
                    ? 'bg-amber-900/30 text-amber-400 border border-amber-700 cursor-wait'
                    : 'bg-amber-600 hover:bg-amber-500 text-white disabled:opacity-50'">
            <svg x-show="!signalScanning" 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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
            <svg x-show="signalScanning" 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="signalScanning ? 'Scanning...' : '📊 Scan Sinyal Trading'"></span>
        </button>
        <div x-show="signalScanning && signalScanProgress.total > 0" x-cloak class="flex items-center gap-2 text-xs text-gray-400">
            <div class="w-32 h-1.5 bg-gray-700 rounded-full overflow-hidden">
                <div class="h-full bg-amber-500 rounded-full transition-all duration-300"
                     :style="'width:' + Math.round(signalScanProgress.processed / signalScanProgress.total * 100) + '%'"></div>
            </div>
            <span x-text="signalScanProgress.processed + '/' + signalScanProgress.total"></span>
        </div>
    </div>

    <!-- Scan Log -->
    <div x-show="(scanning || cycleScanning || bullishScanning || signalScanning) && scanLog.length > 0" x-cloak
         class="glass rounded-lg border border-gray-800 p-3 max-h-32 overflow-y-auto text-xs font-mono text-gray-400 space-y-0.5">
        <template x-for="(log, i) in scanLog.slice(-8)" :key="i">
            <div>
                <span :class="{
                    'text-emerald-400': log.type === 'scored',
                    'text-gray-500': log.type === 'skip',
                    'text-red-400': log.type === 'error',
                    'text-pink-400': log.type === 'done',
                    'text-blue-400': log.type === 'start'
                }" x-text="log.msg"></span>
            </div>
        </template>
    </div>

    <!-- Loading Spinner -->
    <div x-show="cache[activeTab] && cache[activeTab].loading" x-cloak class="flex items-center justify-center py-16">
        <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>

    <!-- Movers Table (gainers/losers/volume) -->
    <div x-show="isMoversTab(activeTab) && cache[activeTab] && cache[activeTab].loaded && !cache[activeTab].loading" x-cloak>
        <div class="glass rounded-xl border border-gray-800 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-800/50 text-gray-400 text-xs uppercase tracking-wider">
                        <tr>
                            <th class="px-4 py-3 text-left w-10">#</th>
                            <th class="px-4 py-3 text-left">{{ item_label }}</th>
                            <th class="px-4 py-3 text-right">Harga (IDR)</th>
                            <th class="px-4 py-3 text-right">1h</th>
                            <th class="px-4 py-3 text-right">24h</th>
                            <th class="px-4 py-3 text-right">7d</th>
                            <th class="px-4 py-3 text-right">Volume 24h</th>
                            <th class="px-4 py-3 text-right">Market Cap</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-800/50">
                        <template x-for="item in currentItems" :key="item.asset_id">
                            <tr class="hover:bg-gray-800/30 transition cursor-pointer"
                                @click="window.location.href = '/market/asset/' + item.asset_id">
                                <td class="px-4 py-3 text-gray-500 text-xs" x-text="item.rank"></td>
                                <td class="px-4 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>
                                        <span class="text-white font-medium truncate max-w-[140px]" x-text="item.name"></span>
                                        <span class="text-xs text-gray-500" x-text="item.symbol"></span>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-right text-white font-mono text-xs" x-text="formatPrice(item.current_price_idr)"></td>
                                <td class="px-4 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-4 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-4 py-3 text-right text-xs font-mono"
                                    :class="changeColor(item.price_change_7d)"
                                    x-text="formatChange(item.price_change_7d)"></td>
                                <td class="px-4 py-3 text-right text-gray-300 text-xs font-mono" x-text="formatVolume(item.total_volume_idr)"></td>
                                <td class="px-4 py-3 text-right text-gray-300 text-xs font-mono" x-text="formatVolume(item.market_cap_idr)"></td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Load More (movers) -->
        <div x-show="cache[activeTab] && cache[activeTab].has_more" class="flex justify-center pt-3">
            <button @click="loadMore()" :disabled="cache[activeTab].loading"
                    class="px-5 py-2 text-sm text-gray-400 bg-gray-800 border border-gray-700 rounded-lg hover:bg-gray-700 hover:text-white transition disabled:opacity-50">
                Muat Lebih Banyak
            </button>
        </div>
    </div>

    <!-- Signals Table (scalping/swing/investment) -->
    <div x-show="isSignalsTab(activeTab) && cache[activeTab] && cache[activeTab].loaded && !cache[activeTab].loading" x-cloak>
        <div class="glass rounded-xl border border-gray-800 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-800/50 text-gray-400 text-xs uppercase tracking-wider">
                        <tr>
                            <th class="px-4 py-3 text-left w-10">#</th>
                            <th class="px-4 py-3 text-left">{{ item_label }}</th>
                            <th class="px-4 py-3 text-center">Signal</th>
                            <th class="px-4 py-3 text-right">Score</th>
                            <th class="px-4 py-3 text-center">Confidence</th>
                            <th class="px-4 py-3 text-center">Safety</th>
                            <th class="px-4 py-3 text-right">Harga Saat Ini</th>
                            <th class="px-4 py-3 text-right">Entry</th>
                            <th class="px-4 py-3 text-right">Stop Loss</th>
                            <th class="px-4 py-3 text-right">TP1</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-800/50">
                        <template x-for="(item, idx) in currentItems" :key="item.signal_id || ('sig-' + idx)">
                            <tr class="hover:bg-gray-800/30 transition cursor-pointer"
                                @click="window.location.href = '/market/asset/' + item.asset_id + '?tab=analysis'">
                                <td class="px-4 py-3 text-gray-500 text-xs" x-text="item.rank"></td>
                                <td class="px-4 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>
                                        <span class="text-white font-medium truncate max-w-[140px]" x-text="item.name"></span>
                                        <span class="text-xs text-gray-500" x-text="item.symbol"></span>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <span class="text-xs px-2 py-0.5 rounded font-medium"
                                          :class="item.signal_type === 'BUY' ? 'bg-emerald-900/50 text-emerald-400' :
                                                   item.signal_type === 'SELL' ? 'bg-red-900/50 text-red-400' :
                                                   'bg-gray-800 text-gray-400'"
                                          x-text="item.signal_type"></span>
                                </td>
                                <td class="px-4 py-3 text-right font-mono text-white" x-text="item.score != null ? KK.fmtIdr(item.score, 1) : '-'"></td>
                                <td class="px-4 py-3 text-center">
                                    <span class="text-xs px-2 py-0.5 rounded"
                                          :class="item.confidence === 'High' ? 'bg-emerald-900/30 text-emerald-400' :
                                                   item.confidence === 'Medium' ? 'bg-amber-900/30 text-amber-400' :
                                                   'bg-gray-800 text-gray-400'"
                                          x-text="item.confidence"></span>
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <span class="text-xs px-2 py-0.5 rounded"
                                          :class="item.safety_rating === 'SAFE' ? 'bg-emerald-900/30 text-emerald-400' :
                                                   item.safety_rating === 'MODERATE' ? 'bg-amber-900/30 text-amber-400' :
                                                   item.safety_rating === 'RISKY' ? 'bg-orange-900/30 text-orange-400' :
                                                   'bg-red-900/30 text-red-400'"
                                          x-text="item.safety_rating"></span>
                                </td>
                                <td class="px-4 py-3 text-right text-white font-mono text-xs" x-text="formatPrice(item.current_price_idr)"></td>
                                <td class="px-4 py-3 text-right text-gray-300 font-mono text-xs" x-text="formatPrice(item.entry_price)"></td>
                                <td class="px-4 py-3 text-right text-red-400 font-mono text-xs" x-text="formatPrice(item.stop_loss)"></td>
                                <td class="px-4 py-3 text-right text-emerald-400 font-mono text-xs" x-text="formatPrice(item.take_profit_1)"></td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Load More (signals) -->
        <div x-show="cache[activeTab] && cache[activeTab].has_more" class="flex justify-center pt-3">
            <button @click="loadMore()" :disabled="cache[activeTab].loading"
                    class="px-5 py-2 text-sm text-gray-400 bg-gray-800 border border-gray-700 rounded-lg hover:bg-gray-700 hover:text-white transition disabled:opacity-50">
                Muat Lebih Banyak
            </button>
        </div>
    </div>

    <!-- Range Trading Table -->
    <div x-show="isRangeTradingTab(activeTab) && cache[activeTab] && cache[activeTab].loaded && !cache[activeTab].loading" x-cloak>
        <div class="glass rounded-xl border border-gray-800 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-800/50 text-gray-400 text-xs uppercase tracking-wider">
                        <tr>
                            <th class="px-3 py-3 text-left w-10">#</th>
                            <th class="px-3 py-3 text-left">{{ item_label }}</th>
                            <th class="px-3 py-3 text-right">Harga</th>
                            <th class="px-3 py-3 text-center">Score</th>
                            <th class="px-3 py-3 text-right">Range</th>
                            <th class="px-3 py-3 text-right">Bounces</th>
                            <th class="px-3 py-3 text-right">Est. Profit</th>
                            <th class="px-3 py-3 text-right border-l border-gray-700">Cycles/Day</th>
                            <th class="px-3 py-3 text-right">Durasi</th>
                            <th class="px-3 py-3 text-right">Success</th>
                            <th class="px-3 py-3 text-right">Adp. Profit</th>
                            <th class="px-3 py-3 text-right">Scan</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-800/50">
                        <template x-for="item in currentItems" :key="item.asset_id">
                            <tr class="hover:bg-gray-800/30 transition cursor-pointer"
                                @click="window.location.href = '/market/asset/' + item.asset_id + '?tab=analysis'">
                                <td class="px-3 py-3 text-gray-500 text-xs" x-text="item.rank"></td>
                                <td class="px-3 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" x-text="item.symbol"></span>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-3 py-3 text-right text-white font-mono text-xs" x-text="formatPrice(item.current_price_idr)"></td>
                                <td class="px-3 py-3 text-center">
                                    <span class="inline-block min-w-[40px] text-xs px-2 py-0.5 rounded-full font-bold"
                                          :class="item.oscillation_score >= 60 ? 'bg-emerald-900/50 text-emerald-300' :
                                                   item.oscillation_score >= 35 ? 'bg-amber-900/50 text-amber-300' :
                                                   'bg-red-900/40 text-red-300'"
                                          x-text="item.oscillation_score?.toFixed(1)"
                                          :title="item.oscillation_score >= 60 ? 'Sangat cocok range trading' :
                                                   item.oscillation_score >= 35 ? 'Potensial range trading' :
                                                   'Kurang cocok range trading'"></span>
                                </td>
                                <td class="px-3 py-3 text-right font-mono text-xs text-gray-300" x-text="item.range_width_pct != null ? item.range_width_pct.toFixed(1) + '%' : '-'"></td>
                                <td class="px-3 py-3 text-right">
                                    <div class="text-xs font-mono text-white" x-text="item.bounce_frequency ?? '-'"></div>
                                    <div class="text-[10px] text-gray-500" x-text="'S:' + (item.support_touches ?? 0) + ' R:' + (item.resistance_touches ?? 0)"></div>
                                </td>
                                <td class="px-3 py-3 text-right">
                                    <span class="font-mono text-xs font-bold"
                                          :class="(item.est_profit_per_cycle_pct ?? 0) > 1 ? 'text-emerald-400' :
                                                   (item.est_profit_per_cycle_pct ?? 0) > 0 ? 'text-amber-400' :
                                                   'text-gray-500'"
                                          x-text="item.est_profit_per_cycle_pct != null ? item.est_profit_per_cycle_pct.toFixed(2) + '%' : '-'"></span>
                                </td>
                                <!-- Cycle Frequency Columns -->
                                <td class="px-3 py-3 text-right border-l border-gray-700/50">
                                    <span class="font-mono text-xs font-bold"
                                          :class="(item.cycles_per_day ?? 0) >= 1 ? 'text-purple-300' :
                                                   (item.cycles_per_day ?? 0) >= 0.3 ? 'text-amber-300' :
                                                   item.cycles_per_day != null ? 'text-gray-500' : 'text-gray-700'"
                                          x-text="item.cycles_per_day != null ? item.cycles_per_day.toFixed(2) : '-'"></span>
                                    <div x-show="item.cycle_confidence"
                                         class="text-[9px]"
                                         :class="{
                                             'text-emerald-600': item.cycle_confidence === 'HIGH',
                                             'text-amber-600': item.cycle_confidence === 'MEDIUM',
                                             'text-gray-600': item.cycle_confidence === 'LOW' || item.cycle_confidence === 'INSUFFICIENT',
                                         }"
                                         x-text="item.cycle_confidence"></div>
                                </td>
                                <td class="px-3 py-3 text-right font-mono text-xs text-gray-300"
                                    x-text="item.avg_cycle_duration_hours != null ? formatDuration(item.avg_cycle_duration_hours) : '-'"></td>
                                <td class="px-3 py-3 text-right">
                                    <span class="font-mono text-xs"
                                          :class="(item.cycle_success_rate_pct ?? 0) >= 70 ? 'text-emerald-400' :
                                                   (item.cycle_success_rate_pct ?? 0) >= 50 ? 'text-amber-400' :
                                                   item.cycle_success_rate_pct != null ? 'text-red-400' : 'text-gray-700'"
                                          x-text="item.cycle_success_rate_pct != null ? item.cycle_success_rate_pct.toFixed(0) + '%' : '-'"></span>
                                </td>
                                <td class="px-3 py-3 text-right">
                                    <span class="font-mono text-xs font-bold"
                                          :class="(item.adaptive_est_profit_pct ?? 0) > 1 ? 'text-emerald-400' :
                                                   (item.adaptive_est_profit_pct ?? 0) > 0 ? 'text-amber-400' :
                                                   'text-gray-500'"
                                          x-text="item.adaptive_est_profit_pct != null ? item.adaptive_est_profit_pct.toFixed(2) + '%' : '-'"></span>
                                    <div x-show="item.adaptive_lookback" class="text-[9px] text-gray-600" x-text="item.adaptive_lookback"></div>
                                </td>
                                <td class="px-3 py-3 text-right text-[10px] text-gray-500"
                                    x-text="item.cycle_scanned_at ? timeAgo(item.cycle_scanned_at) : (item.computed_at ? timeAgo(item.computed_at) : '-')"></td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Load More (range trading) -->
        <div x-show="cache[activeTab] && cache[activeTab].has_more" class="flex justify-center pt-3">
            <button @click="loadMore()" :disabled="cache[activeTab].loading"
                    class="px-5 py-2 text-sm text-gray-400 bg-gray-800 border border-gray-700 rounded-lg hover:bg-gray-700 hover:text-white transition disabled:opacity-50">
                Muat Lebih Banyak
            </button>
        </div>
    </div>

    <!-- Early Bullish Table -->
    <div x-show="isEarlyBullishTab(activeTab) && cache[activeTab] && cache[activeTab].loaded && !cache[activeTab].loading" x-cloak>
        <div class="glass rounded-xl border border-gray-800 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-800/50 text-gray-400 text-xs uppercase tracking-wider">
                        <tr>
                            <th class="px-3 py-3 text-left w-10">#</th>
                            <th class="px-3 py-3 text-left">{{ item_label }}</th>
                            <th class="px-3 py-3 text-center">Phase</th>
                            <th class="px-3 py-3 text-center">Score</th>
                            <th class="px-3 py-3 text-center">Momentum</th>
                            <th class="px-3 py-3 text-right">ML Pred.</th>
                            <th class="px-3 py-3 text-right">RSI</th>
                            <th class="px-3 py-3 text-right">Harga</th>
                            <th class="px-3 py-3 text-right">Entry</th>
                            <th class="px-3 py-3 text-right">Target (TP1)</th>
                            <th class="px-3 py-3 text-right">Upside</th>
                            <th class="px-3 py-3 text-center">Cond.</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-800/50">
                        <template x-for="(item, idx) in currentItems" :key="item.asset_id || ('eb-' + idx)">
                            <tr class="hover:bg-gray-800/30 transition cursor-pointer"
                                @click="window.location.href = '/market/asset/' + item.asset_id + '?tab=analysis'">
                                <td class="px-3 py-3 text-gray-500 text-xs" x-text="item.rank"></td>
                                <td class="px-3 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" x-text="item.symbol"></span>
                                        </div>
                                    </div>
                                </td>
                                <!-- Phase Badge -->
                                <td class="px-3 py-3 text-center">
                                    <span class="text-[10px] px-2 py-0.5 rounded-full font-semibold"
                                          :class="item.bullish_phase === 'EARLY_BULLISH' ? 'bg-lime-900/50 text-lime-300' :
                                                   item.bullish_phase === 'PEAK_BULLISH' ? 'bg-amber-900/50 text-amber-300' :
                                                   'bg-gray-800 text-gray-500'"
                                          x-text="item.bullish_phase === 'EARLY_BULLISH' ? 'EARLY' :
                                                   item.bullish_phase === 'PEAK_BULLISH' ? 'PEAK' : 'N/A'"></span>
                                </td>
                                <!-- Score -->
                                <td class="px-3 py-3 text-center">
                                    <span class="inline-block min-w-[40px] text-xs px-2 py-0.5 rounded-full font-bold"
                                          :class="(item.score ?? 0) >= 50 ? 'bg-emerald-900/50 text-emerald-300' :
                                                   (item.score ?? 0) >= 25 ? 'bg-lime-900/50 text-lime-300' :
                                                   (item.score ?? 0) >= 15 ? 'bg-amber-900/50 text-amber-300' :
                                                   'bg-gray-800 text-gray-400'"
                                          x-text="item.score != null ? parseFloat(item.score).toFixed(1) : '-'"></span>
                                </td>
                                <!-- Momentum -->
                                <td class="px-3 py-3 text-center">
                                    <span class="text-[10px] px-2 py-0.5 rounded font-medium"
                                          :class="formatMomentumClass(item.momentum_state)"
                                          x-text="formatMomentum(item.momentum_state)"></span>
                                </td>
                                <!-- ML Prediction -->
                                <td class="px-3 py-3 text-right font-mono text-xs"
                                    :class="(item.ml_short_pct ?? 0) > 0 ? 'text-emerald-400' :
                                             (item.ml_short_pct ?? 0) < 0 ? 'text-red-400' : 'text-gray-500'"
                                    x-text="item.ml_short_pct != null ? ((item.ml_short_pct >= 0 ? '+' : '') + parseFloat(item.ml_short_pct).toFixed(2) + '%') : '-'"></td>
                                <!-- RSI -->
                                <td class="px-3 py-3 text-right font-mono text-xs"
                                    :class="(item.rsi_latest ?? 50) <= 30 ? 'text-emerald-400' :
                                             (item.rsi_latest ?? 50) <= 60 ? 'text-lime-400' :
                                             (item.rsi_latest ?? 50) <= 70 ? 'text-amber-400' : 'text-red-400'"
                                    x-text="item.rsi_latest != null ? parseFloat(item.rsi_latest).toFixed(1) : '-'"></td>
                                <!-- Harga -->
                                <td class="px-3 py-3 text-right text-white font-mono text-xs" x-text="formatPrice(item.current_price_idr)"></td>
                                <!-- Entry -->
                                <td class="px-3 py-3 text-right text-gray-300 font-mono text-xs" x-text="formatPrice(item.entry_price)"></td>
                                <!-- Target (TP1) -->
                                <td class="px-3 py-3 text-right text-emerald-400 font-mono text-xs" x-text="formatPrice(item.take_profit_1)"></td>
                                <!-- Upside -->
                                <td class="px-3 py-3 text-right">
                                    <span class="font-mono text-xs font-bold"
                                          :class="(item.upside_pct ?? 0) > 10 ? 'text-emerald-400' :
                                                   (item.upside_pct ?? 0) > 3 ? 'text-lime-400' :
                                                   (item.upside_pct ?? 0) > 0 ? 'text-amber-400' :
                                                   'text-gray-500'"
                                          x-text="item.upside_pct != null ? '+' + parseFloat(item.upside_pct).toFixed(2) + '%' : '-'"></span>
                                </td>
                                <!-- Conditions Met -->
                                <td class="px-3 py-3 text-center">
                                    <span class="font-mono text-xs font-bold"
                                          :class="(item.conditions_met ?? 0) >= 4 ? 'text-emerald-400' :
                                                   (item.conditions_met ?? 0) >= 3 ? 'text-lime-400' :
                                                   'text-amber-400'"
                                          x-text="(item.conditions_met ?? 0) + '/5'"></span>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Load More (early bullish) -->
        <div x-show="cache[activeTab] && cache[activeTab].has_more" class="flex justify-center pt-3">
            <button @click="loadMore()" :disabled="cache[activeTab].loading"
                    class="px-5 py-2 text-sm text-gray-400 bg-gray-800 border border-gray-700 rounded-lg hover:bg-gray-700 hover:text-white transition disabled:opacity-50">
                Muat Lebih Banyak
            </button>
        </div>
    </div>

    <!-- Empty State -->
    <div x-show="cache[activeTab] && cache[activeTab].loaded && !cache[activeTab].loading && currentItems.length === 0 && !scanning && !cycleScanning && !bullishScanning && !signalScanning" x-cloak
         class="flex flex-col items-center justify-center py-16 text-gray-500">
        <template x-if="isRangeTradingTab(activeTab)">
            <div class="text-center">
                <svg class="w-14 h-14 mx-auto mb-4 text-pink-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                <p class="text-sm text-gray-400 mb-1">Belum ada data oscillation.</p>
                <p class="text-xs text-gray-600 mb-4">Klik tombol <span class="text-pink-400">Scan Oscillation</span> untuk menganalisis semua {{ item_label|lower }}.</p>
                <button @click="startScan()"
                        class="px-5 py-2 text-sm font-medium bg-pink-600 hover:bg-pink-500 text-white rounded-lg transition">
                    🔍 Mulai Scan
                </button>
            </div>
        </template>
        <template x-if="isEarlyBullishTab(activeTab)">
            <div class="text-center">
                <svg class="w-14 h-14 mx-auto mb-4 text-lime-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                <p class="text-sm text-gray-400 mb-1">Belum ada data bullish momentum.</p>
                <p class="text-xs text-gray-600 mb-4">Klik tombol <span class="text-lime-400">Scan Bullish Momentum</span> untuk menganalisis semua {{ item_label|lower }}.</p>
                <button @click="startBullishScan()"
                        class="px-5 py-2 text-sm font-medium bg-lime-600 hover:bg-lime-500 text-white rounded-lg transition">
                    🚀 Mulai Scan
                </button>
            </div>
        </template>
        <template x-if="isSignalsTab(activeTab)">
            <div class="text-center">
                <svg class="w-14 h-14 mx-auto mb-4 text-amber-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                <p class="text-sm text-gray-400 mb-1">Belum ada sinyal aktif untuk strategi ini.</p>
                <p class="text-xs text-gray-600 mb-4">Klik tombol <span class="text-amber-400">Scan Sinyal</span> untuk menganalisis semua {{ item_label|lower }}.</p>
                <button @click="startSignalScan()"
                        class="px-5 py-2 text-sm font-medium bg-amber-600 hover:bg-amber-500 text-white rounded-lg transition">
                    📊 Scan Sinyal Trading
                </button>
            </div>
        </template>
        <template x-if="!isRangeTradingTab(activeTab) && !isEarlyBullishTab(activeTab) && !isSignalsTab(activeTab)">
            <div class="text-center">
                <svg class="w-12 h-12 mx-auto mb-3 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                <p class="text-sm">Belum ada data profil. Sync {{ item_label|lower }} terlebih dahulu.</p>
            </div>
        </template>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function screenerApp() {
    return {
        activeTab: {{ initial_tab | tojson }},
        tabs: [
            { key: 'gainers',       label: 'Top Gainer 24h',     activeClass: 'border-emerald-500 bg-emerald-900/20 text-emerald-300' },
            { key: 'losers',        label: 'Top Loser 24h',      activeClass: 'border-red-500 bg-red-900/20 text-red-300' },
            { key: 'volume',        label: 'Top Volume 24h',     activeClass: 'border-blue-500 bg-blue-900/20 text-blue-300' },
            { key: 'scalping',      label: 'Best for Scalping',  activeClass: 'border-amber-500 bg-amber-900/20 text-amber-300' },
            { key: 'swing',         label: 'Best for Swing',     activeClass: 'border-purple-500 bg-purple-900/20 text-purple-300' },
            { key: 'investment',    label: 'Best for Investment', activeClass: 'border-cyan-500 bg-cyan-900/20 text-cyan-300' },
            { key: 'range_trading', label: '⚡ Range Trading',    activeClass: 'border-pink-500 bg-pink-900/20 text-pink-300' },
            { key: 'early_bullish', label: '🚀 Early Bullish',   activeClass: 'border-lime-500 bg-lime-900/20 text-lime-300' },
        ],
        cache: {},

        // Range trading specific
        rtPriceFilter: '0',
        scanning: false,
        scanProgress: { processed: 0, total: 0 },
        scanLog: [],

        // Cycle frequency scan
        cycleScanning: false,
        cycleScanProgress: { processed: 0, total: 0 },

        // Filters & sorting for range trading
        rtQuickFilter: '',
        rtSortBy: '',
        rtSortDir: 'desc',

        // Early bullish specific
        bullishScanning: false,
        bullishScanProgress: { processed: 0, total: 0 },
        ebQuickFilter: '',
        ebSortBy: '',
        ebSortDir: 'desc',

        // Signal scan specific
        signalScanning: false,
        signalScanProgress: { processed: 0, total: 0 },

        get hasCycleData() {
            const items = this.cache['range_trading']?.items || [];
            return items.some(i => i.cycles_per_day != null);
        },

        init() {
            // Initialize cache for all tabs
            this.tabs.forEach(t => {
                this.cache[t.key] = { items: [], total: 0, page: 0, loaded: false, loading: false, has_more: false };
            });
            // Fetch initial tab
            if (this.isRangeTradingTab(this.activeTab)) {
                this.fetchRangeTrading();
            } else if (this.isEarlyBullishTab(this.activeTab)) {
                this.fetchEarlyBullish();
            } else {
                this.fetchData(this.activeTab);
            }
        },

        get currentItems() {
            return this.cache[this.activeTab]?.items || [];
        },

        isMoversTab(tab) {
            return ['gainers', 'losers', 'volume'].includes(tab);
        },

        isSignalsTab(tab) {
            return ['scalping', 'swing', 'investment'].includes(tab);
        },

        isRangeTradingTab(tab) {
            return tab === 'range_trading';
        },

        isEarlyBullishTab(tab) {
            return tab === 'early_bullish';
        },

        switchTab(tab) {
            if (tab === this.activeTab) return;
            this.activeTab = tab;
            history.replaceState(null, '', '/market/screener?tab=' + tab);
            if (!this.cache[tab].loaded && !this.cache[tab].loading) {
                if (this.isRangeTradingTab(tab)) {
                    this.fetchRangeTrading();
                } else if (this.isEarlyBullishTab(tab)) {
                    this.fetchEarlyBullish();
                } else {
                    this.fetchData(tab);
                }
            }
        },

        async fetchData(tab, append = false) {
            const c = this.cache[tab];
            if (c.loading) return;
            c.loading = true;

            const nextPage = append ? c.page + 1 : 1;
            try {
                const resp = await fetch(`/api/v1/market/screener?type=${tab}&limit=50&page=${nextPage}`);
                const data = await resp.json();
                if (resp.ok) {
                    if (append) {
                        c.items = c.items.concat(data.items);
                    } else {
                        c.items = data.items;
                    }
                    c.total = data.total;
                    c.page = data.page;
                    c.has_more = data.has_more;
                    c.loaded = true;
                }
            } catch (e) {
                console.error('Screener fetch error:', e);
            } finally {
                c.loading = false;
            }
        },

        async fetchRangeTrading(append = false) {
            const tab = 'range_trading';
            const c = this.cache[tab];
            if (c.loading) return;
            c.loading = true;

            const nextPage = append ? c.page + 1 : 1;
            let url = `/api/v1/market/screener?type=${tab}&limit=50&page=${nextPage}`;
            if (this.rtPriceFilter && this.rtPriceFilter !== '0') {
                url += `&max_price=${this.rtPriceFilter}`;
            }
            if (this.rtSortBy) {
                url += `&sort=${this.rtSortBy}&dir=${this.rtSortDir}`;
            }
            if (this.rtQuickFilter) {
                url += `&filter=${this.rtQuickFilter}`;
            }

            try {
                const resp = await fetch(url);
                const data = await resp.json();
                if (resp.ok) {
                    if (append) {
                        c.items = c.items.concat(data.items);
                    } else {
                        c.items = data.items;
                    }
                    c.total = data.total;
                    c.page = data.page;
                    c.has_more = data.has_more;
                    c.loaded = true;
                }
            } catch (e) {
                console.error('Range trading fetch error:', e);
            } finally {
                c.loading = false;
            }
        },

        loadMore() {
            if (this.isRangeTradingTab(this.activeTab)) {
                this.fetchRangeTrading(true);
            } else if (this.isEarlyBullishTab(this.activeTab)) {
                this.fetchEarlyBullish(true);
            } else {
                this.fetchData(this.activeTab, true);
            }
        },

        async startScan() {
            if (this.scanning || this.cycleScanning) return;
            this.scanning = true;
            this.scanProgress = { processed: 0, total: 0 };
            this.scanLog = [];

            const body = { timeframe: '1H' };
            if (this.rtPriceFilter && this.rtPriceFilter !== '0') {
                body.max_price_idr = parseFloat(this.rtPriceFilter);
            }

            try {
                const resp = await fetch('/api/v1/market/screener/range-trading/scan', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(body),
                });

                const reader = resp.body.getReader();
                const decoder = new TextDecoder();
                let buffer = '';

                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;

                    buffer += decoder.decode(value, { stream: true });
                    const lines = buffer.split('\n');
                    buffer = lines.pop(); // keep incomplete line

                    for (const line of lines) {
                        if (!line.startsWith('data: ')) continue;
                        try {
                            const evt = JSON.parse(line.slice(6));
                            this.handleScanEvent(evt);
                        } catch (e) { /* skip parse errors */ }
                    }
                }
            } catch (e) {
                console.error('Scan error:', e);
                this.scanLog.push({ type: 'error', msg: 'Koneksi terputus: ' + e.message });
            } finally {
                this.scanning = false;
                // Refresh data after scan completes
                this.cache['range_trading'].loaded = false;
                this.fetchRangeTrading();
            }
        },

        handleScanEvent(evt) {
            if (evt.type === 'start') {
                this.scanProgress.total = evt.total;
                this.scanLog.push({ type: 'start', msg: evt.message });
            } else if (evt.type === 'scored') {
                this.scanProgress.processed = evt.processed;
                this.scanLog.push({ type: 'scored', msg: `✓ ${evt.symbol} — Score: ${evt.score}` });
            } else if (evt.type === 'skip') {
                this.scanProgress.processed = evt.processed;
                this.scanLog.push({ type: 'skip', msg: `⊘ ${evt.symbol ?? evt.asset_id} — ${evt.reason}` });
            } else if (evt.type === 'error') {
                this.scanProgress.processed = evt.processed;
                this.scanLog.push({ type: 'error', msg: `✗ ${evt.name ?? evt.asset_id} — ${evt.error}` });
            } else if (evt.type === 'done') {
                this.scanLog.push({ type: 'done', msg: evt.message });
            }
        },

        // --- Cycle Frequency Scan ---
        async startCycleScan() {
            if (this.cycleScanning || this.scanning) return;
            this.cycleScanning = true;
            this.cycleScanProgress = { processed: 0, total: 0 };
            this.scanLog = [];

            try {
                const resp = await fetch('/api/v1/market/screener/range-trading/scan-cycles', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ mode: 'agresif' }),
                });

                const reader = resp.body.getReader();
                const decoder = new TextDecoder();
                let buffer = '';

                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;

                    buffer += decoder.decode(value, { stream: true });
                    const lines = buffer.split('\n');
                    buffer = lines.pop();

                    for (const line of lines) {
                        if (!line.startsWith('data: ')) continue;
                        try {
                            const evt = JSON.parse(line.slice(6));
                            this.handleCycleScanEvent(evt);
                        } catch (e) { /* skip */ }
                    }
                }
            } catch (e) {
                console.error('Cycle scan error:', e);
                this.scanLog.push({ type: 'error', msg: 'Cycle scan error: ' + e.message });
            } finally {
                this.cycleScanning = false;
                this.cache['range_trading'].loaded = false;
                this.fetchRangeTrading();
            }
        },

        handleCycleScanEvent(evt) {
            if (evt.type === 'start') {
                this.cycleScanProgress.total = evt.total;
                this.scanLog.push({ type: 'start', msg: evt.message });
            } else if (evt.type === 'scored') {
                this.cycleScanProgress.processed = evt.processed;
                const cpd = evt.cycles_per_day != null ? evt.cycles_per_day.toFixed(2) : '?';
                this.scanLog.push({ type: 'scored', msg: `\u26A1 ${evt.symbol} \u2014 ${cpd} cycles/day` });
            } else if (evt.type === 'skip') {
                this.cycleScanProgress.processed = evt.processed;
                this.scanLog.push({ type: 'skip', msg: `\u2298 ${evt.symbol ?? evt.asset_id} \u2014 ${evt.reason}` });
            } else if (evt.type === 'error') {
                this.cycleScanProgress.processed = evt.processed;
                this.scanLog.push({ type: 'error', msg: `\u2717 ${evt.symbol ?? evt.asset_id} \u2014 ${evt.error}` });
            } else if (evt.type === 'done') {
                this.scanLog.push({ type: 'done', msg: evt.message });
            }
        },

        setQuickFilter(filter) {
            this.rtQuickFilter = filter;
            this.fetchRangeTrading();
        },

        toggleSortDir() {
            this.rtSortDir = this.rtSortDir === 'desc' ? 'asc' : 'desc';
            this.fetchRangeTrading();
        },

        // --- Early Bullish Methods ---

        async fetchEarlyBullish(append = false) {
            const tab = 'early_bullish';
            const c = this.cache[tab];
            if (c.loading) return;
            c.loading = true;

            const nextPage = append ? c.page + 1 : 1;
            let url = `/api/v1/market/screener?type=${tab}&limit=50&page=${nextPage}`;
            if (this.ebSortBy) {
                url += `&sort=${this.ebSortBy}&dir=${this.ebSortDir}`;
            } else {
                url += `&dir=${this.ebSortDir}`;
            }
            if (this.ebQuickFilter) {
                url += `&filter=${this.ebQuickFilter}`;
            }

            try {
                const resp = await fetch(url);
                const data = await resp.json();
                if (resp.ok) {
                    if (append) {
                        c.items = c.items.concat(data.items);
                    } else {
                        c.items = data.items;
                    }
                    c.total = data.total;
                    c.page = data.page;
                    c.has_more = data.has_more;
                    c.loaded = true;
                }
            } catch (e) {
                console.error('Early bullish fetch error:', e);
            } finally {
                c.loading = false;
            }
        },

        async startBullishScan() {
            if (this.bullishScanning) return;
            this.bullishScanning = true;
            this.bullishScanProgress = { processed: 0, total: 0 };
            this.scanLog = [];

            try {
                const resp = await fetch('/api/v1/market/screener/early-bullish/scan', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ timeframe: '1H' }),
                });

                const reader = resp.body.getReader();
                const decoder = new TextDecoder();
                let buffer = '';

                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;

                    buffer += decoder.decode(value, { stream: true });
                    const lines = buffer.split('\n');
                    buffer = lines.pop();

                    for (const line of lines) {
                        if (!line.startsWith('data: ')) continue;
                        try {
                            const evt = JSON.parse(line.slice(6));
                            this.handleBullishScanEvent(evt);
                        } catch (e) { /* skip parse errors */ }
                    }
                }
            } catch (e) {
                console.error('Bullish scan error:', e);
                this.scanLog.push({ type: 'error', msg: 'Koneksi terputus: ' + e.message });
            } finally {
                this.bullishScanning = false;
                this.cache['early_bullish'].loaded = false;
                this.fetchEarlyBullish();
            }
        },

        handleBullishScanEvent(evt) {
            if (evt.type === 'start') {
                this.bullishScanProgress.total = evt.total;
                this.scanLog.push({ type: 'start', msg: evt.message });
            } else if (evt.type === 'scored') {
                this.bullishScanProgress.processed = evt.processed;
                const icon = evt.phase === 'EARLY_BULLISH' ? '🚀' : (evt.phase === 'PEAK_BULLISH' ? '⚠️' : '⊘');
                this.scanLog.push({ type: 'scored', msg: `${icon} ${evt.symbol} — ${evt.phase} (score: ${evt.score}, cond: ${evt.conditions}/5)` });
            } else if (evt.type === 'skip') {
                this.bullishScanProgress.processed = evt.processed;
                this.scanLog.push({ type: 'skip', msg: `⊘ ${evt.symbol ?? evt.asset_id} — ${evt.reason}` });
            } else if (evt.type === 'error') {
                this.bullishScanProgress.processed = evt.processed;
                this.scanLog.push({ type: 'error', msg: `✗ ${evt.name ?? evt.asset_id} — ${evt.error}` });
            } else if (evt.type === 'done') {
                this.scanLog.push({ type: 'done', msg: evt.message });
            }
        },

        async startSignalScan() {
            if (this.signalScanning) return;
            this.signalScanning = true;
            this.signalScanProgress = { processed: 0, total: 0 };
            this.scanLog = [];

            try {
                const resp = await fetch('/api/v1/market/screener/signals/scan', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ timeframe: '1D' }),
                });

                const reader = resp.body.getReader();
                const decoder = new TextDecoder();
                let buffer = '';

                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;

                    buffer += decoder.decode(value, { stream: true });
                    const lines = buffer.split('\n');
                    buffer = lines.pop();

                    for (const line of lines) {
                        if (!line.startsWith('data: ')) continue;
                        try {
                            const evt = JSON.parse(line.slice(6));
                            this.handleSignalScanEvent(evt);
                        } catch (e) { /* skip parse errors */ }
                    }
                }
            } catch (e) {
                console.error('Signal scan error:', e);
                this.scanLog.push({ type: 'error', msg: 'Koneksi terputus: ' + e.message });
            } finally {
                this.signalScanning = false;
                // Refresh all signal tabs
                for (const tab of ['scalping', 'swing', 'investment']) {
                    this.cache[tab].loaded = false;
                }
                this.fetchData(this.activeTab);
            }
        },

        handleSignalScanEvent(evt) {
            if (evt.type === 'start') {
                this.signalScanProgress.total = evt.total;
                this.scanLog.push({ type: 'start', msg: evt.message });
            } else if (evt.type === 'scored') {
                this.signalScanProgress.processed = evt.processed;
                const icon = evt.signal === 'BUY' ? '🟢' : (evt.signal === 'SELL' ? '🔴' : '⏸️');
                this.scanLog.push({ type: 'scored', msg: `${icon} ${evt.symbol} — ${evt.signal} (score: ${evt.score}, ${evt.strategy})` });
            } else if (evt.type === 'skip') {
                this.signalScanProgress.processed = evt.processed;
                this.scanLog.push({ type: 'skip', msg: `⊘ ${evt.symbol ?? evt.asset_id} — ${evt.reason}` });
            } else if (evt.type === 'error') {
                this.signalScanProgress.processed = evt.processed;
                this.scanLog.push({ type: 'error', msg: `✗ ${evt.symbol ?? evt.asset_id} — ${evt.error}` });
            } else if (evt.type === 'done') {
                this.scanLog.push({ type: 'done', msg: evt.message });
            }
        },

        setEbFilter(filter) {
            this.ebQuickFilter = filter;
            this.fetchEarlyBullish();
        },

        toggleEbSortDir() {
            this.ebSortDir = this.ebSortDir === 'desc' ? 'asc' : 'desc';
            this.fetchEarlyBullish();
        },

        formatMomentum(state) {
            const map = {
                'ACCELERATING_UP': 'ACC ↑↑',
                'REVERSING_UP': 'REV ↑',
                'DECELERATING_UP': 'DEC ↑',
                'DECELERATING_DOWN': 'DEC ↓',
                'ACCELERATING_DOWN': 'ACC ↓↓',
                'REVERSING_DOWN': 'REV ↓',
                'FLAT': 'FLAT',
            };
            return map[state] || state || '-';
        },

        formatMomentumClass(state) {
            const map = {
                'ACCELERATING_UP': 'bg-emerald-900/50 text-emerald-300',
                'REVERSING_UP': 'bg-lime-900/50 text-lime-300',
                'DECELERATING_UP': 'bg-amber-900/50 text-amber-300',
                'FLAT': 'bg-gray-800 text-gray-400',
                'DECELERATING_DOWN': 'bg-orange-900/50 text-orange-300',
                'REVERSING_DOWN': 'bg-red-900/50 text-red-300',
                'ACCELERATING_DOWN': 'bg-red-900/50 text-red-400',
            };
            return map[state] || 'bg-gray-800 text-gray-400';
        },

        formatDuration(hours) {
            if (hours == null) return '-';
            if (hours < 1) return Math.round(hours * 60) + 'm';
            if (hours < 24) return hours.toFixed(1) + 'h';
            const days = hours / 24;
            if (days < 7) return days.toFixed(1) + 'd';
            return (days / 7).toFixed(1) + 'w';
        },

        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); },

        timeAgo(isoStr) {
            if (!isoStr) return '-';
            const diff = (Date.now() - new Date(isoStr + 'Z').getTime()) / 1000;
            if (diff < 60) return 'baru';
            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';
        },

        changeColor(val) {
            if (val == null) return 'text-gray-500';
            return val >= 0 ? 'text-emerald-400' : 'text-red-400';
        },
    };
}
</script>
{% endblock %}