{% extends "base.html" %}
{% block title %}Risk-Reward Matrix{% endblock %}

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

    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div class="flex items-center gap-3">
            <a href="{{ tools_base }}/" class="text-gray-500 hover:text-gray-300 transition">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-white flex items-center gap-2">
                    <div class="p-2 bg-orange-600/20 rounded-xl">
                        <svg class="w-6 h-6 text-orange-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/>
                        </svg>
                    </div>
                    Risk-Reward Matrix
                </h1>
                <p class="text-sm text-gray-400 mt-0.5">Score & grade every signal by R:R ratio, confidence, technical setup, and risk assessment</p>
            </div>
        </div>
        <div class="flex items-center gap-2">
            <span class="text-xs text-gray-500" x-text="lastRefresh ? 'Updated: ' + lastRefresh : ''"></span>
            <button @click="page=1; fetchData()" :disabled="loading"
                    class="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition"
                    :class="loading ? 'bg-gray-800 text-gray-500 cursor-not-allowed' : 'bg-orange-600 hover:bg-orange-500 text-white'">
                <svg :class="loading && 'animate-spin'" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                <span x-text="loading ? 'Loading...' : 'Refresh'"></span>
            </button>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Total Signals</p>
            <p class="text-2xl font-bold text-white mt-1" x-text="stats.total || 0"></p>
        </div>
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider">A+ Grade</p>
            <p class="text-2xl font-bold text-orange-400 mt-1" x-text="stats.a_plus_count || 0"></p>
        </div>
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Avg R:R</p>
            <p class="text-2xl font-bold text-emerald-400 mt-1" x-text="stats.avg_rr != null ? Number(stats.avg_rr).toFixed(1) + ':1' : '-'"></p>
        </div>
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Best R:R</p>
            <p class="text-lg font-bold text-orange-300 mt-1" x-text="stats.best_rr_symbol || '-'"></p>
        </div>
    </div>

    <!-- Filters Row -->
    <div class="flex flex-wrap items-center gap-3">
        <select x-model="filters.grade" @change="page=1; fetchData()"
                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-orange-500">
            <option value="all">Semua Grade</option>
            <option value="A+">A+ (>=85)</option>
            <option value="A">A (>=70)</option>
            <option value="B">B (>=55)</option>
            <option value="C">C (>=40)</option>
            <option value="D">D (<40)</option>
        </select>

        <select x-model="filters.asset_type" @change="page=1; fetchData()"
                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-orange-500">
            <option value="crypto">Kripto</option>
            <option value="stock">Saham IDX</option>
            <option value="stock_us">Saham US</option>
            <option value="all">Semua</option>
        </select>

        <select x-model="filters.sort" @change="page=1; fetchData()"
                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-orange-500">
            <option value="rr_desc">R:R Tertinggi</option>
            <option value="score_desc">Score Tertinggi</option>
            <option value="grade_asc">Grade Terbaik</option>
            <option value="market_cap">Market Cap</option>
        </select>
    </div>

    <!-- Loading Skeleton -->
    <template x-if="loading && items.length === 0">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <template x-for="i in 6" :key="i">
                <div class="bg-gray-900 border border-gray-800 rounded-xl p-5 animate-pulse">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-10 h-10 bg-gray-700 rounded-full"></div>
                        <div class="flex-1"><div class="h-4 bg-gray-700 rounded w-24"></div><div class="h-3 bg-gray-800 rounded w-16 mt-1"></div></div>
                        <div class="h-8 bg-gray-700 rounded w-16"></div>
                    </div>
                    <div class="space-y-2"><div class="h-3 bg-gray-800 rounded"></div><div class="h-3 bg-gray-800 rounded w-3/4"></div></div>
                </div>
            </template>
        </div>
    </template>

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

    <!-- Empty State -->
    <div x-show="!loading && !error && items.length === 0" x-cloak class="text-center py-16 bg-gray-900 rounded-xl border border-gray-800">
        <svg class="mx-auto h-12 w-12 text-gray-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75z"/>
        </svg>
        <h3 class="mt-4 text-lg font-medium text-gray-400">Belum Ada Data Risk-Reward</h3>
        <p class="mt-2 text-sm text-gray-600">Tidak ada sinyal aktif yang memenuhi kriteria.</p>
    </div>

    <!-- Card List -->
    <div x-show="!error && items.length > 0" x-cloak>
        <div class="flex items-center justify-between text-xs text-gray-500 mb-3">
            <span x-text="'Menampilkan ' + items.length + ' dari ' + total + ' sinyal'"></span>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <template x-for="(item, idx) in items" :key="item.asset_id || idx">
                <div class="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden hover:border-orange-700/50 transition">

                    <!-- Card Header -->
                    <div class="p-5 pb-3">
                        <div class="flex items-center justify-between">
                            <a :href="'/market/asset/' + (item.asset_id || '')" class="flex items-center gap-3 min-w-0 group">
                                <img :src="item.icon_url" class="w-9 h-9 rounded-full flex-shrink-0" loading="lazy"
                                     onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"
                                     x-show="item.icon_url">
                                <span x-show="!item.icon_url" class="w-9 h-9 rounded-full bg-gray-700 flex items-center justify-center text-xs font-bold text-gray-300 flex-shrink-0"
                                      x-text="(item.symbol || '?').substring(0, 3).toUpperCase()"></span>
                                <div class="min-w-0">
                                    <span class="text-white font-semibold truncate block group-hover:text-orange-400 transition" x-text="item.name || item.symbol"></span>
                                    <span class="text-xs text-gray-500 font-mono" x-text="(item.symbol || '').toUpperCase()"></span>
                                </div>
                            </a>
                            <!-- Grade Badge -->
                            <div class="flex items-center gap-2 flex-shrink-0 ml-3">
                                <span class="px-3 py-1.5 text-lg font-black rounded-lg"
                                      :class="gradeBg(item.grade)" x-text="item.grade || '-'"></span>
                                <div class="text-right">
                                    <div class="text-xl font-extrabold tabular-nums text-white" x-text="item.score || 0"></div>
                                    <div class="text-[10px] text-gray-500">/100</div>
                                </div>
                            </div>
                        </div>
                        <!-- Signal Type + Confidence -->
                        <div class="mt-2 flex items-center gap-2">
                            <span class="px-2 py-0.5 text-[10px] font-bold rounded-full"
                                  :class="item.signal_type === 'BUY' ? 'bg-emerald-900/50 text-emerald-400' : 'bg-red-900/50 text-red-400'"
                                  x-text="item.signal_type || '-'"></span>
                            <span class="px-2 py-0.5 text-[10px] font-semibold rounded-full bg-orange-900/40 text-orange-300"
                                  x-text="item.confidence || '-'"></span>
                            <span x-show="item.mtf_confirmed" class="px-2 py-0.5 text-[10px] font-semibold rounded-full bg-blue-900/40 text-blue-300">MTF</span>
                            <span class="text-[10px] text-gray-500 ml-auto" x-text="item.regime || ''"></span>
                        </div>
                    </div>

                    <!-- R:R Visual -->
                    <div class="px-5 pb-3">
                        <div class="flex items-center justify-between text-xs mb-1.5">
                            <span class="text-gray-400">R:R Ratio</span>
                            <span class="text-lg font-black tabular-nums"
                                  :class="(item.rr_ratio || 0) >= 3 ? 'text-emerald-400' : (item.rr_ratio || 0) >= 2 ? 'text-orange-400' : 'text-red-400'"
                                  x-text="item.rr_ratio != null ? Number(item.rr_ratio).toFixed(1) + ':1' : '-'"></span>
                        </div>
                        <!-- Reward vs Risk bars -->
                        <div class="space-y-1">
                            <div class="flex items-center gap-2">
                                <span class="text-[10px] text-emerald-400 w-12">Reward</span>
                                <div class="flex-1 h-3 bg-gray-800 rounded-full overflow-hidden">
                                    <div class="h-full bg-emerald-500/70 rounded-full transition-all duration-500"
                                         :style="'width: ' + Math.min((item.reward_pct || 0) / maxRewardRisk * 100, 100) + '%'"></div>
                                </div>
                                <span class="text-[10px] text-emerald-400 tabular-nums w-14 text-right" x-text="'+' + fmt(item.reward_pct, 1) + '%'"></span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-[10px] text-red-400 w-12">Risk</span>
                                <div class="flex-1 h-3 bg-gray-800 rounded-full overflow-hidden">
                                    <div class="h-full bg-red-500/70 rounded-full transition-all duration-500"
                                         :style="'width: ' + Math.min((item.risk_pct || 0) / maxRewardRisk * 100, 100) + '%'"></div>
                                </div>
                                <span class="text-[10px] text-red-400 tabular-nums w-14 text-right" x-text="'-' + fmt(item.risk_pct, 1) + '%'"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Component Bars -->
                    <div class="px-5 pb-3">
                        <p class="text-[10px] text-gray-500 uppercase tracking-wider mb-2">Score Components</p>
                        <div class="space-y-1.5">
                            <template x-for="comp in componentList" :key="comp.key">
                                <div class="flex items-center gap-2">
                                    <span class="text-[10px] text-gray-400 w-20 truncate" x-text="comp.label"></span>
                                    <div class="flex-1 h-2 bg-gray-800 rounded-full overflow-hidden">
                                        <div class="h-full rounded-full transition-all duration-500"
                                             :class="comp.color"
                                             :style="'width: ' + ((item.components?.[comp.key] || 0) / comp.max * 100) + '%'"></div>
                                    </div>
                                    <span class="text-[10px] text-gray-400 tabular-nums w-10 text-right"
                                          x-text="fmt(item.components?.[comp.key], 0) + '/' + comp.max"></span>
                                </div>
                            </template>
                        </div>
                    </div>

                    <!-- Price Levels -->
                    <div class="px-5 pb-4 border-t border-gray-800 pt-3">
                        <div class="grid grid-cols-3 gap-3 text-center">
                            <div>
                                <p class="text-[10px] text-gray-500">Entry</p>
                                <p class="text-xs font-semibold text-orange-300 tabular-nums mt-0.5" x-text="fmtPrice(item.entry_price)"></p>
                            </div>
                            <div>
                                <p class="text-[10px] text-gray-500">Target</p>
                                <p class="text-xs font-semibold text-emerald-400 tabular-nums mt-0.5" x-text="fmtPrice(item.target_price)"></p>
                            </div>
                            <div>
                                <p class="text-[10px] text-gray-500">Stop Loss</p>
                                <p class="text-xs font-semibold text-red-400 tabular-nums mt-0.5" x-text="fmtPrice(item.stop_loss_price)"></p>
                            </div>
                        </div>
                        <!-- Context -->
                        <div class="flex items-center gap-3 mt-2 text-[10px] text-gray-500">
                            <span>RSI: <span class="text-gray-300 tabular-nums" x-text="fmt(item.rsi, 0)"></span></span>
                            <span>Z: <span class="text-gray-300 tabular-nums" x-text="fmt(item.zscore, 2)"></span></span>
                            <span>ATR: <span class="text-gray-300 tabular-nums" x-text="fmt(item.atr_pct, 1) + '%'"></span></span>
                            <span x-text="item.momentum_state || ''"></span>
                        </div>
                    </div>
                </div>
            </template>
        </div>

        <!-- Load More -->
        <div x-show="hasMore" class="flex justify-center pt-6">
            <button @click="loadMore()" :disabled="loading"
                    class="px-6 py-2.5 text-sm font-medium rounded-lg transition"
                    :class="loading ? 'bg-gray-800 text-gray-500' : 'bg-orange-600/20 hover:bg-orange-600/30 text-orange-400 border border-orange-700/50'">
                <span x-show="!loading">Load More</span>
                <span x-show="loading" class="flex items-center gap-2">
                    <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>
