{% extends "base.html" %}
{% block title %}On-Chain Analytics{% endblock %}

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

    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-white">On-Chain Analytics</h1>
            <p class="mt-1 text-sm text-gray-400">Exchange flows, whale activity, token velocity, MVRV, HODL ratios, and network growth</p>
        </div>
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-500" x-text="lastRefresh ? 'Updated: ' + 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 -->
    <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-500">Fetching on-chain data...</p>
        </div>
    </div>

    <!-- Error -->
    <div x-show="error" x-cloak class="bg-red-900/20 border border-red-800 rounded-xl p-4">
        <p class="text-sm text-red-400" x-text="error"></p>
    </div>

    <!-- Content -->
    <div x-show="!loading && !error" x-cloak>

        <!-- Summary Cards -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            <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="stats.total_analyzed">0</p>
                <p class="text-xs text-gray-400 mt-1">Total Analyzed</p>
            </div>
            <div class="bg-gray-800 border border-emerald-800/50 rounded-xl p-4 text-center">
                <p class="text-2xl font-bold text-emerald-400" x-text="stats.bullish">0</p>
                <p class="text-xs text-gray-400 mt-1">Bullish On-Chain</p>
            </div>
            <div class="bg-gray-800 border border-red-800/50 rounded-xl p-4 text-center">
                <p class="text-2xl font-bold text-red-400" x-text="stats.bearish">0</p>
                <p class="text-xs text-gray-400 mt-1">Bearish On-Chain</p>
            </div>
            <div class="bg-gray-800 border border-koin-800/50 rounded-xl p-4 text-center">
                <p class="text-2xl font-bold text-koin-400" x-text="fmt(stats.avg_score, 1)">-</p>
                <p class="text-xs text-gray-400 mt-1">Avg On-Chain Score</p>
            </div>
        </div>

        <!-- Filters -->
        <div class="flex flex-wrap items-center gap-2 mb-6">
            <button @click="filter = 'all'" :class="filter === 'all' ? 'bg-koin-600 text-white' : 'bg-gray-800 text-gray-400 hover:text-gray-300'"
                    class="px-3 py-1.5 text-xs font-medium rounded-lg transition">All</button>
            <button @click="filter = 'bullish'" :class="filter === 'bullish' ? 'bg-emerald-600 text-white' : 'bg-gray-800 text-gray-400 hover:text-gray-300'"
                    class="px-3 py-1.5 text-xs font-medium rounded-lg transition">Bullish</button>
            <button @click="filter = 'bearish'" :class="filter === 'bearish' ? 'bg-red-600 text-white' : 'bg-gray-800 text-gray-400 hover:text-gray-300'"
                    class="px-3 py-1.5 text-xs font-medium rounded-lg transition">Bearish</button>
            <button @click="filter = 'high'" :class="filter === 'high' ? 'bg-koin-600 text-white' : 'bg-gray-800 text-gray-400 hover:text-gray-300'"
                    class="px-3 py-1.5 text-xs font-medium rounded-lg transition">High Score (&gt;70)</button>
        </div>

        <!-- Empty State -->
        <div x-show="filteredItems.length === 0" class="text-center py-16">
            <svg class="w-12 h-12 text-gray-600 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-9.86a4.5 4.5 0 00-6.364 0l-4.5 4.5a4.5 4.5 0 001.242 7.244"/>
            </svg>
            <p class="text-sm text-gray-500">No on-chain data available for this filter</p>
        </div>

        <!-- Cards Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <template x-for="item in filteredItems" :key="item.symbol">
                <div class="bg-gray-800 border border-gray-700 rounded-xl p-5 hover:border-gray-600 transition">
                    <!-- Coin Header -->
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center overflow-hidden">
                                <img :src="item.icon || __stockIconUrl(item.symbol)" :alt="item.symbol"
                                     class="w-8 h-8 rounded-full" onerror="this.style.display='none'">
                            </div>
                            <div>
                                <p class="text-sm font-bold text-white" x-text="item.symbol"></p>
                                <p class="text-xs text-gray-500" x-text="item.name || item.symbol"></p>
                            </div>
                        </div>
                        <!-- On-Chain Score -->
                        <div class="text-right">
                            <p class="text-2xl font-bold"
                               :class="scoreColor(item.onchain_score)"
                               x-text="fmt(item.onchain_score, 0)"></p>
                            <p class="text-xs text-gray-500">On-Chain Score</p>
                        </div>
                    </div>

                    <!-- Score Bar -->
                    <div class="mb-3">
                        <div class="w-full bg-gray-700 rounded-full h-2">
                            <div class="h-2 rounded-full transition-all duration-500"
                                 :class="scoreBarClass(item.onchain_score)"
                                 :style="'width:' + Math.min(item.onchain_score || 0, 100) + '%'"></div>
                        </div>
                    </div>

                    <!-- Bias & Risk Badges -->
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center gap-2">
                            <span class="text-xs text-gray-500">Bias:</span>
                            <span class="px-2 py-0.5 text-xs font-medium rounded-full"
                                  :class="biasClass(item.overall_bias)"
                                  x-text="item.overall_bias || 'neutral'"></span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-xs text-gray-500">Risk:</span>
                            <span class="px-2 py-0.5 text-xs font-medium rounded-full"
                                  :class="riskClass(item.risk_level)"
                                  x-text="item.risk_level || 'medium'"></span>
                        </div>
                    </div>

                    <!-- 6 Metric Sections -->
                    <div class="grid grid-cols-2 gap-3 mb-4">
                        <!-- Exchange Flow -->
                        <div class="bg-gray-900/50 rounded-lg p-2.5">
                            <p class="text-xs text-gray-500 mb-1.5">Exchange Flow</p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-1">
                                    <span class="text-xs"
                                          :class="(item.exchange_flow?.direction || '').toLowerCase() === 'outflow' ? 'text-emerald-400' : 'text-red-400'"
                                          x-text="item.exchange_flow?.direction || '-'"></span>
                                    <span class="text-xs text-gray-500" x-text="item.exchange_flow?.magnitude ? '(' + item.exchange_flow.magnitude + ')' : ''"></span>
                                </div>
                                <span class="px-1.5 py-0.5 text-xs rounded"
                                      :class="metricSignalClass(item.exchange_flow?.signal)"
                                      x-text="item.exchange_flow?.signal || '-'"></span>
                            </div>
                        </div>

                        <!-- Whale Activity -->
                        <div class="bg-gray-900/50 rounded-lg p-2.5">
                            <p class="text-xs text-gray-500 mb-1.5">Whale Activity</p>
                            <div class="flex items-center justify-between">
                                <div>
                                    <span class="text-xs" :class="item.whale_activity?.detected ? 'text-amber-400' : 'text-gray-500'"
                                          x-text="item.whale_activity?.detected ? 'Detected' : 'None'"></span>
                                    <span class="text-xs text-gray-500 ml-1" x-text="item.whale_activity?.type ? '(' + item.whale_activity.type + ')' : ''"></span>
                                </div>
                                <span class="text-xs text-gray-400" x-show="item.whale_activity?.confidence"
                                      x-text="fmt(item.whale_activity?.confidence, 0) + '%'"></span>
                            </div>
                        </div>

                        <!-- Token Velocity -->
                        <div class="bg-gray-900/50 rounded-lg p-2.5">
                            <p class="text-xs text-gray-500 mb-1.5">Token Velocity</p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-1">
                                    <span class="text-xs text-gray-300" x-text="fmt(item.token_velocity?.value, 2)"></span>
                                    <span x-show="item.token_velocity?.trend"
                                          :class="(item.token_velocity?.trend || '').toLowerCase() === 'up' ? 'text-emerald-400' : (item.token_velocity?.trend || '').toLowerCase() === 'down' ? 'text-red-400' : 'text-gray-400'"
                                          x-text="(item.token_velocity?.trend || '').toLowerCase() === 'up' ? '\u2191' : (item.token_velocity?.trend || '').toLowerCase() === 'down' ? '\u2193' : '\u2192'"></span>
                                </div>
                                <span class="px-1.5 py-0.5 text-xs rounded"
                                      :class="metricSignalClass(item.token_velocity?.signal)"
                                      x-text="item.token_velocity?.signal || '-'"></span>
                            </div>
                        </div>

                        <!-- MVRV Ratio -->
                        <div class="bg-gray-900/50 rounded-lg p-2.5">
                            <p class="text-xs text-gray-500 mb-1.5">MVRV Ratio</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-300" x-text="fmt(item.mvrv?.value, 2)"></span>
                                <span class="px-1.5 py-0.5 text-xs rounded"
                                      :class="mvrvZoneClass(item.mvrv?.zone)"
                                      x-text="(item.mvrv?.zone || 'fair_value').replace(/_/g, ' ')"></span>
                            </div>
                        </div>

                        <!-- HODL Ratio -->
                        <div class="bg-gray-900/50 rounded-lg p-2.5">
                            <p class="text-xs text-gray-500 mb-1.5">HODL Ratio</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-300" x-text="fmt(item.hodl_ratio?.value, 2)"></span>
                                <span x-show="item.hodl_ratio?.trend"
                                      class="text-xs"
                                      :class="(item.hodl_ratio?.trend || '').toLowerCase() === 'up' ? 'text-emerald-400' : (item.hodl_ratio?.trend || '').toLowerCase() === 'down' ? 'text-red-400' : 'text-gray-400'"
                                      x-text="(item.hodl_ratio?.trend || '').toLowerCase() === 'up' ? '\u2191 Increasing' : (item.hodl_ratio?.trend || '').toLowerCase() === 'down' ? '\u2193 Decreasing' : '\u2192 Stable'"></span>
                            </div>
                        </div>

                        <!-- Network Growth -->
                        <div class="bg-gray-900/50 rounded-lg p-2.5">
                            <p class="text-xs text-gray-500 mb-1.5">Network Growth</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs"
                                      :class="(item.network_growth?.trend || '').toLowerCase() === 'growing' ? 'text-emerald-400' :
                                              (item.network_growth?.trend || '').toLowerCase() === 'declining' ? 'text-red-400' : 'text-gray-400'"
                                      x-text="item.network_growth?.trend || '-'"></span>
                                <span class="text-xs text-gray-400" x-show="item.network_growth?.rate"
                                      x-text="fmtPct(item.network_growth?.rate)"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Key Insight -->
                    <div x-show="item.insight" class="bg-gray-900/50 border border-gray-700/50 rounded-lg p-3">
                        <p class="text-xs text-gray-500 mb-1">Key Insight</p>
                        <p class="text-xs text-gray-300 leading-relaxed" x-text="item.insight"></p>
                    </div>
                </div>
            </template>
        </div>
    </div>
