{% extends "base.html" %}
{% block title %}Compound Growth Simulator{% endblock %}

{% block content %}
<div x-data="compoundGrowthSimPanel()" 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="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"/>
                        </svg>
                    </div>
                    Compound Growth Simulator
                </h1>
                <p class="text-sm text-gray-400 mt-0.5">Project compound growth potential from historical cycling data per asset</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 Assets</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">Hyper Growth</p>
            <p class="text-2xl font-bold text-orange-400 mt-1" x-text="stats.hyper_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 Monthly</p>
            <p class="text-2xl font-bold text-emerald-400 mt-1" x-text="stats.avg_monthly_compound != null ? fmt(stats.avg_monthly_compound, 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 Compound</p>
            <p class="text-lg font-bold text-orange-300 mt-1" x-text="stats.best_compound_symbol || '-'"></p>
        </div>
    </div>

    <!-- Filters Row -->
    <div class="flex flex-wrap items-center gap-3">
        <select x-model="filters.growth" @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 Tier</option>
            <option value="hyper">Hyper Growth (>=80)</option>
            <option value="high">High Growth (>=60)</option>
            <option value="moderate">Moderate (>=40)</option>
            <option value="low">Low Growth (<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="score_desc">Score Tertinggi</option>
            <option value="monthly_desc">Monthly Yield</option>
            <option value="daily_desc">Daily Yield</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="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"/>
        </svg>
        <h3 class="mt-4 text-lg font-medium text-gray-400">Belum Ada Data Compound Growth</h3>
        <p class="mt-2 text-sm text-gray-600">Tidak ada aset dengan data cycling 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 + ' aset'"></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>
                            <!-- Growth Tier Badge + Score -->
                            <div class="flex items-center gap-2 flex-shrink-0 ml-3">
                                <span class="px-2.5 py-1 text-[10px] font-black rounded-lg uppercase tracking-wider"
                                      :class="tierBg(item.growth_tier)" x-text="tierLabel(item.growth_tier)"></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>
                        <!-- Price + 7d/30d change -->
                        <div class="mt-2 flex items-center gap-3 text-xs">
                            <span class="text-gray-400" x-text="fmtPrice(item.current_price_idr)"></span>
                            <span :class="(item.price_change_7d || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                  x-text="(item.price_change_7d >= 0 ? '+' : '') + fmt(item.price_change_7d, 1) + '% 7d'"></span>
                            <span :class="(item.price_change_30d || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                  x-text="(item.price_change_30d >= 0 ? '+' : '') + fmt(item.price_change_30d, 1) + '% 30d'"></span>
                        </div>
                    </div>

                    <!-- Projected Yields -->
                    <div class="px-5 pb-3">
                        <div class="grid grid-cols-3 gap-3">
                            <div class="bg-gray-800/50 rounded-lg p-2.5 text-center">
                                <p class="text-[10px] text-gray-500 uppercase">Daily Yield</p>
                                <p class="text-sm font-bold tabular-nums mt-0.5"
                                   :class="(item.daily_yield_pct || 0) > 0 ? 'text-emerald-400' : 'text-gray-500'"
                                   x-text="fmt(item.daily_yield_pct, 3) + '%'"></p>
                            </div>
                            <div class="bg-orange-900/20 border border-orange-800/30 rounded-lg p-2.5 text-center">
                                <p class="text-[10px] text-orange-400 uppercase font-semibold">Monthly</p>
                                <p class="text-sm font-bold tabular-nums mt-0.5 text-orange-300"
                                   x-text="fmtCompound(item.monthly_compound_pct)"></p>
                            </div>
                            <div class="bg-gray-800/50 rounded-lg p-2.5 text-center">
                                <p class="text-[10px] text-gray-500 uppercase">Yearly</p>
                                <p class="text-sm font-bold tabular-nums mt-0.5"
                                   :class="(item.yearly_compound_pct || 0) > 100 ? 'text-orange-400' : 'text-gray-300'"
                                   x-text="fmtCompound(item.yearly_compound_pct)"></p>
                            </div>
                        </div>
                    </div>

                    <!-- Cycle Stats Row -->
                    <div class="px-5 pb-3">
                        <p class="text-[10px] text-gray-500 uppercase tracking-wider mb-2">Cycle Statistics</p>
                        <div class="grid grid-cols-4 gap-2 text-center">
                            <div>
                                <p class="text-[10px] text-gray-500">Profit/Cycle</p>
                                <p class="text-xs font-semibold text-emerald-400 tabular-nums mt-0.5" x-text="fmt(item.est_profit_per_cycle, 2) + '%'"></p>
                            </div>
                            <div>
                                <p class="text-[10px] text-gray-500">Success</p>
                                <p class="text-xs font-semibold tabular-nums mt-0.5"
                                   :class="(item.cycle_success_rate || 0) >= 60 ? 'text-emerald-400' : 'text-amber-400'"
                                   x-text="fmt(item.cycle_success_rate, 0) + '%'"></p>
                            </div>
                            <div>
                                <p class="text-[10px] text-gray-500">Cycles/Day</p>
                                <p class="text-xs font-semibold text-orange-300 tabular-nums mt-0.5" x-text="fmt(item.cycles_per_day, 1)"></p>
                            </div>
                            <div>
                                <p class="text-[10px] text-gray-500">Bounce Freq</p>
                                <p class="text-xs font-semibold text-gray-300 tabular-nums mt-0.5" x-text="fmt(item.bounce_frequency, 0)"></p>
                            </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>

                    <!-- Consistency Footer -->
                    <div class="px-5 pb-4 border-t border-gray-800 pt-3">
                        <div class="flex items-center gap-3 flex-wrap text-[10px]">
                            <span class="text-gray-500">RSI Stability: <span class="text-gray-300 tabular-nums" x-text="fmt(item.rsi_stability, 0) + '%'"></span></span>
                            <span x-show="item.is_mean_reverting" class="px-2 py-0.5 font-semibold rounded-full bg-orange-900/40 text-orange-300">Mean Reverting</span>
                            <span class="text-gray-500">MR: <span class="font-semibold" :class="item.mr_confidence === 'HIGH' ? 'text-emerald-400' : item.mr_confidence === 'MEDIUM' ? 'text-amber-400' : 'text-gray-400'" x-text="item.mr_confidence || '-'"></span></span>
                            <span class="text-gray-500">Range: <span class="text-gray-300 tabular-nums" x-text="fmt(item.range_width_pct, 1) + '%'"></span></span>
                            <span class="text-gray-500">Osc: <span class="text-gray-300 tabular-nums" x-text="fmt(item.oscillation_score, 0)"></span></span>
                            <span class="text-gray-500 ml-auto">Vel: <span class="tabular-nums" :class="(item.velocity_short || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'" x-text="fmt(item.velocity_short, 2) + '%'"></span></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 compoundGrowthSimPanel() {
    return {
        items: [], total: 0, loading: false, error: null, hasMore: false,
        stats: {}, page: 1, lastRefresh: null,
        filters: { growth: 'all', asset_type: '{{ asset_mode }}', sort: 'score_desc' },
        componentList: [
            { key: 'cycle_profitability', label: 'Cycle Profit', max: 30, color: 'bg-orange-500' },
            { key: 'frequency', label: 'Frequency', max: 25, color: 'bg-blue-500' },
            { key: 'consistency', label: 'Consistency', max: 20, color: 'bg-purple-500' },
            { key: 'growth_rate', label: 'Growth Rate', max: 15, color: 'bg-emerald-500' },
            { key: 'capital_efficiency', label: 'Cap. Eff.', 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,
                    growth_filter: this.filters.growth,
                    sort_by: this.filters.sort,
                    limit: '20',
                    page: this.page,
                });
                const r = await fetch(`/api/v1/market/screener/compound-growth?${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');
            } catch(e) {
                this.error = e.message;
            } finally {
                this.loading = false;
            }
        },

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

        tierBg(tier) {
            const m = {
                'HYPER_GROWTH': 'bg-orange-600/80 text-white',
                'HIGH_GROWTH': 'bg-orange-700/60 text-orange-200',
                'MODERATE_GROWTH': 'bg-amber-800/50 text-amber-300',
                'LOW_GROWTH': 'bg-gray-700/60 text-gray-300',
            };
            return m[tier] || 'bg-gray-800 text-gray-400';
        },

        tierLabel(tier) {
            const m = {
                'HYPER_GROWTH': 'Hyper',
                'HIGH_GROWTH': 'High',
                'MODERATE_GROWTH': 'Moderate',
                'LOW_GROWTH': 'Low',
            };
            return m[tier] || tier || '-';
        },

        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});
        },

        fmtCompound(v) {
            if (v == null) return '-';
            if (v >= 10000) return Number(v / 1000).toFixed(0) + 'K%';
            if (v >= 1000) return Number(v / 1000).toFixed(1) + 'K%';
            return Number(v).toFixed(1) + '%';
        },
    };
}
</script>
{% endblock %}