{% extends "base.html" %}
{% block title %}Capital Allocator{% endblock %}

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

    <!-- ═══════════════════════════════════════════════════════════
         A. HEADER + CONTROLS
         ═══════════════════════════════════════════════════════════ -->
    <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">
                    <svg class="w-7 h-7 text-koin-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971z"/>
                    </svg>
                    Capital Allocator
                </h1>
                <p class="text-sm text-gray-500 mt-0.5">Sharpe-weighted intraday capital allocation &mdash; optimal position sizing berdasarkan risk-adjusted return.</p>
            </div>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         B. CONTROLS ROW
         ═══════════════════════════════════════════════════════════ -->
    <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
        <div class="flex flex-wrap items-end gap-4">
            <!-- Asset Type -->
            <div class="space-y-1.5">
                <label class="text-xs text-gray-500 uppercase tracking-wider">Asset Type</label>
                <select x-model="params.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 focus:border-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>

            <!-- 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="params.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-48 focus:outline-none focus:ring-1 focus:ring-koin-500 focus:border-koin-500"
                       placeholder="10,000,000">
            </div>

            <!-- Max Positions -->
            <div class="space-y-1.5">
                <label class="text-xs text-gray-500 uppercase tracking-wider">Max Positions</label>
                <div class="flex gap-1.5">
                    <template x-for="n in [5, 10, 15, 20]" :key="n">
                        <button @click="params.max_pos = n"
                                class="px-3 py-1.5 text-sm font-medium rounded-lg border transition"
                                :class="params.max_pos === n
                                    ? 'bg-koin-600 border-koin-500 text-white shadow-lg shadow-koin-900/30'
                                    : 'bg-gray-800 border-gray-700 text-gray-400 hover:text-gray-300 hover:border-gray-600'"
                                x-text="n">
                        </button>
                    </template>
                </div>
            </div>

            <!-- Period -->
            <div class="space-y-1.5">
                <label class="text-xs text-gray-500 uppercase tracking-wider">Period</label>
                <div class="flex gap-1.5">
                    <template x-for="d in [7, 14, 30, 60]" :key="d">
                        <button @click="params.period = d"
                                class="px-3 py-1.5 text-sm font-medium rounded-lg border transition"
                                :class="params.period === d
                                    ? 'bg-koin-600 border-koin-500 text-white shadow-lg shadow-koin-900/30'
                                    : 'bg-gray-800 border-gray-700 text-gray-400 hover:text-gray-300 hover:border-gray-600'"
                                x-text="d + 'd'">
                        </button>
                    </template>
                </div>
            </div>

            <!-- Refresh Button -->
            <button @click="fetchData()" :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 ? 'Calculating...' : 'Refresh'"></span>
            </button>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         C. 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 Sharpe-weighted capital allocation...</p>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         D. EMPTY STATE
         ═══════════════════════════════════════════════════════════ -->
    <div x-show="!loading && allocations.length === 0 && !error" 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="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971z"/>
        </svg>
        <p class="text-gray-400 mt-4 text-sm font-medium">Tidak ada data alokasi tersedia</p>
        <p class="text-gray-600 text-xs mt-1">Pastikan ada cukup data historis untuk periode yang dipilih. Coba perbesar periode atau ubah tipe aset.</p>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         E. ERROR STATE
         ═══════════════════════════════════════════════════════════ -->
    <div x-show="!loading && error" x-cloak
         class="bg-red-900/20 border border-red-800 rounded-xl p-4 text-sm text-red-300 flex items-center gap-2">
        <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
        <span x-text="error"></span>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         F. PORTFOLIO SUMMARY CARDS
         ═══════════════════════════════════════════════════════════ -->
    <div x-show="!loading && allocations.length > 0" x-cloak class="space-y-5">

        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
            <!-- Total Allocated -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 text-center">
                <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Total Allocated</p>
                <p class="text-lg font-bold text-white" x-text="formatRp(summary.total_allocated)"></p>
                <p class="text-[10px] text-gray-500 mt-0.5" x-text="pct(summary.allocation_pct) + ' of capital'"></p>
            </div>

            <!-- Positions Count -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 text-center">
                <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Positions</p>
                <p class="text-lg font-bold text-koin-400" x-text="summary.positions_count || 0"></p>
                <p class="text-[10px] text-gray-500 mt-0.5" x-text="'of ' + params.max_pos + ' max'"></p>
            </div>

            <!-- Portfolio Sharpe -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 text-center">
                <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Portfolio Sharpe</p>
                <p class="text-lg font-bold"
                   :class="(summary.portfolio_sharpe || 0) >= 1 ? 'text-emerald-400' : (summary.portfolio_sharpe || 0) >= 0.5 ? 'text-amber-400' : 'text-red-400'"
                   x-text="(summary.portfolio_sharpe || 0).toFixed(2)"></p>
                <p class="text-[10px] mt-0.5"
                   :class="(summary.portfolio_sharpe || 0) >= 1 ? 'text-emerald-600' : (summary.portfolio_sharpe || 0) >= 0.5 ? 'text-amber-600' : 'text-red-600'"
                   x-text="(summary.portfolio_sharpe || 0) >= 1.5 ? 'Excellent' : (summary.portfolio_sharpe || 0) >= 1 ? 'Good' : (summary.portfolio_sharpe || 0) >= 0.5 ? 'Fair' : 'Poor'"></p>
            </div>

            <!-- Concentration (HHI) -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 text-center">
                <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Concentration (HHI)</p>
                <p class="text-lg font-bold"
                   :class="(summary.hhi || 0) <= 1500 ? 'text-emerald-400' : (summary.hhi || 0) <= 2500 ? 'text-amber-400' : 'text-red-400'"
                   x-text="(summary.hhi || 0).toLocaleString('id-ID')"></p>
                <p class="text-[10px] mt-0.5"
                   :class="(summary.hhi || 0) <= 1500 ? 'text-emerald-600' : (summary.hhi || 0) <= 2500 ? 'text-amber-600' : 'text-red-600'"
                   x-text="(summary.hhi || 0) <= 1500 ? 'Diversified' : (summary.hhi || 0) <= 2500 ? 'Moderate' : 'Concentrated'"></p>
            </div>

            <!-- Top Holding % -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 text-center">
                <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Top Holding</p>
                <p class="text-lg font-bold text-white" x-text="pct(summary.top_holding_pct)"></p>
                <p class="text-[10px] text-gray-500 mt-0.5 truncate" x-text="summary.top_holding_symbol || '-'"></p>
            </div>
        </div>

        <!-- ═══════════════════════════════════════════════════════════
             G. EFFICIENT FRONTIER MINI-CHART
             ═══════════════════════════════════════════════════════════ -->
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-sm font-semibold text-white 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="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"/></svg>
                    Efficient Frontier
                </h3>
                <span class="text-[10px] text-gray-500">Simulated portfolios: equal-weight to concentrated</span>
            </div>
            <div class="relative w-full" style="height: 220px;">
                <!-- Y-axis label -->
                <div class="absolute left-0 top-0 bottom-6 w-10 flex flex-col items-end justify-between pr-1 text-[9px] text-gray-600">
                    <span x-text="pct(frontier.max_return)"></span>
                    <span x-text="pct((frontier.max_return + frontier.min_return) / 2)"></span>
                    <span x-text="pct(frontier.min_return)"></span>
                </div>
                <!-- Chart area -->
                <div class="absolute left-11 right-0 top-0 bottom-6 border-l border-b border-gray-700 overflow-hidden">
                    <!-- Grid lines -->
                    <div class="absolute inset-0">
                        <div class="absolute w-full border-t border-gray-800/50" style="top: 25%"></div>
                        <div class="absolute w-full border-t border-gray-800/50" style="top: 50%"></div>
                        <div class="absolute w-full border-t border-gray-800/50" style="top: 75%"></div>
                        <div class="absolute h-full border-l border-gray-800/50" style="left: 25%"></div>
                        <div class="absolute h-full border-l border-gray-800/50" style="left: 50%"></div>
                        <div class="absolute h-full border-l border-gray-800/50" style="left: 75%"></div>
                    </div>
                    <!-- Simulated portfolio dots -->
                    <template x-for="(pt, idx) in frontier.points || []" :key="idx">
                        <div class="absolute rounded-full transition-all duration-300"
                             :class="pt.is_optimal
                                 ? 'bg-koin-400 ring-2 ring-koin-400/30 w-3 h-3 z-10'
                                 : pt.is_equal
                                     ? 'bg-amber-400 ring-2 ring-amber-400/30 w-3 h-3 z-10'
                                     : 'bg-gray-600 hover:bg-gray-400 w-2 h-2'"
                             :style="'left: ' + frontierX(pt.risk) + '%; bottom: ' + frontierY(pt.expected_return) + '%'"
                             :title="(pt.label || 'Portfolio') + ': Return ' + pct(pt.expected_return) + ', Risk ' + pct(pt.risk)">
                        </div>
                    </template>
                    <!-- Current allocation marker -->
                    <div x-show="frontier.current"
                         class="absolute w-4 h-4 rounded-full bg-emerald-500 ring-2 ring-emerald-400/40 z-20 flex items-center justify-center"
                         :style="'left: calc(' + frontierX(frontier.current?.risk || 0) + '% - 8px); bottom: calc(' + frontierY(frontier.current?.expected_return || 0) + '% - 8px)'"
                         :title="'Current: Return ' + pct(frontier.current?.expected_return) + ', Risk ' + pct(frontier.current?.risk)">
                        <div class="w-1.5 h-1.5 rounded-full bg-white"></div>
                    </div>
                </div>
                <!-- X-axis label -->
                <div class="absolute left-11 right-0 bottom-0 flex justify-between text-[9px] text-gray-600">
                    <span x-text="pct(frontier.min_risk)"></span>
                    <span class="text-center">Risk (Volatility)</span>
                    <span x-text="pct(frontier.max_risk)"></span>
                </div>
            </div>
            <!-- Legend -->
            <div class="flex items-center gap-4 mt-2 text-[10px] text-gray-500">
                <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-emerald-500 inline-block"></span> Current Allocation</span>
                <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-koin-400 inline-block"></span> Optimal (Max Sharpe)</span>
                <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-amber-400 inline-block"></span> Equal Weight</span>
                <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-gray-600 inline-block"></span> Simulated</span>
            </div>
        </div>

        <!-- ═══════════════════════════════════════════════════════════
             H. ALLOCATION TABLE / CARDS
             ═══════════════════════════════════════════════════════════ -->
        <div>
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-sm font-semibold text-white 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 Breakdown
                    <span class="text-xs text-gray-500 font-normal" x-text="'(' + allocations.length + ' positions)'"></span>
                </h3>
                <!-- Sort toggle -->
                <div class="flex gap-1 text-[10px]">
                    <button @click="sortBy = 'target_pct'" class="px-2 py-1 rounded transition"
                            :class="sortBy === 'target_pct' ? 'bg-gray-700 text-white' : 'text-gray-500 hover:text-gray-300'">By Weight</button>
                    <button @click="sortBy = 'sharpe'" class="px-2 py-1 rounded transition"
                            :class="sortBy === 'sharpe' ? 'bg-gray-700 text-white' : 'text-gray-500 hover:text-gray-300'">By Sharpe</button>
                    <button @click="sortBy = 'action'" class="px-2 py-1 rounded transition"
                            :class="sortBy === 'action' ? 'bg-gray-700 text-white' : 'text-gray-500 hover:text-gray-300'">By Action</button>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
                <template x-for="a in sortedAllocations" :key="a.coin_symbol">
                    <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 hover:border-gray-700 transition group">
                        <!-- Top: Symbol, Name, Action Badge -->
                        <div class="flex items-start justify-between mb-3">
                            <div class="flex items-center gap-2.5 min-w-0">
                                <img :src="'/static/icons/' + (__itemLabelLower === 'coin' ? 'coins' : 'stocks') + '/' + a.coin_symbol + '.png'"
                                     :data-symbol="a.coin_symbol"
                                     onerror="__iconError(this)"
                                     class="w-8 h-8 rounded-full bg-gray-800 flex-shrink-0"
                                     :alt="a.coin_symbol">
                                <div class="min-w-0">
                                    <div class="flex items-center gap-2">
                                        <span class="text-white font-bold text-sm" x-text="a.coin_symbol"></span>
                                        <span class="text-[10px] text-gray-600 font-mono" x-text="'#' + a.rank"></span>
                                    </div>
                                    <p class="text-xs text-gray-500 truncate max-w-[160px]" x-text="a.coin_name || a.coin_symbol"></p>
                                </div>
                            </div>
                            <!-- Action Badge -->
                            <span class="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider flex-shrink-0"
                                  :class="{
                                      'bg-emerald-900/50 text-emerald-300 ring-1 ring-emerald-800': a.action === 'INCREASE',
                                      'bg-red-900/50 text-red-300 ring-1 ring-red-800': a.action === 'DECREASE',
                                      'bg-gray-800 text-gray-400 ring-1 ring-gray-700': a.action === 'HOLD',
                                      'bg-rose-900/50 text-rose-300 ring-1 ring-rose-800': a.action === 'EXIT',
                                      'bg-koin-900/50 text-koin-300 ring-1 ring-koin-800': a.action === 'NEW'
                                  }"
                                  x-text="a.action"></span>
                        </div>

                        <!-- Target Allocation: Big Number -->
                        <div class="flex items-end justify-between mb-3">
                            <div>
                                <p class="text-3xl font-black text-white leading-none" x-text="pct(a.target_pct)"></p>
                                <p class="text-xs text-gray-500 mt-1">target weight</p>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-bold text-koin-400" x-text="formatRp(a.target_amount)"></p>
                                <p class="text-[10px] text-gray-600">allocation amount</p>
                            </div>
                        </div>

                        <!-- Allocation bar -->
                        <div class="w-full bg-gray-800 rounded-full h-2 mb-3">
                            <div class="h-2 rounded-full transition-all duration-500"
                                 :class="a.action === 'EXIT' ? 'bg-rose-500' : a.action === 'DECREASE' ? 'bg-red-500' : 'bg-koin-500'"
                                 :style="'width: ' + Math.min(100, (a.target_pct || 0)) + '%'"></div>
                        </div>

                        <!-- Metrics Grid -->
                        <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-xs mb-3">
                            <!-- Sharpe Ratio -->
                            <div>
                                <p class="text-[10px] text-gray-600 uppercase tracking-wider">Sharpe</p>
                                <div class="flex items-center gap-2 mt-0.5">
                                    <span class="font-bold"
                                          :class="(a.sharpe || 0) >= 1 ? 'text-emerald-400' : (a.sharpe || 0) >= 0 ? 'text-amber-400' : 'text-red-400'"
                                          x-text="(a.sharpe || 0).toFixed(2)"></span>
                                    <div class="flex-1 bg-gray-800 rounded-full h-1.5">
                                        <div class="h-1.5 rounded-full transition-all duration-300"
                                             :class="(a.sharpe || 0) >= 1 ? 'bg-emerald-500' : (a.sharpe || 0) >= 0 ? 'bg-amber-500' : 'bg-red-500'"
                                             :style="'width: ' + Math.min(100, Math.max(0, ((a.sharpe || 0) + 1) / 4 * 100)) + '%'"></div>
                                    </div>
                                </div>
                            </div>

                            <!-- Win Rate -->
                            <div>
                                <p class="text-[10px] text-gray-600 uppercase tracking-wider">Win Rate</p>
                                <div class="flex items-center gap-2 mt-0.5">
                                    <span class="font-bold"
                                          :class="(a.win_rate || 0) >= 55 ? 'text-emerald-400' : (a.win_rate || 0) >= 45 ? 'text-amber-400' : 'text-red-400'"
                                          x-text="pct(a.win_rate)"></span>
                                    <div class="flex-1 bg-gray-800 rounded-full h-1.5">
                                        <div class="h-1.5 rounded-full transition-all duration-300"
                                             :class="(a.win_rate || 0) >= 55 ? 'bg-emerald-500' : (a.win_rate || 0) >= 45 ? 'bg-amber-500' : 'bg-red-500'"
                                             :style="'width: ' + Math.min(100, (a.win_rate || 0)) + '%'"></div>
                                    </div>
                                </div>
                            </div>

                            <!-- Avg Return -->
                            <div>
                                <p class="text-[10px] text-gray-600 uppercase tracking-wider">Avg Return</p>
                                <span class="font-bold"
                                      :class="(a.avg_return || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                      x-text="((a.avg_return || 0) >= 0 ? '+' : '') + (a.avg_return || 0).toFixed(2) + '%'"></span>
                            </div>

                            <!-- Volatility -->
                            <div>
                                <p class="text-[10px] text-gray-600 uppercase tracking-wider">Volatility</p>
                                <span class="font-bold"
                                      :class="(a.volatility || 0) <= 20 ? 'text-emerald-400' : (a.volatility || 0) <= 40 ? 'text-amber-400' : 'text-red-400'"
                                      x-text="(a.volatility || 0).toFixed(1) + '%'"></span>
                            </div>
                        </div>

                        <!-- Momentum + Drawdown row -->
                        <div class="flex items-center justify-between mb-3 py-2 border-t border-gray-800/60">
                            <!-- Momentum indicator -->
                            <div class="flex items-center gap-1.5">
                                <span class="text-[10px] text-gray-600 uppercase tracking-wider">Momentum</span>
                                <div class="flex items-end gap-0.5">
                                    <template x-for="i in 5" :key="i">
                                        <div class="w-1.5 rounded-sm transition-all"
                                             :class="i <= momentumLevel(a.momentum)
                                                 ? ((a.momentum || 0) >= 0 ? 'bg-emerald-500' : 'bg-red-500')
                                                 : 'bg-gray-800'"
                                             :style="'height: ' + (4 + i * 3) + 'px'"></div>
                                    </template>
                                </div>
                                <span class="text-[10px] font-mono"
                                      :class="(a.momentum || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                      x-text="((a.momentum || 0) >= 0 ? '+' : '') + (a.momentum || 0).toFixed(1) + '%'"></span>
                            </div>

                            <!-- Drawdown from peak -->
                            <div class="flex items-center gap-1.5">
                                <span class="text-[10px] text-gray-600 uppercase tracking-wider">Drawdown</span>
                                <span class="text-[10px] font-mono font-bold"
                                      :class="Math.abs(a.drawdown_from_peak || 0) <= 10 ? 'text-emerald-400' : Math.abs(a.drawdown_from_peak || 0) <= 25 ? 'text-amber-400' : 'text-red-400'"
                                      x-text="(a.drawdown_from_peak || 0).toFixed(1) + '%'"></span>
                            </div>
                        </div>

                        <!-- Rationale -->
                        <div x-show="a.rationale" class="border-t border-gray-800/60 pt-2">
                            <p class="text-[10px] text-gray-500 leading-relaxed" x-text="a.rationale"></p>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        <!-- ═══════════════════════════════════════════════════════════
             I. RECOMMENDATIONS
             ═══════════════════════════════════════════════════════════ -->
        <div x-show="(recommendations || []).length > 0" class="space-y-2">
            <h3 class="text-sm font-semibold text-white 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.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>
                Recommendations
            </h3>
            <template x-for="(rec, idx) in recommendations || []" :key="idx">
                <div class="rounded-xl px-4 py-3 text-sm flex items-start gap-2.5"
                     :class="{
                         'bg-emerald-900/20 border border-emerald-800/50 text-emerald-300': rec.type === 'opportunity',
                         'bg-red-900/20 border border-red-800/50 text-red-300': rec.type === 'warning',
                         'bg-blue-900/20 border border-blue-800/50 text-blue-300': rec.type === 'insight',
                         'bg-amber-900/20 border border-amber-800/50 text-amber-300': rec.type === 'rebalance',
                         'bg-gray-800 border border-gray-700 text-gray-300': !rec.type || rec.type === 'info'
                     }">
                    <svg x-show="rec.type === 'opportunity'" class="w-4 h-4 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                    <svg x-show="rec.type === 'warning'" class="w-4 h-4 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
                    <svg x-show="rec.type === 'insight'" class="w-4 h-4 flex-shrink-0 mt-0.5" 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>
                    <svg x-show="rec.type === 'rebalance'" class="w-4 h-4 flex-shrink-0 mt-0.5" 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>
                    <svg x-show="!rec.type || rec.type === 'info'" class="w-4 h-4 flex-shrink-0 mt-0.5" 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>
                    <div>
                        <p x-show="rec.title" class="font-medium text-xs" x-text="rec.title || ''"></p>
                        <p class="text-xs opacity-80 mt-0.5" x-text="rec.message"></p>
                    </div>
                </div>
            </template>
        </div>

        <!-- ═══════════════════════════════════════════════════════════
             J. ALLOCATION WEIGHT DISTRIBUTION BAR
             ═══════════════════════════════════════════════════════════ -->
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
            <h3 class="text-sm font-semibold text-white mb-3">Weight Distribution</h3>
            <div class="flex w-full h-6 rounded-lg overflow-hidden">
                <template x-for="(a, idx) in sortedAllocations" :key="a.coin_symbol + '_bar'">
                    <div class="h-full transition-all duration-300 relative group cursor-default"
                         :style="'width: ' + (a.target_pct || 0) + '%; background-color: ' + barColor(idx)"
                         :title="a.coin_symbol + ': ' + pct(a.target_pct)">
                        <span x-show="(a.target_pct || 0) >= 6"
                              class="absolute inset-0 flex items-center justify-center text-[9px] text-white font-bold drop-shadow"
                              x-text="a.coin_symbol"></span>
                    </div>
                </template>
            </div>
            <div class="flex flex-wrap gap-3 mt-3">
                <template x-for="(a, idx) in sortedAllocations" :key="a.coin_symbol + '_legend'">
                    <div class="flex items-center gap-1.5 text-[10px] text-gray-400">
                        <span class="w-2.5 h-2.5 rounded-sm inline-block" :style="'background-color: ' + barColor(idx)"></span>
                        <span x-text="a.coin_symbol"></span>
                        <span class="text-gray-600" x-text="pct(a.target_pct)"></span>
                    </div>
                </template>
            </div>
        </div>

    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function capitalAllocator() {
    return {
        /* ── State ── */
        loading: false,
        error: '',
        allocations: [],
        summary: {},
        frontier: { points: [], current: null, min_risk: 0, max_risk: 1, min_return: 0, max_return: 1 },
        recommendations: [],
        sortBy: 'target_pct',

        params: {
            asset_type: '{{ asset_mode }}',
            capital: 10000000,
            max_pos: 10,
            period: 30,
        },

        /* ── Computed: sorted allocations ── */
        get sortedAllocations() {
            const arr = [...this.allocations];
            if (this.sortBy === 'target_pct') {
                arr.sort((a, b) => (b.target_pct || 0) - (a.target_pct || 0));
            } else if (this.sortBy === 'sharpe') {
                arr.sort((a, b) => (b.sharpe || 0) - (a.sharpe || 0));
            } else if (this.sortBy === 'action') {
                const order = { 'INCREASE': 0, 'NEW': 1, 'HOLD': 2, 'DECREASE': 3, 'EXIT': 4 };
                arr.sort((a, b) => (order[a.action] ?? 9) - (order[b.action] ?? 9));
            }
            /* assign rank based on target_pct */
            const ranked = [...this.allocations].sort((a, b) => (b.target_pct || 0) - (a.target_pct || 0));
            ranked.forEach((item, i) => { item.rank = i + 1; });
            return arr;
        },

        /* ── Fetch data from API ── */
        async fetchData() {
            this.loading = true;
            this.error = '';
            try {
                const qs = new URLSearchParams({
                    asset_type: this.params.asset_type,
                    capital: this.params.capital,
                    max_pos: this.params.max_pos,
                    period: this.params.period,
                });
                const resp = await fetch('/api/v1/market/capital-allocation?' + qs);
                if (!resp.ok) throw new Error('Server returned ' + resp.status);
                const data = await resp.json();

                this.allocations = data.allocations || [];
                this.summary = data.summary || {};
                this.recommendations = data.recommendations || [];

                /* Build efficient frontier data */
                if (data.frontier) {
                    this.frontier = data.frontier;
                } else {
                    this.buildFrontier();
                }
            } catch (e) {
                this.error = 'Failed to load allocation data: ' + (e.message || 'Unknown error');
                this.allocations = [];
            } finally {
                this.loading = false;
            }
        },

        /* ── Build simulated frontier if API doesn't return one ── */
        buildFrontier() {
            if (this.allocations.length === 0) {
                this.frontier = { points: [], current: null, min_risk: 0, max_risk: 1, min_return: 0, max_return: 1 };
                return;
            }
            const allocs = this.allocations;
            const avgReturn = allocs.reduce((s, a) => s + (a.avg_return || 0), 0) / allocs.length;
            const avgVol = allocs.reduce((s, a) => s + (a.volatility || 0), 0) / allocs.length;
            const points = [];

            /* Simulate portfolios from equal-weight to concentrated */
            for (let concentration = 0; concentration <= 1; concentration += 0.05) {
                const noise = (Math.random() - 0.5) * avgReturn * 0.3;
                const risk = avgVol * (0.6 + concentration * 0.8) + (Math.random() - 0.5) * avgVol * 0.15;
                const ret = avgReturn * (0.8 + concentration * 0.5) + noise;
                points.push({
                    risk: Math.max(0.1, risk),
                    expected_return: ret,
                    is_optimal: false,
                    is_equal: concentration < 0.05,
                    label: concentration < 0.05 ? 'Equal Weight' : 'Sim ' + Math.round(concentration * 100) + '%',
                });
            }

            /* Mark best Sharpe as optimal */
            let bestSharpe = -Infinity;
            let bestIdx = 0;
            points.forEach((pt, i) => {
                const s = pt.risk > 0 ? pt.expected_return / pt.risk : 0;
                if (s > bestSharpe) { bestSharpe = s; bestIdx = i; }
            });
            if (points[bestIdx]) points[bestIdx].is_optimal = true;

            /* Current portfolio position */
            const weightedReturn = allocs.reduce((s, a) => s + (a.avg_return || 0) * (a.target_pct || 0) / 100, 0);
            const weightedRisk = allocs.reduce((s, a) => s + (a.volatility || 0) * (a.target_pct || 0) / 100, 0);

            const risks = points.map(p => p.risk);
            const returns = points.map(p => p.expected_return);

            this.frontier = {
                points: points,
                current: { risk: weightedRisk || avgVol * 0.7, expected_return: weightedReturn || avgReturn * 0.9 },
                min_risk: Math.min(...risks, weightedRisk || avgVol * 0.5) * 0.8,
                max_risk: Math.max(...risks, weightedRisk || avgVol) * 1.2,
                min_return: Math.min(...returns, weightedReturn || avgReturn * 0.5) * (Math.min(...returns) >= 0 ? 0.8 : 1.3),
                max_return: Math.max(...returns, weightedReturn || avgReturn) * 1.2,
            };
        },

        /* ── Frontier chart positioning helpers ── */
        frontierX(risk) {
            const range = (this.frontier.max_risk || 1) - (this.frontier.min_risk || 0);
            if (range === 0) return 50;
            return Math.max(2, Math.min(96, ((risk - (this.frontier.min_risk || 0)) / range) * 100));
        },

        frontierY(ret) {
            const range = (this.frontier.max_return || 1) - (this.frontier.min_return || 0);
            if (range === 0) return 50;
            return Math.max(2, Math.min(96, ((ret - (this.frontier.min_return || 0)) / range) * 100));
        },

        /* ── Momentum level (1-5) ── */
        momentumLevel(momentum) {
            const m = Math.abs(momentum || 0);
            if (m >= 10) return 5;
            if (m >= 5) return 4;
            if (m >= 2) return 3;
            if (m >= 0.5) return 2;
            return 1;
        },

        /* ── Bar color palette ── */
        barColor(idx) {
            const colors = [
                '#0ea5e9', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
                '#ec4899', '#06b6d4', '#84cc16', '#f97316', '#6366f1',
                '#14b8a6', '#e879f9', '#22d3ee', '#a3e635', '#fb923c',
                '#818cf8', '#2dd4bf', '#f472b6', '#38bdf8', '#facc15',
            ];
            return colors[idx % colors.length];
        },

        /* ── Formatting helpers ── */
        formatRp(value) {
            if (value == null) return 'Rp 0';
            return 'Rp ' + Number(value).toLocaleString('id-ID');
        },

        pct(value) {
            if (value == null) return '0.0%';
            return Number(value).toFixed(1) + '%';
        },
    };
}
</script>
{% endblock %}