{% extends "base.html" %}
{% block title %}Support & Resistance Map — Admin{% endblock %}

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

    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-white">Support &amp; Resistance Map</h1>
            <p class="mt-1 text-sm text-gray-400">Peta level support/resistance terdekat dan skor proximity</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">At Support</p>
            <p class="text-2xl font-bold text-emerald-400 mt-1" x-text="stats.at_support_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">At Resistance</p>
            <p class="text-2xl font-bold text-red-400 mt-1" x-text="stats.at_resistance_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">Tight Range</p>
            <p class="text-2xl font-bold text-amber-400 mt-1" x-text="stats.tight_range_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">Avg Range Width</p>
            <p class="text-2xl font-bold text-cyan-400 mt-1" x-text="stats.avg_range_width + '%'">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">Zone:</span>
            <select x-model="zoneFilter" @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 Zones</option>
                <option value="at_support">At Support</option>
                <option value="near_support">Near Support</option>
                <option value="mid_range">Mid Range</option>
                <option value="near_resistance">Near Resistance</option>
                <option value="at_resistance">At Resistance</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="proximity_desc">Proximity (High)</option>
                <option value="proximity_asc">Proximity (Low)</option>
                <option value="range_width_asc">Range Width (Tight)</option>
                <option value="range_width_desc">Range Width (Wide)</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 + Zone 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.zone === 'AT_SUPPORT',
                              'bg-green-900/40 text-green-400 border border-green-700/50': item.zone === 'NEAR_SUPPORT',
                              'bg-gray-800 text-gray-400 border border-gray-700': item.zone === 'MID_RANGE',
                              'bg-orange-900/40 text-orange-400 border border-orange-700/50': item.zone === 'NEAR_RESISTANCE',
                              'bg-red-900/50 text-red-400 border border-red-700/50': item.zone === 'AT_RESISTANCE',
                          }"
                          x-text="item.zone.replace(/_/g, ' ')"></span>
                </div>

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

                <!-- Support / Resistance Price Levels -->
                <div class="grid grid-cols-2 gap-3 mb-3">
                    <div class="bg-gray-800/50 rounded-lg p-2 text-center">
                        <p class="text-[10px] text-emerald-400 uppercase tracking-wider">Support</p>
                        <p class="text-xs font-semibold text-white mt-0.5"
                           x-text="item.nearest_support_idr ? 'Rp ' + item.nearest_support_idr.toLocaleString('id-ID') : '-'"></p>
                        <p class="text-[10px] text-gray-500 mt-0.5"
                           x-text="item.distance_to_support_pct != null ? item.distance_to_support_pct + '% away' : ''"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-2 text-center">
                        <p class="text-[10px] text-red-400 uppercase tracking-wider">Resistance</p>
                        <p class="text-xs font-semibold text-white mt-0.5"
                           x-text="item.nearest_resistance_idr ? 'Rp ' + item.nearest_resistance_idr.toLocaleString('id-ID') : '-'"></p>
                        <p class="text-[10px] text-gray-500 mt-0.5"
                           x-text="item.distance_to_resistance_pct != null ? item.distance_to_resistance_pct + '% away' : ''"></p>
                    </div>
                </div>

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

                <!-- Range Position Indicator -->
                <div x-show="item.range_position_pct != null" class="mb-3">
                    <div class="flex items-center justify-between text-[10px] mb-1">
                        <span class="text-emerald-500">S</span>
                        <span class="text-gray-500">Range Position</span>
                        <span class="text-red-500">R</span>
                    </div>
                    <div class="w-full h-2 bg-gray-800 rounded-full overflow-hidden relative">
                        <div class="absolute h-full bg-gradient-to-r from-emerald-800 via-gray-700 to-red-800 w-full rounded-full opacity-30"></div>
                        <div class="absolute w-2.5 h-2.5 bg-cyan-400 rounded-full top-1/2 -translate-y-1/2 shadow-lg shadow-cyan-500/30 transition-all"
                             :style="'left: calc(' + Math.min(100, Math.max(0, item.range_position_pct)) + '% - 5px)'"></div>
                    </div>
                </div>

                <!-- S/R Strength Indicators -->
                <div class="grid grid-cols-2 gap-3 mb-2">
                    <div class="flex items-center justify-between text-[10px]">
                        <span class="text-gray-500">Support Str.</span>
                        <span class="px-1.5 py-0.5 rounded font-medium"
                              :class="{
                                  'bg-emerald-900/50 text-emerald-400': item.support_strength?.label === 'STRONG',
                                  'bg-amber-900/50 text-amber-400': item.support_strength?.label === 'MODERATE',
                                  'bg-gray-800 text-gray-500': item.support_strength?.label === 'WEAK' || !item.support_strength,
                              }"
                              x-text="item.support_strength?.label || 'N/A'"></span>
                    </div>
                    <div class="flex items-center justify-between text-[10px]">
                        <span class="text-gray-500">Resist. Str.</span>
                        <span class="px-1.5 py-0.5 rounded font-medium"
                              :class="{
                                  'bg-red-900/50 text-red-400': item.resistance_strength?.label === 'STRONG',
                                  'bg-amber-900/50 text-amber-400': item.resistance_strength?.label === 'MODERATE',
                                  'bg-gray-800 text-gray-500': item.resistance_strength?.label === 'WEAK' || !item.resistance_strength,
                              }"
                              x-text="item.resistance_strength?.label || 'N/A'"></span>
                    </div>
                </div>

                <!-- ATH / ATL row -->
                <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">ATH</span>
                        <span class="text-gray-400" x-text="item.ath_idr ? 'Rp ' + item.ath_idr.toLocaleString('id-ID') : '-'"></span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">ATL</span>
                        <span class="text-gray-400" x-text="item.atl_idr ? 'Rp ' + item.atl_idr.toLocaleString('id-ID') : '-'"></span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Bounces</span>
                        <span class="text-gray-300" x-text="(item.support_touches || 0) + 'S / ' + (item.resistance_touches || 0) + 'R'"></span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">MR</span>
                        <span class="text-gray-300" x-text="item.mr_confidence || '-'"></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 ? parseFloat(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 S/R mapping data available.</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 supportResistanceMapPanel() {
    return {
        items: [],
        total: 0,
        page: 1,
        hasMore: false,
        loading: false,
        zoneFilter: 'all',
        sortBy: 'proximity_desc',
        assetType: 'crypto',
        stats: {
            at_support_count: 0,
            near_support_count: 0,
            mid_range_count: 0,
            near_resistance_count: 0,
            at_resistance_count: 0,
            tight_range_count: 0,
            avg_range_width: 0,
            avg_proximity_score: 0,
        },

        async fetchData() {
            this.loading = true;
            try {
                const params = new URLSearchParams({
                    zone: this.zoneFilter,
                    sort: this.sortBy,
                    asset_type: this.assetType,
                    page: this.page,
                    limit: 30,
                });
                const resp = await fetch(`/api/v1/market/screener/support-resistance-map?${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('S/R map 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 %}