{% extends "base.html" %}
{% block title %}Fear & Greed Index{% endblock %}

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

    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-white">Fear & Greed Index</h1>
            <p class="mt-1 text-sm text-gray-400">Market-wide sentiment gauge with component breakdown and historical trend</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">Calculating sentiment index...</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 class="max-w-4xl mx-auto space-y-6">

        <!-- Main Gauge Section -->
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-8 text-center">
            <!-- Semicircle Gauge -->
            <div class="relative w-64 h-36 mx-auto mb-4">
                <svg viewBox="0 0 200 110" class="w-full h-full">
                    <!-- Background arc -->
                    <path d="M 10 100 A 90 90 0 0 1 190 100" fill="none" stroke="#374151" stroke-width="14" stroke-linecap="round"/>
                    <!-- Colored segments -->
                    <path d="M 10 100 A 90 90 0 0 1 46 28" fill="none" stroke="#ef4444" stroke-width="14" stroke-linecap="round"/>
                    <path d="M 46 28 A 90 90 0 0 1 100 10" fill="none" stroke="#f97316" stroke-width="14" stroke-linecap="round"/>
                    <path d="M 100 10 A 90 90 0 0 1 154 28" fill="none" stroke="#eab308" stroke-width="14" stroke-linecap="round"/>
                    <path d="M 154 28 A 90 90 0 0 1 190 100" fill="none" stroke="#22c55e" stroke-width="14" stroke-linecap="round"/>
                    <!-- Needle -->
                    <line :x1="100" :y1="100"
                          :x2="100 + 70 * Math.cos(Math.PI + (Math.PI * (data.score || 0) / 100))"
                          :y2="100 + 70 * Math.sin(Math.PI + (Math.PI * (data.score || 0) / 100))"
                          stroke="white" stroke-width="3" stroke-linecap="round"/>
                    <!-- Center dot -->
                    <circle cx="100" cy="100" r="5" fill="white"/>
                    <!-- Labels -->
                    <text x="10" y="108" fill="#9ca3af" font-size="8" text-anchor="start">0</text>
                    <text x="190" y="108" fill="#9ca3af" font-size="8" text-anchor="end">100</text>
                </svg>
            </div>

            <!-- Score Display -->
            <div class="mb-3">
                <p class="text-6xl font-bold" :class="gaugeColor(data.score)" x-text="Math.round(data.score || 0)"></p>
            </div>

            <!-- Sentiment Label -->
            <div class="inline-flex items-center gap-2">
                <span class="text-2xl" x-text="sentimentEmoji(data.score)"></span>
                <span class="text-xl font-semibold px-4 py-1 rounded-full"
                      :class="gaugeBgClass(data.score)"
                      x-text="sentimentLabel(data.score)"></span>
            </div>

            <!-- Previous Score -->
            <div class="mt-4" x-show="data.previous_score != null">
                <p class="text-xs text-gray-500">
                    Previous: <span x-text="Math.round(data.previous_score || 0)"></span>
                    <span :class="(data.score || 0) > (data.previous_score || 0) ? 'text-emerald-400' : 'text-red-400'"
                          x-text="((data.score || 0) > (data.previous_score || 0) ? '+' : '') + Math.round((data.score || 0) - (data.previous_score || 0))"></span>
                </p>
            </div>
        </div>

        <!-- Component Breakdown -->
        <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
            <template x-for="comp in (data.components || [])" :key="comp.name">
                <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
                    <p class="text-xs text-gray-500 uppercase tracking-wider mb-2" x-text="comp.name"></p>
                    <p class="text-2xl font-bold mb-1" :class="gaugeColor(comp.score)" x-text="Math.round(comp.score || 0)"></p>
                    <div class="w-full bg-gray-700 rounded-full h-1.5 mb-2">
                        <div class="h-1.5 rounded-full transition-all duration-500"
                             :class="gaugeBarClass(comp.score)"
                             :style="'width:' + Math.min(comp.score || 0, 100) + '%'"></div>
                    </div>
                    <p class="text-xs text-gray-500" x-show="comp.weight">
                        Weight: <span x-text="fmt(comp.weight * 100, 0) + '%'"></span>
                    </p>
                    <p class="text-xs text-gray-400 mt-1" x-text="comp.detail || ''"></p>
                </div>
            </template>
        </div>

        <!-- Recommendation -->
        <div x-show="data.recommendation" class="bg-gray-800 border border-koin-700/50 rounded-xl p-5">
            <div class="flex items-start gap-3">
                <div class="w-8 h-8 rounded-lg bg-koin-900/50 flex items-center justify-center flex-shrink-0 mt-0.5">
                    <svg class="w-4 h-4 text-koin-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-sm font-medium text-koin-400 mb-1">Recommendation</p>
                    <p class="text-sm text-gray-300 leading-relaxed" x-text="data.recommendation"></p>
                </div>
            </div>
        </div>

        <!-- Historical Trend (Last 7 Days) -->
        <div x-show="(data.history || []).length > 0" class="bg-gray-800 border border-gray-700 rounded-xl p-5">
            <p class="text-sm font-medium text-white mb-4">7-Day Sentiment Trend</p>
            <div class="flex items-end justify-between gap-2 h-32">
                <template x-for="(h, idx) in (data.history || [])" :key="idx">
                    <div class="flex-1 flex flex-col items-center gap-1">
                        <span class="text-xs font-medium" :class="gaugeColor(h.score)" x-text="Math.round(h.score || 0)"></span>
                        <div class="w-full rounded-t-md transition-all duration-300"
                             :class="gaugeBarClass(h.score)"
                             :style="'height:' + Math.max((h.score || 0) * 1.0, 4) + 'px'"></div>
                        <span class="text-xs text-gray-500" x-text="h.label || ('D-' + ((data.history || []).length - idx))"></span>
                    </div>
                </template>
            </div>
        </div>

        <!-- Market Summary Stats -->
        <div x-show="data.market_stats" class="bg-gray-800 border border-gray-700 rounded-xl p-5">
            <p class="text-sm font-medium text-white mb-3">Market Summary</p>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div>
                    <p class="text-xs text-gray-500">Advancing</p>
                    <p class="text-lg font-bold text-emerald-400" x-text="data.market_stats?.advancing || '-'"></p>
                </div>
                <div>
                    <p class="text-xs text-gray-500">Declining</p>
                    <p class="text-lg font-bold text-red-400" x-text="data.market_stats?.declining || '-'"></p>
                </div>
                <div>
                    <p class="text-xs text-gray-500">New Highs</p>
                    <p class="text-lg font-bold text-koin-400" x-text="data.market_stats?.new_highs || '-'"></p>
                </div>
                <div>
                    <p class="text-xs text-gray-500">New Lows</p>
                    <p class="text-lg font-bold text-gray-400" x-text="data.market_stats?.new_lows || '-'"></p>
                </div>
            </div>
        </div>

        <!-- Sentiment Interpretation -->
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
            <p class="text-sm font-medium text-white mb-3">What Does This Mean?</p>
            <div class="grid grid-cols-5 gap-2">
                <div class="text-center p-2 rounded-lg" :class="(data.score || 0) <= 20 ? 'bg-red-900/30 ring-1 ring-red-500' : 'bg-gray-900/50'">
                    <div class="w-3 h-3 rounded-full bg-red-500 mx-auto mb-1"></div>
                    <p class="text-xs font-medium" :class="(data.score || 0) <= 20 ? 'text-red-400' : 'text-gray-500'">Extreme Fear</p>
                    <p class="text-xs text-gray-600">0-20</p>
                    <p class="text-xs text-gray-500 mt-1">Potential buying opportunity</p>
                </div>
                <div class="text-center p-2 rounded-lg" :class="(data.score || 0) > 20 && (data.score || 0) <= 40 ? 'bg-orange-900/30 ring-1 ring-orange-500' : 'bg-gray-900/50'">
                    <div class="w-3 h-3 rounded-full bg-orange-500 mx-auto mb-1"></div>
                    <p class="text-xs font-medium" :class="(data.score || 0) > 20 && (data.score || 0) <= 40 ? 'text-orange-400' : 'text-gray-500'">Fear</p>
                    <p class="text-xs text-gray-600">21-40</p>
                    <p class="text-xs text-gray-500 mt-1">Cautious market</p>
                </div>
                <div class="text-center p-2 rounded-lg" :class="(data.score || 0) > 40 && (data.score || 0) <= 60 ? 'bg-yellow-900/30 ring-1 ring-yellow-500' : 'bg-gray-900/50'">
                    <div class="w-3 h-3 rounded-full bg-yellow-500 mx-auto mb-1"></div>
                    <p class="text-xs font-medium" :class="(data.score || 0) > 40 && (data.score || 0) <= 60 ? 'text-yellow-400' : 'text-gray-500'">Neutral</p>
                    <p class="text-xs text-gray-600">41-60</p>
                    <p class="text-xs text-gray-500 mt-1">Balanced sentiment</p>
                </div>
                <div class="text-center p-2 rounded-lg" :class="(data.score || 0) > 60 && (data.score || 0) <= 80 ? 'bg-emerald-900/30 ring-1 ring-emerald-500' : 'bg-gray-900/50'">
                    <div class="w-3 h-3 rounded-full bg-emerald-500 mx-auto mb-1"></div>
                    <p class="text-xs font-medium" :class="(data.score || 0) > 60 && (data.score || 0) <= 80 ? 'text-emerald-400' : 'text-gray-500'">Greed</p>
                    <p class="text-xs text-gray-600">61-80</p>
                    <p class="text-xs text-gray-500 mt-1">Optimistic market</p>
                </div>
                <div class="text-center p-2 rounded-lg" :class="(data.score || 0) > 80 ? 'bg-green-900/30 ring-1 ring-green-500' : 'bg-gray-900/50'">
                    <div class="w-3 h-3 rounded-full bg-green-500 mx-auto mb-1"></div>
                    <p class="text-xs font-medium" :class="(data.score || 0) > 80 ? 'text-green-400' : 'text-gray-500'">Extreme Greed</p>
                    <p class="text-xs text-gray-600">81-100</p>
                    <p class="text-xs text-gray-500 mt-1">Potential correction risk</p>
                </div>
            </div>
        </div>

        <!-- Extremes Section -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- Most Fearful -->
            <div x-show="(data.most_fearful || []).length > 0" class="bg-gray-800 border border-red-800/30 rounded-xl p-5">
                <p class="text-sm font-medium text-red-400 mb-3">Most Fearful Assets</p>
                <div class="space-y-2">
                    <template x-for="a in (data.most_fearful || []).slice(0, 5)" :key="a.symbol">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-2">
                                <div class="w-6 h-6 rounded-full bg-gray-700 flex items-center justify-center overflow-hidden">
                                    <img :src="__stockIconUrl(a.symbol)" class="w-6 h-6 rounded-full" onerror="this.style.display='none'">
                                </div>
                                <span class="text-sm text-white font-medium" x-text="a.symbol"></span>
                            </div>
                            <div class="flex items-center gap-2">
                                <div class="w-16 bg-gray-700 rounded-full h-1.5">
                                    <div class="h-1.5 rounded-full bg-red-500" :style="'width:' + Math.min(a.score || 0, 100) + '%'"></div>
                                </div>
                                <span class="text-xs text-red-400 w-8 text-right" x-text="Math.round(a.score || 0)"></span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

            <!-- Most Greedy -->
            <div x-show="(data.most_greedy || []).length > 0" class="bg-gray-800 border border-emerald-800/30 rounded-xl p-5">
                <p class="text-sm font-medium text-emerald-400 mb-3">Most Greedy Assets</p>
                <div class="space-y-2">
                    <template x-for="a in (data.most_greedy || []).slice(0, 5)" :key="a.symbol">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-2">
                                <div class="w-6 h-6 rounded-full bg-gray-700 flex items-center justify-center overflow-hidden">
                                    <img :src="__stockIconUrl(a.symbol)" class="w-6 h-6 rounded-full" onerror="this.style.display='none'">
                                </div>
                                <span class="text-sm text-white font-medium" x-text="a.symbol"></span>
                            </div>
                            <div class="flex items-center gap-2">
                                <div class="w-16 bg-gray-700 rounded-full h-1.5">
                                    <div class="h-1.5 rounded-full bg-emerald-500" :style="'width:' + Math.min(a.score || 0, 100) + '%'"></div>
                                </div>
                                <span class="text-xs text-emerald-400 w-8 text-right" x-text="Math.round(a.score || 0)"></span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>

    <!-- Empty State -->
    <div x-show="!loading && !error && !data" x-cloak class="text-center py-16 max-w-4xl mx-auto">
        <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
        </svg>
        <p class="text-sm text-gray-500">No fear & greed data available</p>
    </div>