</div>

<script>
function onChainApp() {
    return {
        loading: false, error: null, lastRefresh: null,
        items: [], filter: 'all',
        stats: { total_analyzed: 0, bullish: 0, bearish: 0, avg_score: 0 },

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

        get filteredItems() {
            if (this.filter === 'all') return this.items;
            if (this.filter === 'bullish') return this.items.filter(i => (i.overall_bias || '').toLowerCase() === 'bullish');
            if (this.filter === 'bearish') return this.items.filter(i => (i.overall_bias || '').toLowerCase() === 'bearish');
            if (this.filter === 'high') return this.items.filter(i => (i.onchain_score || 0) > 70);
            return this.items;
        },

        scoreColor(s) {
            const score = s || 0;
            if (score >= 70) return 'text-emerald-400';
            if (score >= 50) return 'text-koin-400';
            if (score >= 30) return 'text-amber-400';
            return 'text-red-400';
        },

        scoreBarClass(s) {
            const score = s || 0;
            if (score >= 70) return 'bg-emerald-500';
            if (score >= 50) return 'bg-koin-500';
            if (score >= 30) return 'bg-amber-500';
            return 'bg-red-500';
        },

        biasClass(bias) {
            const b = (bias || '').toLowerCase();
            if (b === 'bullish') return 'bg-emerald-900/50 text-emerald-400';
            if (b === 'bearish') return 'bg-red-900/50 text-red-400';
            return 'bg-gray-700/50 text-gray-400';
        },

        riskClass(risk) {
            const r = (risk || '').toLowerCase();
            if (r === 'low') return 'bg-emerald-900/50 text-emerald-400';
            if (r === 'high') return 'bg-red-900/50 text-red-400';
            return 'bg-amber-900/50 text-amber-400';
        },

        metricSignalClass(signal) {
            const s = (signal || '').toLowerCase();
            if (s === 'bullish' || s === 'buy') return 'bg-emerald-900/50 text-emerald-400';
            if (s === 'bearish' || s === 'sell') return 'bg-red-900/50 text-red-400';
            return 'bg-gray-700/50 text-gray-400';
        },

        mvrvZoneClass(zone) {
            const z = (zone || '').toLowerCase();
            if (z === 'undervalued') return 'bg-emerald-900/50 text-emerald-400';
            if (z === 'overvalued') return 'bg-red-900/50 text-red-400';
            return 'bg-amber-900/50 text-amber-400';
        },

        async fetchData() {
            this.loading = true; this.error = null;
            try {
                const params = new URLSearchParams({ asset_type: '{{ asset_mode }}' });
                const res = await fetch(`/api/v1/market/on-chain?${params}`);
                const json = await res.json();
                if (json.status === 'success') {
                    const d = json.data || {};
                    this.items = d.items || d.results || [];
                    const scores = this.items.map(i => i.onchain_score || 0);
                    this.stats = {
                        total_analyzed: this.items.length,
                        bullish: this.items.filter(i => (i.overall_bias || '').toLowerCase() === 'bullish').length,
                        bearish: this.items.filter(i => (i.overall_bias || '').toLowerCase() === 'bearish').length,
                        avg_score: scores.length > 0 ? scores.reduce((a, b) => a + b, 0) / scores.length : 0,
                    };
                } else {
                    this.error = json.message || 'Failed to load data';
                }
            } catch (e) { this.error = e.message; }
            finally { this.loading = false; this.lastRefresh = new Date().toLocaleTimeString('id-ID'); }
        },

        fmt(n, d=2) { return n != null ? Number(n).toFixed(d) : '-'; },
        fmtPct(n) { return n != null ? (n >= 0 ? '+' : '') + Number(n).toFixed(2) + '%' : '-'; },
        fmtPrice(n) { return n != null ? 'Rp ' + Number(n).toLocaleString('id-ID') : '-'; },
    };
}
</script>
{% endblock %}