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

{% block content %}
<div x-data="dashboardApp()" x-init="init()" class="space-y-6">

    <!-- ═══════════════════════════════════════════════════════════════ -->
    <!-- SECTION 1: Market Overview Banner                              -->
    <!-- ═══════════════════════════════════════════════════════════════ -->
    <div class="glass rounded-xl border border-gray-800 px-5 py-4">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
            <!-- Left: stats -->
            <div class="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
                <div>
                    <span class="text-gray-500">Tracked</span>
                    <span class="text-white font-semibold ml-1">{{ total_tracked }}</span>
                </div>
                <div>
                    <span class="text-gray-500">Watchlist</span>
                    <span class="text-koin-400 font-semibold ml-1">{{ watchlist|length }}</span>
                </div>
                <div>
                    <span class="text-gray-500">Signals</span>
                    <span class="text-emerald-400 font-semibold ml-1">{{ active_signal_count }}</span>
                </div>
                <!-- BTC price (AJAX) -->
                <div x-show="marketOverview" x-cloak>
                    <span class="text-gray-500">BTC</span>
                    <span class="text-white font-semibold font-mono ml-1" x-text="marketOverview.btc_price_idr ? 'Rp ' + KK.fmtPrice(marketOverview.btc_price_idr) : '-'"></span>
                    <span class="text-xs ml-1" :class="(marketOverview.btc_change_24h||0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                          x-text="marketOverview.btc_change_24h ? KK.fmtSpct(marketOverview.btc_change_24h, 2) : ''"></span>
                </div>
                <!-- Data source -->
                <div x-show="marketOverview" x-cloak>
                    <span class="text-gray-500">Source</span>
                    <span class="text-amber-400 font-medium capitalize ml-1" x-text="marketOverview.data_source || '-'"></span>
                </div>
                <!-- Last sync -->
                <div x-show="marketOverview" x-cloak class="flex items-center gap-1.5">
                    <span class="text-gray-500">Last Sync</span>
                    <span class="w-2 h-2 rounded-full" :class="getSyncFreshness()"></span>
                    <span class="text-gray-400 text-xs" x-text="formatLastSync()"></span>
                </div>
            </div>

            <!-- Right: Sentiment + Sync -->
            <div class="flex items-center gap-4">
                <!-- Sentiment Gauge (horizontal bar) -->
                <div x-show="sentimentIndex" x-cloak class="flex items-center gap-2">
                    <span class="text-xs text-gray-500">Sentiment</span>
                    <div class="w-32 h-3 rounded-full overflow-hidden relative" style="background: linear-gradient(to right, #EF4444, #F59E0B, #10B981)">
                        <div class="absolute top-0 h-full w-1 bg-white rounded shadow-lg transition-all duration-500"
                             :style="'left: ' + (sentimentIndex.value || 50) + '%'"></div>
                    </div>
                    <span class="text-xs font-medium min-w-[80px]"
                          :class="sentimentIndex.value < 40 ? 'text-red-400' : sentimentIndex.value < 60 ? 'text-amber-400' : 'text-emerald-400'"
                          x-text="sentimentIndex.label || 'Neutral'"></span>
                </div>

                <!-- Sync Button -->
                <button @click="syncAll()" :disabled="syncRunning"
                        class="px-4 py-2 bg-koin-600 hover:bg-koin-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg text-sm font-medium transition flex items-center gap-2 flex-shrink-0">
                    <svg class="w-4 h-4" :class="syncRunning && 'animate-spin'" 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>
                    Sync Data
                </button>
            </div>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════ -->
    <!-- SECTION 2: Portfolio Overview                                   -->
    <!-- ═══════════════════════════════════════════════════════════════ -->
    {% if portfolio_summary.count > 0 %}
    <div class="space-y-4">
        <!-- Portfolio Stats Row -->
        <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
            <div class="glass rounded-xl p-4 border border-gray-800">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Positions</p>
                <p class="text-2xl font-bold text-white mt-1">{{ portfolio_summary.count }}</p>
            </div>
            <div class="glass rounded-xl p-4 border border-gray-800">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Total Invested</p>
                <p class="text-lg font-bold text-white font-mono mt-1">Rp {{ portfolio_summary.total_invested|idr }}</p>
                <p class="text-[9px] text-gray-600">IDR (gabungan)</p>
            </div>
            <div class="glass rounded-xl p-4 border border-gray-800">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Current Value</p>
                <p class="text-lg font-bold text-white font-mono mt-1">Rp {{ portfolio_summary.total_current|idr }}</p>
            </div>
            <div class="glass rounded-xl p-4 border border-gray-800">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Unrealized P&L</p>
                <p class="text-lg font-bold font-mono mt-1 {% if portfolio_summary.total_unrealized >= 0 %}text-emerald-400{% else %}text-red-400{% endif %}">
                    {{ portfolio_summary.total_unrealized|sidr }}
                    <span class="text-xs ml-1 opacity-75">({{ portfolio_summary.total_return_pct|spct }})</span>
                </p>
            </div>
            <div class="glass rounded-xl p-4 border border-gray-800">
                <p class="text-xs text-gray-500 uppercase tracking-wider">Realized P&L</p>
                <p class="text-lg font-bold font-mono mt-1 {% if portfolio_summary.total_realized >= 0 %}text-emerald-400{% else %}text-red-400{% endif %}">
                    {{ portfolio_summary.total_realized|sidr }}
                </p>
            </div>
        </div>

        <!-- Charts Row: Donut + P&L Bar -->
        {% if portfolio_items|length > 1 %}
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <!-- Donut Chart -->
            <div class="glass rounded-xl border border-gray-800 p-4">
                <h3 class="text-sm font-medium text-gray-400 mb-3">Alokasi Portfolio</h3>
                <div x-ref="donutContainer" class="flex items-center justify-center">
                    <canvas x-ref="donutChart"></canvas>
                </div>
            </div>
            <!-- P&L Bar Chart -->
            <div class="glass rounded-xl border border-gray-800 p-4">
                <h3 class="text-sm font-medium text-gray-400 mb-3">Unrealized P&L per {{ item_label }}</h3>
                <div x-ref="pnlContainer" class="w-full overflow-x-auto">
                    <canvas x-ref="pnlBarChart"></canvas>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Compact Position Table -->
        <div class="glass rounded-xl border border-gray-800 overflow-hidden">
            <div class="px-4 py-3 border-b border-gray-800 flex items-center justify-between">
                <h3 class="text-sm font-medium text-gray-400">Posisi Portfolio</h3>
                <a href="/portfolio/" class="text-xs text-koin-400 hover:text-koin-300">Detail &rarr;</a>
            </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">Jumlah</th>
                            <th class="px-4 py-2 text-right">Avg Beli</th>
                            <th class="px-4 py-2 text-right">Harga Kini</th>
                            <th class="px-4 py-2 text-right">Nilai</th>
                            <th class="px-4 py-2 text-right">P&L</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="" data-symbol="{{ item.asset.symbol }}" class="w-4 h-4 rounded-full" loading="lazy" onerror="__iconError(this)">
                                    {% endif %}
                                    {{ item.coin_symbol }}
                                </a>
                            </td>
                            <td class="px-4 py-2 text-right font-mono text-gray-300">{{ item.quantity|idr8 }}</td>
                            {% set dcs = '$ ' if item.asset_type == 'stock_us' else 'Rp ' %}
                            <td class="px-4 py-2 text-right font-mono text-gray-400">{{ dcs }}{{ item.avg_buy_price|price }}</td>
                            <td class="px-4 py-2 text-right font-mono text-white">{{ dcs }}{{ item.current_price|price }}</td>
                            <td class="px-4 py-2 text-right font-mono text-white">{{ dcs }}{{ 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 %}">
                                {{ item.unrealized_pnl|sidr }}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- ═══════════════════════════════════════════════════════════════ -->
    <!-- SECTION 3: Grafik Harga Utama                                  -->
    <!-- ═══════════════════════════════════════════════════════════════ -->
    {% if chart_coins %}
    <div class="glass rounded-xl border border-gray-800 overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-800 flex flex-wrap items-center justify-between gap-3">
            <div class="flex items-center gap-3">
                <h2 class="text-lg font-semibold text-white">Grafik Harga</h2>
                <select x-model="selectedCoin" @change="loadChartData()"
                        class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-1 focus:ring-koin-500">
                    {% for c in chart_coins %}
                    <option value="{{ c.id }}">{{ c.symbol|upper }} - {{ c.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="flex items-center gap-1">
                <template x-for="tf in ['1h', '4h', '1D']" :key="tf">
                    <button @click="chartTimeframe = tf; loadChartData()"
                            class="px-3 py-1 rounded text-xs font-medium transition"
                            :class="chartTimeframe === tf ? 'bg-koin-600 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-800'">
                        <span x-text="tf"></span>
                    </button>
                </template>
                <div x-show="chartLoading" class="ml-2">
                    <svg class="animate-spin w-4 h-4 text-koin-400" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                    </svg>
                </div>
            </div>
        </div>
        <div class="relative">
            <div x-ref="mainChartContainer" class="w-full" style="height: 400px"
                 x-show="!chartEmpty && !chartError"></div>
            <!-- Empty state -->
            <div x-show="chartEmpty && !chartLoading" x-cloak
                 class="flex flex-col items-center justify-center text-center py-16" style="min-height: 400px">
                <svg class="w-12 h-12 text-gray-700 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
                <p class="text-gray-500 text-sm">Belum ada data OHLCV untuk {{ item_label|lower }} ini.</p>
                <p class="text-gray-600 text-xs mt-1">Sync data terlebih dahulu dari halaman detail {{ item_label|lower }}.</p>
            </div>
            <!-- Error state -->
            <div x-show="chartError && !chartLoading" x-cloak
                 class="flex flex-col items-center justify-center text-center py-16" style="min-height: 400px">
                <svg class="w-10 h-10 text-red-500 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
                <p class="text-red-400 text-sm" x-text="chartError"></p>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- ═══════════════════════════════════════════════════════════════ -->
    <!-- SECTION 4: Signal Scorecard Grid                               -->
    <!-- ═══════════════════════════════════════════════════════════════ -->
    {% if chart_coins %}
    <div>
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold text-white">Skor Sinyal</h2>
            <button @click="refreshAllScores()" :disabled="refreshingAll"
                    class="px-3 py-1.5 text-xs font-medium rounded-lg transition flex items-center gap-1.5"
                    :class="refreshingAll ? 'bg-gray-700 text-gray-500 cursor-not-allowed' : 'bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white'">
                <svg class="w-3.5 h-3.5" :class="refreshingAll && 'animate-spin'" 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="refreshingAll ? 'Refreshing...' : 'Refresh All'"></span>
            </button>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
            {% for c in chart_coins %}
            <div class="glass rounded-xl border border-gray-800 p-4 flex flex-col gap-3"
                 x-data="{ coinId: '{{ c.id }}' }">
                <!-- Header: icon + name + signal badge -->
                <div class="flex items-center justify-between">
                    <a href="/market/asset/{{ c.id }}?tab=analysis" class="flex items-center gap-2 hover:opacity-80 transition">
                        {% set _ic2 = coin_icon(c) %}
                        {% if _ic2 %}
                        <img src="{{ _ic2 }}" alt="" data-symbol="{{ c.symbol }}" 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">{{ c.symbol[:1] }}</span>
                        {% endif %}
                        <span class="text-white font-medium text-sm">{{ c.symbol|upper }}</span>
                    </a>
                    <!-- Signal badge (from AJAX) -->
                    <template x-if="scores['{{ c.id }}']">
                        <span class="px-2 py-0.5 rounded text-xs font-bold"
                              :class="scores['{{ c.id }}'].signal === 'BUY' ? 'bg-emerald-900/50 text-emerald-400' : scores['{{ c.id }}'].signal === 'SELL' ? 'bg-red-900/50 text-red-400' : 'bg-gray-700 text-gray-400'"
                              x-text="scores['{{ c.id }}'].signal"></span>
                    </template>
                </div>

                <!-- Score Gauge (Canvas) -->
                <div class="flex items-center justify-center">
                    <canvas x-ref="gauge_{{ c.id }}" width="120" height="75" class="block"></canvas>
                </div>

                <!-- Score number -->
                <div class="text-center -mt-1">
                    <template x-if="scores['{{ c.id }}']">
                        <span class="text-2xl font-bold font-mono"
                              :class="scores['{{ c.id }}'].score > 30 ? 'text-emerald-400' : scores['{{ c.id }}'].score < -30 ? 'text-red-400' : 'text-amber-400'"
                              x-text="KK.fmtIdr(scores['{{ c.id }}'].score, 1)"></span>
                    </template>
                    <template x-if="!scores['{{ c.id }}'] && !loading">
                        <span class="text-sm text-gray-600">No data</span>
                    </template>
                    <template x-if="loading">
                        <span class="inline-block w-12 h-6 bg-gray-800 rounded animate-pulse"></span>
                    </template>
                </div>

                <!-- Confidence + Safety badges -->
                <div class="flex items-center justify-center gap-2 text-xs" x-show="scores['{{ c.id }}']" x-cloak>
                    <span class="px-1.5 py-0.5 rounded"
                          :class="scores['{{ c.id }}']?.confidence === 'High' ? 'bg-emerald-900/30 text-emerald-400' : scores['{{ c.id }}']?.confidence === 'Medium' ? 'bg-amber-900/30 text-amber-400' : 'bg-gray-800 text-gray-500'"
                          x-text="scores['{{ c.id }}']?.confidence || ''"></span>
                    <span class="px-1.5 py-0.5 rounded"
                          :class="scores['{{ c.id }}']?.safety_rating === 'SAFE' ? 'bg-emerald-900/30 text-emerald-400' : scores['{{ c.id }}']?.safety_rating === 'MODERATE' ? 'bg-amber-900/30 text-amber-400' : 'bg-red-900/30 text-red-400'"
                          x-text="scores['{{ c.id }}']?.safety_rating || ''"></span>
                </div>

                <!-- Sparkline (SVG) -->
                <div class="h-8 w-full" x-show="sparklines['{{ c.id }}']" x-cloak>
                    <svg x-ref="spark_{{ c.id }}" viewBox="0 0 120 32" preserveAspectRatio="none" class="w-full h-full"></svg>
                </div>

                <!-- Footer: time + refresh -->
                <div class="flex items-center justify-between text-xs mt-auto">
                    <span class="text-gray-600" x-text="scores['{{ c.id }}']?.last_signal_time ? new Date(scores['{{ c.id }}'].last_signal_time).toLocaleDateString('id-ID', {day:'2-digit',month:'short',hour:'2-digit',minute:'2-digit'}) : ''"></span>
                    <button @click="refreshCoinScore('{{ c.id }}')" :disabled="refreshingCoin['{{ c.id }}']"
                            class="text-gray-500 hover:text-koin-400 disabled:opacity-30 transition">
                        <svg class="w-3.5 h-3.5" :class="refreshingCoin['{{ c.id }}'] && 'animate-spin'" 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>
                    </button>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% else %}
    <!-- No coins at all -->
    <div class="glass rounded-xl border border-gray-800 p-8 text-center">
        <p class="text-gray-400 text-lg">Belum ada {{ item_label|lower }} di watchlist atau portfolio.</p>
        <p class="text-gray-500 text-sm mt-2">
            Tambahkan {{ item_label|lower }} ke <a href="/market/watchlist" class="text-koin-400 hover:text-koin-300">Watchlist</a>
            atau <a href="/portfolio/" class="text-koin-400 hover:text-koin-300">Portfolio</a> untuk melihat analisis.
        </p>
    </div>
    {% endif %}

    <!-- ═══════════════════════════════════════════════════════════════ -->
    <!-- SECTION 5: Active Signals Table                                -->
    <!-- ═══════════════════════════════════════════════════════════════ -->
    {% if signals %}
    <div class="glass rounded-xl border border-gray-800 overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-800 flex items-center justify-between">
            <h2 class="text-lg font-semibold text-white">Sinyal Aktif</h2>
            <a href="/analysis/signals" class="text-sm text-koin-400 hover:text-koin-300">Lihat Semua &rarr;</a>
        </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-center">Signal</th>
                        <th class="px-4 py-2 text-right">Score</th>
                        <th class="px-4 py-2 text-center">Confidence</th>
                        <th class="px-4 py-2 text-center">Safety</th>
                        <th class="px-4 py-2 text-left">Strategy</th>
                        <th class="px-4 py-2 text-right">Entry</th>
                        <th class="px-4 py-2 text-right">SL</th>
                        <th class="px-4 py-2 text-right">TP1</th>
                        <th class="px-4 py-2 text-xs text-left">Time</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-800/50">
                    {% for s in signals %}
                    <tr class="hover:bg-gray-800/30 transition">
                        <td class="px-4 py-2">
                            <a href="/market/asset/{{ s.asset_id }}?tab=analysis" class="text-koin-400 hover:text-koin-300 font-medium">{{ s.asset_id }}</a>
                        </td>
                        <td class="px-4 py-2 text-center">
                            <span class="px-2 py-0.5 rounded text-xs font-bold
                                {% if s.signal_type == 'BUY' %}bg-emerald-900/50 text-emerald-400
                                {% elif s.signal_type == 'SELL' %}bg-red-900/50 text-red-400
                                {% else %}bg-gray-700 text-gray-400{% endif %}">
                                {{ s.signal_type }}
                            </span>
                        </td>
                        <td class="px-4 py-2 text-right font-mono text-white">{{ s.score|num1 }}</td>
                        <td class="px-4 py-2 text-center text-xs
                            {% if s.confidence == 'High' %}text-emerald-400
                            {% elif s.confidence == 'Medium' %}text-amber-400
                            {% else %}text-gray-500{% endif %}">
                            {{ s.confidence }}
                        </td>
                        <td class="px-4 py-2 text-center text-xs
                            {% if s.safety_rating == 'SAFE' %}text-emerald-400
                            {% elif s.safety_rating == 'MODERATE' %}text-amber-400
                            {% elif s.safety_rating == 'RISKY' %}text-orange-400
                            {% else %}text-red-400{% endif %}">
                            {{ s.safety_rating or '-' }}
                        </td>
                        <td class="px-4 py-2 text-gray-400 text-xs">{{ s.recommended_strategy or '-' }}</td>
                        <td class="px-4 py-2 text-right font-mono text-white text-xs">{{ s.entry_price|price if s.entry_price else '-' }}</td>
                        <td class="px-4 py-2 text-right font-mono text-red-400 text-xs">{{ s.stop_loss|price if s.stop_loss else '-' }}</td>
                        <td class="px-4 py-2 text-right font-mono text-emerald-400 text-xs">{{ s.take_profit_1|price if s.take_profit_1 else '-' }}</td>
                        <td class="px-4 py-2 text-gray-500 text-xs">{{ s.created_at|wib_short }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% elif not chart_coins %}
    {% else %}
    <div class="glass rounded-xl border border-gray-800 p-6 text-center">
        <p class="text-gray-500">Belum ada sinyal aktif. Jalankan analisis dari halaman <a href="/analysis/" class="text-koin-400 hover:text-koin-300">Analysis</a>.</p>
    </div>
    {% endif %}

    <!-- ═══════════════════════════════════════════════════════════════ -->
    <!-- SECTION 6: Watchlist Quick View                                -->
    <!-- ═══════════════════════════════════════════════════════════════ -->
    {% if watchlist_data %}
    <div class="glass rounded-xl border border-gray-800 overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-800 flex items-center justify-between">
            <h2 class="text-lg font-semibold text-white">Watchlist</h2>
            <a href="/market/watchlist" class="text-sm text-koin-400 hover:text-koin-300">Kelola &rarr;</a>
        </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">Harga</th>
                        <th class="px-4 py-2 text-right">24h</th>
                        <th class="px-4 py-2 text-right">7d</th>
                        <th class="px-4 py-2 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-800/50">
                    {% for item in watchlist_data %}
                    <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 _ic3 = coin_icon(item.coin) if item.coin else None %}
                                {% if _ic3 %}
                                <img src="{{ _ic3 }}" alt="" data-symbol="{{ item.asset.symbol }}" class="w-4 h-4 rounded-full" loading="lazy" onerror="__iconError(this)">
                                {% endif %}
                                {{ item.asset.symbol|upper if item.coin else item.asset_id }}
                            </a>
                        </td>
                        <td class="px-4 py-2 text-right font-mono text-white">
                            {% set wcs = '$ ' if item.coin and item.asset.asset_type == 'stock_us' else 'Rp ' %}
                            {% if item.price %}{{ wcs }}{{ item.price|price }}{% else %}-{% endif %}
                        </td>
                        <td class="px-4 py-2 text-right font-mono text-xs
                            {% if item.change_24h and item.change_24h > 0 %}text-emerald-400
                            {% elif item.change_24h and item.change_24h < 0 %}text-red-400
                            {% else %}text-gray-500{% endif %}">
                            {% if item.change_24h %}{{ item.change_24h|spct2 }}{% else %}-{% endif %}
                        </td>
                        <td class="px-4 py-2 text-right font-mono text-xs
                            {% if item.change_7d and item.change_7d > 0 %}text-emerald-400
                            {% elif item.change_7d and item.change_7d < 0 %}text-red-400
                            {% else %}text-gray-500{% endif %}">
                            {% if item.change_7d %}{{ item.change_7d|spct2 }}{% else %}-{% endif %}
                        </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">Analisis</a>
                            <a href="/timeline/" class="text-xs text-koin-400 hover:text-koin-300">Timeline</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    <!-- ═══════════════════════════════════════════════════════════════ -->
    <!-- SECTION 7: Quick Actions                                       -->
    <!-- ═══════════════════════════════════════════════════════════════ -->
    <div class="flex flex-wrap items-center gap-2 text-sm">
        <a href="/analysis/" class="px-3 py-1.5 rounded-lg bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white transition">Analisis Lengkap</a>
        <a href="/timeline/" class="px-3 py-1.5 rounded-lg bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white transition">Timeline</a>
        <a href="/portfolio/" class="px-3 py-1.5 rounded-lg bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white transition">Portfolio</a>
        <a href="/market/watchlist" class="px-3 py-1.5 rounded-lg bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white transition">Watchlist</a>
        <a href="/market/buy-now" class="px-3 py-1.5 rounded-lg bg-emerald-800 text-emerald-300 hover:bg-emerald-700 hover:text-white transition">Rekomendasi Beli</a>
        <a href="/api/v1/export/portfolio" class="px-3 py-1.5 rounded-lg bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white transition">Export JSON</a>
    </div>

</div>

<!-- Sync Status Bar (fixed bottom) -->
<div id="sync-status" class="fixed bottom-4 right-4 hidden glass rounded-lg border border-gray-700 px-4 py-3 text-sm z-50 max-w-md">
    <div class="flex items-center gap-3">
        <div id="sync-spinner" class="hidden">
            <svg class="animate-spin w-4 h-4 text-koin-400" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
            </svg>
        </div>
        <div>
            <p id="sync-msg" class="text-gray-300"></p>
            <div id="sync-progress-bar" class="hidden mt-1.5 w-48 h-1.5 bg-gray-700 rounded-full overflow-hidden">
                <div id="sync-progress-fill" class="h-full bg-koin-500 rounded-full transition-all duration-300" style="width: 0%"></div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
function dashboardApp() {
    // ── Chart coin data from Jinja ──
    const chartCoins = {{ chart_coins | tojson }};
    // ── Portfolio data from Jinja (JSON-safe subset) ──
    const portfolioItems = [
        {% for item in portfolio_items %}
        { asset_id: {{ item.asset_id | tojson }}, coin_symbol: {{ item.coin_symbol | tojson }}, current_value: {{ item.current_value }}, unrealized_pnl: {{ item.unrealized_pnl }} },
        {% endfor %}
    ];

    return {
        // AJAX state
        loading: true,
        marketOverview: null,
        sentimentIndex: null,
        sparklines: {},
        scores: {},

        // Main chart
        mainChart: null,
        candleSeries: null,
        volumeSeries: null,
        selectedCoin: chartCoins.length > 0 ? chartCoins[0].id : '',
        chartTimeframe: '1D',
        chartLoading: false,
        chartEmpty: false,
        chartError: '',
        _chartRO: null,
        _portfolioRO: null,

        // Refresh
        refreshingAll: false,
        refreshingCoin: {},

        // Sync
        syncRunning: false,

        // ── Init ──
        init() {
            this.loadSummary();
            if (this.selectedCoin) {
                this.$nextTick(() => this.initMainChart());
            }
            // Render portfolio charts after data is ready
            this.$nextTick(() => {
                if (portfolioItems.length > 1) {
                    this.renderDonutChart();
                    this.renderPnlBarChart();
                    this._setupPortfolioResize();
                }
            });
        },

        // ── AJAX: Load Dashboard Summary ──
        async loadSummary() {
            try {
                const resp = await fetch('/api/v1/dashboard/summary');
                const data = await resp.json();
                this.marketOverview = data.market_overview;
                this.sentimentIndex = data.sentiment_index;
                this.sparklines = data.sparklines || {};
                this.scores = data.scores || {};
                this.loading = false;

                // Render sparklines & gauges after data arrives
                this.$nextTick(() => {
                    for (const c of chartCoins) {
                        this.renderSparkline(c.id);
                        this.renderScoreGauge(c.id);
                    }
                });
            } catch (e) {
                console.error('Failed to load dashboard summary:', e);
                this.loading = false;
            }
        },

        // ── Last Sync Helpers ──
        formatLastSync() {
            if (!this.marketOverview?.last_sync) return '-';
            const d = new Date(this.marketOverview.last_sync);
            const now = new Date();
            const diffMs = now - d;
            const diffMins = Math.floor(diffMs / 60000);
            if (diffMins < 1) return 'baru saja';
            if (diffMins < 60) return diffMins + ' menit lalu';
            const diffHrs = Math.floor(diffMins / 60);
            if (diffHrs < 24) return diffHrs + ' jam lalu';
            return d.toLocaleDateString('id-ID', { day: '2-digit', month: 'short' });
        },

        getSyncFreshness() {
            if (!this.marketOverview?.last_sync) return 'bg-gray-600';
            const diffMs = Date.now() - new Date(this.marketOverview.last_sync).getTime();
            const diffHrs = diffMs / 3600000;
            if (diffHrs < 1) return 'bg-emerald-400 animate-pulse-dot';
            if (diffHrs < 24) return 'bg-amber-400';
            return 'bg-red-400';
        },

        // ══════════════════════════════════════════════
        // MAIN CHART (TradingView LightweightCharts)
        // ══════════════════════════════════════════════
        initMainChart() {
            const container = this.$refs.mainChartContainer;
            if (!container) return;

            // Check library availability
            if (!window.LightweightCharts) {
                this.chartError = 'Library chart tidak tersedia. Cek koneksi internet.';
                return;
            }

            // Disconnect previous ResizeObserver
            if (this._chartRO) { this._chartRO.disconnect(); this._chartRO = null; }
            if (this.mainChart) { this.mainChart.remove(); this.mainChart = null; }

            const _ct = window.KKChartTheme ? KKChartTheme() : {};
            this.mainChart = LightweightCharts.createChart(container, {
                ..._ct,
                crosshair: { mode: LightweightCharts.CrosshairMode.Normal },
                timeScale: {
                    ...(_ct.timeScale || {}),
                    timeVisible: true,
                    secondsVisible: false,
                },
                handleScroll: { vertTouchDrag: false },
            });

            this.candleSeries = this.mainChart.addCandlestickSeries({
                upColor: '#10B981',
                downColor: '#EF4444',
                borderDownColor: '#EF4444',
                borderUpColor: '#10B981',
                wickDownColor: '#EF4444',
                wickUpColor: '#10B981',
            });

            this.volumeSeries = this.mainChart.addHistogramSeries({
                color: '#38BDF8',
                priceFormat: { type: 'volume' },
                priceScaleId: '',
            });
            this.volumeSeries.priceScale().applyOptions({
                scaleMargins: { top: 0.8, bottom: 0 },
            });

            // Responsive resize with stored ref for cleanup
            const chartRef = this.mainChart;
            this._chartRO = new ResizeObserver(entries => {
                if (chartRef) {
                    const { width } = entries[0].contentRect;
                    if (width > 0) chartRef.applyOptions({ width });
                }
            });
            this._chartRO.observe(container);

            this.loadChartData();
        },

        async loadChartData() {
            if (!this.selectedCoin) return;
            this.chartLoading = true;
            this.chartEmpty = false;
            this.chartError = '';

            // If chart not initialized yet (e.g. from coin change), init first
            if (!this.mainChart) {
                this.initMainChart();
                if (!this.mainChart) { this.chartLoading = false; return; }
            }

            try {
                const resp = await fetch(`/api/v1/market/asset/${this.selectedCoin}/ohlcv?timeframe=${this.chartTimeframe}&limit=500`);
                if (!resp.ok) {
                    this.chartError = `Gagal memuat data chart (HTTP ${resp.status})`;
                    this.chartLoading = false;
                    return;
                }
                const data = await resp.json();

                if (!Array.isArray(data) || data.length === 0) {
                    // Try fallback timeframes
                    const fallbacks = ['1D', '4h', '1h'].filter(tf => tf !== this.chartTimeframe);
                    for (const fbTf of fallbacks) {
                        const fbResp = await fetch(`/api/v1/market/asset/${this.selectedCoin}/ohlcv?timeframe=${fbTf}&limit=500`);
                        const fbData = await fbResp.json();
                        if (Array.isArray(fbData) && fbData.length > 0) {
                            this.chartTimeframe = fbTf;
                            this._applyChartData(fbData);
                            this.chartLoading = false;
                            return;
                        }
                    }
                    // No data in any timeframe
                    this.chartEmpty = true;
                    this.candleSeries.setData([]);
                    this.volumeSeries.setData([]);
                    this.chartLoading = false;
                    return;
                }

                this._applyChartData(data);
            } catch (e) {
                console.error('Chart load error:', e);
                this.chartError = 'Gagal memuat chart: ' + e.message;
            }
            this.chartLoading = false;
        },

        _applyChartData(data) {
            const candles = data.map(d => ({
                time: d.timestamp,
                open: d.open,
                high: d.high,
                low: d.low,
                close: d.close,
            }));
            const volumes = data.map(d => ({
                time: d.timestamp,
                value: d.volume,
                color: d.close >= d.open ? 'rgba(16, 185, 129, 0.3)' : 'rgba(239, 68, 68, 0.3)',
            }));

            this.candleSeries.setData(candles);
            this.volumeSeries.setData(volumes);
            this.mainChart.timeScale().fitContent();
        },

        // ══════════════════════════════════════════════
        // SCORE REFRESH
        // ══════════════════════════════════════════════
        async refreshCoinScore(coinId) {
            if (this.refreshingCoin[coinId]) return;
            this.refreshingCoin[coinId] = true;
            try {
                const resp = await fetch(`/api/v1/analysis/score/${coinId}/save`, { method: 'POST' });
                const data = await resp.json();
                if (data.score !== undefined) {
                    this.scores[coinId] = {
                        signal: data.signal_type,
                        score: data.score,
                        confidence: data.confidence,
                        safety_rating: data.safety_rating,
                        strategy: data.recommended_strategy,
                        last_signal_time: new Date().toISOString(),
                    };
                    this.$nextTick(() => this.renderScoreGauge(coinId));
                }
            } catch (e) {
                console.error(`Score refresh failed for ${coinId}:`, e);
            }
            this.refreshingCoin[coinId] = false;
        },

        async refreshAllScores() {
            if (this.refreshingAll) return;
            this.refreshingAll = true;
            for (const c of chartCoins) {
                await this.refreshCoinScore(c.id);
                await new Promise(r => setTimeout(r, 500));
            }
            this.refreshingAll = false;
        },

        // ══════════════════════════════════════════════
        // SPARKLINE RENDERING (SVG Polyline)
        // ══════════════════════════════════════════════
        renderSparkline(coinId) {
            const svg = this.$refs['spark_' + coinId];
            const data = this.sparklines[coinId];
            if (!svg || !data || data.length < 2) return;

            const closes = data.map(d => d.close);
            const min = Math.min(...closes);
            const max = Math.max(...closes);
            const range = max - min || 1;
            const w = 120;
            const h = 32;
            const pad = 2;

            const points = closes.map((v, i) => {
                const x = pad + (i / (closes.length - 1)) * (w - 2 * pad);
                const y = pad + (1 - (v - min) / range) * (h - 2 * pad);
                return `${x.toFixed(1)},${y.toFixed(1)}`;
            }).join(' ');

            const color = closes[closes.length - 1] >= closes[0] ? '#10B981' : '#EF4444';

            svg.innerHTML = `
                <polyline fill="none" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" points="${points}"/>
                <linearGradient id="sg_${coinId}" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stop-color="${color}" stop-opacity="0.15"/>
                    <stop offset="100%" stop-color="${color}" stop-opacity="0"/>
                </linearGradient>
                <polygon fill="url(#sg_${coinId})" points="${pad},${h} ${points} ${w - pad},${h}"/>
            `;
        },

        // ══════════════════════════════════════════════
        // SCORE GAUGE (Canvas Semi-circle)
        // ══════════════════════════════════════════════
        renderScoreGauge(coinId) {
            const canvas = this.$refs['gauge_' + coinId];
            const scoreData = this.scores[coinId];
            if (!canvas || !scoreData) return;

            const ctx = canvas.getContext('2d');
            const dpr = window.devicePixelRatio || 1;
            const w = 120;
            const h = 75;
            canvas.width = w * dpr;
            canvas.height = h * dpr;
            canvas.style.width = w + 'px';
            canvas.style.height = h + 'px';
            ctx.scale(dpr, dpr);
            ctx.clearRect(0, 0, w, h);

            const cx = w / 2;
            const cy = h - 8;
            const r = 48;
            const score = scoreData.score; // -100 to +100

            // Background arc (gray)
            ctx.beginPath();
            ctx.arc(cx, cy, r, Math.PI, 2 * Math.PI);
            ctx.strokeStyle = 'rgba(55, 65, 81, 0.5)';
            ctx.lineWidth = 8;
            ctx.lineCap = 'round';
            ctx.stroke();

            // Colored arc
            const pct = (score + 100) / 200; // 0 to 1
            const endAngle = Math.PI + pct * Math.PI;

            const grad = ctx.createLinearGradient(cx - r, cy, cx + r, cy);
            grad.addColorStop(0, '#EF4444');
            grad.addColorStop(0.35, '#F59E0B');
            grad.addColorStop(0.65, '#F59E0B');
            grad.addColorStop(1, '#10B981');

            ctx.beginPath();
            ctx.arc(cx, cy, r, Math.PI, endAngle);
            ctx.strokeStyle = grad;
            ctx.lineWidth = 8;
            ctx.lineCap = 'round';
            ctx.stroke();

            // Needle
            const needleAngle = Math.PI + pct * Math.PI;
            const nx = cx + Math.cos(needleAngle) * (r - 16);
            const ny = cy + Math.sin(needleAngle) * (r - 16);
            ctx.beginPath();
            ctx.moveTo(cx, cy);
            ctx.lineTo(nx, ny);
            ctx.strokeStyle = '#fff';
            ctx.lineWidth = 1.5;
            ctx.lineCap = 'round';
            ctx.stroke();

            // Center dot
            ctx.beginPath();
            ctx.arc(cx, cy, 3, 0, 2 * Math.PI);
            ctx.fillStyle = '#fff';
            ctx.fill();
        },

        // ══════════════════════════════════════════════
        // PORTFOLIO DONUT CHART (Canvas 2D) — Responsive
        // ══════════════════════════════════════════════
        renderDonutChart() {
            const canvas = this.$refs.donutChart;
            const container = this.$refs.donutContainer;
            if (!canvas || !container || portfolioItems.length === 0) return;

            const dpr = window.devicePixelRatio || 1;
            // Use container width, capped at 280px for aesthetics
            const size = Math.min(container.clientWidth - 16, 280);
            if (size <= 0) return;

            canvas.width = size * dpr;
            canvas.height = size * dpr;
            canvas.style.width = size + 'px';
            canvas.style.height = size + 'px';

            const ctx = canvas.getContext('2d');
            ctx.scale(dpr, dpr);
            ctx.clearRect(0, 0, size, size);

            const cx = size / 2;
            const cy = size / 2;
            const outerR = size * 0.42;
            const innerR = size * 0.25;

            const colors = ['#10B981', '#3B82F6', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#14B8A6', '#F97316'];
            const total = portfolioItems.reduce((s, p) => s + (p.current_value || 0), 0);
            if (total <= 0) return;

            let startAngle = -Math.PI / 2;
            portfolioItems.forEach((item, i) => {
                const pct = (item.current_value || 0) / total;
                const sweep = pct * 2 * Math.PI;
                const endAngle = startAngle + sweep;

                ctx.beginPath();
                ctx.arc(cx, cy, outerR, startAngle, endAngle);
                ctx.arc(cx, cy, innerR, endAngle, startAngle, true);
                ctx.closePath();
                ctx.fillStyle = colors[i % colors.length];
                ctx.fill();

                // Label (only if slice is big enough)
                if (pct > 0.06) {
                    const midAngle = startAngle + sweep / 2;
                    const lx = cx + Math.cos(midAngle) * ((outerR + innerR) / 2);
                    const ly = cy + Math.sin(midAngle) * ((outerR + innerR) / 2);
                    ctx.fillStyle = '#fff';
                    ctx.font = `${Math.max(size * 0.04, 9)}px sans-serif`;
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText(item.coin_symbol, lx, ly);
                }

                startAngle = endAngle;
            });

            // Center text
            const fontSize = Math.max(size * 0.04, 9);
            ctx.fillStyle = '#9CA3AF';
            ctx.font = `${fontSize}px sans-serif`;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            ctx.fillText('Total Nilai', cx, cy - 2);
            ctx.fillStyle = '#fff';
            ctx.font = `bold ${fontSize + 3}px sans-serif`;
            ctx.textBaseline = 'top';
            const totalStr = 'Rp ' + KK.fmtIdr(Math.round(total));
            ctx.fillText(totalStr, cx, cy + 2);
        },

        // ══════════════════════════════════════════════
        // PNL BAR CHART (Canvas 2D) — Responsive, no overlap
        // ══════════════════════════════════════════════
        renderPnlBarChart() {
            const canvas = this.$refs.pnlBarChart;
            const container = this.$refs.pnlContainer;
            if (!canvas || !container || portfolioItems.length === 0) return;

            const dpr = window.devicePixelRatio || 1;
            // Use actual container width
            const w = Math.max(container.clientWidth - 16, 280);
            const barH = 22;
            const gap = 6;
            const topPad = 4;
            const h = topPad + portfolioItems.length * (barH + gap);

            canvas.width = w * dpr;
            canvas.height = h * dpr;
            canvas.style.width = w + 'px';
            canvas.style.height = h + 'px';

            const ctx = canvas.getContext('2d');
            ctx.scale(dpr, dpr);
            ctx.clearRect(0, 0, w, h);

            // Dynamic label width: measure longest symbol
            ctx.font = '11px sans-serif';
            const labelW = Math.max(
                ...portfolioItems.map(p => ctx.measureText(p.coin_symbol).width),
                30
            ) + 12;
            const rightPad = 10;
            const chartW = w - labelW - rightPad;
            const maxAbs = Math.max(...portfolioItems.map(p => Math.abs(p.unrealized_pnl || 0)), 1);
            const zeroX = labelW + chartW / 2;

            // Sort by P&L for better visual
            const sorted = [...portfolioItems].sort((a, b) => (b.unrealized_pnl || 0) - (a.unrealized_pnl || 0));

            sorted.forEach((item, i) => {
                const y = topPad + i * (barH + gap);
                const pnl = item.unrealized_pnl || 0;
                const maxBarW = chartW / 2 - 50; // leave room for value text
                const barWidth = (Math.abs(pnl) / maxAbs) * maxBarW;
                const color = pnl >= 0 ? '#10B981' : '#EF4444';

                // Label
                ctx.fillStyle = '#9CA3AF';
                ctx.font = '11px sans-serif';
                ctx.textAlign = 'right';
                ctx.textBaseline = 'middle';
                ctx.fillText(item.coin_symbol, labelW - 6, y + barH / 2);

                // Bar with rounded ends
                ctx.fillStyle = color;
                ctx.globalAlpha = 0.7;
                const barR = Math.min(3, barH / 2 - 2);
                if (pnl >= 0 && barWidth > 0) {
                    this._roundRect(ctx, zeroX, y + 2, barWidth, barH - 4, barR);
                } else if (barWidth > 0) {
                    this._roundRect(ctx, zeroX - barWidth, y + 2, barWidth, barH - 4, barR);
                }
                ctx.globalAlpha = 1;

                // Value text — always outside the bar, clipped to canvas
                ctx.fillStyle = color;
                ctx.font = '10px monospace';
                const valStr = (pnl >= 0 ? '+' : '') + KK.fmtIdr(Math.round(pnl));
                if (pnl >= 0) {
                    ctx.textAlign = 'left';
                    ctx.fillText(valStr, Math.min(zeroX + barWidth + 4, w - rightPad - ctx.measureText(valStr).width), y + barH / 2);
                } else {
                    ctx.textAlign = 'right';
                    ctx.fillText(valStr, Math.max(zeroX - barWidth - 4, labelW + ctx.measureText(valStr).width), y + barH / 2);
                }
            });

            // Zero line
            ctx.beginPath();
            ctx.moveTo(zeroX, 0);
            ctx.lineTo(zeroX, h);
            ctx.strokeStyle = 'rgba(107, 114, 128, 0.3)';
            ctx.lineWidth = 1;
            ctx.setLineDash([3, 3]);
            ctx.stroke();
            ctx.setLineDash([]);
        },

        // Helper: rounded rectangle
        _roundRect(ctx, x, y, w, h, r) {
            ctx.beginPath();
            ctx.moveTo(x + r, y);
            ctx.lineTo(x + w - r, y);
            ctx.quadraticCurveTo(x + w, y, x + w, y + r);
            ctx.lineTo(x + w, y + h - r);
            ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
            ctx.lineTo(x + r, y + h);
            ctx.quadraticCurveTo(x, y + h, x, y + h - r);
            ctx.lineTo(x, y + r);
            ctx.quadraticCurveTo(x, y, x + r, y);
            ctx.closePath();
            ctx.fill();
        },

        // Responsive re-render for portfolio charts
        _setupPortfolioResize() {
            if (this._portfolioRO) this._portfolioRO.disconnect();
            const pnlContainer = this.$refs.pnlContainer;
            const donutContainer = this.$refs.donutContainer;
            let resizeTimer;
            this._portfolioRO = new ResizeObserver(() => {
                clearTimeout(resizeTimer);
                resizeTimer = setTimeout(() => {
                    this.renderDonutChart();
                    this.renderPnlBarChart();
                }, 150);
            });
            if (pnlContainer) this._portfolioRO.observe(pnlContainer);
            if (donutContainer) this._portfolioRO.observe(donutContainer);
        },

        // ══════════════════════════════════════════════
        // SYNC ALL (batch SSE)
        // ══════════════════════════════════════════════
        syncAll() {
            if (this.syncRunning) return;
            this.syncRunning = true;

            showSyncProgress('Memulai batch sync...', 0);

            fetch('/api/v1/market/sync/batch', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ include_profile: true, include_icon: true, limit: 100 }),
            }).then(response => {
                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let buffer = '';
                const self = this;

                function read() {
                    reader.read().then(({ done, value }) => {
                        if (done) {
                            self.syncRunning = false;
                            return;
                        }
                        buffer += decoder.decode(value, { stream: true });
                        const lines = buffer.split('\n');
                        buffer = lines.pop();
                        for (const line of lines) {
                            if (!line.startsWith('data: ')) continue;
                            try {
                                const evt = JSON.parse(line.substring(6));
                                handleBatchEvent(evt);
                            } catch (e) {}
                        }
                        read();
                    });
                }
                read();
            }).catch(e => {
                showStatus('Batch sync gagal: ' + e.message, true);
                this.syncRunning = false;
            });
        },
    };
}