</div>

<script>
function fearGreedApp() {
    return {
        loading: false, error: null, lastRefresh: null,
        data: null,

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

        gaugeColor(score) {
            const s = score || 0;
            if (s <= 20) return 'text-red-500';
            if (s <= 40) return 'text-orange-400';
            if (s <= 60) return 'text-yellow-400';
            if (s <= 80) return 'text-emerald-400';
            return 'text-green-400';
        },

        gaugeBarClass(score) {
            const s = score || 0;
            if (s <= 20) return 'bg-red-500';
            if (s <= 40) return 'bg-orange-500';
            if (s <= 60) return 'bg-yellow-500';
            if (s <= 80) return 'bg-emerald-500';
            return 'bg-green-500';
        },

        gaugeBgClass(score) {
            const s = score || 0;
            if (s <= 20) return 'bg-red-900/50 text-red-400';
            if (s <= 40) return 'bg-orange-900/50 text-orange-400';
            if (s <= 60) return 'bg-yellow-900/50 text-yellow-400';
            if (s <= 80) return 'bg-emerald-900/50 text-emerald-400';
            return 'bg-green-900/50 text-green-400';
        },

        sentimentLabel(score) {
            const s = score || 0;
            if (s <= 20) return 'Extreme Fear';
            if (s <= 40) return 'Fear';
            if (s <= 60) return 'Neutral';
            if (s <= 80) return 'Greed';
            return 'Extreme Greed';
        },

        sentimentEmoji(score) {
            const s = score || 0;
            if (s <= 20) return '\u{1F631}';
            if (s <= 40) return '\u{1F628}';
            if (s <= 60) return '\u{1F610}';
            if (s <= 80) return '\u{1F60F}';
            return '\u{1F911}';
        },

        async fetchData() {
            this.loading = true; this.error = null;
            try {
                const params = new URLSearchParams({ asset_type: '{{ asset_mode }}' });
                const res = await fetch(`/api/v1/market/fear-greed?${params}`);
                const json = await res.json();
                if (json.status === 'success') {
                    this.data = json.data || {};
                } 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 %}