{% extends "base.html" %}
{% block title %}Mean Reversion Scanner{% endblock %}
{% block content %}
<div x-data="meanReversion()" x-init="init()" class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white flex items-center gap-3">
                <div class="p-2 bg-koin-600/20 rounded-xl">
                    <svg class="w-6 h-6 text-koin-400" fill="none" stroke="currentColor" stroke-width="2" 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>
                </div>
                Mean Reversion Scanner
            </h1>
            <p class="text-gray-400 text-sm mt-1">Identify statistical extremes and mean-reverting assets using Z-Score, Bollinger Bands, and Hurst exponent</p>
        </div>
        <div class="flex items-center gap-2">
            <!-- Extreme only toggle -->
            <label class="flex items-center gap-2 cursor-pointer text-xs text-gray-400">
                <div class="relative">
                    <input type="checkbox" x-model="showExtremeOnly" @change="filterData()" class="sr-only peer">
                    <div class="w-8 h-4 bg-gray-700 peer-checked:bg-koin-600 rounded-full transition"></div>
                    <div class="absolute left-0.5 top-0.5 w-3 h-3 bg-gray-400 peer-checked:bg-white rounded-full transition peer-checked:translate-x-4"></div>
                </div>
                <span>|Z| > 1.5 only</span>
            </label>
            <!-- Min MR Score slider -->
            <div class="flex items-center gap-2 text-xs text-gray-500">
                <span>Min MR:</span>
                <input type="range" min="0" max="100" step="5" x-model.number="minMRScore" @input="filterData()"
                       class="w-20 h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-koin-500">
                <span class="text-koin-400 font-mono w-6" x-text="minMRScore"></span>
            </div>
            <button @click="loadData()" class="px-4 py-2 bg-koin-600 hover:bg-koin-500 text-white text-sm font-medium rounded-lg transition flex items-center gap-2">
                <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="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182"/></svg>
                <span x-show="!loading">Scan</span>
                <span x-show="loading">Scanning...</span>
            </button>
        </div>
    </div>

    <!-- Loading -->
    <template x-if="loading">
        <div class="flex items-center justify-center py-20">
            <div class="flex items-center gap-3 text-gray-400">
                <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/></svg>
                <span>Scanning for mean reversion opportunities...</span>
            </div>
        </div>
    </template>

    <!-- Content -->
    <template x-if="!loading && data">
        <div class="space-y-6">
            <!-- Summary Cards -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
                    <div class="text-xs text-gray-500 uppercase tracking-wider">Extreme Deviations</div>
                    <div class="text-xl font-bold text-red-400 mt-1" x-text="data.extreme_count || 0"></div>
                </div>
                <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
                    <div class="text-xs text-gray-500 uppercase tracking-wider">Avg Z-Score</div>
                    <div class="text-xl font-bold mt-1"
                         :class="Math.abs(data.avg_zscore || 0) > 1 ? 'text-red-400' : 'text-white'"
                         x-text="(data.avg_zscore || 0).toFixed(2)"></div>
                </div>
                <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
                    <div class="text-xs text-gray-500 uppercase tracking-wider">Mean-Reverting (H&lt;0.5)</div>
                    <div class="text-xl font-bold text-emerald-400 mt-1" x-text="data.mean_reverting_count || 0"></div>
                </div>
                <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
                    <div class="text-xs text-gray-500 uppercase tracking-wider">Strong Signals</div>
                    <div class="text-xl font-bold text-koin-400 mt-1" x-text="data.strong_signals || 0"></div>
                </div>
            </div>

            <!-- Main Table -->
            <div class="bg-gray-800 border border-gray-700 rounded-xl overflow-hidden">
                <div class="px-4 py-3 border-b border-gray-700 flex items-center justify-between">
                    <h3 class="text-sm font-semibold text-white">Mean Reversion Candidates</h3>
                    <span class="text-xs text-gray-500" x-text="filteredItems.length + ' assets shown'"></span>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-900/50 text-gray-400 text-xs uppercase">
                            <tr>
                                <th class="px-4 py-3 text-left">Symbol</th>
                                <th class="px-4 py-3 text-left">Name</th>
                                <th class="px-4 py-3 text-center">Z-Score</th>
                                <th class="px-4 py-3 text-left">BB %B</th>
                                <th class="px-4 py-3 text-right">BB Width</th>
                                <th class="px-4 py-3 text-right">Hurst</th>
                                <th class="px-4 py-3 text-right">Half-Life</th>
                                <th class="px-4 py-3 text-left">MR Score</th>
                                <th class="px-4 py-3 text-center">Signal</th>
                                <th class="px-4 py-3 text-right">Exp. Reversion</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-700/50">
                            <template x-for="item in filteredItems" :key="item.symbol">
                                <tr class="hover:bg-gray-700/30 transition">
                                    <td class="px-4 py-3">
                                        <span class="text-white font-medium" x-text="item.symbol"></span>
                                    </td>
                                    <td class="px-4 py-3 text-gray-400 text-xs" x-text="item.name"></td>
                                    <!-- Z-Score with visual meter -->
                                    <td class="px-4 py-3">
                                        <div class="flex flex-col items-center gap-1">
                                            <span class="text-xs font-mono font-bold"
                                                  :class="Math.abs(item.z_score) > 2 ? 'text-red-400' : Math.abs(item.z_score) > 1 ? 'text-yellow-400' : 'text-gray-400'"
                                                  x-text="(item.z_score >= 0 ? '+' : '') + item.z_score.toFixed(2)"></span>
                                            <!-- Z-Score meter: -3 to +3 range -->
                                            <div class="w-20 h-1.5 bg-gray-700 rounded-full relative overflow-hidden">
                                                <!-- Center marker -->
                                                <div class="absolute top-0 left-1/2 w-px h-full bg-gray-500 z-10"></div>
                                                <!-- Position indicator -->
                                                <div class="absolute top-0 h-full w-1.5 rounded-full z-20"
                                                     :class="item.z_score > 2 ? 'bg-red-400' : item.z_score > 1 ? 'bg-yellow-400' : item.z_score < -2 ? 'bg-red-400' : item.z_score < -1 ? 'bg-yellow-400' : 'bg-gray-400'"
                                                     :style="'left: ' + Math.max(0, Math.min(100, ((item.z_score + 3) / 6) * 100)) + '%'"></div>
                                            </div>
                                        </div>
                                    </td>
                                    <!-- BB %B with mini bar -->
                                    <td class="px-4 py-3">
                                        <div class="flex items-center gap-2">
                                            <div class="w-10 h-1.5 bg-gray-700 rounded-full overflow-hidden">
                                                <div class="h-full rounded-full"
                                                     :class="item.bb_pct_b > 0.8 ? 'bg-red-500' : item.bb_pct_b < 0.2 ? 'bg-emerald-500' : 'bg-gray-500'"
                                                     :style="'width: ' + Math.max(0, Math.min(100, (item.bb_pct_b || 0) * 100)) + '%'"></div>
                                            </div>
                                            <span class="text-xs font-mono text-gray-400" x-text="(item.bb_pct_b || 0).toFixed(2)"></span>
                                        </div>
                                    </td>
                                    <!-- BB Bandwidth -->
                                    <td class="px-4 py-3 text-right font-mono text-xs text-gray-400" x-text="(item.bb_bandwidth || 0).toFixed(2) + '%'"></td>
                                    <!-- Hurst -->
                                    <td class="px-4 py-3 text-right">
                                        <span class="font-mono text-xs"
                                              :class="item.hurst < 0.5 ? 'text-emerald-400' : 'text-red-400'"
                                              x-text="(item.hurst || 0).toFixed(3)"></span>
                                    </td>
                                    <!-- Half-Life -->
                                    <td class="px-4 py-3 text-right font-mono text-xs text-gray-400" x-text="(item.half_life || 0).toFixed(1) + 'd'"></td>
                                    <!-- MR Score bar -->
                                    <td class="px-4 py-3">
                                        <div class="flex items-center gap-2">
                                            <div class="flex-1 h-2 bg-gray-700 rounded-full overflow-hidden max-w-[60px]">
                                                <div class="h-full rounded-full transition-all"
                                                     :class="item.mr_score >= 70 ? 'bg-emerald-500' : item.mr_score >= 40 ? 'bg-yellow-500' : 'bg-red-500'"
                                                     :style="'width: ' + Math.min(item.mr_score || 0, 100) + '%'"></div>
                                            </div>
                                            <span class="text-xs font-mono w-6"
                                                  :class="item.mr_score >= 70 ? 'text-emerald-400' : item.mr_score >= 40 ? 'text-yellow-400' : 'text-red-400'"
                                                  x-text="(item.mr_score || 0).toFixed(0)"></span>
                                        </div>
                                    </td>
                                    <!-- Signal Badge -->
                                    <td class="px-4 py-3 text-center">
                                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full"
                                              :class="getSignalClass(item.signal)"
                                              x-text="item.signal"></span>
                                    </td>
                                    <!-- Expected Reversion Price -->
                                    <td class="px-4 py-3 text-right">
                                        <span class="font-mono text-xs text-koin-400" x-text="'$' + (item.expected_reversion || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></span>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
                <template x-if="filteredItems.length === 0">
                    <div class="px-4 py-8 text-center text-gray-500 text-sm">No assets match the current filter criteria.</div>
                </template>
            </div>
        </div>
    </template>
