{% extends "base.html" %}
{% block title %}Monte Carlo Risk Simulator{% endblock %}

{% block content %}
<div x-data="monteCarloApp()" x-init="init()" class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-white">Monte Carlo Risk Simulator</h1>
            <p class="mt-1 text-sm text-gray-400">Simulasi probabilistik untuk estimasi risiko dan return</p>
        </div>
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-500" x-text="lastRefresh ? 'Last refresh: ' + 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>

    <!-- Controls -->
    <div class="flex flex-wrap items-center gap-3">
        <div>
            <label class="text-xs text-gray-500 block mb-1">Simulation Days</label>
            <select x-model="days" @change="fetchData()"
                    class="bg-gray-800 border border-gray-700 text-gray-300 text-xs rounded-lg px-3 py-1.5">
                <option value="7">7 Days</option>
                <option value="14">14 Days</option>
                <option value="30">30 Days</option>
                <option value="60">60 Days</option>
                <option value="90">90 Days</option>
            </select>
        </div>
        <div>
            <label class="text-xs text-gray-500 block mb-1">Simulations</label>
            <select x-model="simulations" @change="fetchData()"
                    class="bg-gray-800 border border-gray-700 text-gray-300 text-xs rounded-lg px-3 py-1.5">
                <option value="1000">1,000</option>
                <option value="5000">5,000</option>
                <option value="10000">10,000</option>
            </select>
        </div>
    </div>

    <!-- Loading State -->
    <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-400">Running <span x-text="Number(simulations).toLocaleString()"></span> simulations...</p>
        </div>
    </div>

    <!-- Content -->
    <template x-if="!loading && data">
        <div class="space-y-6">
            <!-- Summary Cards -->
            <div class="grid grid-cols-2 md:grid-cols-5 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">VaR 95%</p>
                    <p class="text-2xl font-bold text-red-400 mt-1" x-text="fmt(data.summary?.var_95) + '%'"></p>
                    <p class="text-xs text-gray-600 mt-1">Value at Risk</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">CVaR 95%</p>
                    <p class="text-2xl font-bold text-red-400 mt-1" x-text="fmt(data.summary?.cvar_95) + '%'"></p>
                    <p class="text-xs text-gray-600 mt-1">Expected Shortfall</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">Prob. of Profit</p>
                    <p class="text-2xl font-bold mt-1"
                       :class="(data.summary?.prob_profit || 0) >= 60 ? 'text-emerald-400' : (data.summary?.prob_profit || 0) >= 40 ? 'text-amber-400' : 'text-red-400'"
                       x-text="fmt(data.summary?.prob_profit) + '%'"></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">Prob. of Ruin</p>
                    <p class="text-2xl font-bold text-red-400 mt-1" x-text="fmt(data.summary?.prob_ruin) + '%'"></p>
                    <p class="text-xs text-gray-600 mt-1">Loss > 50%</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">Max DD Median</p>
                    <p class="text-2xl font-bold text-amber-400 mt-1" x-text="fmt(data.summary?.max_dd_median) + '%'"></p>
                </div>
            </div>

            <!-- Price Distribution Visualization -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-6">
                <h2 class="text-lg font-semibold text-white mb-1">Price Distribution Projection</h2>
                <p class="text-sm text-gray-400 mb-6">Projected price percentiles after <span x-text="days"></span> days across <span x-text="Number(simulations).toLocaleString()"></span> simulations</p>

                <template x-if="data.results && data.results.length > 0">
                    <div class="space-y-4">
                        <template x-for="item in data.results.slice(0, 10)" :key="item.symbol">
                            <div class="border border-gray-800 rounded-lg p-4">
                                <div class="flex items-center justify-between mb-3">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-semibold text-white" x-text="item.symbol"></span>
                                        <span class="text-xs text-gray-500">Current: $<span x-text="fmtPrice(item.current_price)"></span></span>
                                    </div>
                                    <span class="text-xs px-2 py-0.5 rounded-full"
                                          :class="riskBadgeClass(item.risk_rating)"
                                          x-text="item.risk_rating || 'N/A'"></span>
                                </div>
                                <!-- Percentile Bars -->
                                <div class="space-y-1.5">
                                    <!-- 90th percentile -->
                                    <div class="flex items-center gap-2">
                                        <span class="text-xs text-gray-500 w-10 text-right">90th</span>
                                        <div class="flex-1 bg-gray-800 rounded-full h-3 relative overflow-hidden">
                                            <div class="h-full rounded-full bg-emerald-500/60"
                                                 :style="'width:' + pctWidth(item, item.p90) + '%'"></div>
                                        </div>
                                        <span class="text-xs font-mono w-20 text-right text-emerald-400" x-text="'$' + fmtPrice(item.p90)"></span>
                                    </div>
                                    <!-- 75th percentile -->
                                    <div class="flex items-center gap-2">
                                        <span class="text-xs text-gray-500 w-10 text-right">75th</span>
                                        <div class="flex-1 bg-gray-800 rounded-full h-3 relative overflow-hidden">
                                            <div class="h-full rounded-full bg-emerald-500/40"
                                                 :style="'width:' + pctWidth(item, item.p75) + '%'"></div>
                                        </div>
                                        <span class="text-xs font-mono w-20 text-right text-emerald-400/70" x-text="'$' + fmtPrice(item.p75)"></span>
                                    </div>
                                    <!-- 50th percentile (median) -->
                                    <div class="flex items-center gap-2">
                                        <span class="text-xs text-koin-400 w-10 text-right font-semibold">50th</span>
                                        <div class="flex-1 bg-gray-800 rounded-full h-4 relative overflow-hidden">
                                            <div class="h-full rounded-full bg-koin-500/60"
                                                 :style="'width:' + pctWidth(item, item.p50) + '%'"></div>
                                        </div>
                                        <span class="text-xs font-mono w-20 text-right text-koin-400 font-semibold" x-text="'$' + fmtPrice(item.p50)"></span>
                                    </div>
                                    <!-- 25th percentile -->
                                    <div class="flex items-center gap-2">
                                        <span class="text-xs text-gray-500 w-10 text-right">25th</span>
                                        <div class="flex-1 bg-gray-800 rounded-full h-3 relative overflow-hidden">
                                            <div class="h-full rounded-full bg-red-500/40"
                                                 :style="'width:' + pctWidth(item, item.p25) + '%'"></div>
                                        </div>
                                        <span class="text-xs font-mono w-20 text-right text-red-400/70" x-text="'$' + fmtPrice(item.p25)"></span>
                                    </div>
                                    <!-- 10th percentile -->
                                    <div class="flex items-center gap-2">
                                        <span class="text-xs text-gray-500 w-10 text-right">10th</span>
                                        <div class="flex-1 bg-gray-800 rounded-full h-3 relative overflow-hidden">
                                            <div class="h-full rounded-full bg-red-500/60"
                                                 :style="'width:' + pctWidth(item, item.p10) + '%'"></div>
                                        </div>
                                        <span class="text-xs font-mono w-20 text-right text-red-400" x-text="'$' + fmtPrice(item.p10)"></span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </template>
            </div>

            <!-- Results Table -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-6">
                <h2 class="text-lg font-semibold text-white mb-4">Simulation Results</h2>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="text-xs text-gray-500 uppercase bg-gray-900/50">
                            <tr>
                                <th class="px-3 py-2 text-left">Symbol</th>
                                <th class="px-3 py-2 text-right">Current Price</th>
                                <th class="px-3 py-2 text-right">Median Projected</th>
                                <th class="px-3 py-2 text-right">VaR 95%</th>
                                <th class="px-3 py-2 text-right">CVaR 95%</th>
                                <th class="px-3 py-2 text-right">Max DD %</th>
                                <th class="px-3 py-2 text-right">Prob. Profit</th>
                                <th class="px-3 py-2 text-right">Prob. Ruin</th>
                                <th class="px-3 py-2 text-right">Best (90th)</th>
                                <th class="px-3 py-2 text-right">Worst (10th)</th>
                                <th class="px-3 py-2 text-center">Risk</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-800">
                            <template x-for="item in data.results || []" :key="item.symbol">
                                <tr class="hover:bg-gray-800/50 transition">
                                    <td class="px-3 py-2.5 text-left">
                                        <span class="font-medium text-white" x-text="item.symbol"></span>
                                    </td>
                                    <td class="px-3 py-2.5 text-right font-mono text-gray-300" x-text="'$' + fmtPrice(item.current_price)"></td>
                                    <td class="px-3 py-2.5 text-right font-mono"
                                        :class="(item.p50 || 0) >= (item.current_price || 0) ? 'text-emerald-400' : 'text-red-400'"
                                        x-text="'$' + fmtPrice(item.p50)"></td>
                                    <td class="px-3 py-2.5 text-right font-mono text-red-400" x-text="fmt(item.var_95) + '%'"></td>
                                    <td class="px-3 py-2.5 text-right font-mono text-red-400" x-text="fmt(item.cvar_95) + '%'"></td>
                                    <td class="px-3 py-2.5 text-right font-mono text-amber-400" x-text="fmt(item.max_dd) + '%'"></td>
                                    <td class="px-3 py-2.5 text-right font-mono"
                                        :class="(item.prob_profit || 0) >= 60 ? 'text-emerald-400' : (item.prob_profit || 0) >= 40 ? 'text-amber-400' : 'text-red-400'"
                                        x-text="fmt(item.prob_profit) + '%'"></td>
                                    <td class="px-3 py-2.5 text-right font-mono text-red-400" x-text="fmt(item.prob_ruin) + '%'"></td>
                                    <td class="px-3 py-2.5 text-right font-mono text-emerald-400" x-text="'$' + fmtPrice(item.p90)"></td>
                                    <td class="px-3 py-2.5 text-right font-mono text-red-400" x-text="'$' + fmtPrice(item.p10)"></td>
                                    <td class="px-3 py-2.5 text-center">
                                        <span class="text-xs px-2 py-0.5 rounded-full"
                                              :class="riskBadgeClass(item.risk_rating)"
                                              x-text="item.risk_rating || '-'"></span>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
                <p x-show="!data.results || data.results.length === 0" class="text-sm text-gray-500 text-center py-8">No simulation data available.</p>
            </div>
        </div>
    </template>

    <!-- Error State -->
    <div x-show="!loading && error" class="bg-red-900/20 border border-red-800 rounded-xl p-6 text-center">
        <p class="text-sm text-red-400" x-text="error"></p>
        <button @click="fetchData()" class="mt-3 px-4 py-1.5 text-xs bg-red-800 hover:bg-red-700 text-red-200 rounded-lg transition">Retry</button>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function monteCarloApp() {
    return {
        asset_type: '{{ asset_mode }}',
        days: '30',
        simulations: '5000',
        loading: false,
        data: null,
        error: null,
        lastRefresh: null,

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

        async fetchData() {
            this.loading = true;
            this.error = null;
            try {
                const resp = await fetch(`/api/v1/market/monte-carlo?asset_type=${this.asset_type}&days=${this.days}&simulations=${this.simulations}`);
                if (resp.redirected) { window.location.href = '/auth/login'; return; }
                const json = await resp.json();
                if (json.error) {
                    this.error = json.error;
                } else {
                    this.data = json;
                }
                this.lastRefresh = new Date().toLocaleTimeString('id-ID');
            } catch (e) {
                this.error = 'Failed to fetch simulation data: ' + e.message;
            }
            this.loading = false;
        },

        fmt(v) {
            if (v == null) return '-';
            return Number(v).toFixed(2);
        },

        fmtPrice(v) {
            if (v == null) return '-';
            const n = Number(v);
            if (n >= 1) return n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            return n.toLocaleString('en-US', { minimumFractionDigits: 4, maximumFractionDigits: 6 });
        },

        pctWidth(item, val) {
            if (!item || val == null || !item.p10 || !item.p90) return 0;
            const min = item.p10 * 0.9;
            const max = item.p90 * 1.1;
            if (max <= min) return 50;
            return Math.max(5, Math.min(100, ((val - min) / (max - min)) * 100));
        },

        riskBadgeClass(rating) {
            const r = (rating || '').toLowerCase();
            if (r === 'low') return 'bg-emerald-900/50 text-emerald-400';
            if (r === 'medium') return 'bg-amber-900/50 text-amber-400';
            if (r === 'high') return 'bg-red-900/50 text-red-400';
            if (r === 'extreme') return 'bg-red-700/50 text-red-300 font-semibold';
            return 'bg-gray-800 text-gray-500';
        },
    };
}
</script>
{% endblock %}