{% extends "base.html" %}
{% block title %}Breakout Predictor — Admin{% endblock %}

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

    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-white">Breakout Predictor</h1>
            <p class="mt-1 text-sm text-gray-400">Prediksi probabilitas breakout dari range konsolidasi</p>
        </div>
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-500" x-text="'Total: ' + total"></span>
            <button @click="fetchData()" :disabled="loading"
                    class="px-3 py-1.5 text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg transition disabled:opacity-50">
                <span x-show="!loading">Refresh</span>
                <span x-show="loading" class="flex items-center gap-1">
                    <svg class="animate-spin h-3 w-3" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    Loading...
                </span>
            </button>
            <a href="{{ tools_base }}/" class="text-xs text-gray-500 hover:text-gray-300 transition">&larr; Dashboard</a>
        </div>
    </div>

    <!-- Stat 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">Avg Probability</p>
            <p class="text-2xl font-bold text-cyan-400 mt-1" x-text="stats.avg_probability + '%'">0%</p>
        </div>
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Bullish Breakout</p>
            <p class="text-2xl font-bold text-emerald-400 mt-1" x-text="stats.bullish_breakout_count">0</p>
        </div>
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Bearish Breakdown</p>
            <p class="text-2xl font-bold text-red-400 mt-1" x-text="stats.bearish_breakdown_count">0</p>
        </div>
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Squeeze</p>
            <p class="text-2xl font-bold text-amber-400 mt-1" x-text="stats.squeeze_count">0</p>
        </div>
    </div>

    <!-- Filters -->
    <div class="flex flex-wrap items-center gap-3">
        <div class="flex items-center gap-2">
            <span class="text-xs text-gray-400">Direction:</span>
            <select x-model="directionFilter" @change="fetchData()"
                    class="bg-gray-800 border border-gray-700 text-gray-300 text-xs rounded-lg px-3 py-1.5 focus:ring-cyan-500 focus:border-cyan-500">
                <option value="all">All</option>
                <option value="bullish_breakout">Bullish Breakout</option>
                <option value="bearish_breakdown">Bearish Breakdown</option>
                <option value="squeeze">Squeeze</option>
                <option value="neutral">Neutral</option>
            </select>
        </div>
        <div class="flex items-center gap-2">
            <span class="text-xs text-gray-400">Sort:</span>
            <select x-model="sortBy" @change="fetchData()"
                    class="bg-gray-800 border border-gray-700 text-gray-300 text-xs rounded-lg px-3 py-1.5 focus:ring-cyan-500 focus:border-cyan-500">
                <option value="probability_desc">Probability (High)</option>
                <option value="probability_asc">Probability (Low)</option>
                <option value="name_asc">Name (A-Z)</option>
            </select>
        </div>
        <div class="flex items-center gap-2">
            <span class="text-xs text-gray-400">Asset:</span>
            <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-cyan-500 focus:border-cyan-500">
                <option value="crypto">Crypto</option>
                <option value="stock">Stock IDX</option>
                <option value="stock_us">Stock US</option>
                <option value="all">All</option>
            </select>
        </div>
    </div>

    <!-- Loading -->
    <div x-show="loading" class="flex items-center justify-center py-12">
        <svg class="animate-spin h-8 w-8 text-cyan-500" 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 12h4z"/>
        </svg>
    </div>

    <!-- Cards Grid -->
    <div x-show="!loading && items.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <template x-for="item in items" :key="item.asset_id">
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-5 hover:border-gray-700 transition">
                <!-- Header: Symbol + Direction Badge -->
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center gap-2.5">
                        <img :src="item.icon_thumb_url || '/static/icons/default-coin.png'"
                             class="w-8 h-8 rounded-full bg-gray-800" :alt="item.symbol"
                             onerror="this.src='/static/icons/default-coin.png'">
                        <div>
                            <p class="text-sm font-semibold text-white" x-text="item.symbol"></p>
                            <p class="text-[11px] text-gray-500 truncate max-w-[120px]" x-text="item.name"></p>
                        </div>
                    </div>
                    <span class="px-2 py-0.5 text-[10px] font-bold rounded-full uppercase"
                          :class="{
                              'bg-emerald-900/50 text-emerald-400 border border-emerald-700/50': item.direction === 'BULLISH_BREAKOUT',
                              'bg-red-900/50 text-red-400 border border-red-700/50': item.direction === 'BEARISH_BREAKDOWN',
                              'bg-amber-900/50 text-amber-400 border border-amber-700/50': item.direction === 'SQUEEZE',
                              'bg-gray-800 text-gray-400 border border-gray-700': item.direction === 'NEUTRAL',
                          }"
                          x-text="item.direction.replace('_', ' ')"></span>
                </div>

                <!-- Breakout Probability (big number) -->
                <div class="text-center mb-4">
                    <p class="text-4xl font-black"
                       :class="{
                           'text-cyan-400': item.breakout_probability >= 70,
                           'text-cyan-300': item.breakout_probability >= 50 && item.breakout_probability < 70,
                           'text-gray-400': item.breakout_probability < 50,
                       }"
                       x-text="item.breakout_probability + '%'"></p>
                    <p class="text-[10px] text-gray-500 uppercase tracking-wider mt-0.5">Breakout Probability</p>
                </div>

                <!-- Distance to Resistance Bar -->
                <div class="mb-2">
                    <div class="flex items-center justify-between text-[10px] mb-1">
                        <span class="text-gray-500">Distance to Resistance</span>
                        <span class="text-cyan-400 font-medium"
                              x-text="item.distance_to_resistance_pct != null ? item.distance_to_resistance_pct + '%' : '-'"></span>
                    </div>
                    <div class="w-full h-1.5 bg-gray-800 rounded-full overflow-hidden">
                        <div class="h-full bg-cyan-600 rounded-full transition-all"
                             :style="'width:' + Math.min(100, Math.max(0, 100 - (item.distance_to_resistance_pct || 50))) + '%'"></div>
                    </div>
                </div>

                <!-- Distance to Support Bar -->
                <div class="mb-3">
                    <div class="flex items-center justify-between text-[10px] mb-1">
                        <span class="text-gray-500">Distance to Support</span>
                        <span class="text-emerald-400 font-medium"
                              x-text="item.distance_to_support_pct != null ? item.distance_to_support_pct + '%' : '-'"></span>
                    </div>
                    <div class="w-full h-1.5 bg-gray-800 rounded-full overflow-hidden">
                        <div class="h-full bg-emerald-600 rounded-full transition-all"
                             :style="'width:' + Math.min(100, Math.max(0, 100 - (item.distance_to_support_pct || 50))) + '%'"></div>
                    </div>
                </div>

                <!-- Volume Indicator -->
                <div class="flex items-center justify-between text-[11px] mb-2">
                    <span class="text-gray-500">Volume</span>
                    <span class="px-1.5 py-0.5 rounded text-[10px] font-medium"
                          :class="{
                              'bg-cyan-900/50 text-cyan-400': item.volume_indicator === 'HIGH',
                              'bg-sky-900/50 text-sky-400': item.volume_indicator === 'MEDIUM',
                              'bg-gray-800 text-gray-400': item.volume_indicator === 'MODERATE' || item.volume_indicator === 'LOW',
                          }"
                          x-text="item.volume_indicator"></span>
                </div>

                <!-- Component Breakdown -->
                <div class="border-t border-gray-800 pt-2 mt-2 grid grid-cols-2 gap-x-4 gap-y-1 text-[10px]">
                    <div class="flex justify-between">
                        <span class="text-gray-500">Tightness</span>
                        <span class="text-gray-300" x-text="item.components?.range_tightness + '/25'"></span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Volume</span>
                        <span class="text-gray-300" x-text="item.components?.volume_surge + '/25'"></span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Proximity</span>
                        <span class="text-gray-300" x-text="item.components?.price_proximity + '/25'"></span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Trend</span>
                        <span class="text-gray-300" x-text="item.components?.trend_alignment + '/25'"></span>
                    </div>
                </div>

                <!-- Meta row -->
                <div class="border-t border-gray-800 pt-2 mt-2 flex items-center justify-between text-[10px] text-gray-500">
                    <span x-text="'RSI ' + (item.rsi_latest != null ? item.rsi_latest.toFixed(0) : '-')"></span>
                    <span x-text="item.regime || '-'"></span>
                    <span x-text="'Rp ' + (item.current_price_idr || 0).toLocaleString('id-ID')"></span>
                </div>
            </div>
        </template>
    </div>

    <!-- Empty State -->
    <div x-show="!loading && items.length === 0" class="text-center py-16">
        <p class="text-gray-500 text-sm">No breakout candidates found.</p>
    </div>

    <!-- Pagination -->
    <div x-show="!loading && total > 0" class="flex items-center justify-between">
        <p class="text-xs text-gray-500" x-text="'Showing ' + items.length + ' of ' + total"></p>
        <div class="flex items-center gap-2">
            <button @click="prevPage()" :disabled="page <= 1"
                    class="px-3 py-1.5 text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg transition disabled:opacity-30">
                Prev
            </button>
            <span class="text-xs text-gray-400" x-text="'Page ' + page"></span>
            <button @click="nextPage()" :disabled="!hasMore"
                    class="px-3 py-1.5 text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg transition disabled:opacity-30">
                Next
            </button>
        </div>
    </div>

