{% extends "base.html" %}
{% block title %}Re-entry Filter{% endblock %}

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

    <!-- ═══════════════════════════════════════════════════════════
         HEADER
         ═══════════════════════════════════════════════════════════ -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-rose-900/40 border border-rose-800/50 flex items-center justify-center">
                <svg class="w-5 h-5 text-rose-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>
                </svg>
            </div>
            <div>
                <h1 class="text-2xl font-bold text-white">Re-entry Filter</h1>
                <p class="text-sm text-gray-400">Prevent emotional re-entry after stop-losses</p>
            </div>
        </div>
        <div class="flex flex-wrap items-center gap-3">
            <!-- Asset Type -->
            <select x-model="assetType" @change="fetchData()"
                    class="bg-gray-800 border border-gray-700 text-gray-300 text-xs rounded-lg px-3 py-1.5 focus:ring-rose-500 focus:border-rose-500">
                <option value="">{{ asset_mode or 'All Assets' }}</option>
                <option value="crypto">Crypto</option>
                <option value="saham">Saham</option>
                <option value="stock_us">US Stocks</option>
            </select>
            <!-- Cooldown Hours -->
            <div class="flex items-center gap-1.5">
                <label class="text-xs text-gray-500">Cooldown</label>
                <input type="number" x-model.number="cooldownHours" min="1" max="24" step="1"
                       @change="fetchData()"
                       class="w-16 bg-gray-800 border border-gray-700 text-gray-300 text-xs rounded-lg px-2 py-1.5 focus:ring-rose-500 focus:border-rose-500 text-center"/>
                <span class="text-xs text-gray-500">hrs</span>
            </div>
            <!-- Refresh -->
            <button @click="fetchData()" :disabled="loading"
                    class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg transition"
                    :class="loading
                        ? 'bg-gray-700 text-gray-500 cursor-wait'
                        : 'bg-gray-800 hover:bg-gray-700 text-gray-300'">
                <svg :class="loading && 'animate-spin'" class="w-3.5 h-3.5" 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>
                Refresh
            </button>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         PATTERN ANALYSIS BANNER — "The Proof"
         ═══════════════════════════════════════════════════════════ -->
    <div x-show="data && data.pattern_analysis" x-cloak
         class="bg-gradient-to-r from-rose-950/40 via-gray-900 to-amber-950/30 border border-rose-800/30 rounded-xl p-5">
        <div class="flex items-start gap-3 mb-4">
            <div class="w-8 h-8 rounded-lg bg-rose-900/50 flex items-center justify-center flex-shrink-0 mt-0.5">
                <svg class="w-4 h-4 text-rose-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/>
                </svg>
            </div>
            <div>
                <h3 class="text-sm font-semibold text-rose-300 uppercase tracking-wider">Key Insight — Why This Filter Works</h3>
                <p class="text-xs text-gray-400 mt-1">Historical pattern analysis of re-entries after stop-losses</p>
            </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <!-- Fast Re-entry Winrate -->
            <div class="bg-gray-900/60 rounded-lg p-4 border border-gray-800/50">
                <p class="text-[10px] text-gray-500 uppercase tracking-wider mb-1">Fast Re-entry Winrate</p>
                <p class="text-2xl font-bold text-red-400" x-text="(data.pattern_analysis.fast_reentry_winrate || 0).toFixed(1) + '%'"></p>
                <p class="text-[10px] text-gray-500 mt-1">Re-entered within cooldown period</p>
            </div>
            <!-- Waited Re-entry Winrate -->
            <div class="bg-gray-900/60 rounded-lg p-4 border border-gray-800/50">
                <p class="text-[10px] text-gray-500 uppercase tracking-wider mb-1">Waited Re-entry Winrate</p>
                <p class="text-2xl font-bold text-emerald-400" x-text="(data.pattern_analysis.waited_reentry_winrate || 0).toFixed(1) + '%'"></p>
                <p class="text-[10px] text-gray-500 mt-1">Waited past cooldown before re-entry</p>
            </div>
            <!-- Improvement & Savings -->
            <div class="bg-gray-900/60 rounded-lg p-4 border border-gray-800/50">
                <p class="text-[10px] text-gray-500 uppercase tracking-wider mb-1">Filter Improvement</p>
                <div class="flex items-baseline gap-2">
                    <p class="text-2xl font-bold text-amber-400" x-text="'+' + (data.pattern_analysis.improvement_pct || 0).toFixed(1) + '%'"></p>
                    <span class="text-xs text-emerald-500">winrate boost</span>
                </div>
                <p class="text-xs text-emerald-400 mt-1.5 font-medium" x-text="'Saved: ' + formatRp(data.pattern_analysis.savings_if_filtered || 0)"></p>
            </div>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         STATS CARDS
         ═══════════════════════════════════════════════════════════ -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Total Coins</p>
            <p class="text-2xl font-bold text-white mt-1" x-text="stats.total || 0"></p>
        </div>
        <div class="bg-gray-900 border border-red-900/40 rounded-xl p-4">
            <p class="text-xs text-red-400 uppercase tracking-wider">Blocked</p>
            <p class="text-2xl font-bold text-red-400 mt-1" x-text="stats.blocked || 0"></p>
        </div>
        <div class="bg-gray-900 border border-amber-900/40 rounded-xl p-4">
            <p class="text-xs text-amber-400 uppercase tracking-wider">Caution</p>
            <p class="text-2xl font-bold text-amber-400 mt-1" x-text="stats.caution || 0"></p>
        </div>
        <div class="bg-gray-900 border border-emerald-900/40 rounded-xl p-4">
            <p class="text-xs text-emerald-400 uppercase tracking-wider">Safe</p>
            <p class="text-2xl font-bold text-emerald-400 mt-1" x-text="stats.safe || 0"></p>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         STATUS FILTER TABS
         ═══════════════════════════════════════════════════════════ -->
    <div class="flex flex-wrap gap-2">
        <template x-for="tab in filterTabs" :key="tab.key">
            <button @click="activeFilter = 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="activeFilter === 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 class="text-[10px] font-normal opacity-70 ml-0.5"
                      x-text="'(' + getFilterCount(tab.key) + ')'"></span>
            </button>
        </template>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         LOADING STATE
         ═══════════════════════════════════════════════════════════ -->
    <div x-show="loading" x-cloak class="flex flex-col items-center justify-center py-16 gap-3">
        <svg class="w-8 h-8 animate-spin text-rose-400" 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-sm text-gray-500">Analyzing re-entry patterns...</p>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         EMPTY STATE
         ═══════════════════════════════════════════════════════════ -->
    <div x-show="!loading && filteredItems.length === 0" x-cloak
         class="flex flex-col items-center justify-center py-16 gap-3">
        <div class="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center">
            <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>
            </svg>
        </div>
        <p class="text-sm text-gray-500" x-text="data ? 'No coins match the current filter.' : 'No re-entry data available. Run a sync first.'"></p>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         ITEM CARDS GRID
         ═══════════════════════════════════════════════════════════ -->
    <div x-show="!loading && filteredItems.length > 0" x-cloak
         class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        <template x-for="item in filteredItems" :key="item.coin_symbol">
            <div class="bg-gray-900 border rounded-xl p-5 transition hover:border-gray-600"
                 :class="{
                     'border-red-900/50': item.status === 'BLOCKED',
                     'border-amber-900/50': item.status === 'CAUTION',
                     'border-emerald-900/50': item.status === 'SAFE',
                     'border-gray-800': !['BLOCKED','CAUTION','SAFE'].includes(item.status)
                 }">

                <!-- Card Header: Symbol + Status Badge -->
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center gap-2.5">
                        <div class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center overflow-hidden">
                            <img :src="'/static/icons/stocks/' + item.coin_symbol + '.png'"
                                 :data-symbol="item.coin_symbol"
                                 onerror="__iconError(this)"
                                 class="w-8 h-8 object-cover rounded-full"
                                 :alt="item.coin_symbol"/>
                        </div>
                        <div>
                            <p class="text-sm font-bold text-white" x-text="item.coin_symbol"></p>
                            <p class="text-[10px] text-gray-500 truncate max-w-[140px]" x-text="item.coin_name"></p>
                        </div>
                    </div>
                    <!-- Status Badge -->
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wider"
                          :class="{
                              'bg-red-900/50 text-red-400 border border-red-800/50': item.status === 'BLOCKED',
                              'bg-amber-900/50 text-amber-400 border border-amber-800/50': item.status === 'CAUTION',
                              'bg-emerald-900/50 text-emerald-400 border border-emerald-800/50': item.status === 'SAFE'
                          }">
                        <!-- BLOCKED: lock icon -->
                        <template x-if="item.status === 'BLOCKED'">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
                        </template>
                        <!-- CAUTION: warning icon -->
                        <template x-if="item.status === 'CAUTION'">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
                        </template>
                        <!-- SAFE: check icon -->
                        <template x-if="item.status === 'SAFE'">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </template>
                        <span x-text="item.status"></span>
                    </span>
                </div>

                <!-- BLOCKED: Cooldown Countdown + Last Exit -->
                <div x-show="item.status === 'BLOCKED'" x-cloak class="mb-3 bg-red-950/30 border border-red-900/30 rounded-lg p-3">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-[10px] text-red-400/70 uppercase tracking-wider">Remaining Cooldown</p>
                            <p class="text-lg font-bold text-red-400 font-mono" x-text="formatCooldown(item.remaining_cooldown)"></p>
                        </div>
                        <div class="text-right">
                            <p class="text-[10px] text-gray-500 uppercase tracking-wider">Last Exit</p>
                            <p class="text-xs text-gray-400" x-text="relativeTime(item.last_exit_time)"></p>
                        </div>
                    </div>
                </div>

                <!-- Exit Reason + Consecutive Losses -->
                <div class="flex items-center gap-2 mb-3 flex-wrap">
                    <!-- Exit Reason -->
                    <span x-show="item.exit_reason" x-cloak
                          class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-semibold"
                          :class="item.exit_reason === 'SL'
                              ? 'bg-red-900/40 text-red-400'
                              : item.exit_reason === 'TP'
                                  ? 'bg-emerald-900/40 text-emerald-400'
                                  : 'bg-gray-800 text-gray-400'">
                        <span x-text="item.exit_reason === 'SL' ? 'Stop Loss' : item.exit_reason === 'TP' ? 'Take Profit' : item.exit_reason"></span>
                    </span>
                    <!-- Consecutive Losses -->
                    <template x-if="item.consecutive_losses >= 2">
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-semibold bg-red-900/40 text-red-300">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
                            <span x-text="item.consecutive_losses + ' consecutive losses'"></span>
                        </span>
                    </template>
                </div>

                <!-- Re-entry Score Bar -->
                <div class="mb-3">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-[10px] text-gray-500 uppercase tracking-wider">Re-entry Score</span>
                        <span class="text-xs font-bold"
                              :class="{
                                  'text-red-400': item.reentry_score < 30,
                                  'text-amber-400': item.reentry_score >= 30 && item.reentry_score < 60,
                                  'text-emerald-400': item.reentry_score >= 60
                              }"
                              x-text="(item.reentry_score || 0) + '/100'"></span>
                    </div>
                    <div class="w-full h-1.5 bg-gray-800 rounded-full overflow-hidden">
                        <div class="h-full rounded-full transition-all duration-500"
                             :class="{
                                 'bg-red-500': item.reentry_score < 30,
                                 'bg-amber-500': item.reentry_score >= 30 && item.reentry_score < 60,
                                 'bg-emerald-500': item.reentry_score >= 60
                             }"
                             :style="'width:' + Math.min(100, item.reentry_score || 0) + '%'"></div>
                    </div>
                </div>

                <!-- Current Momentum Indicators -->
                <div class="flex items-center gap-2 mb-3 flex-wrap">
                    <!-- ML Trend -->
                    <span x-show="item.ml_trend" x-cloak
                          class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium"
                          :class="{
                              'bg-emerald-900/30 text-emerald-400': item.ml_trend === 'bullish',
                              'bg-red-900/30 text-red-400': item.ml_trend === 'bearish',
                              'bg-gray-800 text-gray-400': item.ml_trend === 'neutral'
                          }">
                        <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <template x-if="item.ml_trend === 'bullish'">
                                <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"/>
                            </template>
                            <template x-if="item.ml_trend === 'bearish'">
                                <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"/>
                            </template>
                            <template x-if="item.ml_trend === 'neutral'">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/>
                            </template>
                        </svg>
                        <span x-text="'ML: ' + (item.ml_trend || '-')"></span>
                    </span>
                    <!-- Velocity -->
                    <span x-show="item.velocity != null" x-cloak
                          class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium"
                          :class="item.velocity > 0 ? 'bg-emerald-900/30 text-emerald-400' : item.velocity < 0 ? 'bg-red-900/30 text-red-400' : 'bg-gray-800 text-gray-400'">
                        <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
                        <span x-text="'Vel: ' + (item.velocity > 0 ? '+' : '') + (item.velocity || 0).toFixed(2)"></span>
                    </span>
                </div>

                <!-- Rationale -->
                <div x-show="item.rationale" x-cloak class="mt-2 pt-2 border-t border-gray-800">
                    <p class="text-xs text-gray-500 italic leading-relaxed" x-text="item.rationale"></p>
                </div>
            </div>
        </template>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         RECOMMENDATIONS — Behavioral Coaching
         ═══════════════════════════════════════════════════════════ -->
    <div x-show="data && data.recommendations && data.recommendations.length > 0" x-cloak
         class="bg-gray-900 border border-gray-800 rounded-xl p-6">
        <div class="flex items-center gap-2.5 mb-4">
            <div class="w-7 h-7 rounded-lg bg-violet-900/50 flex items-center justify-center">
                <svg class="w-4 h-4 text-violet-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 00-.491 6.347A48.62 48.62 0 0112 20.904a48.62 48.62 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.636 50.636 0 00-2.658-.813A59.906 59.906 0 0112 3.493a59.903 59.903 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5"/>
                </svg>
            </div>
            <div>
                <h3 class="text-sm font-semibold text-white">Behavioral Coaching</h3>
                <p class="text-[10px] text-gray-500">Discipline-based recommendations for your trading behavior</p>
            </div>
        </div>
        <div class="space-y-3">
            <template x-for="(rec, idx) in data.recommendations" :key="idx">
                <div class="flex items-start gap-3 bg-gray-800/40 rounded-lg p-3 border border-gray-800/50">
                    <div class="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5"
                         :class="{
                             'bg-red-900/50 text-red-400': rec.severity === 'high',
                             'bg-amber-900/50 text-amber-400': rec.severity === 'medium',
                             'bg-sky-900/50 text-sky-400': rec.severity === 'low' || !rec.severity
                         }">
                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                            <template x-if="rec.severity === 'high'">
                                <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
                            </template>
                            <template x-if="rec.severity === 'medium'">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"/>
                            </template>
                            <template x-if="rec.severity !== 'high' && rec.severity !== 'medium'">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"/>
                            </template>
                        </svg>
                    </div>
                    <div>
                        <p class="text-xs text-gray-300 font-medium" x-text="rec.title"></p>
                        <p class="text-[11px] text-gray-500 mt-0.5 leading-relaxed" x-text="rec.message"></p>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         ERROR STATE
         ═══════════════════════════════════════════════════════════ -->
    <div x-show="error" x-cloak
         class="bg-red-900/20 border border-red-800/50 rounded-xl p-4 flex items-center gap-3">
        <svg class="w-5 h-5 text-red-400 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/>
        </svg>
        <div>
            <p class="text-sm text-red-300 font-medium">Failed to load re-entry filter data</p>
            <p class="text-xs text-red-400/70 mt-0.5" x-text="error"></p>
        </div>
    </div>