// ── Sync Status helpers (standalone for SSE) ──
function showStatus(msg, isError = false, persistent = false) {
    const el = document.getElementById('sync-status');
    const msgEl = document.getElementById('sync-msg');
    const spinner = document.getElementById('sync-spinner');
    const bar = document.getElementById('sync-progress-bar');

    msgEl.textContent = msg;
    spinner.classList.add('hidden');
    bar.classList.add('hidden');
    el.className = `fixed bottom-4 right-4 glass rounded-lg border px-4 py-3 text-sm z-50 max-w-md ${isError ? 'border-red-700' : 'border-emerald-700'}`;
    msgEl.className = isError ? 'text-red-400' : 'text-emerald-400';
    if (!persistent) setTimeout(() => el.classList.add('hidden'), 5000);
}

function showSyncProgress(msg, pct) {
    const el = document.getElementById('sync-status');
    const msgEl = document.getElementById('sync-msg');
    const spinner = document.getElementById('sync-spinner');
    const bar = document.getElementById('sync-progress-bar');
    const fill = document.getElementById('sync-progress-fill');

    el.classList.remove('hidden');
    el.className = 'fixed bottom-4 right-4 glass rounded-lg border border-koin-700 px-4 py-3 text-sm z-50 max-w-md';
    msgEl.textContent = msg;
    msgEl.className = 'text-gray-300';
    spinner.classList.remove('hidden');
    bar.classList.remove('hidden');
    fill.style.width = pct + '%';
}

function handleBatchEvent(evt) {
    if (evt.type === 'start') {
        showSyncProgress(`Sync 0/${evt.total_steps} langkah...`, 0);
    } else if (evt.type === 'step') {
        const retryTag = (evt.attempt && evt.attempt > 1) ? ` (retry #${evt.attempt - 1})` : '';
        showSyncProgress(
            `${evt.step}/${evt.total_steps}: ${evt.msg || ''}${retryTag}`,
            evt.pct || 0
        );
    } else if (evt.type === 'done') {
        const failMsg = evt.failed_count > 0 ? ` ${evt.failed_count} gagal.` : '';
        showStatus(
            `Sync selesai! ${evt.ok_count}/${evt.total_count} berhasil.${failMsg}`,
            evt.failed_count > 0
        );
        setTimeout(() => location.reload(), 2000);
    }
}
</script>
{% endblock %}