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

{% block content %}
<div x-data="marketRegimePanel()" x-init="fetchData()" class="space-y-5">
    <!-- Header -->
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div class="flex items-center gap-3">
            <a href="{{ tools_base }}/" class="text-gray-500 hover:text-gray-300 transition">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-white flex items-center gap-2">
                    <svg class="w-6 h-6 text-indigo-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5a17.92 17.92 0 01-8.716-2.247m0 0A8.966 8.966 0 013 12c0-1.777.514-3.435 1.404-4.832"/></svg>
                    <svg class="w-5 h-5 text-indigo-400 -ml-1" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/></svg>
                    Market Regime Dashboard
                </h1>
                <p class="text-sm text-gray-500 mt-0.5">Analisis kondisi pasar secara keseluruhan &mdash; fase, sentimen, dan distribusi.</p>
            </div>
        </div>
        <button @click="fetchData()" :disabled="overviewLoading"
                class="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition"
                :class="overviewLoading ? 'bg-gray-800 text-gray-500 cursor-not-allowed' : 'bg-indigo-600 hover:bg-indigo-700 text-white'">
            <svg :class="overviewLoading && 'animate-spin'" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
            <span x-text="overviewLoading ? 'Loading...' : 'Refresh'"></span>
        </button>
    </div>

    <!-- Asset Type Filter (shared) -->
    <div class="flex flex-wrap items-center gap-2">
        <select x-model="filters.asset_type" @change="fetchData()"
                class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-300 focus:outline-none focus:ring-1 focus:ring-indigo-500">
            <option value="all">Semua Aset</option>
            <option value="crypto">Kripto</option>
            <option value="stock">Saham IDX</option>
            <option value="stock_us">Saham US</option>
        </select>
    </div>

    <!-- Tab Navigation -->
    <div class="flex gap-1 bg-gray-900/60 rounded-lg p-1 w-fit border border-gray-800">
        <button @click="activeTab = 'overview'"
                class="px-4 py-2 text-sm font-medium rounded-md transition"
                :class="activeTab === 'overview' ? 'bg-indigo-600 text-white shadow' : 'text-gray-400 hover:text-gray-200'">
            <span class="flex items-center gap-1.5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5"/></svg>
                Overview
            </span>
        </button>
        <button @click="activeTab = 'coins'"
                class="px-4 py-2 text-sm font-medium rounded-md transition"
                :class="activeTab === 'coins' ? 'bg-indigo-600 text-white shadow' : 'text-gray-400 hover:text-gray-200'">
            <span class="flex items-center gap-1.5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/></svg>
                Per-Coin
                <span x-show="coinsTotal > 0" x-cloak class="text-[10px] opacity-70" x-text="'(' + coinsTotal + ')'"></span>
            </span>
        </button>
    </div>

    <!-- ══════════════════════════════════════════════════════════════
         SECTION A: OVERVIEW TAB
         ══════════════════════════════════════════════════════════════ -->
    <div x-show="activeTab === 'overview'" x-cloak>

        <!-- Overview Loading -->
        <div x-show="overviewLoading" class="text-center py-16">
            <svg class="animate-spin h-8 w-8 text-indigo-500 mx-auto" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
            </svg>
            <p class="text-gray-500 text-sm mt-3">Memuat data regime pasar...</p>
        </div>

        <!-- Overview Empty -->
        <div x-show="!overviewLoading && !overview" x-cloak
             class="text-center py-16 glass rounded-xl border border-gray-800">
            <svg class="mx-auto h-12 w-12 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5a17.92 17.92 0 01-8.716-2.247m0 0A8.966 8.966 0 013 12c0-1.777.514-3.435 1.404-4.832"/>
            </svg>
            <h3 class="mt-4 text-lg font-medium text-gray-400">Data Regime Belum Tersedia</h3>
            <p class="mt-2 text-sm text-gray-600 max-w-md mx-auto">
                Pastikan data telah di-sync dan analisis telah dijalankan melalui pipeline.
            </p>
        </div>

        <!-- Overview Content -->
        <div x-show="!overviewLoading && overview" x-cloak class="space-y-5">

            <!-- Row 1: Market Score Gauge + Fear & Greed -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

                <!-- Market Score Gauge -->
                <div class="glass rounded-xl border border-indigo-800/40 p-6 flex flex-col items-center">
                    <h3 class="text-xs font-semibold text-indigo-400 uppercase tracking-wider mb-4">Market Score</h3>
                    <!-- SVG Semi-circle Gauge -->
                    <div class="relative w-48 h-28">
                        <svg viewBox="0 0 200 110" class="w-full h-full">
                            <!-- Background arc -->
                            <path d="M 20 100 A 80 80 0 0 1 180 100" fill="none" stroke="rgb(55,65,81)" stroke-width="14" stroke-linecap="round"/>
                            <!-- Score arc -->
                            <path d="M 20 100 A 80 80 0 0 1 180 100" fill="none"
                                  :stroke="gaugeColor(overview?.market_score)"
                                  stroke-width="14" stroke-linecap="round"
                                  :stroke-dasharray="(overview?.market_score || 0) / 100 * 251.2 + ' ' + 251.2"
                                  style="transition: stroke-dasharray 1s ease-out;"/>
                        </svg>
                        <!-- Score Number -->
                        <div class="absolute inset-0 flex flex-col items-center justify-end pb-1">
                            <span class="text-4xl font-bold tabular-nums"
                                  :class="scoreColor(overview?.market_score)"
                                  x-text="overview?.market_score != null ? Math.round(overview.market_score) : '--'"></span>
                        </div>
                    </div>
                    <!-- Phase Label -->
                    <div class="mt-3 text-center">
                        <span class="text-sm font-semibold px-3 py-1 rounded-full border"
                              :class="phaseColor(overview?.market_phase) + ' ' + phaseBgClass(overview?.market_phase)"
                              x-text="phaseLabel(overview?.market_phase)"></span>
                    </div>
                    <p class="text-[10px] text-gray-600 mt-2">0 = Extreme Bearish | 100 = Extreme Bullish</p>
                </div>

                <!-- Fear & Greed Index -->
                <div class="glass rounded-xl border border-indigo-800/40 p-6">
                    <h3 class="text-xs font-semibold text-indigo-400 uppercase tracking-wider mb-4">Fear &amp; Greed Index</h3>
                    <div class="flex items-center gap-3 mb-4">
                        <span class="text-4xl font-bold tabular-nums"
                              :class="fearGreedColor(overview?.fear_greed_index)"
                              x-text="overview?.fear_greed_index != null ? Math.round(overview.fear_greed_index) : '--'"></span>
                        <span class="text-sm font-medium px-2.5 py-1 rounded-full"
                              :class="fearGreedBadge(overview?.fear_greed_index)"
                              x-text="fearGreedLabel(overview?.fear_greed_index)"></span>
                    </div>
                    <!-- Horizontal Bar -->
                    <div class="relative w-full h-4 rounded-full overflow-hidden bg-gradient-to-r from-red-600 via-orange-500 via-gray-500 via-emerald-500 to-green-500">
                        <div class="absolute top-0 h-full w-1 bg-white shadow-lg shadow-white/50 rounded transition-all duration-700"
                             :style="'left: ' + (overview?.fear_greed_index || 0) + '%'"></div>
                    </div>
                    <div class="flex justify-between mt-1.5 text-[10px] text-gray-500">
                        <span>Extreme Fear</span>
                        <span>Fear</span>
                        <span>Neutral</span>
                        <span>Greed</span>
                        <span>Extreme Greed</span>
                    </div>
                    <!-- Legend bar -->
                    <div class="mt-4 grid grid-cols-5 gap-1 text-center text-[10px]">
                        <div class="rounded py-1 bg-red-900/30 text-red-400">0-20</div>
                        <div class="rounded py-1 bg-orange-900/30 text-orange-400">20-40</div>
                        <div class="rounded py-1 bg-gray-800 text-gray-400">40-60</div>
                        <div class="rounded py-1 bg-emerald-900/30 text-emerald-400">60-80</div>
                        <div class="rounded py-1 bg-green-900/30 text-green-400">80-100</div>
                    </div>
                </div>
            </div>

            <!-- Row 2: Distribution Cards (4 cards) -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                <div class="glass rounded-xl border border-gray-800 p-4">
                    <div class="flex items-center gap-2 mb-1">
                        <span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
                        <p class="text-xs text-gray-500 uppercase tracking-wider">Bullish</p>
                    </div>
                    <p class="text-2xl font-bold text-emerald-400 tabular-nums"
                       x-text="overview?.distribution?.bullish_pct != null ? overview.distribution.bullish_pct.toFixed(1) + '%' : '--'"></p>
                </div>
                <div class="glass rounded-xl border border-gray-800 p-4">
                    <div class="flex items-center gap-2 mb-1">
                        <span class="w-2.5 h-2.5 rounded-full bg-gray-500"></span>
                        <p class="text-xs text-gray-500 uppercase tracking-wider">Neutral</p>
                    </div>
                    <p class="text-2xl font-bold text-gray-400 tabular-nums"
                       x-text="overview?.distribution?.neutral_pct != null ? overview.distribution.neutral_pct.toFixed(1) + '%' : '--'"></p>
                </div>
                <div class="glass rounded-xl border border-gray-800 p-4">
                    <div class="flex items-center gap-2 mb-1">
                        <span class="w-2.5 h-2.5 rounded-full bg-red-500"></span>
                        <p class="text-xs text-gray-500 uppercase tracking-wider">Bearish</p>
                    </div>
                    <p class="text-2xl font-bold text-red-400 tabular-nums"
                       x-text="overview?.distribution?.bearish_pct != null ? overview.distribution.bearish_pct.toFixed(1) + '%' : '--'"></p>
                </div>
                <div class="glass rounded-xl border border-indigo-800/40 p-4">
                    <div class="flex items-center gap-2 mb-1">
                        <span class="w-2.5 h-2.5 rounded-full bg-indigo-500"></span>
                        <p class="text-xs text-gray-500 uppercase tracking-wider">Coins Analyzed</p>
                    </div>
                    <p class="text-2xl font-bold text-indigo-400 tabular-nums"
                       x-text="overview?.distribution?.total_coins || '--'"></p>
                </div>
            </div>

            <!-- Distribution Visual Bar -->
            <div class="glass rounded-xl border border-gray-800 p-4">
                <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Distribusi Sentimen</h3>
                <div class="flex h-5 rounded-full overflow-hidden">
                    <div class="bg-emerald-500 transition-all duration-700"
                         :style="'width: ' + (overview?.distribution?.bullish_pct || 0) + '%'"></div>
                    <div class="bg-gray-500 transition-all duration-700"
                         :style="'width: ' + (overview?.distribution?.neutral_pct || 0) + '%'"></div>
                    <div class="bg-red-500 transition-all duration-700"
                         :style="'width: ' + (overview?.distribution?.bearish_pct || 0) + '%'"></div>
                </div>
                <div class="flex justify-between mt-2 text-[10px] text-gray-500">
                    <span x-text="'Bullish ' + (overview?.distribution?.bullish_pct || 0).toFixed(1) + '%'"></span>
                    <span x-text="'Neutral ' + (overview?.distribution?.neutral_pct || 0).toFixed(1) + '%'"></span>
                    <span x-text="'Bearish ' + (overview?.distribution?.bearish_pct || 0).toFixed(1) + '%'"></span>
                </div>
            </div>

            <!-- Row 3: Market Metrics Grid (3x2) -->
            <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                <div class="glass rounded-xl border border-gray-800 p-4">
                    <p class="text-xs text-gray-500 uppercase tracking-wider">ML Bullish %</p>
                    <p class="text-xl font-bold mt-1 tabular-nums"
                       :class="(overview?.ml_bullish_pct || 0) >= 50 ? 'text-emerald-400' : 'text-gray-400'"
                       x-text="overview?.ml_bullish_pct != null ? overview.ml_bullish_pct.toFixed(1) + '%' : '--'"></p>
                    <div class="mt-2 h-1.5 bg-gray-800 rounded-full overflow-hidden">
                        <div class="h-full bg-emerald-500 rounded-full transition-all duration-700"
                             :style="'width: ' + (overview?.ml_bullish_pct || 0) + '%'"></div>
                    </div>
                </div>
                <div class="glass rounded-xl border border-gray-800 p-4">
                    <p class="text-xs text-gray-500 uppercase tracking-wider">Positive Momentum %</p>
                    <p class="text-xl font-bold mt-1 tabular-nums"
                       :class="(overview?.positive_momentum_pct || 0) >= 50 ? 'text-cyan-400' : 'text-gray-400'"
                       x-text="overview?.positive_momentum_pct != null ? overview.positive_momentum_pct.toFixed(1) + '%' : '--'"></p>
                    <div class="mt-2 h-1.5 bg-gray-800 rounded-full overflow-hidden">
                        <div class="h-full bg-cyan-500 rounded-full transition-all duration-700"
                             :style="'width: ' + (overview?.positive_momentum_pct || 0) + '%'"></div>
                    </div>
                </div>
                <div class="glass rounded-xl border border-gray-800 p-4">
                    <p class="text-xs text-gray-500 uppercase tracking-wider">Safe/Moderate %</p>
                    <p class="text-xl font-bold mt-1 tabular-nums"
                       :class="(overview?.safe_moderate_pct || 0) >= 60 ? 'text-indigo-400' : 'text-gray-400'"
                       x-text="overview?.safe_moderate_pct != null ? overview.safe_moderate_pct.toFixed(1) + '%' : '--'"></p>
                    <div class="mt-2 h-1.5 bg-gray-800 rounded-full overflow-hidden">
                        <div class="h-full bg-indigo-500 rounded-full transition-all duration-700"
                             :style="'width: ' + (overview?.safe_moderate_pct || 0) + '%'"></div>
                    </div>
                </div>
                <div class="glass rounded-xl border border-gray-800 p-4">
                    <p class="text-xs text-gray-500 uppercase tracking-wider">Avg RSI</p>
                    <p class="text-xl font-bold mt-1 tabular-nums"
                       :class="(overview?.avg_rsi || 0) > 70 ? 'text-red-400' : (overview?.avg_rsi || 0) < 30 ? 'text-emerald-400' : 'text-amber-400'"
                       x-text="overview?.avg_rsi != null ? overview.avg_rsi.toFixed(1) : '--'"></p>
                    <div class="mt-2 h-1.5 bg-gray-800 rounded-full overflow-hidden">
                        <div class="h-full rounded-full transition-all duration-700"
                             :class="(overview?.avg_rsi || 0) > 70 ? 'bg-red-500' : (overview?.avg_rsi || 0) < 30 ? 'bg-emerald-500' : 'bg-amber-500'"
                             :style="'width: ' + (overview?.avg_rsi || 0) + '%'"></div>
                    </div>
                </div>
                <div class="glass rounded-xl border border-gray-800 p-4">
                    <p class="text-xs text-gray-500 uppercase tracking-wider">Positive 7d %</p>
                    <p class="text-xl font-bold mt-1 tabular-nums"
                       :class="(overview?.positive_7d_pct || 0) >= 50 ? 'text-emerald-400' : 'text-orange-400'"
                       x-text="overview?.positive_7d_pct != null ? overview.positive_7d_pct.toFixed(1) + '%' : '--'"></p>
                    <div class="mt-2 h-1.5 bg-gray-800 rounded-full overflow-hidden">
                        <div class="h-full bg-emerald-500 rounded-full transition-all duration-700"
                             :style="'width: ' + (overview?.positive_7d_pct || 0) + '%'"></div>
                    </div>
                </div>
                <div class="glass rounded-xl border border-gray-800 p-4">
                    <p class="text-xs text-gray-500 uppercase tracking-wider">Market Cap Analyzed</p>
                    <p class="text-xl font-bold text-indigo-400 mt-1 tabular-nums"
                       x-text="overview?.market_cap_analyzed ? formatNumber(overview.market_cap_analyzed) : '--'"></p>
                    <p class="text-[10px] text-gray-600 mt-2">Total kapitalisasi aset yang dianalisis</p>
                </div>
            </div>

            <!-- Row 4: Top Movers / Worst Movers -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- Top 5 Movers -->
                <div class="glass rounded-xl border border-gray-800 p-4">
                    <h3 class="text-xs font-semibold text-emerald-400 uppercase tracking-wider mb-3 flex items-center gap-1.5">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"/></svg>
                        Top 5 Movers (24h)
                    </h3>
                    <div class="space-y-2">
                        <template x-for="(m, i) in (overview?.top_movers || [])" :key="m.symbol || i">
                            <a :href="'/market/asset/' + (m.asset_id || '')" class="flex items-center justify-between py-1.5 px-2 rounded-lg hover:bg-gray-800/60 transition group">
                                <div class="flex items-center gap-2.5 min-w-0">
                                    <span class="text-[10px] text-gray-600 w-4 text-right" x-text="i + 1"></span>
                                    <img :src="m.icon_thumb_url || (m.asset_type==='stock' && m.symbol ? __stockIconUrl(m.symbol) : '')" :data-symbol="m.symbol" class="w-6 h-6 rounded-full flex-shrink-0" loading="lazy" onerror="__iconError(this)" x-show="m.icon_thumb_url || m.asset_type==='stock'">
                                    <span x-show="!m.icon_thumb_url && m.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="(m.symbol || '?')[0].toUpperCase()"></span>
                                    <div class="min-w-0">
                                        <span class="text-sm text-white truncate block group-hover:text-indigo-400 transition" x-text="m.name"></span>
                                        <span class="text-[10px] text-gray-500 font-mono" x-text="(m.symbol || '').toUpperCase()"></span>
                                    </div>
                                </div>
                                <span class="text-sm font-bold text-emerald-400 tabular-nums flex-shrink-0"
                                      x-text="m.change_24h != null ? '+' + m.change_24h.toFixed(2) + '%' : '--'"></span>
                            </a>
                        </template>
                        <div x-show="!overview?.top_movers || overview.top_movers.length === 0" class="text-center py-4 text-sm text-gray-600">Tidak ada data</div>
                    </div>
                </div>

                <!-- Worst 5 Movers -->
                <div class="glass rounded-xl border border-gray-800 p-4">
                    <h3 class="text-xs font-semibold text-red-400 uppercase tracking-wider mb-3 flex items-center gap-1.5">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6L9 12.75l4.286-4.286a11.948 11.948 0 014.306 6.43l.776 2.898m0 0l3.182-5.511m-3.182 5.51l-5.511-3.181"/></svg>
                        Worst 5 Movers (24h)
                    </h3>
                    <div class="space-y-2">
                        <template x-for="(m, i) in (overview?.worst_movers || [])" :key="m.symbol || i">
                            <a :href="'/market/asset/' + (m.asset_id || '')" class="flex items-center justify-between py-1.5 px-2 rounded-lg hover:bg-gray-800/60 transition group">
                                <div class="flex items-center gap-2.5 min-w-0">
                                    <span class="text-[10px] text-gray-600 w-4 text-right" x-text="i + 1"></span>
                                    <img :src="m.icon_thumb_url || (m.asset_type==='stock' && m.symbol ? __stockIconUrl(m.symbol) : '')" :data-symbol="m.symbol" class="w-6 h-6 rounded-full flex-shrink-0" loading="lazy" onerror="__iconError(this)" x-show="m.icon_thumb_url || m.asset_type==='stock'">
                                    <span x-show="!m.icon_thumb_url && m.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="(m.symbol || '?')[0].toUpperCase()"></span>
                                    <div class="min-w-0">
                                        <span class="text-sm text-white truncate block group-hover:text-indigo-400 transition" x-text="m.name"></span>
                                        <span class="text-[10px] text-gray-500 font-mono" x-text="(m.symbol || '').toUpperCase()"></span>
                                    </div>
                                </div>
                                <span class="text-sm font-bold text-red-400 tabular-nums flex-shrink-0"
                                      x-text="m.change_24h != null ? m.change_24h.toFixed(2) + '%' : '--'"></span>
                            </a>
                        </template>
                        <div x-show="!overview?.worst_movers || overview.worst_movers.length === 0" class="text-center py-4 text-sm text-gray-600">Tidak ada data</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ══════════════════════════════════════════════════════════════
         SECTION B: PER-COIN REGIME TABLE
         ══════════════════════════════════════════════════════════════ -->
    <div x-show="activeTab === 'coins'" x-cloak>

        <!-- Coin Filters & Sort -->
        <div class="flex flex-wrap items-center gap-2 mb-4">
            <!-- Sort -->
            <select x-model="sortBy" @change="fetchCoins()"
                    class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-300 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                <option value="score">Sort: Score</option>
                <option value="rsi">Sort: RSI</option>
                <option value="name">Sort: Name</option>
                <option value="change_24h">Sort: 24h%</option>
                <option value="change_7d">Sort: 7d%</option>
            </select>

            <!-- Search -->
            <div class="relative flex-1 min-w-[160px]">
                <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="searchQ" @input.debounce.300ms="fetchCoins()"
                       placeholder="Cari koin/saham..."
                       class="w-full bg-gray-800 border border-gray-700 rounded-lg pl-9 pr-3 py-1.5 text-sm text-gray-300 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
            </div>
        </div>

        <!-- Loading State -->
        <div x-show="coinsLoading" class="text-center py-12">
            <svg class="animate-spin h-8 w-8 text-indigo-500 mx-auto" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
            </svg>
            <p class="text-gray-500 text-sm mt-3">Memuat data per-coin...</p>
        </div>

        <!-- Empty State -->
        <div x-show="!coinsLoading && coins.length === 0" x-cloak
             class="text-center py-16 glass rounded-xl border border-gray-800">
            <svg class="mx-auto h-12 w-12 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/>
            </svg>
            <h3 class="mt-4 text-lg font-medium text-gray-400">Belum Ada Data Regime Per-Coin</h3>
            <p class="mt-2 text-sm text-gray-600 max-w-md mx-auto">
                Data regime per-coin akan muncul setelah analisis pipeline dijalankan.
            </p>
        </div>

        <!-- Coins Table -->
        <div x-show="!coinsLoading && coins.length > 0" x-cloak class="glass rounded-xl border border-gray-800 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-800">
                            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Coin</th>
                            <th class="text-center px-3 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Regime Score</th>
                            <th class="text-center px-3 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">ML Trend</th>
                            <th class="text-center px-3 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Momentum</th>
                            <th class="text-center px-3 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">RSI</th>
                            <th class="text-center px-3 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Safety</th>
                            <th class="text-right px-3 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">24h%</th>
                            <th class="text-right px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">7d%</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-800/60">
                        <template x-for="(c, idx) in coins" :key="c.asset_id || idx">
                            <tr class="hover:bg-gray-800/40 transition">
                                <!-- Coin -->
                                <td class="px-4 py-3">
                                    <a :href="'/market/asset/' + c.asset_id" class="flex items-center gap-2.5 group">
                                        <img :src="c.icon_thumb_url || (c.asset_type==='stock' && c.symbol ? __stockIconUrl(c.symbol) : '')" :data-symbol="c.symbol" class="w-7 h-7 rounded-full flex-shrink-0" loading="lazy" onerror="__iconError(this)" x-show="c.icon_thumb_url || c.asset_type==='stock'">
                                        <span x-show="!c.icon_thumb_url && c.asset_type!=='stock'" class="w-7 h-7 rounded-full bg-gray-700 flex items-center justify-center text-xs text-gray-400 flex-shrink-0" x-text="(c.symbol || '?')[0].toUpperCase()"></span>
                                        <div class="min-w-0">
                                            <span class="text-white font-medium truncate block group-hover:text-indigo-400 transition text-sm" x-text="c.name"></span>
                                            <span class="text-[10px] text-gray-500 font-mono" x-text="(c.symbol || '').toUpperCase()"></span>
                                        </div>
                                    </a>
                                </td>
                                <!-- Regime Score -->
                                <td class="text-center px-3 py-3">
                                    <span class="inline-flex items-center justify-center w-10 h-7 rounded-md text-sm font-bold tabular-nums"
                                          :class="coinScoreClass(c.regime_score)"
                                          x-text="c.regime_score != null ? Math.round(c.regime_score) : '--'"></span>
                                </td>
                                <!-- ML Trend -->
                                <td class="text-center px-3 py-3">
                                    <span class="text-xs font-medium capitalize"
                                          :class="c.ml_trend === 'bullish' ? 'text-emerald-400' : c.ml_trend === 'bearish' ? 'text-red-400' : 'text-gray-500'"
                                          x-text="c.ml_trend || '-'"></span>
                                </td>
                                <!-- Momentum -->
                                <td class="text-center px-3 py-3">
                                    <span class="text-xs font-medium"
                                          :class="c.momentum && c.momentum.includes('UP') ? 'text-emerald-400' : c.momentum && c.momentum.includes('DOWN') ? 'text-red-400' : 'text-gray-500'"
                                          x-text="shortMomentum(c.momentum)"></span>
                                </td>
                                <!-- RSI -->
                                <td class="text-center px-3 py-3">
                                    <span class="text-xs font-medium tabular-nums"
                                          :class="(c.rsi || 0) > 70 ? 'text-red-400' : (c.rsi || 0) < 30 ? 'text-emerald-400' : 'text-gray-300'"
                                          x-text="c.rsi != null ? c.rsi.toFixed(1) : '--'"></span>
                                </td>
                                <!-- Safety -->
                                <td class="text-center px-3 py-3">
                                    <span class="text-[10px] px-1.5 py-0.5 rounded font-medium uppercase"
                                          :class="c.safety === 'safe' ? 'bg-emerald-900/40 text-emerald-400' : c.safety === 'moderate' ? 'bg-amber-900/40 text-amber-400' : c.safety === 'risky' ? 'bg-red-900/40 text-red-400' : 'bg-gray-800 text-gray-500'"
                                          x-text="c.safety || '-'"></span>
                                </td>
                                <!-- 24h% -->
                                <td class="text-right px-3 py-3">
                                    <span class="text-xs font-medium tabular-nums"
                                          :class="(c.change_24h || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                          x-text="c.change_24h != null ? (c.change_24h >= 0 ? '+' : '') + c.change_24h.toFixed(2) + '%' : '--'"></span>
                                </td>
                                <!-- 7d% -->
                                <td class="text-right px-4 py-3">
                                    <span class="text-xs font-medium tabular-nums"
                                          :class="(c.change_7d || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                          x-text="c.change_7d != null ? (c.change_7d >= 0 ? '+' : '') + c.change_7d.toFixed(1) + '%' : '--'"></span>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Load More -->
        <div x-show="!coinsLoading && coinsHasMore" x-cloak class="text-center pt-4 pb-2">
            <button @click="loadMoreCoins()" :disabled="coinsLoadingMore"
                    class="px-6 py-2 text-sm font-medium rounded-lg bg-gray-800 border border-gray-700 text-gray-300 hover:bg-gray-700 transition">
                <span x-text="coinsLoadingMore ? 'Loading...' : 'Muat Lebih Banyak (' + (coinsTotal - coins.length) + ' lagi)'"></span>
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function marketRegimePanel() {
    return {
        // Overview data
        overview: null,
        overviewLoading: true,
        // Coin table data
        coins: [],
        coinsLoading: false,
        coinsLoadingMore: false,
        coinsTotal: 0,
        coinsHasMore: false,
        coinsPage: 1,
        // Filters for coin table
        filters: { asset_type: '{{ asset_mode }}' },
        sortBy: 'score',
        searchQ: '',
        // Active tab
        activeTab: 'overview',

        async fetchData() {
            this.fetchOverview();
            this.fetchCoins();
        },

        async fetchOverview() {
            this.overviewLoading = true;
            try {
                const params = new URLSearchParams({ asset_type: this.filters.asset_type });
                const resp = await fetch(`/api/v1/market/screener/market-regime?${params}`);
                if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
                this.overview = await resp.json();
            } catch (e) {
                console.error('Overview fetch error:', e);
                this.overview = null;
            } finally {
                this.overviewLoading = false;
            }
        },

        async fetchCoins() {
            this.coinsPage = 1;
            this.coinsLoading = true;
            try {
                const data = await this._fetchCoins(1);
                this.coins = data.items || [];
                this.coinsTotal = data.total || 0;
                this.coinsHasMore = data.has_more || false;
            } catch (e) {
                console.error('Coins fetch error:', e);
            } finally {
                this.coinsLoading = false;
            }
        },

        async loadMoreCoins() {
            this.coinsPage++;
            this.coinsLoadingMore = true;
            try {
                const data = await this._fetchCoins(this.coinsPage);
                this.coins = this.coins.concat(data.items || []);
                this.coinsHasMore = data.has_more || false;
            } catch (e) {
                console.error('Load more error:', e);
                this.coinsPage--;
            } finally {
                this.coinsLoadingMore = false;
            }
        },

        async _fetchCoins(page) {
            const params = new URLSearchParams({
                asset_type: this.filters.asset_type,
                sort: this.sortBy,
                limit: 20,
                page: page,
                q: this.searchQ,
            });
            const resp = await fetch(`/api/v1/market/screener/market-regime/coins?${params}`);
            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
            return await resp.json();
        },

        // ── Color / Label Helpers ──

        gaugeColor(score) {
            if (score == null) return '#6b7280';
            if (score >= 75) return '#22c55e';
            if (score >= 60) return '#10b981';
            if (score >= 40) return '#f59e0b';
            if (score >= 25) return '#f97316';
            return '#ef4444';
        },

        scoreColor(score) {
            if (score == null) return 'text-gray-500';
            if (score >= 75) return 'text-green-400';
            if (score >= 60) return 'text-emerald-400';
            if (score >= 40) return 'text-amber-400';
            if (score >= 25) return 'text-orange-400';
            return 'text-red-400';
        },

        phaseColor(phase) {
            return {
                bull_market: 'text-emerald-400',
                accumulation: 'text-cyan-400',
                neutral: 'text-gray-400',
                distribution: 'text-orange-400',
                bear_market: 'text-red-400',
            }[phase] || 'text-gray-400';
        },

        phaseBgClass(phase) {
            return {
                bull_market: 'bg-emerald-900/30 border-emerald-800/50',
                accumulation: 'bg-cyan-900/30 border-cyan-800/50',
                neutral: 'bg-gray-800/60 border-gray-700',
                distribution: 'bg-orange-900/30 border-orange-800/50',
                bear_market: 'bg-red-900/30 border-red-800/50',
            }[phase] || 'bg-gray-800/60 border-gray-700';
        },

        phaseLabel(phase) {
            return {
                bull_market: 'Bull Market',
                accumulation: 'Accumulation',
                neutral: 'Neutral',
                distribution: 'Distribution',
                bear_market: 'Bear Market',
            }[phase] || phase || '--';
        },

        fearGreedLabel(val) {
            if (val == null) return '--';
            if (val >= 80) return 'Extreme Greed';
            if (val >= 60) return 'Greed';
            if (val >= 40) return 'Neutral';
            if (val >= 20) return 'Fear';
            return 'Extreme Fear';
        },

        fearGreedColor(val) {
            if (val == null) return 'text-gray-500';
            if (val >= 80) return 'text-green-400';
            if (val >= 60) return 'text-emerald-400';
            if (val >= 40) return 'text-gray-400';
            if (val >= 20) return 'text-orange-400';
            return 'text-red-400';
        },

        fearGreedBadge(val) {
            if (val == null) return 'bg-gray-800 text-gray-500';
            if (val >= 80) return 'bg-green-900/40 text-green-400';
            if (val >= 60) return 'bg-emerald-900/40 text-emerald-400';
            if (val >= 40) return 'bg-gray-800 text-gray-400';
            if (val >= 20) return 'bg-orange-900/40 text-orange-400';
            return 'bg-red-900/40 text-red-400';
        },

        coinScoreClass(score) {
            if (score == null) return 'bg-gray-800 text-gray-500';
            if (score >= 75) return 'bg-green-900/40 text-green-400';
            if (score >= 60) return 'bg-emerald-900/40 text-emerald-400';
            if (score >= 40) return 'bg-amber-900/40 text-amber-400';
            if (score >= 25) return 'bg-orange-900/40 text-orange-400';
            return 'bg-red-900/40 text-red-400';
        },

        shortMomentum(state) {
            if (!state) return '-';
            const map = {
                'ACCELERATING_UP': 'Accel Up',
                'REVERSING_UP': 'Rev Up',
                'DECELERATING_UP': 'Decel Up',
                'STABLE': 'Stable',
                'DECELERATING_DOWN': 'Decel Down',
                'ACCELERATING_DOWN': 'Accel Down',
                'REVERSING_DOWN': 'Rev Down',
            };
            return map[state] || state;
        },

        formatNumber(val) {
            if (val == null || isNaN(val)) return '-';
            const v = Number(val);
            if (v === 0) return '0';
            const abs = Math.abs(v);
            if (abs >= 1_000_000_000_000) return new Intl.NumberFormat('id-ID', {maximumFractionDigits: 1}).format(v / 1_000_000_000_000) + 'T';
            if (abs >= 1_000_000_000) return new Intl.NumberFormat('id-ID', {maximumFractionDigits: 1}).format(v / 1_000_000_000) + 'B';
            if (abs >= 100) return new Intl.NumberFormat('id-ID', {maximumFractionDigits: 0}).format(v);
            if (abs >= 1) return new Intl.NumberFormat('id-ID', {maximumFractionDigits: 2}).format(v);
            if (abs >= 0.01) return new Intl.NumberFormat('id-ID', {maximumFractionDigits: 4}).format(v);
            return new Intl.NumberFormat('id-ID', {maximumFractionDigits: 8}).format(v);
        },
    };
}
</script>
{% endblock %}