{% extends "base.html" %}
{% block title %}Event Arbitrage{% endblock %}

{% block content %}
<div x-data="eventArbitragePanel()" 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-xl font-bold text-white flex items-center gap-2">
                    <svg class="w-6 h-6 text-violet-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                        <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"/>
                    </svg>
                    Event Arbitrage
                </h1>
                <p class="text-sm text-gray-400 mt-0.5">Cross-asset correlation arbitrage around events</p>
            </div>
        </div>

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

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

    <!-- ═══════════════════════════════════════════════════════ -->
    <!-- SUMMARY STATS                                          -->
    <!-- ═══════════════════════════════════════════════════════ -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
        <div class="bg-gray-800/60 border border-gray-700/50 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-white" x-text="summary.total_opportunities || 0"></p>
            <p class="text-xs text-gray-400 mt-1">Total Opportunities</p>
        </div>
        <div class="bg-gray-800/60 border border-emerald-700/30 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-emerald-400" x-text="summary.high_score_count || 0"></p>
            <p class="text-xs text-gray-400 mt-1">High Score (&ge;70)</p>
        </div>
        <div class="bg-gray-800/60 border border-violet-700/30 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-violet-400" x-text="summary.avg_divergence != null ? summary.avg_divergence.toFixed(1) + '%' : '-'"></p>
            <p class="text-xs text-gray-400 mt-1">Avg Divergence</p>
        </div>
        <div class="bg-gray-800/60 border border-amber-700/30 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-amber-400" x-text="summary.active_events || 0"></p>
            <p class="text-xs text-gray-400 mt-1">Active Events</p>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════ -->
    <!-- ACTIVE EVENTS BANNER                                   -->
    <!-- ═══════════════════════════════════════════════════════ -->
    <template x-if="events.length > 0">
        <div class="bg-gradient-to-r from-amber-900/30 via-amber-900/20 to-transparent border border-amber-800/40 rounded-xl p-4">
            <div class="flex items-center gap-2 mb-3">
                <svg class="w-5 h-5 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.5"/>
                </svg>
                <h3 class="text-sm font-semibold text-amber-300">Upcoming Economic Events</h3>
            </div>
            <div class="flex flex-wrap gap-2">
                <template x-for="ev in events" :key="ev.name + (ev.date || '')">
                    <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium border"
                         :class="ev.impact === 'high'
                             ? 'bg-red-900/30 border-red-800/50 text-red-300'
                             : ev.impact === 'medium'
                                 ? 'bg-amber-900/30 border-amber-800/50 text-amber-300'
                                 : 'bg-gray-800 border-gray-700 text-gray-300'">
                        <span class="w-2 h-2 rounded-full"
                              :class="ev.impact === 'high' ? 'bg-red-400 animate-pulse' : ev.impact === 'medium' ? 'bg-amber-400' : 'bg-gray-500'"></span>
                        <span x-text="ev.name"></span>
                        <span class="text-gray-500" x-text="ev.date ? '(' + ev.date + ')' : ''"></span>
                    </div>
                </template>
            </div>
        </div>
    </template>

    <!-- ═══════════════════════════════════════════════════════ -->
    <!-- RECOMMENDATIONS                                        -->
    <!-- ═══════════════════════════════════════════════════════ -->
    <template x-for="rec in data.recommendations || []" :key="rec.message || rec">
        <div class="rounded-lg px-4 py-3 text-sm flex items-start gap-2"
             :class="{
                 'bg-emerald-900/30 border border-emerald-800/40 text-emerald-300': rec.type === 'opportunity',
                 'bg-red-900/30 border border-red-800/40 text-red-300': rec.type === 'warning',
                 'bg-blue-900/30 border border-blue-800/40 text-blue-300': rec.type === 'insight',
                 'bg-amber-900/30 border border-amber-800/40 text-amber-300': rec.type === 'caution'
             }">
            <svg class="w-4 h-4 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <template x-if="rec.type === 'opportunity'">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                </template>
                <template x-if="rec.type === 'warning'">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                </template>
                <template x-if="rec.type !== 'opportunity' && rec.type !== 'warning'">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </template>
            </svg>
            <span x-text="rec.message"></span>
        </div>
    </template>

    <!-- ═══════════════════════════════════════════════════════ -->
    <!-- LOADING STATE                                          -->
    <!-- ═══════════════════════════════════════════════════════ -->
    <div x-show="loading" x-cloak class="text-center py-16">
        <svg class="animate-spin h-8 w-8 text-violet-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 cross-asset event arbitrage opportunities...</p>
    </div>

    <!-- ═══════════════════════════════════════════════════════ -->
    <!-- EMPTY STATE                                            -->
    <!-- ═══════════════════════════════════════════════════════ -->
    <div x-show="!loading && pairs.length === 0" x-cloak
         class="text-center py-16 bg-gray-800/50 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="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/>
        </svg>
        <h3 class="mt-4 text-lg font-medium text-gray-400">No Arbitrage Opportunities Found</h3>
        <p class="mt-2 text-sm text-gray-600 max-w-md mx-auto">
            No cross-asset divergence detected for the current filter. Try selecting a different asset type or wait for market events to create opportunities.
        </p>
    </div>

    <!-- ═══════════════════════════════════════════════════════ -->
    <!-- PAIR CARDS                                             -->
    <!-- ═══════════════════════════════════════════════════════ -->
    <div x-show="!loading && pairs.length > 0" x-cloak class="space-y-4">
        <template x-for="(pair, idx) in pairs" :key="idx">
            <div class="bg-gray-800/60 border rounded-xl overflow-hidden transition hover:border-violet-700/60"
                 :class="pair.opportunity_score >= 80 ? 'border-violet-600/50' : pair.opportunity_score >= 60 ? 'border-gray-600/60' : 'border-gray-700/40'"
                 :style="'animation-delay:' + (idx * 50) + 'ms'">

                <!-- Top Bar: Action Badge + Score + Event Tag -->
                <div class="flex items-center justify-between px-4 pt-3 pb-2">
                    <!-- Action Badge -->
                    <div class="flex items-center gap-2 flex-wrap">
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider"
                              :class="{
                                  'bg-emerald-900/50 text-emerald-300 border border-emerald-700/50': pair.action === 'LONG_LAGGARD',
                                  'bg-rose-900/50 text-rose-300 border border-rose-700/50': pair.action === 'SHORT_LEADER',
                                  'bg-purple-900/50 text-purple-300 border border-purple-700/50': pair.action === 'PAIRS_TRADE'
                              }">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <template x-if="pair.action === 'LONG_LAGGARD'">
                                    <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="pair.action === 'SHORT_LEADER'">
                                    <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="pair.action === 'PAIRS_TRADE'">
                                    <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="pair.action ? pair.action.replace(/_/g, ' ') : 'ARBITRAGE'"></span>
                        </span>

                        <!-- Related Event Tag -->
                        <template x-if="pair.related_event">
                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-semibold bg-amber-900/40 text-amber-300 border border-amber-800/40">
                                <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="pair.related_event"></span>
                            </span>
                        </template>
                    </div>

                    <!-- Opportunity Score -->
                    <div class="flex items-center gap-2">
                        <span class="text-[10px] uppercase tracking-wider text-gray-500">Score</span>
                        <span class="text-sm font-bold font-mono"
                              :class="pair.opportunity_score >= 80 ? 'text-emerald-400' : pair.opportunity_score >= 60 ? 'text-amber-400' : 'text-gray-400'"
                              x-text="pair.opportunity_score != null ? pair.opportunity_score.toFixed(0) : '-'"></span>
                    </div>
                </div>

                <!-- Main Pair Content: A vs B -->
                <div class="grid grid-cols-[1fr_auto_1fr] gap-0 px-4 pb-2">

                    <!-- ── Coin A (Left) ── -->
                    <div class="pr-3 py-2">
                        <div class="flex items-center gap-2 mb-2">
                            <!-- Buy/Sell Arrow for Coin A -->
                            <template x-if="pair.action === 'LONG_LAGGARD' || pair.action === 'PAIRS_TRADE'">
                                <span class="w-5 h-5 rounded-full bg-emerald-900/60 border border-emerald-700/50 flex items-center justify-center shrink-0" title="BUY">
                                    <svg class="w-3 h-3 text-emerald-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"/>
                                    </svg>
                                </span>
                            </template>
                            <template x-if="pair.action === 'SHORT_LEADER'">
                                <span class="w-5 h-5 rounded-full bg-rose-900/60 border border-rose-700/50 flex items-center justify-center shrink-0" title="SELL">
                                    <svg class="w-3 h-3 text-rose-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 4.5l15 15m0 0V8.25m0 11.25H8.25"/>
                                    </svg>
                                </span>
                            </template>
                            <img :src="'/static/icons/' + (pair.coin_a_type === 'stock_us' ? 'stocks' : pair.coin_a_type === 'stock' ? 'stocks-idx' : 'coins') + '/' + pair.coin_a_symbol + '.png'"
                                 :data-symbol="pair.coin_a_symbol"
                                 onerror="__iconError(this)"
                                 class="w-7 h-7 rounded-full bg-gray-700 shrink-0">
                            <div class="min-w-0">
                                <p class="text-sm font-bold text-white truncate" x-text="pair.coin_a_symbol || '-'"></p>
                                <p class="text-[11px] text-gray-500 truncate" x-text="pair.coin_a_name || ''"></p>
                            </div>
                        </div>
                        <div class="space-y-1">
                            <p class="text-base font-semibold text-white font-mono" x-text="'$' + formatPrice(pair.coin_a_price)"></p>
                            <div class="flex items-center gap-3 text-xs">
                                <span :class="(pair.coin_a_change_24h || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'">
                                    <span class="text-gray-600">24h</span>
                                    <span x-text="formatPct(pair.coin_a_change_24h)"></span>
                                </span>
                                <span :class="(pair.coin_a_change_7d || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'">
                                    <span class="text-gray-600">7d</span>
                                    <span x-text="formatPct(pair.coin_a_change_7d)"></span>
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- ── Center Divider: Divergence + Score Bar ── -->
                    <div class="flex flex-col items-center justify-center px-3 py-2 border-l border-r border-gray-700/40 min-w-[120px]">
                        <!-- Divergence -->
                        <p class="text-[10px] uppercase tracking-wider text-gray-500 mb-1">Divergence</p>
                        <p class="text-2xl font-black font-mono"
                           :class="Math.abs(pair.divergence_pct || 0) >= 15 ? 'text-rose-400' : Math.abs(pair.divergence_pct || 0) >= 8 ? 'text-amber-400' : 'text-violet-400'"
                           x-text="pair.divergence_pct != null ? Math.abs(pair.divergence_pct).toFixed(1) + '%' : '-'"></p>

                        <!-- Score Bar -->
                        <div class="w-full mt-2 mb-1">
                            <div class="h-1.5 w-full bg-gray-700 rounded-full overflow-hidden">
                                <div class="h-full rounded-full transition-all duration-700"
                                     :class="pair.opportunity_score >= 80 ? 'bg-emerald-500' : pair.opportunity_score >= 60 ? 'bg-amber-500' : 'bg-gray-500'"
                                     :style="'width: ' + Math.min(pair.opportunity_score || 0, 100) + '%'"></div>
                            </div>
                        </div>

                        <!-- Arrows showing direction -->
                        <div class="flex items-center gap-1 mt-1">
                            <svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/>
                            </svg>
                            <span class="text-[9px] text-gray-500 uppercase">vs</span>
                            <svg class="w-4 h-4 text-rose-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
                            </svg>
                        </div>

                        <!-- Expected Convergence + Mean Reversion -->
                        <div class="text-center mt-2 space-y-0.5">
                            <template x-if="pair.expected_convergence_pct != null">
                                <p class="text-[10px]">
                                    <span class="text-gray-500">Convergence:</span>
                                    <span class="text-cyan-400 font-semibold" x-text="pair.expected_convergence_pct.toFixed(1) + '%'"></span>
                                </p>
                            </template>
                            <template x-if="pair.mean_reversion_probability != null">
                                <p class="text-[10px]">
                                    <span class="text-gray-500">Reversion:</span>
                                    <span class="font-semibold"
                                          :class="pair.mean_reversion_probability >= 0.7 ? 'text-emerald-400' : pair.mean_reversion_probability >= 0.5 ? 'text-amber-400' : 'text-gray-400'"
                                          x-text="(pair.mean_reversion_probability * 100).toFixed(0) + '%'"></span>
                                </p>
                            </template>
                        </div>
                    </div>

                    <!-- ── Coin B (Right) ── -->
                    <div class="pl-3 py-2">
                        <div class="flex items-center gap-2 mb-2 justify-end">
                            <div class="min-w-0 text-right">
                                <p class="text-sm font-bold text-white truncate" x-text="pair.coin_b_symbol || '-'"></p>
                                <p class="text-[11px] text-gray-500 truncate" x-text="pair.coin_b_name || ''"></p>
                            </div>
                            <img :src="'/static/icons/' + (pair.coin_b_type === 'stock_us' ? 'stocks' : pair.coin_b_type === 'stock' ? 'stocks-idx' : 'coins') + '/' + pair.coin_b_symbol + '.png'"
                                 :data-symbol="pair.coin_b_symbol"
                                 onerror="__iconError(this)"
                                 class="w-7 h-7 rounded-full bg-gray-700 shrink-0">
                            <!-- Buy/Sell Arrow for Coin B (opposite of A) -->
                            <template x-if="pair.action === 'LONG_LAGGARD' || pair.action === 'PAIRS_TRADE'">
                                <span class="w-5 h-5 rounded-full bg-rose-900/60 border border-rose-700/50 flex items-center justify-center shrink-0" title="SELL">
                                    <svg class="w-3 h-3 text-rose-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 4.5l15 15m0 0V8.25m0 11.25H8.25"/>
                                    </svg>
                                </span>
                            </template>
                            <template x-if="pair.action === 'SHORT_LEADER'">
                                <span class="w-5 h-5 rounded-full bg-emerald-900/60 border border-emerald-700/50 flex items-center justify-center shrink-0" title="BUY">
                                    <svg class="w-3 h-3 text-emerald-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"/>
                                    </svg>
                                </span>
                            </template>
                        </div>
                        <div class="space-y-1 text-right">
                            <p class="text-base font-semibold text-white font-mono" x-text="'$' + formatPrice(pair.coin_b_price)"></p>
                            <div class="flex items-center gap-3 justify-end text-xs">
                                <span :class="(pair.coin_b_change_24h || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'">
                                    <span class="text-gray-600">24h</span>
                                    <span x-text="formatPct(pair.coin_b_change_24h)"></span>
                                </span>
                                <span :class="(pair.coin_b_change_7d || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'">
                                    <span class="text-gray-600">7d</span>
                                    <span x-text="formatPct(pair.coin_b_change_7d)"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bottom Bar: Metrics Row -->
                <div class="flex flex-wrap items-center gap-x-4 gap-y-1 px-4 py-2 bg-gray-900/40 border-t border-gray-700/30 text-[11px]">
                    <template x-if="pair.correlation != null">
                        <span>
                            <span class="text-gray-500">Corr:</span>
                            <span class="text-white font-mono font-semibold" x-text="pair.correlation.toFixed(2)"></span>
                        </span>
                    </template>
                    <template x-if="pair.spread_zscore != null">
                        <span>
                            <span class="text-gray-500">Z-Score:</span>
                            <span class="font-mono font-semibold"
                                  :class="Math.abs(pair.spread_zscore) >= 2 ? 'text-rose-400' : Math.abs(pair.spread_zscore) >= 1.5 ? 'text-amber-400' : 'text-white'"
                                  x-text="pair.spread_zscore.toFixed(2)"></span>
                        </span>
                    </template>
                    <template x-if="pair.half_life_days != null">
                        <span>
                            <span class="text-gray-500">Half-Life:</span>
                            <span class="text-white font-mono" x-text="pair.half_life_days.toFixed(1) + 'd'"></span>
                        </span>
                    </template>
                    <template x-if="pair.cointegration_pvalue != null">
                        <span>
                            <span class="text-gray-500">Coint p:</span>
                            <span class="font-mono" :class="pair.cointegration_pvalue <= 0.05 ? 'text-emerald-400' : 'text-gray-400'"
                                  x-text="pair.cointegration_pvalue.toFixed(3)"></span>
                        </span>
                    </template>
                    <template x-if="pair.event_sensitivity != null">
                        <span>
                            <span class="text-gray-500">Event Sens:</span>
                            <span class="text-violet-400 font-mono font-semibold" x-text="pair.event_sensitivity.toFixed(0) + '%'"></span>
                        </span>
                    </template>
                </div>
            </div>
        </template>
    </div>
