{% extends "base.html" %}
{% block title %}Admin — Insider Detector{% endblock %}

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

    <!-- Header -->
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div class="flex items-center gap-3">
            <a href="{{ tools_base }}/" class="text-gray-500 hover:text-gray-300 transition">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-white flex items-center gap-2">
                    <svg class="w-6 h-6 text-violet-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                    Insider Detector
                </h1>
                <p class="text-sm text-gray-500 mt-0.5">Smart money accumulation &amp; distribution signals &mdash; deteksi pergerakan insider sebelum harga bereaksi.</p>
            </div>
        </div>
        <div class="flex items-center gap-3">
            <!-- Asset Type -->
            <select x-model="filters.asset_type" @change="fetchData()"
                    class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-300 focus:outline-none focus:ring-1 focus:ring-violet-500">
                <option value="all">Semua Aset</option>
                <option value="stock">Saham IDX</option>
                <option value="stock_us">Saham US</option>
            </select>
            <button @click="fetchData()" :disabled="loading"
                    class="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition"
                    :class="loading ? 'bg-gray-800 text-gray-500 cursor-not-allowed' : 'bg-violet-600 hover:bg-violet-700 text-white'">
                <svg :class="loading && 'animate-spin'" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                <span x-text="loading ? 'Loading...' : 'Refresh'"></span>
            </button>
        </div>
    </div>

    <!-- Stats Summary -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
        <div class="glass rounded-xl border border-gray-800 p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Total Analyzed</p>
            <p class="text-2xl font-bold text-white mt-1" x-text="stats.total_analyzed">0</p>
        </div>
        <div class="glass rounded-xl border border-emerald-800/50 p-4">
            <div class="flex items-center gap-2">
                <span class="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse"></span>
                <p class="text-xs text-gray-500 uppercase tracking-wider">Strong Accumulation</p>
            </div>
            <p class="text-2xl font-bold text-emerald-400 mt-1" x-text="stats.strong_accumulation">0</p>
        </div>
        <div class="glass rounded-xl border border-green-800/50 p-4">
            <div class="flex items-center gap-2">
                <span class="w-2.5 h-2.5 rounded-full bg-green-500"></span>
                <p class="text-xs text-gray-500 uppercase tracking-wider">Accumulation</p>
            </div>
            <p class="text-2xl font-bold text-green-400 mt-1" x-text="stats.accumulation">0</p>
        </div>
        <div class="glass rounded-xl border border-rose-800/50 p-4">
            <div class="flex items-center gap-2">
                <span class="w-2.5 h-2.5 rounded-full bg-rose-500"></span>
                <p class="text-xs text-gray-500 uppercase tracking-wider">Distribution</p>
            </div>
            <p class="text-2xl font-bold text-rose-400 mt-1" x-text="stats.distribution">0</p>
        </div>
    </div>

    <!-- Sector Clusters -->
    <div x-show="!loading && Object.keys(sectorClusters).length > 0" x-cloak
         class="glass rounded-xl border border-violet-800/40 p-4">
        <div class="flex items-center gap-2 mb-3">
            <svg class="w-4 h-4 text-violet-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/>
            </svg>
            <h3 class="text-sm font-semibold text-white">Sector Clusters</h3>
            <span class="text-xs text-gray-500">Grouped insider activity by sector</span>
        </div>
        <div class="flex flex-wrap gap-2">
            <template x-for="(cluster, sector) in sectorClusters" :key="sector">
                <button @click="filterBySector(sector)"
                        class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition border"
                        :class="filters.sector === sector
                            ? 'bg-violet-600/30 border-violet-500 text-violet-300'
                            : 'bg-gray-800/60 border-gray-700 text-gray-400 hover:border-gray-600 hover:text-gray-300'">
                    <span x-text="sector"></span>
                    <span class="flex items-center gap-1">
                        <span x-show="cluster.accumulation > 0" class="px-1.5 py-0.5 rounded bg-emerald-900/50 text-emerald-400 text-[10px]" x-text="'+' + cluster.accumulation"></span>
                        <span x-show="cluster.distribution > 0" class="px-1.5 py-0.5 rounded bg-rose-900/50 text-rose-400 text-[10px]" x-text="'-' + cluster.distribution"></span>
                        <span class="text-gray-600" x-text="'(' + cluster.total + ')'"></span>
                    </span>
                </button>
            </template>
        </div>
        <div x-show="filters.sector" class="mt-2">
            <button @click="filters.sector = ''; fetchData()" class="text-xs text-violet-400 hover:text-violet-300 underline transition">Clear sector filter</button>
        </div>
    </div>

    <!-- Filters & Sort -->
    <div class="flex flex-wrap items-center gap-2">
        <!-- Signal Filter -->
        <select x-model="filters.signal" @change="fetchData()"
                class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-300 focus:outline-none focus:ring-1 focus:ring-violet-500">
            <option value="all">Semua Signal</option>
            <option value="STRONG_ACCUMULATION">Strong Accumulation</option>
            <option value="ACCUMULATION">Accumulation</option>
            <option value="NEUTRAL">Neutral</option>
            <option value="DISTRIBUTION">Distribution</option>
            <option value="STRONG_DISTRIBUTION">Strong Distribution</option>
        </select>

        <!-- Sort -->
        <select x-model="sortBy" @change="fetchData()"
                class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-300 focus:outline-none focus:ring-1 focus:ring-violet-500">
            <option value="insider_score">Insider Score</option>
            <option value="buy_count">Buy Count</option>
            <option value="institutional">Institutional Momentum</option>
        </select>

        <!-- Search -->
        <div class="relative flex-1 min-w-[160px]">
            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            <input type="text" x-model="searchQ" @input.debounce.300ms="fetchData()"
                   placeholder="Cari symbol/nama..."
                   class="w-full bg-gray-800 border border-gray-700 rounded-lg pl-9 pr-3 py-1.5 text-sm text-gray-300 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-violet-500">
        </div>
    </div>

    <!-- Loading State -->
    <div x-show="loading" x-cloak class="text-center py-12">
        <svg class="animate-spin h-8 w-8 text-violet-500 mx-auto" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
        </svg>
        <p class="text-gray-500 text-sm mt-3">Scanning insider activity &amp; smart money flows...</p>
    </div>

    <!-- Empty State -->
    <div x-show="!loading && items.length === 0" x-cloak
         class="text-center py-16 glass rounded-xl border border-gray-800">
        <svg class="mx-auto h-12 w-12 text-gray-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
        </svg>
        <h3 class="mt-4 text-lg font-medium text-gray-400">Belum Ada Data Insider</h3>
        <p class="mt-2 text-sm text-gray-600 max-w-md mx-auto">
            Jalankan scan insider detector terlebih dahulu melalui
            <a href="/admin/workflow" class="text-violet-400 hover:text-violet-300">Pipeline Workflow</a>
            untuk menganalisis aktivitas smart money.
        </p>
    </div>

    <!-- Insider Cards Grid -->
    <div x-show="!loading && items.length > 0" x-cloak class="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <template x-for="(item, idx) in items" :key="item.asset_id || item.coin_symbol">
            <div class="glass rounded-xl border overflow-hidden animate-fadeIn transition"
                 :class="signalBorderClass(item.signal)"
                 :style="'animation-delay: ' + (idx * 40) + 'ms'">

                <!-- Card Header -->
                <div class="p-4 pb-3">
                    <div class="flex items-center justify-between">
                        <a :href="'/market/asset/' + (item.asset_id || '')" class="flex items-center gap-3 group">
                            <img :src="item.icon_thumb_url || (item.asset_type && item.coin_symbol ? __stockIconUrl(item.coin_symbol) : '')"
                                 :data-symbol="item.coin_symbol"
                                 class="w-10 h-10 rounded-full flex-shrink-0" loading="lazy"
                                 onerror="__iconError(this)"
                                 x-show="item.icon_thumb_url || item.asset_type">
                            <span x-show="!item.icon_thumb_url && !item.asset_type"
                                  class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-sm text-gray-400 flex-shrink-0"
                                  x-text="(item.coin_symbol || '?')[0].toUpperCase()"></span>
                            <div>
                                <span class="text-white font-semibold group-hover:text-violet-400 transition" x-text="item.coin_name"></span>
                                <div class="flex items-center gap-2 mt-0.5">
                                    <span class="text-xs text-gray-500 font-mono" x-text="(item.coin_symbol || '').toUpperCase()"></span>
                                    <!-- Sector Badge -->
                                    <span x-show="item.sector"
                                          class="text-[10px] px-1.5 py-0.5 rounded bg-violet-900/40 text-violet-400 border border-violet-800/40"
                                          x-text="item.sector"></span>
                                </div>
                            </div>
                        </a>

                        <!-- Insider Score (big number) -->
                        <div class="text-right flex flex-col items-end">
                            <div class="text-3xl font-black tabular-nums leading-none"
                                 :class="insiderScoreColor(item.insider_score)"
                                 x-text="item.insider_score != null ? (item.insider_score >= 0 ? '+' : '') + item.insider_score.toFixed(0) : '-'">
                            </div>
                            <span class="text-[10px] text-gray-500 mt-0.5">INSIDER SCORE</span>
                        </div>
                    </div>

                    <!-- Signal Badge Row -->
                    <div class="flex items-center justify-between mt-3">
                        <span class="text-xs px-2.5 py-1 rounded-full font-semibold uppercase tracking-wider"
                              :class="signalBadgeClass(item.signal)"
                              x-text="signalLabel(item.signal)"></span>

                        <!-- Price Change 30d -->
                        <div class="flex items-center gap-2 text-xs">
                            <span x-show="item.ml_trend"
                                  class="px-1.5 py-0.5 rounded text-[10px] font-medium"
                                  :class="item.ml_trend === 'bullish' ? 'bg-emerald-900/40 text-emerald-400' :
                                          item.ml_trend === 'bearish' ? 'bg-rose-900/40 text-rose-400' :
                                          'bg-gray-800 text-gray-400'"
                                  x-text="'ML: ' + item.ml_trend"></span>
                            <span :class="(item.price_change_30d || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                  x-text="item.price_change_30d != null ? (item.price_change_30d >= 0 ? '+' : '') + item.price_change_30d.toFixed(1) + '% (30d)' : ''"></span>
                        </div>
                    </div>
                </div>

                <!-- Buy/Sell Ratio Section -->
                <div class="mx-4 mb-3 bg-gray-900/60 border border-gray-800 rounded-lg p-3">
                    <div class="text-[10px] font-semibold text-gray-500 uppercase tracking-wider mb-2">Buy vs Sell Activity</div>
                    <div class="flex items-center justify-between text-sm mb-1.5">
                        <div class="flex items-center gap-1.5">
                            <svg class="w-3.5 h-3.5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.577 4.878a.75.75 0 01.919-.53l4.78 1.281a.75.75 0 01.531.919l-1.281 4.78a.75.75 0 01-1.449-.387l.81-3.022a19.407 19.407 0 00-5.594 5.203.75.75 0 01-1.139.093L7 10.06l-4.72 4.72a.75.75 0 01-1.06-1.061l5.25-5.25a.75.75 0 011.06 0l3.074 3.073a20.923 20.923 0 015.545-4.931l-3.042.815a.75.75 0 01-.53-.919z" clip-rule="evenodd"/></svg>
                            <span class="text-emerald-400 font-semibold" x-text="(item.insider_buy_count || 0) + ' Buys'"></span>
                        </div>
                        <div class="flex items-center gap-1.5">
                            <span class="text-rose-400 font-semibold" x-text="(item.insider_sell_count || 0) + ' Sells'"></span>
                            <svg class="w-3.5 h-3.5 text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M1.22 5.222a.75.75 0 011.06 0L7 9.942l3.768-3.769a.75.75 0 011.113.058 20.908 20.908 0 013.813 7.254l1.574-2.727a.75.75 0 011.3.75l-2.475 4.286a.75.75 0 01-1.025.275l-4.287-2.475a.75.75 0 01.75-1.3l2.71 1.565a19.422 19.422 0 00-3.013-6.024L7.53 11.533a.75.75 0 01-1.06 0l-5.25-5.25a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>
                        </div>
                    </div>
                    <!-- Ratio Bar -->
                    <div class="w-full h-3 bg-gray-800 rounded-full overflow-hidden flex">
                        <div class="h-full bg-emerald-500 transition-all duration-500 rounded-l-full"
                             :style="'width: ' + buyRatioPercent(item) + '%'"></div>
                        <div class="h-full bg-rose-500 transition-all duration-500 rounded-r-full"
                             :style="'width: ' + (100 - buyRatioPercent(item)) + '%'"></div>
                    </div>
                    <div class="flex justify-between mt-1">
                        <span class="text-[10px] text-emerald-500/70" x-text="buyRatioPercent(item).toFixed(0) + '%'"></span>
                        <span class="text-[10px] text-rose-500/70" x-text="(100 - buyRatioPercent(item)).toFixed(0) + '%'"></span>
                    </div>
                </div>

                <!-- Large Transactions -->
                <div x-show="item.large_transactions && item.large_transactions.length > 0"
                     class="mx-4 mb-3 bg-violet-950/20 border border-violet-900/30 rounded-lg p-3">
                    <div class="text-[10px] font-semibold text-violet-500 uppercase tracking-wider mb-2">Large Transactions</div>
                    <div class="space-y-1.5 max-h-28 overflow-y-auto">
                        <template x-for="(tx, tidx) in (item.large_transactions || []).slice(0, 5)" :key="tidx">
                            <div class="flex items-center justify-between text-xs">
                                <div class="flex items-center gap-2 min-w-0">
                                    <span class="w-1.5 h-1.5 rounded-full flex-shrink-0"
                                          :class="tx.type === 'buy' ? 'bg-emerald-400' : 'bg-rose-400'"></span>
                                    <span class="text-gray-400 truncate" x-text="tx.insider_name || 'Unknown'"></span>
                                    <span x-show="tx.insider_title"
                                          class="text-[10px] text-gray-600 truncate hidden sm:inline"
                                          x-text="'(' + tx.insider_title + ')'"></span>
                                </div>
                                <span class="font-mono tabular-nums flex-shrink-0 ml-2"
                                      :class="tx.type === 'buy' ? 'text-emerald-400' : 'text-rose-400'"
                                      x-text="(tx.type === 'buy' ? '+' : '-') + formatCompact(tx.amount)"></span>
                            </div>
                        </template>
                    </div>
                    <div x-show="(item.large_transactions || []).length > 5"
                         class="text-[10px] text-violet-500 mt-1.5"
                         x-text="'+ ' + ((item.large_transactions || []).length - 5) + ' more transactions'"></div>
                </div>

                <!-- Institutional Momentum -->
                <div class="mx-4 mb-3">
                    <div class="flex items-center justify-between mb-1.5">
                        <span class="text-[10px] font-semibold text-gray-500 uppercase tracking-wider">Institutional Momentum</span>
                        <span class="text-xs font-mono tabular-nums"
                              :class="(item.institutional_momentum || 0) > 0 ? 'text-emerald-400' :
                                      (item.institutional_momentum || 0) < 0 ? 'text-rose-400' : 'text-gray-400'"
                              x-text="(item.institutional_momentum != null ? ((item.institutional_momentum >= 0 ? '+' : '') + item.institutional_momentum.toFixed(0)) : '0')"></span>
                    </div>
                    <!-- Momentum Bar: -100 to +100, centered at 50% -->
                    <div class="relative w-full h-3 bg-gray-800 rounded-full overflow-hidden">
                        <!-- Center line -->
                        <div class="absolute left-1/2 top-0 w-px h-full bg-gray-600 z-10"></div>
                        <!-- Positive bar (grows right from center) -->
                        <div x-show="(item.institutional_momentum || 0) > 0"
                             class="absolute top-0 h-full bg-emerald-500/70 rounded-r-full transition-all duration-500"
                             :style="'left: 50%; width: ' + (Math.min(Math.abs(item.institutional_momentum || 0), 100) / 2) + '%'"></div>
                        <!-- Negative bar (grows left from center) -->
                        <div x-show="(item.institutional_momentum || 0) < 0"
                             class="absolute top-0 h-full bg-rose-500/70 rounded-l-full transition-all duration-500"
                             :style="'right: 50%; width: ' + (Math.min(Math.abs(item.institutional_momentum || 0), 100) / 2) + '%'"></div>
                    </div>
                    <div class="flex justify-between mt-0.5">
                        <span class="text-[9px] text-gray-600">-100</span>
                        <span class="text-[9px] text-gray-600">0</span>
                        <span class="text-[9px] text-gray-600">+100</span>
                    </div>
                </div>

                <!-- Price Confirmation -->
                <div class="mx-4 mb-4 flex items-center justify-between">
                    <div class="flex items-center gap-2">
                        <span class="text-[10px] font-semibold text-gray-500 uppercase tracking-wider">Price Confirmation</span>
                        <template x-if="item.price_confirmed === true">
                            <span class="flex items-center gap-1 text-xs text-emerald-400">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                                Confirmed
                            </span>
                        </template>
                        <template x-if="item.price_confirmed === false">
                            <span class="flex items-center gap-1 text-xs text-rose-400">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/></svg>
                                Not Confirmed
                            </span>
                        </template>
                        <template x-if="item.price_confirmed == null">
                            <span class="text-xs text-gray-500">N/A</span>
                        </template>
                    </div>
                    <!-- ML Trend Badge -->
                    <span x-show="item.ml_trend"
                          class="text-[10px] px-2 py-0.5 rounded-full font-medium"
                          :class="item.ml_trend === 'bullish' ? 'bg-emerald-900/40 text-emerald-400 border border-emerald-800/40' :
                                  item.ml_trend === 'bearish' ? 'bg-rose-900/40 text-rose-400 border border-rose-800/40' :
                                  'bg-gray-800 text-gray-400 border border-gray-700'"
                          x-text="'ML: ' + (item.ml_trend || '-')"></span>
                </div>
            </div>
        </template>
    </div>

    <!-- Load More -->
    <div x-show="!loading && hasMore" x-cloak class="text-center">
        <button @click="loadMore()" :disabled="loadingMore"
                class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-medium rounded-lg transition border border-gray-700 hover:border-gray-600 bg-gray-800/50 text-gray-300 hover:text-white disabled:opacity-50">
            <svg x-show="loadingMore" class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
            </svg>
            <span x-text="loadingMore ? 'Loading...' : 'Load More'"></span>
        </button>
    </div>

    <!-- Recommendations Section -->
    <div x-show="!loading && recommendations.length > 0" x-cloak
         class="glass rounded-xl border border-violet-800/40 p-5">
        <div class="flex items-center gap-2 mb-4">
            <svg class="w-5 h-5 text-violet-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"/>
            </svg>
            <h3 class="text-lg font-semibold text-white">Recommendations</h3>
        </div>
        <div class="space-y-3">
            <template x-for="(rec, ridx) in recommendations" :key="ridx">
                <div class="flex items-start gap-3 p-3 rounded-lg"
                     :class="rec.type === 'accumulation' ? 'bg-emerald-950/20 border border-emerald-900/30' :
                             rec.type === 'distribution' ? 'bg-rose-950/20 border border-rose-900/30' :
                             'bg-gray-800/40 border border-gray-700'">
                    <div class="flex-shrink-0 mt-0.5">
                        <template x-if="rec.type === 'accumulation'">
                            <svg class="w-5 h-5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.577 4.878a.75.75 0 01.919-.53l4.78 1.281a.75.75 0 01.531.919l-1.281 4.78a.75.75 0 01-1.449-.387l.81-3.022a19.407 19.407 0 00-5.594 5.203.75.75 0 01-1.139.093L7 10.06l-4.72 4.72a.75.75 0 01-1.06-1.061l5.25-5.25a.75.75 0 011.06 0l3.074 3.073a20.923 20.923 0 015.545-4.931l-3.042.815a.75.75 0 01-.53-.919z" clip-rule="evenodd"/></svg>
                        </template>
                        <template x-if="rec.type === 'distribution'">
                            <svg class="w-5 h-5 text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M1.22 5.222a.75.75 0 011.06 0L7 9.942l3.768-3.769a.75.75 0 011.113.058 20.908 20.908 0 013.813 7.254l1.574-2.727a.75.75 0 011.3.75l-2.475 4.286a.75.75 0 01-1.025.275l-4.287-2.475a.75.75 0 01.75-1.3l2.71 1.565a19.422 19.422 0 00-3.013-6.024L7.53 11.533a.75.75 0 01-1.06 0l-5.25-5.25a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>
                        </template>
                        <template x-if="rec.type !== 'accumulation' && rec.type !== 'distribution'">
                            <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"/></svg>
                        </template>
                    </div>
                    <div class="min-w-0">
                        <div class="flex items-center gap-2 mb-0.5">
                            <span class="text-sm font-semibold"
                                  :class="rec.type === 'accumulation' ? 'text-emerald-400' :
                                          rec.type === 'distribution' ? 'text-rose-400' : 'text-gray-300'"
                                  x-text="rec.title"></span>
                            <span x-show="rec.symbol"
                                  class="text-[10px] font-mono px-1.5 py-0.5 rounded bg-gray-800 text-gray-400"
                                  x-text="rec.symbol"></span>
                        </div>
                        <p class="text-xs text-gray-400 leading-relaxed" x-text="rec.description"></p>
                    </div>
                </div>
            </template>
        </div>
    </div>

