{% extends "base.html" %}
{% block title %}Social Sentiment{% endblock %}

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

    <!-- Header -->
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div>
            <h1 class="text-2xl font-bold text-white flex items-center gap-2">
                <svg class="w-7 h-7 text-koin-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z"/>
                </svg>
                Social Sentiment
            </h1>
            <p class="mt-1 text-sm text-gray-400">Behavioral sentiment proxy from price action &#8212; Fear/Greed gauge with contrarian signals</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-4 py-2 text-sm bg-koin-600 hover:bg-koin-500 text-white rounded-lg transition disabled:opacity-50 font-medium">
                <span x-show="!loading">Refresh</span>
                <span x-show="loading" class="flex items-center gap-1">
                    <svg class="animate-spin w-4 h-4" 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>
                    Loading
                </span>
            </button>
        </div>
    </div>

    <!-- Loading -->
    <div x-show="loading" x-cloak 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 12h4z"/>
            </svg>
            <p class="text-sm text-gray-500">Analyzing market sentiment...</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 && data" 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-5">
                <p class="text-xs text-gray-400 uppercase tracking-wider">Total Analyzed</p>
                <p class="text-2xl font-bold text-white mt-1" x-text="data.total_analyzed || items.length || 0"></p>
            </div>
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
                <p class="text-xs text-gray-400 uppercase tracking-wider">Extreme Greed</p>
                <p class="text-2xl font-bold text-emerald-400 mt-1" x-text="data.extreme_greed_count || 0"></p>
            </div>
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
                <p class="text-xs text-gray-400 uppercase tracking-wider">Extreme Fear</p>
                <p class="text-2xl font-bold text-red-400 mt-1" x-text="data.extreme_fear_count || 0"></p>
            </div>
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
                <p class="text-xs text-gray-400 uppercase tracking-wider">Market Avg Sentiment</p>
                <p class="text-2xl font-bold mt-1" :class="sentimentColor(data.market_avg_sentiment)" x-text="fmt(data.market_avg_sentiment, 0)"></p>
            </div>
        </div>

        <!-- Fear & Greed Gauge (SVG Semicircle) -->
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-6 mb-6">
            <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4 text-center">Market Sentiment Gauge</h3>
            <div class="flex justify-center">
                <div class="relative" style="width: 280px; height: 160px;">
                    <svg viewBox="0 0 280 160" class="w-full h-full">
                        <!-- Background arc -->
                        <path d="M 20 150 A 120 120 0 0 1 260 150" fill="none" stroke="#374151" stroke-width="20" stroke-linecap="round"/>
                        <!-- Red zone (0-25) -->
                        <path d="M 20 150 A 120 120 0 0 1 80 38" fill="none" stroke="#ef4444" stroke-width="20" stroke-linecap="round" opacity="0.6"/>
                        <!-- Orange zone (25-45) -->
                        <path d="M 80 38 A 120 120 0 0 1 125 18" fill="none" stroke="#f59e0b" stroke-width="20" stroke-linecap="round" opacity="0.6"/>
                        <!-- Yellow zone (45-55) -->
                        <path d="M 125 18 A 120 120 0 0 1 155 18" fill="none" stroke="#eab308" stroke-width="20" stroke-linecap="round" opacity="0.6"/>
                        <!-- Light green zone (55-75) -->
                        <path d="M 155 18 A 120 120 0 0 1 200 38" fill="none" stroke="#22c55e" stroke-width="20" stroke-linecap="round" opacity="0.6"/>
                        <!-- Green zone (75-100) -->
                        <path d="M 200 38 A 120 120 0 0 1 260 150" fill="none" stroke="#10b981" stroke-width="20" stroke-linecap="round" opacity="0.6"/>
                        <!-- Needle -->
                        <line :x1="140" :y1="150"
                              :x2="140 + 100 * Math.cos(Math.PI - (Math.PI * Math.min(Math.max(data.market_avg_sentiment || 50, 0), 100) / 100))"
                              :y2="150 - 100 * Math.sin(Math.PI - (Math.PI * Math.min(Math.max(data.market_avg_sentiment || 50, 0), 100) / 100))"
                              stroke="white" stroke-width="3" stroke-linecap="round"/>
                        <!-- Center dot -->
                        <circle cx="140" cy="150" r="6" fill="white"/>
                        <!-- Labels -->
                        <text x="20" y="158" class="text-[9px]" fill="#ef4444" text-anchor="start">Fear</text>
                        <text x="260" y="158" class="text-[9px]" fill="#10b981" text-anchor="end">Greed</text>
                    </svg>
                    <!-- Score display -->
                    <div class="absolute bottom-0 left-1/2 -translate-x-1/2 text-center">
                        <span class="text-3xl font-extrabold tabular-nums" :class="sentimentColor(data.market_avg_sentiment)" x-text="fmt(data.market_avg_sentiment, 0)"></span>
                        <p class="text-xs mt-0.5" :class="sentimentColor(data.market_avg_sentiment)" x-text="sentimentLabel(data.market_avg_sentiment)"></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Info Box -->
        <div class="bg-koin-900/15 border border-koin-700/25 rounded-xl p-4 mb-6">
            <div class="flex items-start gap-3">
                <svg class="w-5 h-5 text-koin-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <div>
                    <h4 class="text-sm font-medium text-koin-300">Behavioral Sentiment Proxy</h4>
                    <p class="text-xs text-gray-400 mt-1">This is NOT social media sentiment. It is a behavioral proxy derived from price action signals: momentum, volume patterns, volatility regime, and crowd behavior indicators. Extreme readings often signal contrarian opportunities &#8212; when everyone is greedy, be cautious; when everyone is fearful, look for opportunities.</p>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="flex flex-wrap items-center gap-3 mb-6">
            <select x-model="filterSentiment" 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-koin-500">
                <option value="all">All Sentiment</option>
                <option value="extreme_greed">Extreme Greed</option>
                <option value="greed">Greed</option>
                <option value="neutral">Neutral</option>
                <option value="fear">Fear</option>
                <option value="extreme_fear">Extreme Fear</option>
            </select>
            <select x-model="filterContrarian" 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-koin-500">
                <option value="all">All Signals</option>
                <option value="yes">Contrarian Signal Only</option>
            </select>
            <span class="text-xs text-gray-500" x-text="'Showing ' + filtered.length + ' of ' + items.length"></span>
        </div>

        <!-- Card Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
            <template x-for="(c, idx) in filtered" :key="c.symbol || idx">
                <div class="bg-gray-800 border border-gray-700 rounded-xl p-5 hover:border-gray-600 transition">

                    <!-- Coin Header + Score -->
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center gap-2">
                            <span class="text-white font-bold" x-text="c.symbol"></span>
                            <span class="text-xs px-2 py-0.5 rounded-full font-semibold"
                                  :class="sentimentBadge(c.sentiment_label)"
                                  x-text="c.sentiment_label || 'Neutral'"></span>
                        </div>
                        <span class="text-2xl font-extrabold tabular-nums" :class="sentimentColor(c.sentiment_score)" x-text="fmt(c.sentiment_score, 0)"></span>
                    </div>

                    <!-- Component Breakdown -->
                    <div class="space-y-1.5 mb-3">
                        <template x-for="comp in ['momentum', 'volume', 'volatility', 'crowd_behavior']" :key="comp">
                            <div class="flex items-center gap-2" x-show="c[comp + '_score'] != null">
                                <span class="text-[10px] text-gray-500 w-20 capitalize" x-text="comp.replace('_', ' ')"></span>
                                <div class="flex-1 h-1.5 bg-gray-900 rounded-full overflow-hidden">
                                    <div class="h-full rounded-full transition-all"
                                         :class="(c[comp + '_score']||0) >= 70 ? 'bg-emerald-500' : (c[comp + '_score']||0) >= 40 ? 'bg-amber-500' : 'bg-red-500'"
                                         :style="'width:' + Math.min(c[comp + '_score']||0, 100) + '%'"></div>
                                </div>
                                <span class="text-[10px] text-gray-400 w-8 text-right tabular-nums" x-text="fmt(c[comp + '_score'], 0)"></span>
                            </div>
                        </template>
                    </div>

                    <!-- FOMO Level -->
                    <div x-show="(c.fomo_level || 0) >= 60" class="mb-2">
                        <div class="flex items-center gap-2">
                            <span class="text-[10px] text-amber-400 font-semibold uppercase tracking-wider">FOMO Level</span>
                            <div class="flex-1 h-2 bg-gray-900 rounded-full overflow-hidden">
                                <div class="h-full bg-amber-500 rounded-full" :style="'width:' + Math.min(c.fomo_level||0, 100) + '%'"></div>
                            </div>
                            <span class="text-xs text-amber-400 font-bold tabular-nums" x-text="fmt(c.fomo_level, 0) + '%'"></span>
                        </div>
                    </div>

                    <!-- Panic Level -->
                    <div x-show="(c.panic_level || 0) >= 60" class="mb-2">
                        <div class="flex items-center gap-2">
                            <span class="text-[10px] text-red-400 font-semibold uppercase tracking-wider">Panic Level</span>
                            <div class="flex-1 h-2 bg-gray-900 rounded-full overflow-hidden">
                                <div class="h-full bg-red-500 rounded-full" :style="'width:' + Math.min(c.panic_level||0, 100) + '%'"></div>
                            </div>
                            <span class="text-xs text-red-400 font-bold tabular-nums" x-text="fmt(c.panic_level, 0) + '%'"></span>
                        </div>
                    </div>

                    <!-- Contrarian Signal -->
                    <div x-show="c.contrarian_signal" class="mb-2">
                        <span class="text-xs px-2 py-1 rounded-lg bg-koin-900/40 text-koin-300 border border-koin-700/40 font-semibold">
                            Contrarian Signal: <span x-text="c.contrarian_signal"></span>
                        </span>
                    </div>

                    <!-- Key Insight -->
                    <div x-show="c.insight" class="mt-3 pt-3 border-t border-gray-700/50">
                        <p class="text-xs text-gray-400 italic" x-text="c.insight"></p>
                    </div>
                </div>
            </template>
        </div>

        <!-- Empty filter result -->
        <div x-show="filtered.length === 0 && items.length > 0" class="text-center py-12">
            <p class="text-gray-500 text-sm">No items match current filters.</p>
        </div>
    </div>

    <!-- Empty State -->
    <div x-show="!loading && !error && !data" x-cloak class="text-center py-16 bg-gray-800 border border-gray-700 rounded-xl">
        <svg class="mx-auto h-12 w-12 text-gray-600 mb-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z"/>
        </svg>
        <h3 class="text-lg font-medium text-gray-400">No Sentiment Data</h3>
        <p class="mt-2 text-sm text-gray-600">Run analysis via <a href="/admin/workflow" class="text-koin-400 hover:text-koin-300">Pipeline Workflow</a> first.</p>
    </div>
