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

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

    <!-- ═══════════════════════════════════════════════════════
         HEADER
         ═══════════════════════════════════════════════════════ -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between 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-amber-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"/>
                    </svg>
                    Earnings Screener
                </h1>
                <p class="text-sm text-gray-400 mt-0.5">Pre/post-earnings trade setups</p>
            </div>
        </div>

        <!-- Controls -->
        <div class="flex flex-wrap items-center gap-2">
            <!-- Asset Type -->
            <select x-model="assetType" @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-amber-500">
                <option value="stock">Saham IDX</option>
                <option value="stock_us">Saham US</option>
                <option value="all">All Assets</option>
            </select>

            <!-- Days Ahead -->
            <select x-model="daysAhead" @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-amber-500">
                <option value="7">7 Days</option>
                <option value="14">14 Days</option>
                <option value="30">30 Days</option>
                <option value="60">60 Days</option>
            </select>

            <!-- Refresh Button -->
            <button @click="fetchData()" :disabled="loading"
                    class="flex items-center gap-2 px-4 py-1.5 text-sm font-medium rounded-lg transition"
                    :class="loading ? 'bg-gray-800 text-gray-500 cursor-not-allowed' : 'bg-amber-600 hover:bg-amber-500 text-white'">
                <svg :class="loading && '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="loading ? 'Loading...' : 'Refresh'"></span>
            </button>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════
         STATS CARDS
         ═══════════════════════════════════════════════════════ -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-white" x-text="stats.upcoming_count || 0"></p>
            <p class="text-xs text-gray-400 mt-1">Upcoming Count</p>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-purple-400" x-text="stats.iv_crush_candidates || 0"></p>
            <p class="text-xs text-gray-400 mt-1">IV Crush Candidates</p>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-emerald-400" x-text="stats.directional_plays || 0"></p>
            <p class="text-xs text-gray-400 mt-1">Directional Plays</p>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-amber-400" x-text="stats.event_trades || 0"></p>
            <p class="text-xs text-gray-400 mt-1">Event Trades</p>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════
         STRATEGY TABS / FILTER
         ═══════════════════════════════════════════════════════ -->
    <div class="flex flex-wrap items-center gap-2">
        <button @click="activeTab = 'all'"
                class="px-3.5 py-1.5 rounded-full text-sm font-medium border transition"
                :class="activeTab === 'all'
                    ? 'bg-gray-600 text-white border-gray-500'
                    : 'border-gray-700 text-gray-400 bg-gray-800/50 hover:border-gray-600 hover:text-gray-300'">
            All
            <span class="text-[10px] opacity-70 ml-0.5" x-text="'(' + filteredItems.length + ')'" x-show="!loading"></span>
        </button>
        <button @click="activeTab = 'IV_CRUSH_SELL'"
                class="px-3.5 py-1.5 rounded-full text-sm font-medium border transition"
                :class="activeTab === 'IV_CRUSH_SELL'
                    ? 'bg-purple-600/30 text-purple-300 border-purple-500'
                    : 'border-gray-700 text-gray-400 bg-gray-800/50 hover:border-gray-600 hover:text-gray-300'">
            IV Crush
            <span class="text-[10px] opacity-70 ml-0.5" x-text="'(' + countByStrategy('IV_CRUSH_SELL') + ')'" x-show="!loading"></span>
        </button>
        <button @click="activeTab = 'DIRECTIONAL'"
                class="px-3.5 py-1.5 rounded-full text-sm font-medium border transition"
                :class="activeTab === 'DIRECTIONAL'
                    ? 'bg-emerald-600/30 text-emerald-300 border-emerald-500'
                    : 'border-gray-700 text-gray-400 bg-gray-800/50 hover:border-gray-600 hover:text-gray-300'">
            Directional
            <span class="text-[10px] opacity-70 ml-0.5" x-text="'(' + countByStrategy('DIRECTIONAL') + ')'" x-show="!loading"></span>
        </button>
        <button @click="activeTab = 'EVENT_STRADDLE'"
                class="px-3.5 py-1.5 rounded-full text-sm font-medium border transition"
                :class="activeTab === 'EVENT_STRADDLE'
                    ? 'bg-amber-600/30 text-amber-300 border-amber-500'
                    : 'border-gray-700 text-gray-400 bg-gray-800/50 hover:border-gray-600 hover:text-gray-300'">
            Event Straddle
            <span class="text-[10px] opacity-70 ml-0.5" x-text="'(' + countByStrategy('EVENT_STRADDLE') + ')'" x-show="!loading"></span>
        </button>

        <!-- Search -->
        <div class="relative flex-1 min-w-[160px] ml-auto">
            <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" placeholder="Search symbol or name..."
                   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-amber-500">
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════
         LOADING STATE
         ═══════════════════════════════════════════════════════ -->
    <div x-show="loading" x-cloak class="text-center py-16">
        <svg class="animate-spin h-8 w-8 text-amber-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">Scanning earnings calendar...</p>
    </div>

    <!-- ═══════════════════════════════════════════════════════
         EMPTY STATE
         ═══════════════════════════════════════════════════════ -->
    <div x-show="!loading && filteredItems.length === 0 && !error" x-cloak
         class="text-center py-16 bg-gray-800/50 rounded-xl border border-gray-700">
        <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="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"/>
        </svg>
        <h3 class="mt-4 text-lg font-medium text-gray-400">No Earnings Events Found</h3>
        <p class="mt-2 text-sm text-gray-600 max-w-md mx-auto">
            No upcoming earnings events match the current filters.
            Try extending the days-ahead window or changing the asset type.
        </p>
    </div>

    <!-- ═══════════════════════════════════════════════════════
         CARDS GRID
         ═══════════════════════════════════════════════════════ -->
    <div x-show="!loading && filteredItems.length > 0" x-cloak class="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <template x-for="(item, idx) in filteredItems" :key="item.asset_id || idx">
            <div class="bg-gray-800 border border-gray-700 rounded-xl overflow-hidden hover:border-gray-600 transition animate-fadeIn"
                 :class="{
                     'ring-1 ring-purple-500/40': item.strategy === 'IV_CRUSH_SELL',
                     'ring-1 ring-emerald-500/40': item.strategy === 'DIRECTIONAL_LONG',
                     'ring-1 ring-rose-500/40': item.strategy === 'DIRECTIONAL_SHORT',
                     'ring-1 ring-amber-500/40': item.strategy === 'EVENT_STRADDLE'
                 }"
                 :style="'animation-delay: ' + (idx * 40) + 'ms'">

                <!-- Card Header -->
                <div class="p-4 pb-3">
                    <div class="flex items-center justify-between">
                        <!-- Left: Symbol + Name + Sector -->
                        <a :href="'/market/asset/' + item.asset_id" class="flex items-center gap-3 group min-w-0">
                            <img :src="item.icon_thumb_url || (item.symbol ? __stockIconUrl(item.symbol) : '')"
                                 :data-symbol="item.symbol"
                                 class="w-10 h-10 rounded-full flex-shrink-0" loading="lazy"
                                 onerror="__iconError(this)"
                                 x-show="item.icon_thumb_url || item.symbol">
                            <span x-show="!item.icon_thumb_url && !item.symbol"
                                  class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-sm text-gray-400 flex-shrink-0"
                                  x-text="(item.coin_symbol || '?')[0].toUpperCase()"></span>
                            <div class="min-w-0">
                                <div class="flex items-center gap-2">
                                    <span class="text-white font-bold text-sm group-hover:text-amber-400 transition truncate" x-text="item.coin_symbol"></span>
                                    <span x-show="item.sector"
                                          class="text-[10px] px-1.5 py-0.5 rounded bg-gray-700 text-gray-400 font-medium truncate max-w-[100px]"
                                          x-text="item.sector"></span>
                                </div>
                                <p class="text-xs text-gray-500 truncate mt-0.5" x-text="item.coin_name"></p>
                            </div>
                        </a>

                        <!-- Right: Days Countdown -->
                        <div class="flex flex-col items-end flex-shrink-0 ml-3">
                            <div class="text-2xl font-bold tabular-nums"
                                 :class="daysCountdownColor(item.days_to_earnings)"
                                 x-text="item.days_to_earnings + 'd'"></div>
                            <p class="text-[10px] text-gray-500 mt-0.5" x-text="formatEarningsDate(item.next_earnings_date)"></p>
                        </div>
                    </div>

                    <!-- Strategy Badge + Direction Bias -->
                    <div class="flex items-center justify-between mt-3">
                        <div class="flex items-center gap-2 flex-wrap">
                            <!-- Strategy Badge -->
                            <span class="text-[10px] px-2 py-0.5 rounded-full font-bold uppercase tracking-wider"
                                  :class="strategyBadgeClass(item.strategy)"
                                  x-text="strategyLabel(item.strategy)"></span>

                            <!-- Direction Bias -->
                            <span class="text-[10px] px-1.5 py-0.5 rounded font-semibold uppercase"
                                  :class="{
                                      'bg-emerald-900/50 text-emerald-300': item.direction_bias === 'BULLISH',
                                      'bg-rose-900/50 text-rose-300': item.direction_bias === 'BEARISH',
                                      'bg-gray-700 text-gray-400': item.direction_bias === 'NEUTRAL' || !item.direction_bias
                                  }"
                                  x-text="item.direction_bias || 'NEUTRAL'"></span>

                            <!-- Risk Level -->
                            <span x-show="item.risk_level"
                                  class="text-[10px] px-1.5 py-0.5 rounded font-medium"
                                  :class="{
                                      'bg-red-900/50 text-red-300': item.risk_level === 'HIGH',
                                      'bg-amber-900/50 text-amber-300': item.risk_level === 'MEDIUM',
                                      'bg-emerald-900/50 text-emerald-300': item.risk_level === 'LOW'
                                  }"
                                  x-text="'Risk: ' + item.risk_level"></span>
                        </div>

                        <!-- Expected Move -->
                        <div class="text-right flex-shrink-0">
                            <p class="text-[10px] text-gray-500">Exp. Move</p>
                            <p class="text-sm font-bold tabular-nums"
                               :class="(item.expected_move_pct || 0) >= 5 ? 'text-amber-400' : 'text-gray-300'"
                               x-text="item.expected_move_pct != null ? '\u00B1' + item.expected_move_pct.toFixed(1) + '%' : '-'"></p>
                        </div>
                    </div>
                </div>

                <!-- Setup Quality Bar -->
                <div class="px-4 pb-3">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-[10px] text-gray-500 uppercase tracking-wider font-semibold">Setup Quality</span>
                        <span class="text-xs font-bold tabular-nums"
                              :class="qualityScoreColor(item.setup_quality)"
                              x-text="(item.setup_quality || 0) + '/100'"></span>
                    </div>
                    <div class="w-full h-2 bg-gray-900 rounded-full overflow-hidden">
                        <div class="h-full rounded-full transition-all duration-500"
                             :class="qualityBarColor(item.setup_quality)"
                             :style="'width: ' + Math.min(item.setup_quality || 0, 100) + '%'"></div>
                    </div>
                </div>

                <!-- Metrics Grid: Momentum + Volatility -->
                <div class="px-4 pb-3">
                    <div class="grid grid-cols-2 gap-3">
                        <!-- Momentum Section -->
                        <div class="bg-gray-900/60 rounded-lg p-2.5">
                            <p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wider mb-1.5">Momentum</p>
                            <div class="space-y-1">
                                <div class="flex items-center justify-between">
                                    <span class="text-[10px] text-gray-400">ML Trend</span>
                                    <span class="text-[11px] font-medium"
                                          :class="{
                                              'text-emerald-400': item.ml_trend === 'BULLISH' || item.ml_trend === 'UP',
                                              'text-rose-400': item.ml_trend === 'BEARISH' || item.ml_trend === 'DOWN',
                                              'text-gray-400': !item.ml_trend || item.ml_trend === 'NEUTRAL'
                                          }"
                                          x-text="item.ml_trend || '-'"></span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-[10px] text-gray-400">Score</span>
                                    <span class="text-[11px] font-medium text-gray-300 tabular-nums"
                                          x-text="item.ml_score != null ? item.ml_score.toFixed(1) : '-'"></span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-[10px] text-gray-400">Velocity</span>
                                    <span class="text-[11px] font-medium tabular-nums"
                                          :class="(item.ml_velocity || 0) > 0 ? 'text-emerald-400' : (item.ml_velocity || 0) < 0 ? 'text-rose-400' : 'text-gray-400'"
                                          x-text="item.ml_velocity != null ? (item.ml_velocity > 0 ? '+' : '') + item.ml_velocity.toFixed(2) : '-'"></span>
                                </div>
                            </div>
                        </div>

                        <!-- Volatility Section -->
                        <div class="bg-gray-900/60 rounded-lg p-2.5">
                            <p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wider mb-1.5">Volatility</p>
                            <div class="space-y-1">
                                <div class="flex items-center justify-between">
                                    <span class="text-[10px] text-gray-400">ATR %</span>
                                    <span class="text-[11px] font-medium text-gray-300 tabular-nums"
                                          x-text="item.atr_pct != null ? item.atr_pct.toFixed(2) + '%' : '-'"></span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-[10px] text-gray-400">Z-Score</span>
                                    <span class="text-[11px] font-medium tabular-nums"
                                          :class="Math.abs(item.zscore || 0) >= 2 ? 'text-red-400' : Math.abs(item.zscore || 0) >= 1 ? 'text-amber-400' : 'text-gray-300'"
                                          x-text="item.zscore != null ? item.zscore.toFixed(2) : '-'"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recommendations (array) -->
                <div x-show="item.recommendations && item.recommendations.length > 0" class="px-4 pb-4">
                    <p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wider mb-1.5">Recommendations</p>
                    <div class="space-y-1">
                        <template x-for="(rec, ri) in (item.recommendations || [])" :key="ri">
                            <div class="flex items-start gap-1.5">
                                <svg class="w-3 h-3 mt-0.5 flex-shrink-0"
                                     :class="{
                                         'text-emerald-400': rec.type === 'action' || rec.type === 'buy',
                                         'text-amber-400': rec.type === 'warning' || rec.type === 'caution',
                                         'text-sky-400': rec.type === 'info',
                                         'text-gray-500': !rec.type
                                     }"
                                     fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/>
                                </svg>
                                <span class="text-[11px] text-gray-400 leading-tight" x-text="rec.text || rec"></span>
                            </div>
                        </template>
                    </div>
                </div>

                <!-- Single recommendation string fallback -->
                <div x-show="item.recommendation && (!item.recommendations || item.recommendations.length === 0)" class="px-4 pb-4">
                    <div class="flex items-start gap-1.5 bg-gray-900/40 rounded-lg p-2">
                        <svg class="w-3.5 h-3.5 mt-0.5 text-amber-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5.002 5.002 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                        </svg>
                        <span class="text-[11px] text-gray-400 leading-tight" x-text="item.recommendation"></span>
                    </div>
                </div>
            </div>
        </template>
    </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.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>
        <div>
            <p class="text-sm text-red-300 font-medium">Failed to load earnings data</p>
            <p class="text-xs text-red-400/70 mt-0.5" x-text="error"></p>
        </div>
        <button @click="fetchData()" class="ml-auto text-xs px-3 py-1 bg-red-800/50 hover:bg-red-700/50 text-red-300 rounded-lg transition">
            Retry
        </button>
    </div>
