{% extends "base.html" %}
{% block content %}
<div x-data="entryPanel()" class="space-y-5">

    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold text-white flex items-center gap-2">
                <svg class="w-6 h-6 text-koin-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                Smart Entry Timing
            </h1>
            <p class="text-sm text-gray-400 mt-1">Find optimal entry windows — pullback opportunities after buy signals</p>
        </div>
        <button @click="fetchData()" class="px-4 py-2 bg-koin-600 hover:bg-koin-500 text-white rounded-lg text-sm font-medium transition">🔄 Refresh</button>
    </div>

    <!-- Stats -->
    <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="data.total || 0">0</p>
            <p class="text-xs text-gray-400 mt-1">Active Signals</p>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-green-400" x-text="data.optimal_count || 0">0</p>
            <p class="text-xs text-gray-400 mt-1">Optimal Entry Now</p>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-yellow-400" x-text="waitingCount">0</p>
            <p class="text-xs text-gray-400 mt-1">Waiting for Pullback</p>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-red-400" x-text="weakCount">0</p>
            <p class="text-xs text-gray-400 mt-1">Signal Weakening</p>
        </div>
    </div>

    <div x-show="loading" class="text-center py-12"><div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-koin-400"></div></div>

    <!-- Opportunities -->
    <div x-show="!loading" class="space-y-3">
        <template x-for="item in items" :key="item.asset_id">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-4" :class="item.status === 'optimal_entry' ? 'ring-1 ring-green-500/50' : ''">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center gap-2">
                        <span class="text-white font-bold text-sm" x-text="item.coin_symbol"></span>
                        <span class="px-2 py-0.5 rounded text-xs font-medium"
                              :class="{
                                  'bg-green-900/50 text-green-300': item.status === 'optimal_entry',
                                  'bg-yellow-900/50 text-yellow-300': item.status === 'waiting' || item.status === 'minor_pullback',
                                  'bg-red-900/50 text-red-300': item.status === 'signal_weakening',
                                  'bg-orange-900/50 text-orange-300': item.status === 'running_away'
                              }" x-text="item.status.replace('_', ' ')"></span>
                        <span class="text-xs px-2 py-0.5 bg-blue-900/40 text-blue-300 rounded" x-text="item.regime"></span>
                    </div>
                    <div class="text-right">
                        <p class="text-xs text-gray-400">Quality Score</p>
                        <p class="text-lg font-bold" :class="item.entry_quality >= 70 ? 'text-green-400' : item.entry_quality >= 50 ? 'text-yellow-400' : 'text-red-400'" x-text="item.entry_quality"></p>
                    </div>
                </div>

                <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs">
                    <div class="bg-gray-900/50 rounded-lg p-2">
                        <p class="text-gray-500">Signal Price</p>
                        <p class="text-white font-mono" x-text="formatPrice(item.signal_price)"></p>
                    </div>
                    <div class="bg-gray-900/50 rounded-lg p-2">
                        <p class="text-gray-500">Current Price</p>
                        <p class="font-mono" :class="item.price_change_pct < 0 ? 'text-green-400' : 'text-red-400'" x-text="formatPrice(item.current_price)"></p>
                    </div>
                    <div class="bg-gray-900/50 rounded-lg p-2">
                        <p class="text-gray-500">Ideal Entry</p>
                        <p class="text-green-400 font-mono" x-text="formatPrice(item.ideal_entry_price)"></p>
                    </div>
                    <div class="bg-gray-900/50 rounded-lg p-2">
                        <p class="text-gray-500">Pullback</p>
                        <p class="font-mono" :class="item.pullback_depth_pct > 0 ? 'text-green-400' : 'text-gray-400'" x-text="item.pullback_depth_pct + '%'"></p>
                    </div>
                </div>

                <div class="mt-2 flex items-center justify-between text-xs text-gray-500">
                    <span x-text="item.hours_since_signal.toFixed(0) + 'h ago'"></span>
                    <span x-text="item.window_remaining_hrs.toFixed(0) + 'h window left'"></span>
                    <span x-show="item.potential_savings_pct > 0" class="text-green-400" x-text="'💰 Save ' + item.potential_savings_pct + '% vs signal entry'"></span>
                </div>
            </div>
        </template>
        <p x-show="items.length === 0" class="text-center py-12 text-gray-500">No active buy signals found</p>
    </div>
</div>

<script>
function entryPanel() {
    return {
        data: {}, items: [], loading: true,
        waitingCount: 0, weakCount: 0,

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

        async fetchData() {
            this.loading = true;
            try {
                const r = await fetch(`/api/v1/market/entry/opportunities?asset_type={{ asset_mode }}`);
                this.data = await r.json();
                this.items = this.data.opportunities || [];
                this.waitingCount = this.items.filter(i => i.status === 'waiting' || i.status === 'minor_pullback').length;
                this.weakCount = this.items.filter(i => i.status === 'signal_weakening').length;
            } catch(e) { console.error(e); }
            this.loading = false;
        },

        formatPrice(p) {
            if (!p) return '-';
            return p >= 1 ? parseFloat(p).toLocaleString('id-ID', {maximumFractionDigits: 2}) : parseFloat(p).toFixed(8);
        }
    }
}
</script>
{% endblock %}