</div>

<!-- ═══════════════════════════════════════════════════════════ -->
<!-- ALPINE.JS COMPONENT                                        -->
<!-- ═══════════════════════════════════════════════════════════ -->
<script>
function eventArbitragePanel() {
    return {
        loading: true,
        data: {},
        pairs: [],
        events: [],
        summary: {},
        filters: {
            asset_type: '{{ asset_mode }}'
        },

        async fetchData() {
            this.loading = true;
            try {
                const params = new URLSearchParams({
                    asset_type: this.filters.asset_type
                });
                const resp = await fetch(`/api/v1/market/event-arbitrage?${params}`);
                if (!resp.ok) throw new Error('API error ' + resp.status);
                this.data = await resp.json();
                this.pairs = (this.data.pairs || []).sort((a, b) => (b.opportunity_score || 0) - (a.opportunity_score || 0));
                this.events = this.data.events || [];
                this.buildSummary();
            } catch (e) {
                console.error('Event arbitrage fetch error:', e);
                this.pairs = [];
                this.events = [];
                this.summary = {};
            }
            this.loading = false;
        },

        buildSummary() {
            if (this.data.summary) {
                this.summary = this.data.summary;
                return;
            }
            const total = this.pairs.length;
            const highScore = this.pairs.filter(p => (p.opportunity_score || 0) >= 70).length;
            const avgDiv = total > 0
                ? this.pairs.reduce((s, p) => s + Math.abs(p.divergence_pct || 0), 0) / total
                : null;
            this.summary = {
                total_opportunities: total,
                high_score_count: highScore,
                avg_divergence: avgDiv,
                active_events: this.events.length
            };
        },

        formatPrice(p) {
            if (p == null) return '-';
            p = parseFloat(p);
            if (p >= 1000) return p.toLocaleString('en-US', { maximumFractionDigits: 2 });
            if (p >= 1) return p.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 4 });
            if (p >= 0.01) return p.toFixed(4);
            return p.toFixed(8);
        },

        formatPct(v) {
            if (v == null) return '-';
            v = parseFloat(v);
            const sign = v >= 0 ? '+' : '';
            return sign + v.toFixed(2) + '%';
        }
    };
}
</script>
{% endblock %}