</div>

<!-- ═══════════════════════════════════════════════════════════
     ALPINE.JS APPLICATION
     ═══════════════════════════════════════════════════════════ -->
<script>
function earningsScreener() {
    return {
        /* ── State ── */
        assetType: '{{ asset_mode }}',
        daysAhead: '14',
        activeTab: 'all',
        searchQ: '',
        loading: true,
        error: null,

        items: [],
        stats: {
            upcoming_count: 0,
            iv_crush_candidates: 0,
            directional_plays: 0,
            event_trades: 0
        },

        /* ── Fetch Data ── */
        async fetchData() {
            this.loading = true;
            this.error = null;
            try {
                const params = new URLSearchParams({
                    asset_type: this.assetType,
                    days: this.daysAhead
                });
                const resp = await fetch(`/api/v1/market/earnings-screener?${params}`);
                if (!resp.ok) throw new Error(`HTTP ${resp.status}: ${resp.statusText}`);
                const data = await resp.json();

                this.items = (data.items || data.results || []).sort(
                    (a, b) => (a.days_to_earnings || 999) - (b.days_to_earnings || 999)
                );

                this.stats = {
                    upcoming_count: data.upcoming_count ?? data.total ?? this.items.length,
                    iv_crush_candidates: data.iv_crush_candidates ?? this.items.filter(i => i.strategy === 'IV_CRUSH_SELL').length,
                    directional_plays: data.directional_plays ?? this.items.filter(i => i.strategy === 'DIRECTIONAL_LONG' || i.strategy === 'DIRECTIONAL_SHORT').length,
                    event_trades: data.event_trades ?? this.items.filter(i => i.strategy === 'EVENT_STRADDLE').length
                };
            } catch (e) {
                console.error('Earnings screener fetch error:', e);
                this.error = e.message || String(e);
                this.items = [];
            }
            this.loading = false;
        },

        /* ── Computed: filtered items ── */
        get filteredItems() {
            let list = this.items;

            /* Tab filter */
            if (this.activeTab === 'IV_CRUSH_SELL') {
                list = list.filter(i => i.strategy === 'IV_CRUSH_SELL');
            } else if (this.activeTab === 'DIRECTIONAL') {
                list = list.filter(i => i.strategy === 'DIRECTIONAL_LONG' || i.strategy === 'DIRECTIONAL_SHORT');
            } else if (this.activeTab === 'EVENT_STRADDLE') {
                list = list.filter(i => i.strategy === 'EVENT_STRADDLE');
            }

            /* Search filter */
            if (this.searchQ.trim()) {
                const q = this.searchQ.trim().toLowerCase();
                list = list.filter(i =>
                    (i.coin_symbol || '').toLowerCase().includes(q) ||
                    (i.coin_name || '').toLowerCase().includes(q) ||
                    (i.symbol || '').toLowerCase().includes(q)
                );
            }

            return list;
        },

        /* ── Helpers ── */
        countByStrategy(strategy) {
            if (strategy === 'DIRECTIONAL') {
                return this.items.filter(i => i.strategy === 'DIRECTIONAL_LONG' || i.strategy === 'DIRECTIONAL_SHORT').length;
            }
            return this.items.filter(i => i.strategy === strategy).length;
        },

        daysCountdownColor(days) {
            if (days == null) return 'text-gray-500';
            if (days < 3) return 'text-red-400';
            if (days < 7) return 'text-amber-400';
            if (days < 14) return 'text-emerald-400';
            return 'text-gray-400';
        },

        formatEarningsDate(dateStr) {
            if (!dateStr) return '-';
            try {
                const d = new Date(dateStr);
                return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
            } catch { return dateStr; }
        },

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

        qualityBarColor(score) {
            if (score == null) return 'bg-gray-600';
            if (score >= 75) return 'bg-emerald-500';
            if (score >= 50) return 'bg-amber-500';
            if (score >= 25) return 'bg-orange-500';
            return 'bg-red-500';
        },

        strategyBadgeClass(strategy) {
            switch (strategy) {
                case 'IV_CRUSH_SELL':
                    return 'bg-purple-900/60 text-purple-300 border border-purple-700/50';
                case 'DIRECTIONAL_LONG':
                    return 'bg-emerald-900/60 text-emerald-300 border border-emerald-700/50';
                case 'DIRECTIONAL_SHORT':
                    return 'bg-rose-900/60 text-rose-300 border border-rose-700/50';
                case 'EVENT_STRADDLE':
                    return 'bg-amber-900/60 text-amber-300 border border-amber-700/50';
                case 'WAIT':
                    return 'bg-gray-700 text-gray-400 border border-gray-600';
                default:
                    return 'bg-gray-700 text-gray-400 border border-gray-600';
            }
        },

        strategyLabel(strategy) {
            switch (strategy) {
                case 'IV_CRUSH_SELL': return 'IV Crush';
                case 'DIRECTIONAL_LONG': return 'Long';
                case 'DIRECTIONAL_SHORT': return 'Short';
                case 'EVENT_STRADDLE': return 'Straddle';
                case 'WAIT': return 'Wait';
                default: return strategy || 'Unknown';
            }
        }
    };
}
</script>

<style>
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
    animation: fadeIn 0.3s ease-out both;
}
</style>
{% endblock %}