{% extends "base.html" %}
{% block title %}Gap Scanner{% endblock %}

{% block content %}
<div x-data="gapScannerApp()" x-init="init()" class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-white">Gap Scanner</h1>
            <p class="mt-1 text-sm text-gray-400">Deteksi price gaps dan probabilitas fill</p>
        </div>
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-500" x-text="lastRefresh ? 'Last refresh: ' + lastRefresh : ''"></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">
                Refresh
            </button>
        </div>
    </div>

    <!-- Loading State -->
    <div x-show="loading" class="flex items-center justify-center py-16">
        <div class="text-center">
            <svg class="w-8 h-8 animate-spin text-koin-400 mx-auto mb-3" 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>
            <p class="text-sm text-gray-400">Scanning for gaps...</p>
        </div>
    </div>

    <template x-if="!loading && data">
        <div class="space-y-6">
            <!-- Summary Cards -->
            <div class="grid grid-cols-2 md:grid-cols-5 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 Gaps Found</p>
                    <p class="text-2xl font-bold text-white mt-1" x-text="data.summary?.total_gaps || 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">Gap Ups</p>
                    <p class="text-2xl font-bold text-emerald-400 mt-1" x-text="data.summary?.gap_ups || 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">Gap Downs</p>
                    <p class="text-2xl font-bold text-red-400 mt-1" x-text="data.summary?.gap_downs || 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">Avg Fill Rate</p>
                    <p class="text-2xl font-bold text-koin-400 mt-1" x-text="fmt(data.summary?.avg_fill_rate) + '%'"></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">Open Gaps</p>
                    <p class="text-2xl font-bold text-amber-400 mt-1" x-text="data.summary?.open_gaps || 0"></p>
                    <p class="text-xs text-gray-600 mt-1">Unfilled</p>
                </div>
            </div>

            <!-- Statistics Panel -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-6">
                <h2 class="text-lg font-semibold text-white mb-4">Gap Fill Statistics</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                        <p class="text-xs text-gray-500 uppercase">Overall Fill Rate</p>
                        <p class="text-xl font-bold text-white mt-1" x-text="fmt(data.statistics?.overall_fill_rate) + '%'"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                        <p class="text-xs text-gray-500 uppercase">Avg Fill Time</p>
                        <p class="text-xl font-bold text-white mt-1" x-text="(data.statistics?.avg_fill_time || '-') + ' bars'"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                        <p class="text-xs text-gray-500 uppercase">Breakaway Fill</p>
                        <p class="text-xl font-bold text-blue-400 mt-1" x-text="fmt(data.statistics?.breakaway_fill_rate) + '%'"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                        <p class="text-xs text-gray-500 uppercase">Runaway Fill</p>
                        <p class="text-xl font-bold text-amber-400 mt-1" x-text="fmt(data.statistics?.runaway_fill_rate) + '%'"></p>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                    <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                        <p class="text-xs text-gray-500 uppercase">Exhaustion Fill</p>
                        <p class="text-xl font-bold text-purple-400 mt-1" x-text="fmt(data.statistics?.exhaustion_fill_rate) + '%'"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                        <p class="text-xs text-gray-500 uppercase">Avg Gap Size</p>
                        <p class="text-xl font-bold text-white mt-1" x-text="fmt(data.statistics?.avg_gap_size) + '%'"></p>
                    </div>
                </div>
            </div>

            <!-- All Gaps Table -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-6">
                <h2 class="text-lg font-semibold text-white mb-4">All Gaps</h2>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="text-xs text-gray-500 uppercase bg-gray-900/50">
                            <tr>
                                <th class="px-3 py-2 text-left">Symbol</th>
                                <th class="px-3 py-2 text-center">Direction</th>
                                <th class="px-3 py-2 text-right">Gap Size %</th>
                                <th class="px-3 py-2 text-center">Gap Type</th>
                                <th class="px-3 py-2 text-right">Gap Zone</th>
                                <th class="px-3 py-2 text-center">Filled?</th>
                                <th class="px-3 py-2 text-right">Fill Time</th>
                                <th class="px-3 py-2 text-right">Age</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-800">
                            <template x-for="gap in sortedGaps" :key="gap.symbol + '-' + gap.gap_zone">
                                <tr class="hover:bg-gray-800/50 transition">
                                    <td class="px-3 py-2.5 text-left">
                                        <span class="font-medium text-white" x-text="gap.symbol"></span>
                                    </td>
                                    <td class="px-3 py-2.5 text-center">
                                        <span class="text-xs px-2 py-0.5 rounded-full font-medium"
                                              :class="gap.direction === 'up' ? 'bg-emerald-900/50 text-emerald-400' : 'bg-red-900/50 text-red-400'"
                                              x-text="gap.direction === 'up' ? '&#8593; Up' : '&#8595; Down'"></span>
                                    </td>
                                    <td class="px-3 py-2.5 text-right font-mono"
                                        :class="(gap.gap_size || 0) > 5 ? 'text-amber-400' : 'text-gray-300'"
                                        x-text="fmt(gap.gap_size) + '%'"></td>
                                    <td class="px-3 py-2.5 text-center">
                                        <span class="text-xs px-2 py-0.5 rounded-full"
                                              :class="gapTypeBadge(gap.gap_type)"
                                              x-text="gap.gap_type || '-'"></span>
                                    </td>
                                    <td class="px-3 py-2.5 text-right text-xs text-gray-400 font-mono" x-text="gapZoneStr(gap)"></td>
                                    <td class="px-3 py-2.5 text-center">
                                        <span x-show="gap.filled" class="text-emerald-400 font-medium">&#10003;</span>
                                        <span x-show="!gap.filled" class="text-red-400 font-medium">&#10007;</span>
                                    </td>
                                    <td class="px-3 py-2.5 text-right font-mono text-gray-400" x-text="gap.fill_time ? gap.fill_time + ' bars' : '-'"></td>
                                    <td class="px-3 py-2.5 text-right font-mono text-gray-400" x-text="gap.age ? gap.age + 'd' : '-'"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
                <p x-show="!data.gaps || data.gaps.length === 0" class="text-sm text-gray-500 text-center py-8">No gaps detected.</p>
            </div>

            <!-- Open Gaps (Unfilled) -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-6" x-show="openGaps.length > 0">
                <div class="flex items-center gap-2 mb-4">
                    <h2 class="text-lg font-semibold text-white">Open Gaps (Unfilled)</h2>
                    <span class="text-xs px-2 py-0.5 rounded-full bg-amber-900/50 text-amber-400" x-text="openGaps.length + ' gaps'"></span>
                </div>
                <p class="text-sm text-gray-400 mb-4">Gaps yang belum terisi. Harga cenderung kembali ke gap zone ini.</p>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="text-xs text-gray-500 uppercase bg-gray-900/50">
                            <tr>
                                <th class="px-3 py-2 text-left">Symbol</th>
                                <th class="px-3 py-2 text-center">Direction</th>
                                <th class="px-3 py-2 text-right">Gap Size %</th>
                                <th class="px-3 py-2 text-center">Gap Type</th>
                                <th class="px-3 py-2 text-right">Fill Level</th>
                                <th class="px-3 py-2 text-right">Distance to Fill</th>
                                <th class="px-3 py-2 text-right">Age</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-800">
                            <template x-for="gap in openGaps" :key="gap.symbol + '-open-' + gap.gap_zone">
                                <tr class="hover:bg-gray-800/50 transition">
                                    <td class="px-3 py-2.5 text-left font-medium text-white" x-text="gap.symbol"></td>
                                    <td class="px-3 py-2.5 text-center">
                                        <span class="text-xs px-2 py-0.5 rounded-full font-medium"
                                              :class="gap.direction === 'up' ? 'bg-emerald-900/50 text-emerald-400' : 'bg-red-900/50 text-red-400'"
                                              x-text="gap.direction === 'up' ? '&#8593; Up' : '&#8595; Down'"></span>
                                    </td>
                                    <td class="px-3 py-2.5 text-right font-mono text-gray-300" x-text="fmt(gap.gap_size) + '%'"></td>
                                    <td class="px-3 py-2.5 text-center">
                                        <span class="text-xs px-2 py-0.5 rounded-full"
                                              :class="gapTypeBadge(gap.gap_type)"
                                              x-text="gap.gap_type || '-'"></span>
                                    </td>
                                    <td class="px-3 py-2.5 text-right font-mono text-koin-400" x-text="'$' + fmtPrice(gap.fill_level)"></td>
                                    <td class="px-3 py-2.5 text-right font-mono"
                                        :class="(gap.distance_to_fill || 0) > 0 ? 'text-emerald-400' : 'text-red-400'"
                                        x-text="fmt(gap.distance_to_fill) + '%'"></td>
                                    <td class="px-3 py-2.5 text-right font-mono text-gray-400" x-text="gap.age ? gap.age + 'd' : '-'"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </template>

    <!-- Error State -->
    <div x-show="!loading && error" class="bg-red-900/20 border border-red-800 rounded-xl p-6 text-center">
        <p class="text-sm text-red-400" x-text="error"></p>
        <button @click="fetchData()" class="mt-3 px-4 py-1.5 text-xs bg-red-800 hover:bg-red-700 text-red-200 rounded-lg transition">Retry</button>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function gapScannerApp() {
    return {
        asset_type: '{{ asset_mode }}',
        loading: false,
        data: null,
        error: null,
        lastRefresh: null,

        init() {
            this.fetchData();
        },

        async fetchData() {
            this.loading = true;
            this.error = null;
            try {
                const resp = await fetch(`/api/v1/market/gap-scanner?asset_type=${this.asset_type}`);
                if (resp.redirected) { window.location.href = '/auth/login'; return; }
                const json = await resp.json();
                if (json.error) {
                    this.error = json.error;
                } else {
                    this.data = json;
                }
                this.lastRefresh = new Date().toLocaleTimeString('id-ID');
            } catch (e) {
                this.error = 'Failed to fetch gap data: ' + e.message;
            }
            this.loading = false;
        },

        get sortedGaps() {
            if (!this.data?.gaps) return [];
            return [...this.data.gaps].sort((a, b) => Math.abs(b.gap_size || 0) - Math.abs(a.gap_size || 0));
        },

        get openGaps() {
            if (!this.data?.gaps) return [];
            return this.data.gaps.filter(g => !g.filled);
        },

        fmt(v) {
            if (v == null) return '-';
            return Number(v).toFixed(2);
        },

        fmtPrice(v) {
            if (v == null) return '-';
            const n = Number(v);
            if (n >= 1) return n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            return n.toLocaleString('en-US', { minimumFractionDigits: 4, maximumFractionDigits: 6 });
        },

        gapZoneStr(gap) {
            if (!gap.gap_high && !gap.gap_low) return '-';
            return '$' + this.fmtPrice(gap.gap_low) + ' - $' + this.fmtPrice(gap.gap_high);
        },

        gapTypeBadge(type) {
            const t = (type || '').toLowerCase();
            if (t === 'breakaway') return 'bg-blue-900/50 text-blue-400';
            if (t === 'runaway') return 'bg-amber-900/50 text-amber-400';
            if (t === 'exhaustion') return 'bg-purple-900/50 text-purple-400';
            return 'bg-gray-800 text-gray-500';
        },
    };
}
</script>
{% endblock %}