{% extends "base.html" %}
{% block content %}
<div x-data="liquidityPanel()" 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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                Liquidity Analysis
            </h1>
            <p class="text-sm text-gray-400 mt-1">Execution risk, spread estimation & volume confirmation</p>
        </div>
        <div class="flex gap-2">
            <button @click="tab='scores'; fetchScores()" :class="tab==='scores' ? 'bg-koin-600 text-white' : 'bg-gray-800 text-gray-400'" class="px-3 py-2 rounded-lg text-sm transition">Liquidity Scores</button>
            <button @click="tab='volume'; fetchVolume()" :class="tab==='volume' ? 'bg-koin-600 text-white' : 'bg-gray-800 text-gray-400'" class="px-3 py-2 rounded-lg text-sm transition">Volume Confirm</button>
        </div>
    </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="scores.total || 0">0</p>
            <p class="text-xs text-gray-400 mt-1">Assets Analyzed</p>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-koin-400" x-text="scores.avg_liquidity_score || 0">0</p>
            <p class="text-xs text-gray-400 mt-1">Avg Liquidity Score</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="scores.high_risk_count || 0">0</p>
            <p class="text-xs text-gray-400 mt-1">High Risk Assets</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="volData.confirmed_count || 0">0</p>
            <p class="text-xs text-gray-400 mt-1">Vol-Confirmed Signals</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>

    <!-- Liquidity Scores Tab -->
    <div x-show="!loading && tab === 'scores'" class="space-y-2">
        <template x-for="item in scoreItems" :key="item.asset_id">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
                <div class="flex items-center justify-between mb-2">
                    <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.execution_risk === 'very_low' || item.execution_risk === 'low',
                                  'bg-yellow-900/50 text-yellow-300': item.execution_risk === 'medium',
                                  'bg-red-900/50 text-red-300': item.execution_risk === 'high' || item.execution_risk === 'very_high'
                              }" x-text="item.execution_risk + ' risk'"></span>
                        <template x-for="f in item.risk_flags" :key="f">
                            <span class="px-1.5 py-0.5 bg-red-900/30 text-red-400 rounded text-xs" x-text="f"></span>
                        </template>
                    </div>
                    <div class="flex items-center gap-1">
                        <span class="text-xs text-gray-400">Score:</span>
                        <span class="text-lg font-bold" :class="item.liquidity_score >= 60 ? 'text-green-400' : item.liquidity_score >= 40 ? 'text-yellow-400' : 'text-red-400'" x-text="item.liquidity_score"></span>
                    </div>
                </div>
                <!-- Score Bar -->
                <div class="w-full bg-gray-700 rounded-full h-1.5 mb-2">
                    <div class="h-1.5 rounded-full transition-all" :class="item.liquidity_score >= 60 ? 'bg-green-500' : item.liquidity_score >= 40 ? 'bg-yellow-500' : 'bg-red-500'" :style="'width: ' + item.liquidity_score + '%'"></div>
                </div>
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs text-gray-400">
                    <span>Vol/MCap: <span class="text-white" x-text="item.vol_mcap_ratio + '%'"></span></span>
                    <span>Spread: <span class="text-white" x-text="item.spread_proxy_pct + '%'"></span></span>
                    <span>Consistency: <span class="text-white" x-text="(item.vol_consistency * 100).toFixed(0) + '%'"></span></span>
                    <span>Vol 24h: <span class="text-white" x-text="'$' + (item.volume_24h / 1e6).toFixed(1) + 'M'"></span></span>
                </div>
            </div>
        </template>
    </div>

    <!-- Volume Confirmation Tab -->
    <div x-show="!loading && tab === 'volume'" class="space-y-2">
        <template x-for="item in volItems" :key="item.asset_id">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
                <div class="flex items-center justify-between">
                    <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" :class="item.signal_type === 'BUY' ? 'bg-green-900/50 text-green-300' : 'bg-red-900/50 text-red-300'" x-text="item.signal_type"></span>
                        <span class="px-2 py-0.5 rounded text-xs font-medium"
                              :class="{
                                  'bg-green-900/50 text-green-300': item.volume_status === 'strong_confirmation' || item.volume_status === 'confirmed',
                                  'bg-gray-700 text-gray-400': item.volume_status === 'neutral',
                                  'bg-yellow-900/50 text-yellow-300': item.volume_status === 'weak',
                                  'bg-red-900/50 text-red-300': item.volume_status === 'no_confirmation'
                              }" x-text="item.volume_status.replace('_', ' ')"></span>
                    </div>
                    <span class="text-sm font-bold" :class="item.volume_ratio >= 1.5 ? 'text-green-400' : item.volume_ratio >= 1.0 ? 'text-gray-300' : 'text-red-400'" x-text="item.volume_ratio + 'x avg'"></span>
                </div>
                <div class="mt-2 flex items-center gap-4 text-xs text-gray-400">
                    <span>Latest: <span class="text-white" x-text="'$' + (item.latest_volume / 1e6).toFixed(2) + 'M'"></span></span>
                    <span>20d Avg: <span class="text-white" x-text="'$' + (item.avg_volume_20d / 1e6).toFixed(2) + 'M'"></span></span>
                    <span>Score Adj: <span :class="item.signal_score_adjustment >= 0 ? 'text-green-400' : 'text-red-400'" x-text="(item.signal_score_adjustment >= 0 ? '+' : '') + item.signal_score_adjustment"></span></span>
                </div>
            </div>
        </template>
    </div>
</div>

<script>
function liquidityPanel() {
    return {
        tab: 'scores', loading: true,
        scores: {}, scoreItems: [],
        volData: {}, volItems: [],

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

        async fetchScores() {
            this.loading = true;
            try {
                const r = await fetch(`/api/v1/market/liquidity/scores?asset_type={{ asset_mode }}&limit=30`);
                this.scores = await r.json();
                this.scoreItems = this.scores.items || [];
            } catch(e) {}
            this.loading = false;
        },

        async fetchVolume() {
            this.loading = true;
            try {
                const r = await fetch(`/api/v1/market/liquidity/volume-confirm?asset_type={{ asset_mode }}`);
                this.volData = await r.json();
                this.volItems = this.volData.items || [];
            } catch(e) {}
            this.loading = false;
        }
    }
}
</script>
{% endblock %}