</div>
{% endblock %}

{% block scripts %}
<script>
function riskRewardMatrixPanel() {
    return {
        items: [], total: 0, loading: false, error: null, hasMore: false,
        stats: {}, page: 1, lastRefresh: null,
        filters: { grade: 'all', asset_type: '{{ asset_mode }}', sort: 'rr_desc' },
        maxRewardRisk: 30,
        componentList: [
            { key: 'rr_quality', label: 'R:R Quality', max: 35, color: 'bg-orange-500' },
            { key: 'signal_confidence', label: 'Signal Conf.', max: 25, color: 'bg-blue-500' },
            { key: 'technical_setup', label: 'Tech Setup', max: 20, color: 'bg-purple-500' },
            { key: 'historical_perf', label: 'Historical', max: 10, color: 'bg-emerald-500' },
            { key: 'risk_assessment', label: 'Risk Assess', max: 10, color: 'bg-amber-500' },
        ],

        async fetchData() {
            this.loading = true; this.error = null;
            try {
                const params = new URLSearchParams({
                    asset_type: this.filters.asset_type,
                    grade_filter: this.filters.grade,
                    sort_by: this.filters.sort,
                    limit: '20',
                    page: this.page,
                });
                const r = await fetch(`/api/v1/market/screener/risk-reward?${params}`);
                if (r.redirected) { window.location.href = '/auth/login'; return; }
                if (!r.ok) throw new Error(`HTTP ${r.status}`);
                const d = await r.json();
                if (d.error) { this.error = d.error; return; }
                if (this.page === 1) {
                    this.items = d.items || [];
                } else {
                    this.items = this.items.concat(d.items || []);
                }
                this.total = d.total || 0;
                this.hasMore = d.has_more || false;
                this.stats = d.stats || {};
                this.lastRefresh = new Date().toLocaleTimeString('id-ID');
                this.updateMaxRR();
            } catch(e) {
                this.error = e.message;
            } finally {
                this.loading = false;
            }
        },

        loadMore() {
            if (this.hasMore && !this.loading) {
                this.page++;
                this.fetchData();
            }
        },

        updateMaxRR() {
            let m = 30;
            for (const item of this.items) {
                if (item.reward_pct > m) m = item.reward_pct;
                if (item.risk_pct > m) m = item.risk_pct;
            }
            this.maxRewardRisk = m || 30;
        },

        gradeBg(grade) {
            const m = {
                'A+': 'bg-orange-600/80 text-white',
                'A': 'bg-orange-700/60 text-orange-200',
                'B': 'bg-amber-800/50 text-amber-300',
                'C': 'bg-gray-700/60 text-gray-300',
                'D': 'bg-gray-800/60 text-gray-500',
            };
            return m[grade] || 'bg-gray-800 text-gray-400';
        },

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