</div>
{% endblock %}

{% block scripts %}
<script>
function meanReversion() {
    return {
        loading: true,
        data: null,
        filteredItems: [],
        showExtremeOnly: false,
        minMRScore: 0,
        asset_type: '{{ asset_mode }}',

        async init() {
            await this.loadData();
        },

        async loadData() {
            this.loading = true;
            try {
                const resp = await fetch(`/api/v1/market/mean-reversion?asset_type=${this.asset_type}`);
                if (resp.redirected) { window.location.href = '/auth/login'; return; }
                this.data = await resp.json();
                this.filterData();
            } catch(e) { console.error('meanReversion loadData error:', e); }
            this.loading = false;
        },

        filterData() {
            if (!this.data || !this.data.items) { this.filteredItems = []; return; }
            this.filteredItems = this.data.items
                .filter(item => {
                    if (this.showExtremeOnly && Math.abs(item.z_score) <= 1.5) return false;
                    if ((item.mr_score || 0) < this.minMRScore) return false;
                    return true;
                })
                .sort((a, b) => (b.mr_score || 0) - (a.mr_score || 0));
        },

        getSignalClass(signal) {
            const map = {
                'Strong Buy': 'bg-emerald-500/30 text-emerald-300 border border-emerald-500/50',
                'Buy': 'bg-emerald-900/50 text-emerald-400',
                'Neutral': 'bg-gray-700 text-gray-400',
                'Sell': 'bg-red-900/50 text-red-400',
                'Strong Sell': 'bg-red-500/30 text-red-300 border border-red-500/50'
            };
            return map[signal] || 'bg-gray-700 text-gray-400';
        }
    }
}
</script>
{% endblock %}