</div>

<script>
function insiderDetectorPanel() {
    return {
        items: [],
        loading: false,
        loadingMore: false,
        total: 0,
        hasMore: false,
        page: 1,
        searchQ: '',
        sortBy: 'insider_score',
        sectorClusters: {},
        recommendations: [],
        stats: {
            total_analyzed: 0,
            strong_accumulation: 0,
            accumulation: 0,
            distribution: 0
        },
        filters: {
            asset_type: '{{ asset_mode }}',
            signal: 'all',
            sector: ''
        },

        async fetchData() {
            this.page = 1;
            this.loading = true;
            try {
                const data = await this._fetch(1);
                this.items = data.items || [];
                this.total = data.total || 0;
                this.hasMore = data.has_more || false;
                this.sectorClusters = data.sector_clusters || {};
                this.recommendations = data.recommendations || [];
                this.computeStats();
            } catch (e) {
                console.error('Insider detector fetch error:', e);
            } finally {
                this.loading = false;
            }
        },

        async loadMore() {
            this.page++;
            this.loadingMore = true;
            try {
                const data = await this._fetch(this.page);
                this.items = this.items.concat(data.items || []);
                this.hasMore = data.has_more || false;
                this.computeStats();
            } catch (e) {
                console.error('Load more error:', e);
                this.page--;
            } finally {
                this.loadingMore = false;
            }
        },

        async _fetch(page) {
            const params = new URLSearchParams({
                asset_type: this.filters.asset_type,
                signal: this.filters.signal,
                sector: this.filters.sector,
                sort: this.sortBy,
                limit: 20,
                page: page,
                q: this.searchQ,
            });
            const resp = await fetch(`/api/v1/market/insider-detector?${params}`);
            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
            return await resp.json();
        },

        computeStats() {
            const all = this.items;
            this.stats = {
                total_analyzed: this.total,
                strong_accumulation: all.filter(i => i.signal === 'STRONG_ACCUMULATION').length,
                accumulation: all.filter(i => i.signal === 'ACCUMULATION').length,
                distribution: all.filter(i => i.signal === 'DISTRIBUTION' || i.signal === 'STRONG_DISTRIBUTION').length,
            };
        },

        filterBySector(sector) {
            if (this.filters.sector === sector) {
                this.filters.sector = '';
            } else {
                this.filters.sector = sector;
            }
            this.fetchData();
        },

        buyRatioPercent(item) {
            const buys = item.insider_buy_count || 0;
            const sells = item.insider_sell_count || 0;
            const total = buys + sells;
            if (total === 0) return 50;
            return (buys / total) * 100;
        },

        insiderScoreColor(score) {
            if (score == null) return 'text-gray-400';
            if (score >= 40) return 'text-emerald-400';
            if (score >= 10) return 'text-green-400';
            if (score <= -40) return 'text-rose-400';
            if (score <= -10) return 'text-orange-400';
            return 'text-gray-400';
        },

        signalBadgeClass(signal) {
            return {
                'STRONG_ACCUMULATION': 'bg-emerald-900/50 text-emerald-300 border border-emerald-700/50',
                'ACCUMULATION': 'bg-green-900/50 text-green-300 border border-green-700/50',
                'NEUTRAL': 'bg-gray-800 text-gray-400 border border-gray-700',
                'DISTRIBUTION': 'bg-orange-900/50 text-orange-300 border border-orange-700/50',
                'STRONG_DISTRIBUTION': 'bg-rose-900/50 text-rose-300 border border-rose-700/50',
            }[signal] || 'bg-gray-800 text-gray-400 border border-gray-700';
        },

        signalBorderClass(signal) {
            return {
                'STRONG_ACCUMULATION': 'border-emerald-800/60 hover:border-emerald-700',
                'ACCUMULATION': 'border-green-800/60 hover:border-green-700',
                'NEUTRAL': 'border-gray-800 hover:border-gray-700',
                'DISTRIBUTION': 'border-orange-800/60 hover:border-orange-700',
                'STRONG_DISTRIBUTION': 'border-rose-800/60 hover:border-rose-700',
            }[signal] || 'border-gray-800 hover:border-gray-700';
        },

        signalLabel(signal) {
            return {
                'STRONG_ACCUMULATION': 'Strong Accumulation',
                'ACCUMULATION': 'Accumulation',
                'NEUTRAL': 'Neutral',
                'DISTRIBUTION': 'Distribution',
                'STRONG_DISTRIBUTION': 'Strong Distribution',
            }[signal] || signal || 'Unknown';
        },

        formatCompact(n) {
            if (n == null) return '-';
            const abs = Math.abs(n);
            if (abs >= 1e12) return (n / 1e12).toFixed(1) + 'T';
            if (abs >= 1e9) return (n / 1e9).toFixed(1) + 'B';
            if (abs >= 1e6) return (n / 1e6).toFixed(1) + 'M';
            if (abs >= 1e3) return (n / 1e3).toFixed(1) + 'K';
            return new Intl.NumberFormat('id-ID').format(n);
        },

        formatNumber(val) {
            if (val == null || isNaN(val)) return '-';
            const v = Number(val);
            if (v === 0) return '0';
            const abs = Math.abs(v);
            if (abs >= 1_000_000_000_000) return new Intl.NumberFormat('id-ID', {maximumFractionDigits: 1}).format(v / 1_000_000_000_000) + 'T';
            if (abs >= 1_000_000_000) return new Intl.NumberFormat('id-ID', {maximumFractionDigits: 1}).format(v / 1_000_000_000) + 'B';
            if (abs >= 100) return new Intl.NumberFormat('id-ID', {maximumFractionDigits: 0}).format(v);
            if (abs >= 1) return new Intl.NumberFormat('id-ID', {maximumFractionDigits: 2}).format(v);
            return new Intl.NumberFormat('id-ID', {maximumFractionDigits: 4}).format(v);
        },
    };
}
</script>
{% endblock %}