</div>

<script>
function reentryFilter() {
    return {
        /* ── State ── */
        loading: false,
        error: null,
        data: null,
        assetType: '{{ asset_mode or "" }}',
        cooldownHours: 4,
        activeFilter: 'all',

        /* ── Computed Stats ── */
        stats: { total: 0, blocked: 0, caution: 0, safe: 0 },

        /* ── Filter Tab Definitions ── */
        filterTabs: [
            { key: 'all',     label: 'All',     activeClass: 'border-gray-500 text-white bg-gray-700' },
            { key: 'BLOCKED', label: 'Blocked',  activeClass: 'border-red-700 text-red-300 bg-red-900/40' },
            { key: 'CAUTION', label: 'Caution',  activeClass: 'border-amber-700 text-amber-300 bg-amber-900/40' },
            { key: 'SAFE',    label: 'Safe',     activeClass: 'border-emerald-700 text-emerald-300 bg-emerald-900/40' },
        ],

        /* ── Filtered Items (computed property via getter) ── */
        get filteredItems() {
            if (!this.data || !this.data.items) return [];
            if (this.activeFilter === 'all') return this.data.items;
            return this.data.items.filter(i => i.status === this.activeFilter);
        },

        /* ── API Fetch ── */
        fetchData() {
            this.loading = true;
            this.error = null;

            const params = new URLSearchParams();
            if (this.assetType) params.set('asset_type', this.assetType);
            if (this.cooldownHours) params.set('cooldown', this.cooldownHours);

            const url = `/api/v1/market/reentry-filter?${params.toString()}`;

            fetch(url)
                .then(r => {
                    if (r.redirected) { window.location.href = '/auth/login'; return; }
                    if (!r.ok) throw new Error(`HTTP ${r.status}`);
                    return r.json();
                })
                .then(d => {
                    if (!d) return;
                    this.data = d;
                    this.computeStats();
                    this.loading = false;
                })
                .catch(err => {
                    this.error = err.message || 'Unknown error';
                    this.loading = false;
                });
        },

        /* ── Compute Stats ── */
        computeStats() {
            if (!this.data || !this.data.items) {
                this.stats = { total: 0, blocked: 0, caution: 0, safe: 0 };
                return;
            }
            const items = this.data.items;
            this.stats = {
                total: items.length,
                blocked: items.filter(i => i.status === 'BLOCKED').length,
                caution: items.filter(i => i.status === 'CAUTION').length,
                safe: items.filter(i => i.status === 'SAFE').length,
            };
        },

        /* ── Get count for a filter tab ── */
        getFilterCount(key) {
            if (key === 'all') return this.stats.total;
            if (key === 'BLOCKED') return this.stats.blocked;
            if (key === 'CAUTION') return this.stats.caution;
            if (key === 'SAFE') return this.stats.safe;
            return 0;
        },

        /* ── Format remaining cooldown (minutes -> display) ── */
        formatCooldown(minutes) {
            if (!minutes || minutes <= 0) return '0m';
            const h = Math.floor(minutes / 60);
            const m = Math.round(minutes % 60);
            if (h > 0) return h + 'h ' + m + 'm';
            return m + 'm';
        },

        /* ── Relative time (ISO string -> "2h ago") ── */
        relativeTime(iso) {
            if (!iso) return '-';
            try {
                const now = Date.now();
                const then = new Date(iso).getTime();
                const diffMs = now - then;
                const diffMin = Math.floor(diffMs / 60000);
                if (diffMin < 1) return 'just now';
                if (diffMin < 60) return diffMin + 'm ago';
                const diffH = Math.floor(diffMin / 60);
                if (diffH < 24) return diffH + 'h ago';
                const diffD = Math.floor(diffH / 24);
                return diffD + 'd ago';
            } catch {
                return iso;
            }
        },

        /* ── Format Rupiah ── */
        formatRp(value) {
            if (value == null || isNaN(value)) return 'Rp 0';
            const abs = Math.abs(value);
            let formatted;
            if (abs >= 1e9) {
                formatted = (value / 1e9).toFixed(1) + 'B';
            } else if (abs >= 1e6) {
                formatted = (value / 1e6).toFixed(1) + 'M';
            } else if (abs >= 1e3) {
                formatted = (value / 1e3).toFixed(1) + 'K';
            } else {
                formatted = Math.round(value).toLocaleString('id-ID');
            }
            return 'Rp ' + formatted;
        },
    };
}
</script>
{% endblock %}