</div>

<script>
function socialSentimentApp() {
    return {
        loading: false,
        error: null,
        lastRefresh: null,
        data: null,
        items: [],
        filterSentiment: 'all',
        filterContrarian: 'all',

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

        async fetchData() {
            this.loading = true;
            this.error = null;
            try {
                const res = await fetch('/api/v1/market/social-sentiment?asset_type={{ asset_mode }}');
                if (res.redirected) { window.location.href = res.url; return; }
                const json = await res.json();
                if (json.error) { this.error = json.error; }
                else {
                    this.data = json.data || json;
                    this.items = this.data.items || this.data.results || [];
                }
            } catch (e) {
                this.error = e.message;
            } finally {
                this.loading = false;
                this.lastRefresh = new Date().toLocaleTimeString('id-ID');
            }
        },

        get filtered() {
            let list = [...this.items];
            if (this.filterSentiment !== 'all') {
                list = list.filter(i => (i.sentiment_label || '').toLowerCase().replace(/\s+/g, '_') === this.filterSentiment);
            }
            if (this.filterContrarian === 'yes') {
                list = list.filter(i => i.contrarian_signal);
            }
            return list;
        },

        sentimentColor(v) {
            if (v == null) return 'text-gray-400';
            if (v >= 80) return 'text-emerald-400';
            if (v >= 60) return 'text-green-400';
            if (v >= 40) return 'text-amber-400';
            if (v >= 20) return 'text-orange-400';
            return 'text-red-400';
        },

        sentimentLabel(v) {
            if (v == null) return 'Unknown';
            if (v >= 80) return 'Extreme Greed';
            if (v >= 60) return 'Greed';
            if (v >= 40) return 'Neutral';
            if (v >= 20) return 'Fear';
            return 'Extreme Fear';
        },

        sentimentBadge(label) {
            const l = (label || '').toLowerCase();
            if (l.includes('extreme greed')) return 'bg-emerald-900/50 text-emerald-400';
            if (l.includes('greed')) return 'bg-green-900/50 text-green-400';
            if (l.includes('extreme fear')) return 'bg-red-900/50 text-red-400';
            if (l.includes('fear')) return 'bg-orange-900/50 text-orange-400';
            return 'bg-gray-700 text-gray-400';
        },

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