{% extends "base.html" %}
{% block title %}Portfolio Optimizer{% endblock %}

{% block content %}
<div x-data="optimizerPanel()" class="space-y-5">

    <!-- ═══════════════════════════════════════════════════════════
         A. HEADER
         ═══════════════════════════════════════════════════════════ -->
    <div class="flex items-center justify-between flex-wrap gap-3">
        <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">
                    <span class="text-2xl">📈</span>
                    Portfolio Optimizer
                </h1>
                <p class="text-sm text-gray-500 mt-0.5">
                    Optimasi portofolio berbasis Markowitz Mean-Variance &mdash; alokasi aset optimal berdasarkan risk-return trade-off.
                </p>
            </div>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         B. CONTROLS ROW
         ═══════════════════════════════════════════════════════════ -->
    <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 space-y-4">
        <div class="flex flex-wrap items-end gap-4">
            <!-- Risk Profile Buttons -->
            <div class="space-y-1.5">
                <label class="text-xs text-gray-500 uppercase tracking-wider">Risk Profile</label>
                <div class="flex gap-1.5">
                    <button @click="riskProfile = 'conservative'"
                            class="px-3.5 py-1.5 text-sm font-medium rounded-lg border transition"
                            :class="riskProfile === 'conservative'
                                ? 'bg-blue-600 border-blue-500 text-white shadow-lg shadow-blue-900/30'
                                : 'bg-gray-800 border-gray-700 text-gray-400 hover:text-gray-300 hover:border-gray-600'">
                        Conservative
                    </button>
                    <button @click="riskProfile = 'balanced'"
                            class="px-3.5 py-1.5 text-sm font-medium rounded-lg border transition"
                            :class="riskProfile === 'balanced'
                                ? 'bg-amber-600 border-amber-500 text-white shadow-lg shadow-amber-900/30'
                                : 'bg-gray-800 border-gray-700 text-gray-400 hover:text-gray-300 hover:border-gray-600'">
                        Balanced
                    </button>
                    <button @click="riskProfile = 'aggressive'"
                            class="px-3.5 py-1.5 text-sm font-medium rounded-lg border transition"
                            :class="riskProfile === 'aggressive'
                                ? 'bg-red-600 border-red-500 text-white shadow-lg shadow-red-900/30'
                                : 'bg-gray-800 border-gray-700 text-gray-400 hover:text-gray-300 hover:border-gray-600'">
                        Aggressive
                    </button>
                </div>
            </div>

            <!-- Capital Input -->
            <div class="space-y-1.5">
                <label class="text-xs text-gray-500 uppercase tracking-wider">Capital (Rp)</label>
                <input type="number" x-model.number="capital" min="1000000" step="1000000"
                       class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-300 w-44 focus:outline-none focus:ring-1 focus:ring-koin-500 focus:border-koin-500"
                       placeholder="10,000,000">
            </div>

            <!-- Max Assets Slider -->
            <div class="space-y-1.5">
                <label class="text-xs text-gray-500 uppercase tracking-wider">Max Assets: <span class="text-koin-400 font-semibold" x-text="maxAssets"></span></label>
                <input type="range" x-model.number="maxAssets" min="5" max="20" step="1"
                       class="w-32 h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-koin-500">
            </div>

            <!-- Asset Type -->
            <div class="space-y-1.5">
                <label class="text-xs text-gray-500 uppercase tracking-wider">Asset Type</label>
                <select x-model="filters.asset_type"
                        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">Semua Aset</option>
                    <option value="crypto">Kripto</option>
                    <option value="stock">Saham IDX</option>
                    <option value="stock_us">Saham US</option>
                </select>
            </div>

            <!-- Optimize Button -->
            <button @click="optimize()" :disabled="loading"
                    class="flex items-center gap-2 px-5 py-2 text-sm font-medium rounded-lg transition shadow-lg"
                    :class="loading
                        ? 'bg-gray-800 text-gray-500 cursor-not-allowed shadow-none'
                        : 'bg-koin-600 hover:bg-koin-700 text-white shadow-koin-900/30'">
                <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 ? 'Optimizing...' : 'Optimize'"></span>
            </button>
        </div>

        <!-- Info message -->
        <div x-show="message" x-cloak class="text-xs text-gray-500 flex items-center gap-1.5">
            <svg class="w-3.5 h-3.5 text-koin-400 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>
            <span x-text="message"></span>
        </div>
    </div>

    <!-- Loading State -->
    <div x-show="loading" x-cloak class="text-center py-16">
        <svg class="animate-spin h-8 w-8 text-koin-500 mx-auto" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
        </svg>
        <p class="text-gray-500 text-sm mt-3">Menghitung alokasi optimal dengan Markowitz optimization...</p>
    </div>

    <!-- Empty State -->
    <div x-show="!loading && allocations.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.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>
        <h3 class="mt-4 text-lg font-medium text-gray-400">Belum Ada Data Alokasi</h3>
        <p class="mt-2 text-sm text-gray-600 max-w-md mx-auto">
            Klik <strong class="text-koin-400">Optimize</strong> untuk menghitung portofolio optimal, atau pastikan data analisis sudah tersedia melalui
            <a href="/admin/workflow" class="text-koin-400 hover:text-koin-300 underline">Pipeline Workflow</a>.
        </p>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         C. PORTFOLIO METRICS (Comparison Cards)
         ═══════════════════════════════════════════════════════════ -->
    <div x-show="!loading && allocations.length > 0" x-cloak class="space-y-5">

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- Optimal Portfolio Card -->
            <div class="bg-gray-900 border border-koin-800/50 rounded-xl p-5">
                <div class="flex items-center gap-2 mb-4">
                    <div class="w-2.5 h-2.5 rounded-full bg-koin-400 animate-pulse"></div>
                    <h2 class="text-sm font-bold text-white uppercase tracking-wider">Optimal Portfolio</h2>
                    <span class="ml-auto text-xs px-2 py-0.5 rounded-full font-medium"
                          :class="riskColor(riskProfile) + ' bg-opacity-20 text-white'"
                          x-text="riskProfile.charAt(0).toUpperCase() + riskProfile.slice(1)"></span>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div class="bg-gray-800/50 rounded-lg p-3">
                        <p class="text-[10px] text-gray-500 uppercase tracking-wider">Expected Return</p>
                        <p class="text-lg font-bold text-emerald-400 mt-0.5" x-text="pct(metrics.expected_return)"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3">
                        <p class="text-[10px] text-gray-500 uppercase tracking-wider">Risk Score</p>
                        <p class="text-lg font-bold text-amber-400 mt-0.5" x-text="pct(metrics.risk_score)"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3">
                        <p class="text-[10px] text-gray-500 uppercase tracking-wider">Sharpe Ratio</p>
                        <p class="text-lg font-bold text-koin-400 mt-0.5" x-text="(metrics.sharpe_ratio || 0).toFixed(2)"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3">
                        <p class="text-[10px] text-gray-500 uppercase tracking-wider">Diversification</p>
                        <p class="text-lg font-bold text-purple-400 mt-0.5" x-text="pct(metrics.diversification)"></p>
                    </div>
                </div>
            </div>

            <!-- Equal Weight Baseline Card -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
                <div class="flex items-center gap-2 mb-4">
                    <div class="w-2.5 h-2.5 rounded-full bg-gray-500"></div>
                    <h2 class="text-sm font-bold text-gray-400 uppercase tracking-wider">Equal Weight (Baseline)</h2>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div class="bg-gray-800/50 rounded-lg p-3">
                        <p class="text-[10px] text-gray-500 uppercase tracking-wider">Expected Return</p>
                        <div class="flex items-center gap-2 mt-0.5">
                            <p class="text-lg font-bold text-gray-300" x-text="pct(equalMetrics.expected_return)"></p>
                            <span class="text-xs font-semibold"
                                  :class="deltaColor(metrics.expected_return, equalMetrics.expected_return, true)"
                                  x-text="deltaArrow(metrics.expected_return, equalMetrics.expected_return)"></span>
                        </div>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3">
                        <p class="text-[10px] text-gray-500 uppercase tracking-wider">Risk Score</p>
                        <div class="flex items-center gap-2 mt-0.5">
                            <p class="text-lg font-bold text-gray-300" x-text="pct(equalMetrics.risk_score)"></p>
                            <span class="text-xs font-semibold"
                                  :class="deltaColor(metrics.risk_score, equalMetrics.risk_score, false)"
                                  x-text="deltaArrow(metrics.risk_score, equalMetrics.risk_score)"></span>
                        </div>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3">
                        <p class="text-[10px] text-gray-500 uppercase tracking-wider">Sharpe Ratio</p>
                        <div class="flex items-center gap-2 mt-0.5">
                            <p class="text-lg font-bold text-gray-300" x-text="(equalMetrics.sharpe_ratio || 0).toFixed(2)"></p>
                            <span class="text-xs font-semibold"
                                  :class="deltaColor(metrics.sharpe_ratio, equalMetrics.sharpe_ratio, true)"
                                  x-text="deltaArrow(metrics.sharpe_ratio, equalMetrics.sharpe_ratio)"></span>
                        </div>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-3">
                        <p class="text-[10px] text-gray-500 uppercase tracking-wider">Diversification</p>
                        <div class="flex items-center gap-2 mt-0.5">
                            <p class="text-lg font-bold text-gray-300" x-text="pct(equalMetrics.diversification)"></p>
                            <span class="text-xs font-semibold"
                                  :class="deltaColor(metrics.diversification, equalMetrics.diversification, true)"
                                  x-text="deltaArrow(metrics.diversification, equalMetrics.diversification)"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Summary Stats Row -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-3">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Total Aset</p>
                <p class="text-xl font-bold text-white mt-1" x-text="numAssets"></p>
            </div>
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-3">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Total Capital</p>
                <p class="text-xl font-bold text-koin-400 mt-1" x-text="formatRp(capital)"></p>
            </div>
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-3">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Top Allocation</p>
                <p class="text-xl font-bold text-emerald-400 mt-1" x-text="allocations.length ? allocations[0].symbol + ' (' + pct(allocations[0].weight * 100) + ')' : '-'"></p>
            </div>
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-3">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Risk Profile</p>
                <p class="text-xl font-bold mt-1" :class="riskProfile === 'conservative' ? 'text-blue-400' : riskProfile === 'balanced' ? 'text-amber-400' : 'text-red-400'"
                   x-text="riskProfile.charAt(0).toUpperCase() + riskProfile.slice(1)"></p>
            </div>
        </div>

        <!-- ═══════════════════════════════════════════════════════════
             D. ALLOCATION CHART (CSS Horizontal Bars)
             ═══════════════════════════════════════════════════════════ -->
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
            <h2 class="text-sm font-bold text-white uppercase tracking-wider mb-4 flex items-center gap-2">
                <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 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>
                Allocation Chart
            </h2>
            <div class="space-y-2">
                <template x-for="(a, idx) in allocations" :key="a.asset_id || idx">
                    <div class="group flex items-center gap-3">
                        <!-- Asset Name -->
                        <div class="w-28 flex-shrink-0 text-right">
                            <p class="text-xs font-semibold text-gray-300 truncate" x-text="a.symbol"></p>
                        </div>
                        <!-- Bar -->
                        <div class="flex-1 h-7 bg-gray-800 rounded-md overflow-hidden relative">
                            <div class="h-full rounded-md transition-all duration-700 ease-out flex items-center px-2"
                                 :style="'width: ' + barWidth(a.weight)"
                                 :class="a.inclusion_score >= 80 ? 'bg-emerald-600/80' :
                                         a.inclusion_score >= 60 ? 'bg-koin-600/80' :
                                         a.inclusion_score >= 40 ? 'bg-amber-600/80' : 'bg-gray-600/80'">
                                <span class="text-[10px] font-bold text-white whitespace-nowrap"
                                      x-show="a.weight * 100 > 5"
                                      x-text="pct(a.weight * 100)"></span>
                            </div>
                        </div>
                        <!-- Weight % -->
                        <div class="w-14 flex-shrink-0 text-right">
                            <p class="text-xs font-mono text-gray-400" x-text="pct(a.weight * 100)"></p>
                        </div>
                        <!-- Allocation Rp -->
                        <div class="w-32 flex-shrink-0 text-right hidden sm:block">
                            <p class="text-xs font-mono text-gray-500" x-text="formatRp(a.allocation_rp)"></p>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        <!-- ═══════════════════════════════════════════════════════════
             E. ASSET DETAIL CARDS
             ═══════════════════════════════════════════════════════════ -->
        <div>
            <h2 class="text-sm font-bold text-white uppercase tracking-wider mb-3 flex items-center gap-2">
                <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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                Asset Details
                <span class="text-xs font-normal text-gray-500 ml-1" x-text="'(' + numAssets + ' assets)'"></span>
            </h2>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <template x-for="(a, idx) in allocations" :key="a.asset_id || idx">
                    <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 hover:border-gray-700 transition"
                         :style="'animation-delay: ' + (idx * 40) + 'ms'">
                        <!-- Card Header: Name, Symbol, Weight -->
                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center gap-2.5 min-w-0">
                                <div class="w-8 h-8 rounded-full flex-shrink-0 flex items-center justify-center text-xs font-bold"
                                     :class="a.inclusion_score >= 80 ? 'bg-emerald-900/50 text-emerald-400 ring-1 ring-emerald-700' :
                                             a.inclusion_score >= 60 ? 'bg-koin-900/50 text-koin-400 ring-1 ring-koin-700' :
                                             'bg-gray-800 text-gray-400 ring-1 ring-gray-700'"
                                     x-text="(idx + 1)"></div>
                                <div class="min-w-0">
                                    <a :href="'/market/asset/' + a.asset_id"
                                       class="text-sm font-bold text-white hover:text-koin-400 transition truncate block"
                                       x-text="a.name || a.symbol"></a>
                                    <p class="text-[10px] text-gray-500 font-mono" x-text="a.symbol"></p>
                                </div>
                            </div>
                            <div class="text-right flex-shrink-0 ml-3">
                                <p class="text-sm font-bold text-koin-400" x-text="pct(a.weight * 100)"></p>
                                <p class="text-[10px] text-gray-500" x-text="formatRp(a.allocation_rp)"></p>
                            </div>
                        </div>

                        <!-- Metrics Row 1: Return, Risk, Sharpe -->
                        <div class="grid grid-cols-3 gap-2 mb-3">
                            <div class="bg-gray-800/60 rounded-lg p-2">
                                <p class="text-[9px] text-gray-500 uppercase tracking-wider">Exp. Return</p>
                                <p class="text-sm font-bold mt-0.5"
                                   :class="(a.expected_return || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                   x-text="pct(a.expected_return)"></p>
                            </div>
                            <div class="bg-gray-800/60 rounded-lg p-2">
                                <p class="text-[9px] text-gray-500 uppercase tracking-wider">Risk Score</p>
                                <p class="text-sm font-bold text-amber-400 mt-0.5" x-text="pct(a.risk_score)"></p>
                            </div>
                            <div class="bg-gray-800/60 rounded-lg p-2">
                                <p class="text-[9px] text-gray-500 uppercase tracking-wider">Sharpe Est.</p>
                                <p class="text-sm font-bold text-koin-400 mt-0.5" x-text="(a.sharpe_estimate || 0).toFixed(2)"></p>
                            </div>
                        </div>

                        <!-- Badges Row: Bull Score, Signal Score, Success Rate -->
                        <div class="flex flex-wrap items-center gap-1.5 mb-3">
                            <span class="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-semibold rounded-full"
                                  :class="(a.bull_score || 0) >= 70 ? 'bg-emerald-900/40 text-emerald-400 ring-1 ring-emerald-800' :
                                          (a.bull_score || 0) >= 40 ? 'bg-amber-900/40 text-amber-400 ring-1 ring-amber-800' :
                                          'bg-red-900/40 text-red-400 ring-1 ring-red-800'">
                                <span>Bull</span>
                                <span x-text="(a.bull_score || 0).toFixed(0)"></span>
                            </span>
                            <span class="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-semibold rounded-full"
                                  :class="(a.signal_score || 0) >= 70 ? 'bg-emerald-900/40 text-emerald-400 ring-1 ring-emerald-800' :
                                          (a.signal_score || 0) >= 40 ? 'bg-amber-900/40 text-amber-400 ring-1 ring-amber-800' :
                                          'bg-gray-800 text-gray-400 ring-1 ring-gray-700'">
                                <span>Signal</span>
                                <span x-text="(a.signal_score || 0).toFixed(0)"></span>
                            </span>
                            <span class="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-semibold rounded-full"
                                  :class="(a.success_rate || 0) >= 60 ? 'bg-purple-900/40 text-purple-400 ring-1 ring-purple-800' :
                                          'bg-gray-800 text-gray-400 ring-1 ring-gray-700'">
                                <span>Win</span>
                                <span x-text="pct(a.success_rate)"></span>
                            </span>
                            <span x-show="a.inclusion_score != null"
                                  class="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-semibold rounded-full bg-koin-900/40 text-koin-400 ring-1 ring-koin-800">
                                <span>Inc.</span>
                                <span x-text="(a.inclusion_score || 0).toFixed(0)"></span>
                            </span>
                        </div>

                        <!-- Current Price -->
                        <div class="flex items-center justify-between pt-2 border-t border-gray-800/60">
                            <span class="text-[10px] text-gray-500 uppercase tracking-wider">Current Price</span>
                            <span class="text-xs font-mono font-semibold text-gray-300" x-text="formatRp(a.current_price)"></span>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function optimizerPanel() {
    return {
        allocations: [],
        metrics: {},
        equalMetrics: {},
        loading: false,
        riskProfile: 'balanced',
        capital: 10000000,
        maxAssets: 10,
        filters: { asset_type: '{{ asset_mode }}' },
        numAssets: 0,
        message: '',

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

        async optimize() {
            this.loading = true;
            this.message = '';
            try {
                const params = new URLSearchParams({
                    risk: this.riskProfile,
                    capital: this.capital,
                    max_assets: this.maxAssets,
                    asset_type: this.filters.asset_type,
                });
                const r = await fetch('/api/v1/market/portfolio/optimize?' + params);
                const data = await r.json();
                this.allocations = data.allocations || [];
                this.metrics = data.portfolio_metrics || {};
                this.equalMetrics = data.equal_weight_metrics || {};
                this.numAssets = data.num_assets || 0;
                this.message = data.message || '';
            } catch (e) {
                this.message = 'Error: ' + (e.message || 'Failed to fetch optimization data');
                this.allocations = [];
            } finally {
                this.loading = false;
            }
        },

        formatRp(v) {
            return 'Rp ' + Number(v || 0).toLocaleString('id-ID');
        },

        pct(v) {
            return (v || 0).toFixed(1) + '%';
        },

        riskColor(p) {
            return {
                conservative: 'bg-blue-500',
                balanced: 'bg-amber-500',
                aggressive: 'bg-red-500',
            }[p] || 'bg-gray-500';
        },

        barWidth(weight) {
            return Math.max(weight * 100, 2) + '%';
        },

        deltaArrow(optimal, baseline) {
            if (!optimal || !baseline) return '';
            return optimal > baseline ? '↑' : optimal < baseline ? '↓' : '=';
        },

        deltaColor(optimal, baseline, higherIsBetter) {
            if (!optimal || !baseline) return 'text-gray-400';
            const better = higherIsBetter ? optimal > baseline : optimal < baseline;
            return better ? 'text-emerald-400' : 'text-red-400';
        },
    }
}
</script>
{% endblock %}