</div>
{% endblock %}

{% block scripts %}
<script>
function breakoutPredictorPanel() {
    return {
        items: [],
        total: 0,
        page: 1,
        hasMore: false,
        loading: false,
        directionFilter: 'all',
        sortBy: 'probability_desc',
        assetType: 'crypto',
        stats: {
            avg_probability: 0,
            bullish_breakout_count: 0,
            bearish_breakdown_count: 0,
            squeeze_count: 0,
            neutral_count: 0,
            high_probability_count: 0,
        },

        async fetchData() {
            this.loading = true;
            try {
                const params = new URLSearchParams({
                    direction: this.directionFilter,
                    sort: this.sortBy,
                    asset_type: this.assetType,
                    page: this.page,
                    limit: 30,
                });
                const resp = await fetch(`/api/v1/market/screener/breakout-predictor?${params}`);
                if (!resp.ok) throw new Error('API error');
                const data = await resp.json();
                this.items = data.items || [];
                this.total = data.total || 0;
                this.hasMore = data.has_more || false;
                if (data.stats) this.stats = data.stats;
            } catch (e) {
                console.error('Breakout predictor fetch error:', e);
                this.items = [];
            } finally {
                this.loading = false;
            }
        },

        nextPage() {
            if (this.hasMore) {
                this.page++;
                this.fetchData();
            }
        },
        prevPage() {
            if (this.page > 1) {
                this.page--;
                this.fetchData();
            }
        },
    };
}
</script>
{% endblock %}