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

{% block content %}
<div class="space-y-6" x-data="portfolioPage()">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-white">Portfolio & Aset</h1>
            <p class="text-sm text-gray-400 mt-1">
                Gabungan seluruh aset crypto dan saham
                <span class="inline-flex items-center ml-2 px-2 py-0.5 rounded-full bg-gray-800 text-[10px] text-gray-400 font-medium border border-gray-700">ALL ASSETS</span>
            </p>
        </div>
        <a href="/api/v1/export/portfolio" class="text-xs text-gray-500 hover:text-koin-400 transition">Export JSON</a>
    </div>

    <!-- Manual Trade Form -->
    <div class="glass rounded-xl border border-gray-800 overflow-hidden">
        <button @click="showTradeForm = !showTradeForm"
                class="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-gray-800/30 transition">
            <span class="text-sm font-semibold text-emerald-400">+ Tambah Trade Manual</span>
            <svg :class="showTradeForm && 'rotate-180'" class="w-4 h-4 text-gray-500 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
        </button>
        <div x-show="showTradeForm" x-transition class="px-4 pb-4 space-y-3 border-t border-gray-800">
            <!-- Coin search -->
            <div class="relative mt-3">
                <label class="text-xs text-gray-500">{{ item_label }}</label>
                <input type="text" x-model="tradeForm.searchQuery"
                       @input.debounce.300ms="searchCoins()"
                       @focus="if(tradeForm.searchQuery.length>=1) searchCoins()"
                       placeholder="Cari coin..."
                       class="w-full mt-1 px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-sm text-white placeholder-gray-600 focus:border-koin-500 focus:outline-none">
                <div x-show="coinResults.length > 0" x-cloak
                     class="absolute z-10 w-full mt-1 bg-gray-900 border border-gray-700 rounded-lg shadow-lg max-h-48 overflow-y-auto">
                    <template x-for="coin in coinResults" :key="coin.id">
                        <button @click="selectCoin(coin)"
                                class="w-full px-3 py-2 text-left text-sm hover:bg-gray-800 flex items-center gap-2">
                            <img :src="coin.icon_thumb_url || (['stock','stock_us'].includes(coin.asset_type) && coin.symbol ? __stockIconUrl(coin.symbol) : '')" :data-symbol="coin.symbol" class="w-4 h-4 rounded-full" loading="lazy" onerror="__iconError(this)" x-show="coin.icon_thumb_url || ['stock','stock_us'].includes(coin.asset_type)">
                            <span class="text-white font-medium" x-text="coin.symbol.toUpperCase()"></span>
                            <span class="text-gray-500 text-xs truncate" x-text="coin.name"></span>
                        </button>
                    </template>
                </div>
                <div x-show="tradeForm.coinId" class="mt-1 text-xs text-koin-400">
                    Selected: <span class="font-medium" x-text="tradeForm.coinSymbol"></span>
                    <button @click="tradeForm.coinId=''; tradeForm.coinSymbol=''; tradeForm.searchQuery=''" class="text-gray-600 hover:text-red-400 ml-1">&times;</button>
                </div>
            </div>

            <!-- Side toggle -->
            <div>
                <label class="text-xs text-gray-500">Side</label>
                <div class="flex gap-2 mt-1">
                    <button @click="tradeForm.side = 'BUY'"
                            :class="tradeForm.side === 'BUY' ? 'bg-emerald-700 text-white' : 'bg-gray-800 text-gray-400'"
                            class="px-4 py-1.5 rounded-lg text-sm font-bold transition">BUY</button>
                    <button @click="tradeForm.side = 'SELL'"
                            :class="tradeForm.side === 'SELL' ? 'bg-red-700 text-white' : 'bg-gray-800 text-gray-400'"
                            class="px-4 py-1.5 rounded-lg text-sm font-bold transition">SELL</button>
                </div>
            </div>

            <!-- Price + Quantity -->
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="text-xs text-gray-500">Harga ({{ currency_code }})</label>
                    <input type="number" x-model.number="tradeForm.price" step="any" min="0"
                           class="w-full mt-1 px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-sm text-white font-mono focus:border-koin-500 focus:outline-none">
                </div>
                <div>
                    <label class="text-xs text-gray-500">Quantity</label>
                    <input type="number" x-model.number="tradeForm.quantity" step="any" min="0"
                           class="w-full mt-1 px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-sm text-white font-mono focus:border-koin-500 focus:outline-none">
                </div>
            </div>

            <!-- Auto-calculated summary -->
            <div x-show="tradeForm.price > 0 && tradeForm.quantity > 0"
                 class="grid grid-cols-3 gap-3 text-xs py-2 px-3 bg-gray-900/50 rounded-lg">
                <div>
                    <span class="text-gray-500">Total:</span>
                    <span class="font-mono text-white" x-text="KK.fmtCurrency(Math.round(tradeForm.price * tradeForm.quantity))"></span>
                </div>
                <div>
                    <span class="text-gray-500">Fee (est):</span>
                    <span class="font-mono text-amber-400" x-text="KK.fmtCurrency(Math.round(tradeForm.price * tradeForm.quantity * 0.0031))"></span>
                </div>
                <div>
                    <span class="text-gray-500">Net:</span>
                    <span class="font-mono text-white" x-text="KK.fmtCurrency(Math.round(tradeForm.side === 'BUY' ? tradeForm.price * tradeForm.quantity * 1.0031 : tradeForm.price * tradeForm.quantity * 0.9969))"></span>
                </div>
            </div>

            <!-- Submit -->
            <button @click="submitTrade()" :disabled="!tradeForm.coinId || !tradeForm.price || !tradeForm.quantity || tradeForm.submitting"
                    class="px-4 py-2 bg-koin-600 hover:bg-koin-700 disabled:opacity-40 disabled:cursor-not-allowed rounded-lg text-sm font-medium text-white transition">
                <span x-show="!tradeForm.submitting">Submit Trade</span>
                <span x-show="tradeForm.submitting">Submitting...</span>
            </button>
        </div>
    </div>

    <!-- Combined Summary Stats -->
    {% if summary.count > 0 %}
    <div class="grid grid-cols-2 md:grid-cols-5 gap-px bg-gray-800 rounded-xl overflow-hidden">
        <div class="bg-gray-950 p-4">
            <p class="text-xs text-gray-500">Total Positions</p>
            <p class="text-lg font-bold text-white">{{ summary.count }}</p>
        </div>
        <div class="bg-gray-950 p-4">
            <p class="text-xs text-gray-500">Total Invested</p>
            <p class="text-lg font-bold text-white font-mono">Rp {{ summary.total_invested|idr }}</p>
            <p class="text-[10px] text-gray-600">IDR (gabungan)</p>
        </div>
        <div class="bg-gray-950 p-4">
            <p class="text-xs text-gray-500">Current Value</p>
            <p class="text-lg font-bold text-white font-mono">Rp {{ summary.total_current|idr }}</p>
        </div>
        <div class="bg-gray-950 p-4">
            <p class="text-xs text-gray-500">Unrealized P&L</p>
            <p class="text-lg font-bold font-mono {% if summary.total_unrealized >= 0 %}text-emerald-400{% else %}text-red-400{% endif %}">
                Rp {{ summary.total_unrealized|sidr }}
                <span class="text-xs font-normal">({{ summary.total_pnl_pct|spct2 }})</span>
            </p>
        </div>
        <div class="bg-gray-950 p-4">
            <p class="text-xs text-gray-500">Realized P&L</p>
            <p class="text-lg font-bold font-mono {% if summary.total_realized >= 0 %}text-emerald-400{% else %}text-red-400{% endif %}">
                Rp {{ summary.total_realized|sidr }}
            </p>
        </div>
    </div>

    <!-- Per-Asset-Type Subtotal Breakdown -->
    {% if subtotals and (subtotals.crypto.count > 0 or subtotals.stock.count > 0 or subtotals.get('stock_us', {}).get('count', 0) > 0) %}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
        {% if subtotals.crypto.count > 0 %}
        <div class="glass rounded-xl border border-gray-800 p-4">
            <div class="flex items-center gap-2 mb-2">
                <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-amber-900/40 text-amber-400 border border-amber-700/40">CRYPTO</span>
                <span class="text-xs text-gray-500">{{ subtotals.crypto.count }} posisi</span>
            </div>
            <div class="grid grid-cols-3 gap-3 text-xs">
                <div>
                    <span class="text-gray-500">Invested</span>
                    <p class="font-mono text-white">Rp {{ subtotals.crypto.invested|idr }}</p>
                </div>
                <div>
                    <span class="text-gray-500">Value</span>
                    <p class="font-mono text-white">Rp {{ subtotals.crypto.current|idr }}</p>
                </div>
                <div>
                    <span class="text-gray-500">Unrealized</span>
                    <p class="font-mono {% if subtotals.crypto.unrealized >= 0 %}text-emerald-400{% else %}text-red-400{% endif %}">
                        Rp {{ subtotals.crypto.unrealized|sidr }}
                        <span class="text-gray-500">({{ subtotals.crypto.pnl_pct|spct2 }})</span>
                    </p>
                </div>
            </div>
        </div>
        {% endif %}
        {% if subtotals.stock.count > 0 %}
        <div class="glass rounded-xl border border-gray-800 p-4">
            <div class="flex items-center gap-2 mb-2">
                <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-blue-900/40 text-blue-400 border border-blue-700/40">SAHAM IDX</span>
                <span class="text-xs text-gray-500">{{ subtotals.stock.count }} posisi</span>
            </div>
            <div class="grid grid-cols-3 gap-3 text-xs">
                <div>
                    <span class="text-gray-500">Invested</span>
                    <p class="font-mono text-white">Rp {{ subtotals.stock.invested|idr }}</p>
                </div>
                <div>
                    <span class="text-gray-500">Value</span>
                    <p class="font-mono text-white">Rp {{ subtotals.stock.current|idr }}</p>
                </div>
                <div>
                    <span class="text-gray-500">Unrealized</span>
                    <p class="font-mono {% if subtotals.stock.unrealized >= 0 %}text-emerald-400{% else %}text-red-400{% endif %}">
                        Rp {{ subtotals.stock.unrealized|sidr }}
                        <span class="text-gray-500">({{ subtotals.stock.pnl_pct|spct2 }})</span>
                    </p>
                </div>
            </div>
        </div>
        {% endif %}
        {% if subtotals.get('stock_us', {}).get('count', 0) > 0 %}
        <div class="glass rounded-xl border border-gray-800 p-4">
            <div class="flex items-center gap-2 mb-2">
                <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-purple-900/40 text-purple-400 border border-purple-700/40">SAHAM US</span>
                <span class="text-xs text-gray-500">{{ subtotals.stock_us.count }} posisi</span>
            </div>
            <div class="grid grid-cols-3 gap-3 text-xs">
                <div>
                    <span class="text-gray-500">Invested</span>
                    <p class="font-mono text-white">$ {{ subtotals.stock_us.invested_usd|idr2 if subtotals.stock_us.invested_usd else subtotals.stock_us.invested|idr }}</p>
                </div>
                <div>
                    <span class="text-gray-500">Value</span>
                    <p class="font-mono text-white">$ {{ subtotals.stock_us.current_usd|idr2 if subtotals.stock_us.current_usd else subtotals.stock_us.current|idr }}</p>
                </div>
                <div>
                    <span class="text-gray-500">Unrealized</span>
                    <p class="font-mono {% if subtotals.stock_us.unrealized >= 0 %}text-emerald-400{% else %}text-red-400{% endif %}">
                        $ {{ subtotals.stock_us.unrealized_usd|idr2 if subtotals.stock_us.unrealized_usd else '0' }}
                        <span class="text-gray-500">({{ subtotals.stock_us.pnl_pct|spct2 }})</span>
                    </p>
                </div>
            </div>
            <p class="text-[10px] text-gray-600 mt-1">~Rp {{ subtotals.stock_us.current|idr }} (IDR equiv.)</p>
        </div>
        {% endif %}
    </div>
    {% endif %}
    {% endif %}

    <!-- Positions Table -->
    {% if portfolio_items %}
    <div class="glass rounded-xl border border-gray-800 overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-800">
            <h2 class="text-lg font-semibold text-white">Posisi Aktif</h2>
        </div>
        <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-4 py-2 text-left">{{ item_label }}</th>
                        <th class="px-4 py-2 text-right">Qty</th>
                        <th class="px-4 py-2 text-right">Avg Buy</th>
                        <th class="px-4 py-2 text-right">Current</th>
                        <th class="px-4 py-2 text-right">Value</th>
                        <th class="px-4 py-2 text-right">Unrealized P&L</th>
                        <th class="px-4 py-2 text-right">Realized P&L</th>
                        <th class="px-4 py-2 text-center">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-800/50">
                    {% for item in portfolio_items %}
                    <tr class="hover:bg-gray-800/30 transition">
                        <td class="px-4 py-2">
                            <a href="/market/asset/{{ item.asset_id }}" class="inline-flex items-center gap-2 text-koin-400 hover:text-koin-300 font-medium">
                                {% set _ic = coin_icon(item.coin) if item.coin else None %}
                                {% if _ic %}
                                <img src="{{ _ic }}" alt="{{ item.asset_id }}" data-symbol="{{ item.asset.symbol if item.coin else '' }}" class="w-5 h-5 rounded-full" loading="lazy" onerror="__iconError(this)">
                                {% else %}
                                <span class="w-5 h-5 rounded-full bg-gray-700 flex items-center justify-center text-[10px] text-gray-400">{{ (item.asset.symbol[:1] if item.coin else '?') }}</span>
                                {% endif %}
                                {{ item.asset.symbol|upper if item.coin else item.asset_id }}
                            </a>
                            {% if item.asset_type == 'stock_us' %}
                            <span class="ml-1 px-1.5 py-0.5 rounded text-[9px] font-bold bg-purple-900/40 text-purple-400 border border-purple-700/40">US</span>
                            {% elif item.asset_type == 'stock' %}
                            <span class="ml-1 px-1.5 py-0.5 rounded text-[9px] font-bold bg-blue-900/40 text-blue-400 border border-blue-700/40">IDX</span>
                            {% else %}
                            <span class="ml-1 px-1.5 py-0.5 rounded text-[9px] font-bold bg-amber-900/40 text-amber-400 border border-amber-700/40">CRYPTO</span>
                            {% endif %}
                        </td>
                        <td class="px-4 py-2 text-right font-mono text-gray-300">{{ item.quantity|idr8 }}</td>
                        {% set cs = '$ ' if item.asset_type == 'stock_us' else 'Rp ' %}
                        <td class="px-4 py-2 text-right font-mono text-gray-400">{{ cs }}{{ item.avg_buy_price|price }}</td>
                        <td class="px-4 py-2 text-right font-mono text-white">{{ cs }}{{ item.current_price|price }}</td>
                        <td class="px-4 py-2 text-right font-mono text-white">{{ cs }}{{ item.current_value|idr }}</td>
                        <td class="px-4 py-2 text-right font-mono {% if item.unrealized_pnl >= 0 %}text-emerald-400{% else %}text-red-400{% endif %}">
                            {{ cs }}{{ item.unrealized_pnl|sidr }}
                            <span class="text-xs">({{ item.pnl_pct|spct2 }})</span>
                        </td>
                        <td class="px-4 py-2 text-right font-mono {% if item.realized_pnl >= 0 %}text-emerald-400{% else %}text-red-400{% endif %}">
                            {{ cs }}{{ item.realized_pnl|sidr }}
                        </td>
                        <td class="px-4 py-2 text-center">
                            <a href="/market/asset/{{ item.asset_id }}?tab=analysis" class="text-xs text-emerald-400 hover:text-emerald-300 mr-2">Analyze</a>
                            <a href="/market/asset/{{ item.asset_id }}?tab=timeline" class="text-xs text-koin-400 hover:text-koin-300 mr-2">Timeline</a>
                            <button @click="deletePosition('{{ item.asset_id }}', '{{ item.asset.symbol|upper if item.coin else item.asset_id }}')"
                                    class="text-gray-600 hover:text-red-400 transition" title="Reset posisi">
                                <svg class="w-3.5 h-3.5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% else %}
    <div class="glass rounded-xl border border-gray-800 p-8 text-center">
        <p class="text-gray-400 text-lg">Belum ada posisi di portofolio</p>
        <p class="text-gray-500 text-sm mt-2">Tambah trade manual di atas, atau generate timeline lalu eksekusi.</p>
        <a href="/timeline/" class="inline-block mt-3 px-4 py-2 bg-koin-600 hover:bg-koin-700 rounded-lg text-sm font-medium text-white transition">
            Go to Timeline
        </a>
    </div>
    {% endif %}

    <!-- Active Buy/Sell Queues -->
    <div class="space-y-4">
        <h2 class="text-lg font-semibold text-white">Antrian Aktif (Belum Dieksekusi)</h2>

        {% if queues_by_coin %}
        {% for asset_id, entries in queues_by_coin.items() %}
        <div class="glass rounded-xl border border-gray-800 overflow-hidden">
            <!-- Coin header -->
            <div class="px-4 py-3 border-b border-gray-800 flex items-center justify-between">
                <div class="flex items-center gap-2">
                    {% set coin = entries[0].coin %}
                    {% set _ic2 = coin_icon(coin) if coin else None %}
                    {% if _ic2 %}
                    <img src="{{ _ic2 }}" alt="" data-symbol="{{ coin.symbol if coin else '' }}" class="w-5 h-5 rounded-full" loading="lazy" onerror="__iconError(this)">
                    {% else %}
                    <span class="w-5 h-5 rounded-full bg-gray-700 flex items-center justify-center text-[10px] text-gray-400">{{ (coin.symbol[:1] if coin else '?') }}</span>
                    {% endif %}
                    <a href="/market/asset/{{ asset_id }}" class="text-koin-400 hover:text-koin-300 font-medium">
                        {{ coin.symbol|upper if coin else asset_id }}
                    </a>
                    {% if coin and coin.asset_type == 'stock_us' %}
                    <span class="px-1.5 py-0.5 rounded text-[9px] font-bold bg-purple-900/40 text-purple-400 border border-purple-700/40">US</span>
                    {% elif coin and coin.asset_type == 'stock' %}
                    <span class="px-1.5 py-0.5 rounded text-[9px] font-bold bg-blue-900/40 text-blue-400 border border-blue-700/40">IDX</span>
                    {% elif coin %}
                    <span class="px-1.5 py-0.5 rounded text-[9px] font-bold bg-amber-900/40 text-amber-400 border border-amber-700/40">CRYPTO</span>
                    {% endif %}
                    <span class="text-xs text-gray-500">{{ coin.name if coin else '' }}</span>
                    <span class="text-xs px-2 py-0.5 rounded-full bg-gray-800 text-gray-400">{{ entries|length }} entries</span>
                </div>
                <span class="text-xs text-gray-500 font-mono">{{ entries[0].prediction_date }}</span>
            </div>
            <!-- Queue entries -->
            <div class="divide-y divide-gray-800/50">
                {% for entry in entries %}
                <div class="px-4 py-3 hover:bg-gray-800/30 transition">
                    <div class="flex items-start gap-3">
                        <!-- Step number -->
                        <div class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold
                            {% if entry.action == 'BUY' %}bg-emerald-900/50 text-emerald-400 border border-emerald-700
                            {% else %}bg-red-900/50 text-red-400 border border-red-700{% endif %}">
                            #{{ entry.sequence_num }}
                        </div>
                        <!-- Entry details -->
                        <div class="flex-1 min-w-0">
                            <div class="flex flex-wrap items-center gap-3 mb-1">
                                <span class="px-2 py-0.5 rounded text-xs font-bold
                                    {% if entry.action == 'BUY' %}bg-emerald-900/50 text-emerald-400
                                    {% else %}bg-red-900/50 text-red-400{% endif %}">
                                    {{ entry.action }}
                                </span>
                                {% set eqs = '$ ' if coin and coin.asset_type == 'stock_us' else 'Rp ' %}
                                <span class="font-mono text-white text-sm">{{ eqs }}{{ entry.predicted_price|price }}</span>
                                <span class="text-xs text-gray-500">x {{ entry.quantity|idr8 }}</span>
                            </div>
                            {% if entry.reason %}
                            <p class="text-xs text-gray-400 mb-1">{{ entry.reason }}</p>
                            {% endif %}
                            <div class="flex flex-wrap gap-4 text-xs">
                                <div>
                                    <span class="text-gray-500">Cash:</span>
                                    <span class="font-mono text-white">{{ eqs }}{{ entry.cash_amount|idr }}</span>
                                </div>
                                <div>
                                    <span class="text-gray-500">Fee:</span>
                                    <span class="font-mono text-amber-400">{{ eqs }}{{ entry.fee_amount|idr }}</span>
                                </div>
                                {% if entry.profit %}
                                <div>
                                    <span class="text-gray-500">Profit:</span>
                                    <span class="font-mono {% if entry.profit > 0 %}text-emerald-400{% else %}text-red-400{% endif %}">
                                        {{ eqs }}{{ entry.profit|sidr }}
                                    </span>
                                </div>
                                {% endif %}
                                {% if entry.confidence %}
                                <div>
                                    <span class="text-gray-500">Confidence:</span>
                                    <span class="font-mono text-koin-400">{{ entry.confidence|pct }}</span>
                                </div>
                                {% endif %}
                                {% if entry.accumulated_units %}
                                <div>
                                    <span class="text-gray-500">Accum Units:</span>
                                    <span class="font-mono text-gray-300">{{ entry.accumulated_units|idr8 }}</span>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        <!-- Action buttons -->
                        <div class="flex-shrink-0 flex flex-col gap-1">
                            <button @click="executeQueue({{ entry.id }}, '{{ entry.action }}', {{ entry.predicted_price }})"
                                    class="px-2 py-1 text-[10px] font-bold rounded bg-emerald-900/50 text-emerald-400 border border-emerald-700/50 hover:bg-emerald-800/50 transition">
                                Execute
                            </button>
                            <button @click="cancelQueue({{ entry.id }})"
                                    class="px-2 py-1 text-[10px] font-bold rounded bg-gray-800 text-gray-500 hover:text-red-400 hover:border-red-700/50 border border-gray-700/50 transition">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
        {% else %}
        <div class="glass rounded-xl border border-gray-800 p-8 text-center">
            <p class="text-gray-500">Tidak ada antrian aktif</p>
            <p class="text-gray-600 text-sm mt-1">Generate timeline untuk membuat antrian beli/jual</p>
            <a href="/timeline/" class="inline-block mt-3 px-4 py-2 bg-koin-600 hover:bg-koin-700 rounded-lg text-sm font-medium text-white transition">
                Go to Timeline
            </a>
        </div>
        {% endif %}
    </div>

    <!-- Recent Trade History -->
    {% if recent_trades %}
    <div class="glass rounded-xl border border-gray-800 overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-800">
            <h2 class="text-lg font-semibold text-white">Riwayat Trade Terbaru</h2>
        </div>
        <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-4 py-2 text-left">Time</th>
                        <th class="px-4 py-2 text-left">{{ item_label }}</th>
                        <th class="px-4 py-2 text-center">Side</th>
                        <th class="px-4 py-2 text-right">Price</th>
                        <th class="px-4 py-2 text-right">Qty</th>
                        <th class="px-4 py-2 text-right">Value</th>
                        <th class="px-4 py-2 text-right">Fee</th>
                        <th class="px-4 py-2 text-right">P&L</th>
                        <th class="px-4 py-2 w-8"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-800/50">
                    {% for t in recent_trades %}
                    {% set tc = trade_coins.get(t.asset_id) %}
                    <tr class="hover:bg-gray-800/30 transition">
                        <td class="px-4 py-2 text-gray-500 text-xs">{{ t.executed_at|wib_short }}</td>
                        <td class="px-4 py-2">
                            <a href="/market/asset/{{ t.asset_id }}" class="inline-flex items-center gap-1.5 text-koin-400 hover:text-koin-300 font-medium text-xs">
                                {% set _ic3 = coin_icon(tc) if tc else None %}
                                {% if _ic3 %}
                                <img src="{{ _ic3 }}" alt="" data-symbol="{{ tc.symbol if tc else '' }}" class="w-4 h-4 rounded-full" loading="lazy" onerror="__iconError(this)">
                                {% endif %}
                                {{ tc.symbol|upper if tc else t.asset_id }}
                            </a>
                            {% if tc and tc.asset_type == 'stock_us' %}
                            <span class="px-1 py-0.5 rounded text-[9px] font-bold bg-purple-900/40 text-purple-400 border border-purple-700/40">US</span>
                            {% elif tc and tc.asset_type == 'stock' %}
                            <span class="px-1 py-0.5 rounded text-[9px] font-bold bg-blue-900/40 text-blue-400 border border-blue-700/40">IDX</span>
                            {% elif tc %}
                            <span class="px-1 py-0.5 rounded text-[9px] font-bold bg-amber-900/40 text-amber-400 border border-amber-700/40">C</span>
                            {% endif %}
                            {% if t.is_simulation %}
                            <span class="text-[10px] text-gray-600 ml-1">SIM</span>
                            {% endif %}
                        </td>
                        <td class="px-4 py-2 text-center">
                            <span class="px-2 py-0.5 rounded text-xs font-bold
                                {% if t.side == 'BUY' %}bg-emerald-900/50 text-emerald-400
                                {% else %}bg-red-900/50 text-red-400{% endif %}">
                                {{ t.side }}
                            </span>
                        </td>
                        {% set tcs = '$ ' if tc and tc.asset_type == 'stock_us' else 'Rp ' %}
                        <td class="px-4 py-2 text-right font-mono text-white text-xs">{{ tcs }}{{ t.price|price }}</td>
                        <td class="px-4 py-2 text-right font-mono text-gray-300 text-xs">{{ t.quantity|idr8 }}</td>
                        <td class="px-4 py-2 text-right font-mono text-white text-xs">{{ tcs }}{{ t.total_value_idr|idr }}</td>
                        <td class="px-4 py-2 text-right font-mono text-amber-400 text-xs">{{ tcs }}{{ t.fee_idr|idr }}</td>
                        <td class="px-4 py-2 text-right font-mono text-xs
                            {% if t.pnl_idr and t.pnl_idr > 0 %}text-emerald-400
                            {% elif t.pnl_idr and t.pnl_idr < 0 %}text-red-400
                            {% else %}text-gray-500{% endif %}">
                            {% if t.pnl_idr %}{{ tcs }}{{ t.pnl_idr|sidr }}{% else %}-{% endif %}
                        </td>
                        <td class="px-4 py-2 text-center">
                            <button @click="deleteTrade({{ t.id }})"
                                    class="text-gray-700 hover:text-red-400 transition" title="Hapus trade">
                                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    <!-- Toast -->
    <div x-show="toast.show" x-cloak x-transition
         class="toast px-4 py-3 rounded-lg text-sm font-medium"
         :class="toast.type === 'success' ? 'bg-emerald-900 text-emerald-300 border border-emerald-700' : 'bg-red-900 text-red-300 border border-red-700'"
         x-text="toast.message" @click="toast.show = false"></div>
