{% extends "base.html" %}
{% block title %}Momentum Heatmap{% endblock %}

{% block content %}
<div x-data="momentumHeatmapPanel()" x-init="fetchData()" class="space-y-5">
    <!-- Header -->
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div class="flex items-center gap-3">
            <a href="{{ tools_base }}/" class="text-gray-500 hover:text-gray-300 transition">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-white flex items-center gap-2">
                    <svg class="w-6 h-6 text-orange-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z"/></svg>
                    Momentum Heatmap
                </h1>
                <p class="text-sm text-gray-500 mt-0.5">Visualisasi momentum perubahan harga seluruh aset dalam bentuk heatmap.</p>
            </div>
        </div>
        <button @click="fetchData()" :disabled="loading"
                class="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition"
                :class="loading ? 'bg-gray-800 text-gray-500 cursor-not-allowed' : 'bg-orange-600 hover:bg-orange-700 text-white'">
            <svg :class="loading && 'animate-spin'" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
            <span x-text="loading ? 'Loading...' : 'Refresh'"></span>
        </button>
    </div>

    <!-- Stats Bar -->
    <div class="grid grid-cols-3 gap-3">
        <div class="glass rounded-xl border border-gray-800 p-3">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Total Aset</p>
            <p class="text-xl font-bold text-white mt-1" x-text="summary.total_coins || 0"></p>
        </div>
        <div class="glass rounded-xl border border-gray-800 p-3">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Positif</p>
            <p class="text-xl font-bold text-emerald-400 mt-1" x-text="summary.positive_pct != null ? summary.positive_pct.toFixed(1) + '%' : '-'"></p>
        </div>
        <div class="glass rounded-xl border border-gray-800 p-3">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Rata-rata</p>
            <p class="text-xl font-bold mt-1"
               :class="(summary.avg_change || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
               x-text="summary.avg_change != null ? (summary.avg_change >= 0 ? '+' : '') + summary.avg_change.toFixed(2) + '%' : '-'"></p>
        </div>
    </div>

    <!-- Filters Row -->
    <div class="flex flex-wrap items-center gap-3">
        <!-- Timeframe Pills -->
        <div class="flex items-center gap-1 bg-gray-900 border border-gray-800 rounded-lg p-1">
            <template x-for="tf in ['1h','24h','7d','30d']" :key="tf">
                <button @click="setTimeframe(tf)"
                        class="px-3 py-1 text-xs font-medium rounded-md transition"
                        :class="timeframe === tf
                            ? 'bg-orange-600 text-white'
                            : 'text-gray-400 hover:text-gray-200 hover:bg-gray-800'">
                    <span x-text="tf"></span>
                </button>
            </template>
        </div>

        <!-- Group By -->
        <select x-model="groupBy" @change="fetchData()"
                class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-300 focus:outline-none focus:ring-1 focus:ring-orange-500">
            <option value="asset_type">Group: Tipe Aset</option>
            <option value="sector">Group: Sektor</option>
            <option value="none">Flat (Tanpa Group)</option>
        </select>

        <!-- Asset Type -->
        <select x-model="filters.asset_type" @change="fetchData()"
                class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-300 focus:outline-none focus:ring-1 focus:ring-orange-500">
            <option value="all">Semua Aset</option>
            <option value="crypto">Kripto</option>
            <option value="stock">Saham</option>
        </select>

        <!-- Search -->
        <div class="relative flex-1 min-w-[160px]">
            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            <input type="text" x-model="searchQ" @input.debounce.300ms="fetchData()"
                   placeholder="Cari simbol atau nama..."
                   class="w-full bg-gray-800 border border-gray-700 rounded-lg pl-9 pr-3 py-1.5 text-sm text-gray-300 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-orange-500">
        </div>
    </div>

    <!-- Loading State -->
    <div x-show="loading" x-cloak class="text-center py-16">
        <svg class="animate-spin h-8 w-8 text-orange-500 mx-auto" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
        </svg>
        <p class="text-gray-500 text-sm mt-3">Memuat data heatmap momentum...</p>
    </div>

    <!-- Empty State -->
    <div x-show="!loading && groups.length === 0" x-cloak
         class="text-center py-16 glass rounded-xl border border-gray-800">
        <svg class="mx-auto h-12 w-12 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z"/>
        </svg>
        <h3 class="mt-4 text-lg font-medium text-gray-400">Belum Ada Data Heatmap</h3>
        <p class="mt-2 text-sm text-gray-600 max-w-md mx-auto">
            Pastikan data pasar sudah di-sync dan endpoint momentum heatmap sudah tersedia.
        </p>
    </div>

    <!-- Heatmap Grid -->
    <div x-show="!loading && groups.length > 0" x-cloak class="space-y-6">
        <template x-for="(group, gIdx) in groups" :key="group.group_name || gIdx">
            <div>
                <!-- Group Header -->
                <div x-show="groupBy !== 'none'" class="flex items-center gap-3 mb-3">
                    <h2 class="text-lg font-semibold text-white" x-text="group.group_name"></h2>
                    <span class="text-xs px-2 py-0.5 rounded-full bg-gray-800 text-gray-400 border border-gray-700"
                          x-text="group.coin_count + ' aset'"></span>
                    <span class="text-xs font-medium tabular-nums"
                          :class="(group.avg_change || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                          x-text="group.avg_change != null ? 'Avg: ' + (group.avg_change >= 0 ? '+' : '') + group.avg_change.toFixed(2) + '%' : ''"></span>
                    <div class="flex-1 h-px bg-gray-800"></div>
                    <div class="flex items-center gap-1.5 text-xs text-gray-500">
                        <span class="flex items-center gap-1">
                            <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                            <span x-text="group.positive_count || 0"></span>
                        </span>
                        <span class="flex items-center gap-1">
                            <span class="w-2 h-2 rounded-full bg-red-500"></span>
                            <span x-text="group.negative_count || 0"></span>
                        </span>
                    </div>
                </div>

                <!-- Tiles Container -->
                <div class="flex flex-wrap gap-1.5">
                    <template x-for="coin in group.coins" :key="coin.asset_id">
                        <a :href="'/market/asset/' + coin.asset_id"
                           class="relative rounded-lg overflow-hidden cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-black/40 hover:z-10 w-20 h-16 md:w-24 md:h-20 flex flex-col items-center justify-center p-1.5"
                           :class="coin.heat_color || 'bg-gray-700'"
                           style="text-shadow: 0 1px 3px rgba(0,0,0,0.8)">
                            <!-- Symbol -->
                            <span class="text-white font-bold text-xs md:text-sm leading-tight truncate w-full text-center"
                                  x-text="coin.symbol"></span>
                            <!-- Change -->
                            <span class="text-white text-[10px] md:text-xs font-semibold tabular-nums leading-tight"
                                  x-text="changeText(coin.change)"></span>
                            <!-- Price -->
                            <span class="text-white/70 text-[9px] md:text-[10px] leading-tight truncate w-full text-center"
                                  x-text="formatPrice(coin.current_price_idr)"></span>
                        </a>
                    </template>
                </div>
            </div>
        </template>
    </div>

    <!-- Legend -->
    <div x-show="!loading && groups.length > 0" x-cloak
         class="glass rounded-xl border border-gray-800 p-4">
        <div class="flex items-center justify-between flex-wrap gap-3">
            <div class="flex items-center gap-2">
                <span class="text-xs text-gray-500 font-medium">Legenda:</span>
                <div class="flex items-center gap-0.5">
                    <div class="w-6 h-4 rounded bg-red-900"></div>
                    <div class="w-6 h-4 rounded bg-red-800"></div>
                    <div class="w-6 h-4 rounded bg-red-700"></div>
                    <div class="w-6 h-4 rounded bg-red-600"></div>
                    <div class="w-6 h-4 rounded bg-red-500"></div>
                    <div class="w-6 h-4 rounded bg-gray-700"></div>
                    <div class="w-6 h-4 rounded bg-emerald-500"></div>
                    <div class="w-6 h-4 rounded bg-emerald-600"></div>
                    <div class="w-6 h-4 rounded bg-emerald-700"></div>
                    <div class="w-6 h-4 rounded bg-emerald-800"></div>
                    <div class="w-6 h-4 rounded bg-emerald-900"></div>
                </div>
            </div>
            <div class="flex items-center gap-4 text-[10px] text-gray-500">
                <span>Merah = Turun Tajam</span>
                <span>Abu = Netral</span>
                <span>Hijau = Naik Tajam</span>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function momentumHeatmapPanel() {
    return {
        groups: [],
        loading: false,
        total: 0,
        summary: {},
        timeframe: '24h',
        groupBy: 'asset_type',
        filters: { asset_type: '{{ asset_mode }}' },
        searchQ: '',

        async fetchData() {
            this.loading = true;
            try {
                const params = new URLSearchParams({
                    group: this.groupBy,
                    timeframe: this.timeframe,
                    sort: 'change',
                    limit: 500,
                    page: 1,
                    q: this.searchQ,
                    asset_type: this.filters.asset_type
                });
                const res = await fetch('/api/v1/market/screener/momentum-heatmap?' + params);
                if (!res.ok) throw new Error('HTTP ' + res.status);
                const data = await res.json();
                this.groups = data.groups || [];
                this.total = data.total || 0;
                this.summary = data.summary || {};
            } catch (e) {
                console.error('Momentum heatmap fetch error:', e);
            } finally {
                this.loading = false;
            }
        },

        setTimeframe(tf) {
            this.timeframe = tf;
            this.fetchData();
        },

        setGroupBy(g) {
            this.groupBy = g;
            this.fetchData();
        },

        formatPrice(n) {
            if (!n) return '-';
            if (n >= 1e12) return 'Rp ' + (n / 1e12).toFixed(1) + 'T';
            if (n >= 1e9) return 'Rp ' + (n / 1e9).toFixed(1) + 'M';
            if (n >= 1e6) return 'Rp ' + (n / 1e6).toFixed(1) + 'jt';
            if (n >= 1e3) return 'Rp ' + (n / 1e3).toFixed(1) + 'rb';
            return 'Rp ' + n.toFixed(0);
        },

        changeText(v) {
            return v != null ? (v >= 0 ? '+' : '') + v.toFixed(2) + '%' : '-';
        },
    };
}
</script>
{% endblock %}