{% extends "base.html" %}
{% block content %}
<div x-data="fundingPanel()" 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                Funding Rate Analysis
            </h1>
            <p class="text-sm text-gray-400 mt-1">Leverage positioning & contrarian trading 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"></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" :class="{'text-green-400': data.market_sentiment === 'neutral', 'text-red-400': data.market_sentiment?.includes('greed'), 'text-blue-400': data.market_sentiment?.includes('fear')}" x-text="(data.market_sentiment || 'neutral').replace('_', ' ')"></p>
            <p class="text-xs text-gray-400 mt-1">Market Sentiment</p>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-orange-400" x-text="data.extreme_long_count || 0"></p>
            <p class="text-xs text-gray-400 mt-1">Extreme Long Leverage</p>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-cyan-400" x-text="data.extreme_short_count || 0"></p>
            <p class="text-xs text-gray-400 mt-1">Extreme Short Leverage</p>
        </div>
    </div>

    <!-- Contrarian Signals -->
    <div x-show="(data.contrarian_signals||[]).length" class="bg-gray-800 border border-yellow-700/50 rounded-xl p-4">
        <h3 class="text-sm font-semibold text-yellow-400 mb-3">⚡ Contrarian Signals</h3>
        <div class="space-y-2">
            <template x-for="sig in data.contrarian_signals || []" :key="sig.asset_id">
                <div class="flex items-center justify-between bg-gray-900/50 rounded-lg px-3 py-2">
                    <div class="flex items-center gap-2">
                        <span class="text-white font-bold" x-text="sig.coin_symbol"></span>
                        <span class="px-2 py-0.5 rounded text-xs font-medium" :class="sig.action === 'LONG' ? 'bg-green-900/50 text-green-300' : 'bg-red-900/50 text-red-300'" x-text="sig.action"></span>
                        <span class="px-2 py-0.5 rounded text-xs" :class="sig.confidence === 'high' ? 'bg-yellow-900/50 text-yellow-300' : 'bg-gray-700 text-gray-400'" x-text="sig.confidence"></span>
                    </div>
                    <span class="text-xs text-gray-400" x-text="sig.reason"></span>
                </div>
            </template>
        </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>

    <!-- All Items -->
    <div x-show="!loading" class="space-y-2">
        <template x-for="item in data.items || []" :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-red-900/50 text-red-300': item.signal === 'CONTRARIAN_SHORT' || item.signal === 'CAUTION_LONG',
                                  'bg-green-900/50 text-green-300': item.signal === 'CONTRARIAN_LONG' || item.signal === 'CAUTION_SHORT',
                                  'bg-gray-700 text-gray-400': item.signal === 'NEUTRAL'
                              }" x-text="item.signal.replace('_', ' ')"></span>
                    </div>
                    <div class="flex items-center gap-3 text-xs">
                        <span class="text-gray-400">FR: <span :class="item.funding_rate > 0 ? 'text-red-400' : 'text-green-400'" x-text="item.funding_rate + '%'"></span></span>
                        <span class="text-gray-400">Ann: <span class="text-white" x-text="item.annualized_rate + '%'"></span></span>
                    </div>
                </div>
                <div class="w-full bg-gray-700 rounded-full h-1.5 mb-2">
                    <div class="h-1.5 rounded-full" :class="item.funding_rate > 0.03 ? 'bg-red-500' : item.funding_rate < -0.02 ? 'bg-green-500' : 'bg-gray-500'" :style="'width:' + Math.min(100, Math.abs(item.funding_rate) * 1000) + '%'"></div>
                </div>
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs text-gray-400">
                    <span>Price: <span class="text-white" x-text="'$' + item.price.toLocaleString()"></span></span>
                    <span>24h: <span :class="item.change_24h >= 0 ? 'text-green-400' : 'text-red-400'" x-text="item.change_24h + '%'"></span></span>
                    <span>Daily Cost: <span class="text-white" x-text="item.cost_to_hold_daily + '%'"></span></span>
                    <span>Vol: <span class="text-white" x-text="item.volatility_pct + '%'"></span></span>
                </div>
            </div>
        </template>
    </div>
</div>

<script>
function fundingPanel() {
    return {
        data: {}, loading: true,
        init() { this.fetchData(); },
        async fetchData() {
            this.loading = true;
            try {
                const r = await fetch(`/api/v1/market/funding/analysis?asset_type={{ asset_mode }}`);
                this.data = await r.json();
            } catch(e) { console.error(e); }
            this.loading = false;
        }
    }
}
</script>
{% endblock %}