</div>
{% endblock %}

{% block scripts %}
<script>
function portfolioPage() {
    return {
        showTradeForm: false,
        toast: { show: false, message: '', type: 'success' },
        coinResults: [],
        tradeForm: {
            coinId: '',
            coinSymbol: '',
            searchQuery: '',
            side: 'BUY',
            price: '',
            quantity: '',
            submitting: false,
        },

        showToast(message, type = 'success') {
            this.toast = { show: true, message, type };
            setTimeout(() => this.toast.show = false, 3000);
        },

        async searchCoins() {
            if (this.tradeForm.searchQuery.length < 1) { this.coinResults = []; return; }
            // Portfolio searches across ALL asset types (crypto + stock)
            const res = await fetch(`/api/v1/market/search?q=${encodeURIComponent(this.tradeForm.searchQuery)}&asset_type=all`);
            this.coinResults = await res.json();
        },

        selectCoin(coin) {
            this.tradeForm.coinId = coin.id;
            this.tradeForm.coinSymbol = coin.symbol.toUpperCase();
            this.tradeForm.searchQuery = coin.symbol.toUpperCase() + ' - ' + coin.name;
            this.coinResults = [];
        },

        async submitTrade() {
            this.tradeForm.submitting = true;
            try {
                const res = await fetch('/api/v1/portfolio/trade', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        asset_id: this.tradeForm.coinId,
                        side: this.tradeForm.side,
                        price: this.tradeForm.price,
                        quantity: this.tradeForm.quantity,
                        is_simulation: true,
                    }),
                });
                const data = await res.json();
                if (data.error) {
                    this.showToast(data.error, 'error');
                } else {
                    this.showToast(`Trade ${this.tradeForm.side} ${this.tradeForm.coinSymbol} berhasil!`);
                    setTimeout(() => location.reload(), 800);
                }
            } catch (e) {
                this.showToast('Error: ' + e.message, 'error');
            } finally {
                this.tradeForm.submitting = false;
            }
        },

        async executeQueue(entryId, action, price) {
            if (!confirm(`Execute ${action} @ ${KK.fmtCurrency(price)}?`)) return;
            try {
                const res = await fetch(`/api/v1/timeline/queue/${entryId}/execute`, { method: 'PUT' });
                const data = await res.json();
                if (data.error) {
                    this.showToast(data.error, 'error');
                } else {
                    this.showToast('Queue entry executed!');
                    setTimeout(() => location.reload(), 800);
                }
            } catch (e) {
                this.showToast('Error: ' + e.message, 'error');
            }
        },

        async cancelQueue(entryId) {
            if (!confirm('Hapus antrian ini?')) return;
            try {
                const res = await fetch(`/api/v1/timeline/queue/${entryId}`, { method: 'DELETE' });
                const data = await res.json();
                if (data.error) {
                    this.showToast(data.error, 'error');
                } else {
                    this.showToast('Antrian dihapus.');
                    setTimeout(() => location.reload(), 800);
                }
            } catch (e) {
                this.showToast('Error: ' + e.message, 'error');
            }
        },

        async deletePosition(coinId, symbol) {
            if (!confirm(`Reset posisi ${symbol}? Semua data posisi akan dihapus. Riwayat trade tetap tersimpan.`)) return;
            try {
                const res = await fetch(`/api/v1/portfolio/position/${coinId}`, { method: 'DELETE' });
                const data = await res.json();
                if (data.error) {
                    this.showToast(data.error, 'error');
                } else {
                    this.showToast(`Posisi ${symbol} direset.`);
                    setTimeout(() => location.reload(), 800);
                }
            } catch (e) {
                this.showToast('Error: ' + e.message, 'error');
            }
        },

        async deleteTrade(tradeId) {
            if (!confirm('Hapus record trade ini? Posisi portofolio TIDAK akan diubah.')) return;
            try {
                const res = await fetch(`/api/v1/portfolio/trade/${tradeId}`, { method: 'DELETE' });
                const data = await res.json();
                if (data.error) {
                    this.showToast(data.error, 'error');
                } else {
                    this.showToast('Trade record dihapus.');
                    setTimeout(() => location.reload(), 800);
                }
            } catch (e) {
                this.showToast('Error: ' + e.message, 'error');
            }
        },
    };
}
</script>
{% endblock %}