{% extends "settings/_layout.html" %}
{% block title %}Settings - Data Source{% endblock %}

{% block settings_content %}
<div class="space-y-6" x-data="dataSourceSettings()">

    <!-- Tab Navigation -->
    <div class="flex items-center gap-1 overflow-x-auto scrollbar-hide border-b border-gray-800 -mb-3">
        <template x-for="tab in tabs" :key="tab.id">
            <button @click="activeTab = tab.id"
                    :class="activeTab === tab.id
                        ? 'border-b-2 border-koin-500 text-koin-400'
                        : 'border-b-2 border-transparent text-gray-500 hover:text-gray-300'"
                    class="flex items-center gap-2 px-4 py-3 text-sm font-medium whitespace-nowrap transition shrink-0">
                <span x-text="tab.label"></span>
                <span x-show="tab.dot" class="w-1.5 h-1.5 rounded-full"
                      :class="tab.dot" x-cloak></span>
            </button>
        </template>
    </div>

    <!-- ===================== OVERVIEW TAB ===================== -->
    <div x-show="activeTab === 'overview'" x-cloak>
        <div class="space-y-6">

            <!-- Active Source Selector -->
            <div class="glass rounded-xl border border-gray-800 p-6">
                <h3 class="text-lg font-semibold text-white mb-1">Sumber Data Aktif</h3>
                <p class="text-xs text-gray-500 mb-4">Pilih sumber data utama untuk sinkronisasi OHLCV & profil koin.</p>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <template x-for="src in ['coingecko', 'indodax', 'tokocrypto']" :key="src">
                        <button @click="sources[src].status !== 'coming_soon' && setSource(src)"
                                :class="{
                                    'border-koin-500 bg-koin-900/30 ring-1 ring-koin-500/30': activeSource === src,
                                    'border-gray-700 hover:border-gray-600': activeSource !== src && sources[src].status !== 'coming_soon',
                                    'border-gray-800 opacity-60 cursor-not-allowed': sources[src].status === 'coming_soon'
                                }"
                                class="relative p-4 rounded-xl border transition text-left">
                            <!-- Status badge -->
                            <span class="absolute top-3 right-3 text-[10px] px-2 py-0.5 rounded-full font-medium"
                                  :class="getStatusBadge(src).cls"
                                  x-text="getStatusBadge(src).text"></span>
                            <p class="font-semibold text-white" x-text="sources[src].name"></p>
                            <p class="text-[11px] text-gray-500 mt-0.5" x-text="sources[src].type"></p>
                            <p class="text-xs text-gray-400 mt-2" x-text="sources[src].shortDesc"></p>
                        </button>
                    </template>
                </div>
            </div>

            <!-- Sync Timeframes -->
            <div class="glass rounded-xl border border-gray-800 p-6">
                <h3 class="text-lg font-semibold text-white mb-1">Timeframe Sync</h3>
                <p class="text-xs text-gray-500 mb-4">Pilih timeframe yang akan di-sync saat sinkronisasi data OHLCV.</p>
                <div class="flex flex-wrap gap-3">
                    <template x-for="tf in allTimeframes" :key="tf">
                        <label class="flex items-center gap-2 px-3 py-2 rounded-lg border cursor-pointer transition"
                               :class="syncTimeframes.includes(tf) ? 'border-koin-500 bg-koin-900/30' : 'border-gray-700 hover:border-gray-600'">
                            <input type="checkbox" :value="tf"
                                   :checked="syncTimeframes.includes(tf)"
                                   @change="toggleTimeframe(tf)"
                                   class="rounded border-gray-600 bg-gray-800 text-koin-500 focus:ring-koin-500">
                            <span class="text-sm font-mono" x-text="tf"></span>
                        </label>
                    </template>
                </div>
                <button @click="saveTimeframes()" :disabled="savingTimeframes"
                        class="mt-4 px-5 py-2 bg-koin-600 hover:bg-koin-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg text-sm transition flex items-center gap-2">
                    <svg x-show="savingTimeframes" 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"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    <span x-text="savingTimeframes ? 'Menyimpan...' : 'Simpan Timeframes'"></span>
                </button>
            </div>

            <!-- Comparison Table -->
            <div class="glass rounded-xl border border-gray-800 overflow-hidden">
                <div class="px-4 py-3 border-b border-gray-800">
                    <h3 class="text-lg font-semibold text-white">Perbandingan Sumber Data</h3>
                </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-3 text-left">Fitur</th>
                                <th class="px-4 py-3 text-center">CoinGecko</th>
                                <th class="px-4 py-3 text-center">Indodax</th>
                                <th class="px-4 py-3 text-center">Tokocrypto</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-800/50">
                            <template x-for="row in comparisonRows" :key="row.feature">
                                <tr class="hover:bg-gray-800/30">
                                    <td class="px-4 py-2.5 text-gray-300 font-medium" x-text="row.feature"></td>
                                    <template x-for="src in ['coingecko', 'indodax', 'tokocrypto']" :key="src">
                                        <td class="px-4 py-2.5 text-center">
                                            <span :class="{
                                                'text-emerald-400': row[src] === true,
                                                'text-red-400': row[src] === false,
                                                'text-gray-400': typeof row[src] === 'string'
                                            }" x-text="row[src] === true ? '&#10003;' : (row[src] === false ? '&#10007;' : row[src])"></span>
                                        </td>
                                    </template>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
                <p class="px-4 py-2 text-[11px] text-gray-500">* CoinGecko mendukung semua 7 timeframe via mapping days — candle granularity otomatis (30min/4h/daily).</p>
            </div>
        </div>
    </div>

    <!-- ===================== PER-SOURCE TAB ===================== -->
    <template x-for="srcKey in ['coingecko', 'indodax', 'tokocrypto']" :key="srcKey">
        <div x-show="activeTab === srcKey" x-cloak>
            <div class="space-y-6">

                <!-- Header Card -->
                <div class="glass rounded-xl border border-gray-800 p-6">
                    <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
                        <div>
                            <div class="flex items-center gap-3 mb-1">
                                <h2 class="text-xl font-bold text-white" x-text="sources[srcKey].name"></h2>
                                <span class="text-[10px] px-2 py-0.5 rounded-full font-medium"
                                      :class="getStatusBadge(srcKey).cls"
                                      x-text="getStatusBadge(srcKey).text"></span>
                            </div>
                            <p class="text-sm text-gray-400" x-text="sources[srcKey].type"></p>
                            <p class="text-sm text-gray-300 mt-2" x-text="sources[srcKey].description"></p>
                        </div>
                        <div class="flex flex-col gap-1 text-xs text-gray-500 shrink-0 md:text-right">
                            <a :href="sources[srcKey].website" target="_blank"
                               class="text-koin-400 hover:text-koin-300 transition">
                                <span x-text="sources[srcKey].website"></span> &nearr;
                            </a>
                            <a :href="sources[srcKey].docsUrl" target="_blank"
                               class="text-gray-400 hover:text-gray-300 transition">
                                API Docs &nearr;
                            </a>
                            <p>Base URL: <span class="font-mono text-gray-400" x-text="sources[srcKey].baseUrl"></span></p>
                            <p>Rate Limit: <span class="text-gray-400" x-text="sources[srcKey].rateLimit"></span></p>
                        </div>
                    </div>
                </div>

                <!-- Data Capabilities -->
                <div class="glass rounded-xl border border-gray-800 p-6">
                    <h3 class="text-base font-semibold text-white mb-4">Data yang Tersedia</h3>
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                        <template x-for="cap in sources[srcKey].capabilities" :key="cap.name">
                            <div class="p-3 rounded-lg border border-gray-800 bg-gray-900/30">
                                <div class="flex items-center gap-2 mb-1">
                                    <span class="text-sm" :class="cap.available ? 'text-emerald-400' : 'text-red-400'"
                                          x-text="cap.available ? '&#10003;' : '&#10007;'"></span>
                                    <span class="text-sm font-medium text-white" x-text="cap.name"></span>
                                </div>
                                <p class="text-xs text-gray-500" x-text="cap.note"></p>
                            </div>
                        </template>
                    </div>
                </div>

                <!-- Supported Timeframes -->
                <div class="glass rounded-xl border border-gray-800 p-6">
                    <h3 class="text-base font-semibold text-white mb-3">Timeframe Didukung</h3>
                    <div class="flex flex-wrap gap-2 mb-2">
                        <template x-for="tf in sources[srcKey].timeframes" :key="tf">
                            <span class="px-3 py-1 rounded-full text-xs font-mono bg-gray-800 text-gray-300 border border-gray-700"
                                  x-text="tf"></span>
                        </template>
                    </div>
                    <p class="text-xs text-gray-500" x-text="sources[srcKey].timeframeNote"></p>
                </div>

                <!-- Pros & Cons -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="glass rounded-xl border border-gray-800 p-6">
                        <h3 class="text-base font-semibold text-emerald-400 mb-3">Keunggulan</h3>
                        <ul class="space-y-2">
                            <template x-for="pro in sources[srcKey].pros" :key="pro">
                                <li class="flex items-start gap-2 text-sm text-gray-300">
                                    <span class="text-emerald-400 mt-0.5 shrink-0">+</span>
                                    <span x-text="pro"></span>
                                </li>
                            </template>
                        </ul>
                    </div>
                    <div class="glass rounded-xl border border-gray-800 p-6">
                        <h3 class="text-base font-semibold text-amber-400 mb-3">Limitasi</h3>
                        <ul class="space-y-2">
                            <template x-for="con in sources[srcKey].cons" :key="con">
                                <li class="flex items-start gap-2 text-sm text-gray-300">
                                    <span class="text-amber-400 mt-0.5 shrink-0">!</span>
                                    <span x-text="con"></span>
                                </li>
                            </template>
                        </ul>
                    </div>
                </div>

                <!-- API Configuration -->
                <div class="glass rounded-xl border border-gray-800 p-6">
                    <h3 class="text-base font-semibold text-white mb-1">Konfigurasi API</h3>
                    <p class="text-xs text-gray-500 mb-4" x-text="sources[srcKey].apiNote"></p>

                    <!-- Current status -->
                    <div class="flex items-center gap-2 mb-4 p-3 rounded-lg"
                         :class="apiKeys[srcKey].hasKey ? 'bg-emerald-900/20 border border-emerald-800/50' : 'bg-gray-900/30 border border-gray-800'">
                        <span class="w-2 h-2 rounded-full" :class="apiKeys[srcKey].hasKey ? 'bg-emerald-400' : 'bg-gray-600'"></span>
                        <span class="text-sm" :class="apiKeys[srcKey].hasKey ? 'text-emerald-300' : 'text-gray-500'"
                              x-text="apiKeys[srcKey].hasKey ? 'API Key terkonfigurasi' : 'Belum ada API Key'"></span>
                        <span x-show="apiKeys[srcKey].hasKey && apiKeys[srcKey].maskedKey"
                              class="text-xs font-mono text-gray-500 ml-auto"
                              x-text="apiKeys[srcKey].maskedKey" x-cloak></span>
                    </div>

                    <!-- API Key form -->
                    <div class="space-y-3">
                        <div>
                            <label class="block text-xs text-gray-400 mb-1">API Key</label>
                            <div class="relative">
                                <input :type="showApiKey[srcKey] ? 'text' : 'password'"
                                       x-model="apiForm[srcKey].apiKey"
                                       placeholder="Masukkan API key..."
                                       class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-koin-500 focus:ring-1 focus:ring-koin-500 pr-10">
                                <button @click="showApiKey[srcKey] = !showApiKey[srcKey]"
                                        class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300 p-1"
                                        type="button">
                                    <svg x-show="!showApiKey[srcKey]" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                    </svg>
                                    <svg x-show="showApiKey[srcKey]" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" x-cloak>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.542 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
                                    </svg>
                                </button>
                            </div>
                        </div>

                        <!-- API Secret (exchanges only) -->
                        <div x-show="sources[srcKey].hasSecret">
                            <label class="block text-xs text-gray-400 mb-1">API Secret</label>
                            <input type="password" x-model="apiForm[srcKey].apiSecret"
                                   placeholder="Masukkan API secret..."
                                   class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-koin-500 focus:ring-1 focus:ring-koin-500">
                            <p x-show="apiKeys[srcKey].maskedSecret" class="text-xs text-gray-600 mt-1">
                                Current: <span class="font-mono" x-text="apiKeys[srcKey].maskedSecret"></span>
                            </p>
                        </div>

                        <div class="flex gap-2 pt-1">
                            <button @click="saveApiKey(srcKey)"
                                    :disabled="!apiForm[srcKey].apiKey || savingApiKey[srcKey]"
                                    :class="(apiForm[srcKey].apiKey && !savingApiKey[srcKey]) ? 'bg-koin-600 hover:bg-koin-700 text-white' : 'bg-gray-800 text-gray-600 cursor-not-allowed'"
                                    class="px-4 py-2 rounded-lg text-sm transition flex items-center gap-2">
                                <svg x-show="savingApiKey[srcKey]" 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"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                                <span x-text="savingApiKey[srcKey] ? 'Menyimpan...' : 'Simpan API Key'"></span>
                            </button>
                            <button @click="removeApiKey(srcKey)"
                                    x-show="apiKeys[srcKey].hasKey"
                                    class="px-4 py-2 rounded-lg text-sm bg-red-900/30 text-red-400 hover:bg-red-900/50 border border-red-800/50 transition"
                                    x-cloak>
                                Hapus
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Sync Configuration -->
                <div class="glass rounded-xl border border-gray-800 p-6">
                    <h3 class="text-base font-semibold text-white mb-1">Konfigurasi Sync</h3>
                    <p class="text-xs text-gray-500 mb-4">Atur parameter retry, rate limit, dan timeout untuk sinkronisasi data dari sumber ini.</p>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <!-- Max Retries -->
                        <div>
                            <label class="block text-xs text-gray-400 mb-1">Max Retries</label>
                            <input type="number" min="0" max="10" step="1"
                                   x-model.number="syncConfig[srcKey].retry_max"
                                   class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:border-koin-500 focus:ring-1 focus:ring-koin-500">
                            <p class="text-[10px] text-gray-600 mt-0.5">Jumlah percobaan ulang jika request gagal (0-10)</p>
                        </div>

                        <!-- Base Retry Delay -->
                        <div>
                            <label class="block text-xs text-gray-400 mb-1">Base Retry Delay</label>
                            <div class="relative">
                                <input type="number" min="0.1" max="60" step="0.1"
                                       x-model.number="syncConfig[srcKey].retry_base_delay"
                                       class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:border-koin-500 focus:ring-1 focus:ring-koin-500 pr-8">
                                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-600">s</span>
                            </div>
                            <p class="text-[10px] text-gray-600 mt-0.5">Delay awal sebelum retry pertama (exponential: delay &times; 2^attempt)</p>
                        </div>

                        <!-- Max Retry Delay -->
                        <div>
                            <label class="block text-xs text-gray-400 mb-1">Max Retry Delay</label>
                            <div class="relative">
                                <input type="number" min="1" max="300" step="1"
                                       x-model.number="syncConfig[srcKey].retry_max_delay"
                                       class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:border-koin-500 focus:ring-1 focus:ring-koin-500 pr-8">
                                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-600">s</span>
                            </div>
                            <p class="text-[10px] text-gray-600 mt-0.5">Batas maksimal delay retry (cap)</p>
                        </div>

                        <!-- Rate Limit Delay -->
                        <div>
                            <label class="block text-xs text-gray-400 mb-1">Rate Limit Delay</label>
                            <div class="relative">
                                <input type="number" min="0" max="10" step="0.05"
                                       x-model.number="syncConfig[srcKey].rate_delay"
                                       class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:border-koin-500 focus:ring-1 focus:ring-koin-500 pr-8">
                                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-600">s</span>
                            </div>
                            <p class="text-[10px] text-gray-600 mt-0.5">Jeda antar request (rate limiting)</p>
                        </div>

                        <!-- Timeout -->
                        <div>
                            <label class="block text-xs text-gray-400 mb-1">Request Timeout</label>
                            <div class="relative">
                                <input type="number" min="5" max="300" step="5"
                                       x-model.number="syncConfig[srcKey].timeout"
                                       class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:border-koin-500 focus:ring-1 focus:ring-koin-500 pr-8">
                                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-600">s</span>
                            </div>
                            <p class="text-[10px] text-gray-600 mt-0.5">Timeout per request sebelum dianggap gagal</p>
                        </div>
                    </div>

                    <div class="flex gap-2 mt-4">
                        <button @click="saveSyncConfig(srcKey)" :disabled="savingSyncConfig[srcKey]"
                                class="px-5 py-2 bg-koin-600 hover:bg-koin-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg text-sm transition flex items-center gap-2">
                            <svg x-show="savingSyncConfig[srcKey]" 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"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                            <span x-text="savingSyncConfig[srcKey] ? 'Menyimpan...' : 'Simpan Konfigurasi'"></span>
                        </button>
                        <button @click="resetSyncConfig(srcKey)"
                                class="px-4 py-2 rounded-lg text-sm bg-gray-800 text-gray-400 hover:bg-gray-700 border border-gray-700 transition">
                            Reset Default
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </template>

    <!-- ===================== STOCK (SAHAM) TAB ===================== -->
    <div x-show="activeTab === 'stock'" x-cloak>
        <div class="space-y-6">

            <!-- Yahoo Finance Header -->
            <div class="glass rounded-xl border border-emerald-900/50 p-6">
                <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
                    <div>
                        <div class="flex items-center gap-3 mb-1">
                            <h2 class="text-xl font-bold text-white">Yahoo Finance</h2>
                            <span class="text-[10px] px-2 py-0.5 rounded-full font-medium bg-emerald-900/50 text-emerald-400 border border-emerald-700/50">Active</span>
                        </div>
                        <p class="text-sm text-gray-400">Data Provider untuk Saham Indonesia (IDX)</p>
                        <p class="text-sm text-gray-300 mt-2">Yahoo Finance menyediakan data OHLCV, profil perusahaan, sektor, dan market cap untuk saham-saham di Bursa Efek Indonesia (BEI). Ticker otomatis ditambahkan suffix <code class="text-emerald-400">.JK</code> saat mengambil data.</p>
                    </div>
                    <div class="flex flex-col gap-1 text-xs text-gray-500 shrink-0 md:text-right">
                        <a href="https://finance.yahoo.com" target="_blank"
                           class="text-emerald-400 hover:text-emerald-300 transition">
                            finance.yahoo.com &nearr;
                        </a>
                        <p>Library: <span class="font-mono text-gray-400">yfinance 1.2.0</span></p>
                        <p>Rate Limit: <span class="text-gray-400">~2000 req/hour</span></p>
                    </div>
                </div>
            </div>

            <!-- Data Capabilities -->
            <div class="glass rounded-xl border border-emerald-900/50 p-6">
                <h3 class="text-base font-semibold text-white mb-4">Data yang Tersedia</h3>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                    <div class="p-3 rounded-lg border border-gray-800 bg-gray-900/30">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-sm text-emerald-400">&#10003;</span>
                            <span class="text-sm font-medium text-white">OHLCV</span>
                        </div>
                        <p class="text-xs text-gray-500">Daily & weekly candles + volume</p>
                    </div>
                    <div class="p-3 rounded-lg border border-gray-800 bg-gray-900/30">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-sm text-emerald-400">&#10003;</span>
                            <span class="text-sm font-medium text-white">Company Profile</span>
                        </div>
                        <p class="text-xs text-gray-500">Nama, sektor, sub-sektor perusahaan</p>
                    </div>
                    <div class="p-3 rounded-lg border border-gray-800 bg-gray-900/30">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-sm text-emerald-400">&#10003;</span>
                            <span class="text-sm font-medium text-white">Market Cap</span>
                        </div>
                        <p class="text-xs text-gray-500">Kapitalisasi pasar real-time</p>
                    </div>
                    <div class="p-3 rounded-lg border border-gray-800 bg-gray-900/30">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-sm text-emerald-400">&#10003;</span>
                            <span class="text-sm font-medium text-white">Current Price</span>
                        </div>
                        <p class="text-xs text-gray-500">Harga real-time IDR</p>
                    </div>
                    <div class="p-3 rounded-lg border border-gray-800 bg-gray-900/30">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-sm text-emerald-400">&#10003;</span>
                            <span class="text-sm font-medium text-white">Search Stocks</span>
                        </div>
                        <p class="text-xs text-gray-500">Cari saham dari Yahoo Finance</p>
                    </div>
                    <div class="p-3 rounded-lg border border-gray-800 bg-gray-900/30">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-sm text-emerald-400">&#10003;</span>
                            <span class="text-sm font-medium text-white">Intraday</span>
                        </div>
                        <p class="text-xs text-gray-500">15m, 30m, 1h, 4h (via agregasi 1h)</p>
                    </div>
                </div>
            </div>

            <!-- Timeframes -->
            <div class="glass rounded-xl border border-emerald-900/50 p-6">
                <h3 class="text-base font-semibold text-white mb-3">Timeframe Didukung</h3>
                <div class="flex flex-wrap gap-2 mb-2">
                    <span class="px-3 py-1 rounded-full text-xs font-mono bg-emerald-900/30 text-emerald-300 border border-emerald-700/50">15m</span>
                    <span class="px-3 py-1 rounded-full text-xs font-mono bg-emerald-900/30 text-emerald-300 border border-emerald-700/50">30m</span>
                    <span class="px-3 py-1 rounded-full text-xs font-mono bg-emerald-900/30 text-emerald-300 border border-emerald-700/50">1h</span>
                    <span class="px-3 py-1 rounded-full text-xs font-mono bg-emerald-900/30 text-emerald-300 border border-emerald-700/50">4h</span>
                    <span class="px-3 py-1 rounded-full text-xs font-mono bg-emerald-900/30 text-emerald-300 border border-emerald-700/50">1D</span>
                    <span class="px-3 py-1 rounded-full text-xs font-mono bg-emerald-900/30 text-emerald-300 border border-emerald-700/50">1W</span>
                </div>
                <p class="text-xs text-gray-500">Yahoo Finance mendukung 6 timeframe untuk saham IDX. Timeframe 4h diambil sebagai 1h lalu diagregasi. Intraday (15m/30m/1h) tersedia hingga 60 hari ke belakang.</p>
            </div>

            <!-- Stock Icon Source -->
            <div class="glass rounded-xl border border-emerald-900/50 p-6">
                <h3 class="text-base font-semibold text-white mb-1">Sumber Icon Saham</h3>
                <p class="text-xs text-gray-500 mb-4">Pilih sumber icon/logo untuk saham Indonesia. Icon diunduh saat sync profil.</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <button @click="stockIconSource = 'growin'"
                            :class="stockIconSource === 'growin' ? 'border-emerald-500 bg-emerald-900/30 ring-1 ring-emerald-500/30' : 'border-gray-700 hover:border-gray-600'"
                            class="relative p-4 rounded-xl border transition text-left">
                        <span class="absolute top-3 right-3 text-[10px] px-2 py-0.5 rounded-full font-medium"
                              :class="stockIconSource === 'growin' ? 'bg-emerald-900/50 text-emerald-400 border border-emerald-700/50' : 'bg-gray-800 text-gray-500 border border-gray-700'"
                              x-text="stockIconSource === 'growin' ? 'Active' : 'Inactive'"></span>
                        <p class="font-semibold text-white">Growin</p>
                        <p class="text-[11px] text-gray-500 mt-0.5">api.growin.id</p>
                        <p class="text-xs text-gray-400 mt-2">Logo berkualitas tinggi dari Growin. Format PNG, latar transparan.</p>
                    </button>
                    <button @click="stockIconSource = 'stockbit'"
                            :class="stockIconSource === 'stockbit' ? 'border-emerald-500 bg-emerald-900/30 ring-1 ring-emerald-500/30' : 'border-gray-700 hover:border-gray-600'"
                            class="relative p-4 rounded-xl border transition text-left">
                        <span class="absolute top-3 right-3 text-[10px] px-2 py-0.5 rounded-full font-medium"
                              :class="stockIconSource === 'stockbit' ? 'bg-emerald-900/50 text-emerald-400 border border-emerald-700/50' : 'bg-gray-800 text-gray-500 border border-gray-700'"
                              x-text="stockIconSource === 'stockbit' ? 'Active' : 'Inactive'"></span>
                        <p class="font-semibold text-white">Stockbit</p>
                        <p class="text-[11px] text-gray-500 mt-0.5">assets.stockbit.com</p>
                        <p class="text-xs text-gray-400 mt-2">Logo dari Stockbit/Bibit. Format PNG, cocok untuk tampilan kecil.</p>
                    </button>
                </div>
            </div>

            <!-- Pros & Cons -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="glass rounded-xl border border-emerald-900/50 p-6">
                    <h3 class="text-base font-semibold text-emerald-400 mb-3">Keunggulan</h3>
                    <ul class="space-y-2">
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-emerald-400 mt-0.5 shrink-0">+</span>
                            <span>Gratis tanpa API key — tidak perlu registrasi</span>
                        </li>
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-emerald-400 mt-0.5 shrink-0">+</span>
                            <span>Data profil perusahaan lengkap (sektor, market cap)</span>
                        </li>
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-emerald-400 mt-0.5 shrink-0">+</span>
                            <span>OHLCV lengkap dengan volume (daily & weekly)</span>
                        </li>
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-emerald-400 mt-0.5 shrink-0">+</span>
                            <span>Mendukung semua saham IDX (~800+ emiten)</span>
                        </li>
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-emerald-400 mt-0.5 shrink-0">+</span>
                            <span>Library yfinance Python — mudah diintegrasikan</span>
                        </li>
                    </ul>
                </div>
                <div class="glass rounded-xl border border-emerald-900/50 p-6">
                    <h3 class="text-base font-semibold text-amber-400 mb-3">Limitasi</h3>
                    <ul class="space-y-2">
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-amber-400 mt-0.5 shrink-0">!</span>
                            <span>Intraday data tidak reliabel untuk .JK tickers</span>
                        </li>
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-amber-400 mt-0.5 shrink-0">!</span>
                            <span>Rate limit tidak terdokumentasi — bisa berubah</span>
                        </li>
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-amber-400 mt-0.5 shrink-0">!</span>
                            <span>Data bisa delay beberapa menit dari real-time</span>
                        </li>
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-amber-400 mt-0.5 shrink-0">!</span>
                            <span>Tidak ada data order book atau depth</span>
                        </li>
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-amber-400 mt-0.5 shrink-0">!</span>
                            <span>Unofficial API — bisa berubah tanpa pemberitahuan</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Save Button -->
            <div class="flex justify-end">
                <button @click="saveStockSettings()" :disabled="savingStockSettings"
                        class="px-5 py-2 bg-emerald-600 hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg text-sm transition flex items-center gap-2">
                    <svg x-show="savingStockSettings" 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"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    <span x-text="savingStockSettings ? 'Menyimpan...' : 'Simpan Pengaturan Saham'"></span>
                </button>
            </div>

        </div>
    </div>

    <!-- ===================== US STOCK TAB ===================== -->
    <div x-show="activeTab === 'stock_us'" x-cloak>
        <div class="space-y-6">

            <!-- Yahoo Finance Header (US) -->
            <div class="glass rounded-xl border border-purple-900/50 p-6">
                <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
                    <div>
                        <div class="flex items-center gap-3 mb-1">
                            <h2 class="text-xl font-bold text-white">Yahoo Finance</h2>
                            <span class="text-[10px] px-2 py-0.5 rounded-full font-medium bg-purple-900/50 text-purple-400 border border-purple-700/50">Active</span>
                        </div>
                        <p class="text-sm text-gray-400">Data Provider untuk Saham US (NYSE / NASDAQ)</p>
                        <p class="text-sm text-gray-300 mt-2">Yahoo Finance menyediakan data OHLCV, profil perusahaan, sektor, dan market cap untuk saham-saham di NYSE dan NASDAQ. Ticker US menggunakan simbol mentah tanpa suffix (contoh: <code class="text-purple-400">AAPL</code>, <code class="text-purple-400">MSFT</code>).</p>
                    </div>
                    <div class="flex flex-col gap-1 text-xs text-gray-500 shrink-0 md:text-right">
                        <a href="https://finance.yahoo.com" target="_blank"
                           class="text-purple-400 hover:text-purple-300 transition">
                            finance.yahoo.com &nearr;
                        </a>
                        <p>Library: <span class="font-mono text-gray-400">yfinance 1.2.0</span></p>
                        <p>Rate Limit: <span class="text-gray-400">~2000 req/hour</span></p>
                    </div>
                </div>
            </div>

            <!-- USD/IDR Info -->
            <div class="glass rounded-xl border border-purple-900/50 p-6">
                <div class="flex items-start gap-3">
                    <span class="text-2xl shrink-0">💱</span>
                    <div>
                        <h3 class="text-base font-semibold text-white mb-1">Mata Uang: USD</h3>
                        <p class="text-sm text-gray-400">Harga saham US ditampilkan dalam <span class="text-purple-400 font-medium">USD</span>. Untuk keperluan alokasi modal dan perbandingan, harga otomatis dikonversi ke IDR menggunakan kurs terkini.</p>
                        <p class="text-xs text-gray-500 mt-2">Kurs USD/IDR diperbarui setiap kali sync data. Engine analisis menggunakan harga USD asli untuk kalkulasi teknikal.</p>
                    </div>
                </div>
            </div>

            <!-- US Stock Icon Source -->
            <div class="glass rounded-xl border border-purple-900/50 p-6">
                <h3 class="text-base font-semibold text-white mb-1">Sumber Icon Saham US</h3>
                <p class="text-xs text-gray-500 mb-4">Pilih sumber icon/logo untuk saham US. FMP sebagai primary, nvstly sebagai fallback otomatis jika FMP gagal.</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <button @click="usStockIconSource = 'fmp'"
                            :class="usStockIconSource === 'fmp' ? 'border-purple-500 bg-purple-900/30 ring-1 ring-purple-500/30' : 'border-gray-700 hover:border-gray-600'"
                            class="relative p-4 rounded-xl border transition text-left">
                        <span class="absolute top-3 right-3 text-[10px] px-2 py-0.5 rounded-full font-medium"
                              :class="usStockIconSource === 'fmp' ? 'bg-purple-900/50 text-purple-400 border border-purple-700/50' : 'bg-gray-800 text-gray-500 border border-gray-700'"
                              x-text="usStockIconSource === 'fmp' ? 'Active' : 'Inactive'"></span>
                        <p class="font-semibold text-white">FMP</p>
                        <p class="text-[11px] text-gray-500 mt-0.5">financialmodelingprep.com</p>
                        <p class="text-xs text-gray-400 mt-2">Logo dari Financial Modeling Prep. Cakupan luas, gratis tanpa API key.</p>
                    </button>
                    <button @click="usStockIconSource = 'nvstly'"
                            :class="usStockIconSource === 'nvstly' ? 'border-purple-500 bg-purple-900/30 ring-1 ring-purple-500/30' : 'border-gray-700 hover:border-gray-600'"
                            class="relative p-4 rounded-xl border transition text-left">
                        <span class="absolute top-3 right-3 text-[10px] px-2 py-0.5 rounded-full font-medium"
                              :class="usStockIconSource === 'nvstly' ? 'bg-purple-900/50 text-purple-400 border border-purple-700/50' : 'bg-gray-800 text-gray-500 border border-gray-700'"
                              x-text="usStockIconSource === 'nvstly' ? 'Active' : 'Inactive'"></span>
                        <p class="font-semibold text-white">nvstly / GitHub</p>
                        <p class="text-[11px] text-gray-500 mt-0.5">github.com/nvstly/icons</p>
                        <p class="text-xs text-gray-400 mt-2">Open-source icon repo. Transparent PNG 250×250, kurasi komunitas.</p>
                    </button>
                </div>
                <div class="flex items-center justify-between mt-4">
                    <p class="text-xs text-gray-500">💡 Saat download batch, sistem selalu mencoba FMP dulu lalu nvstly sebagai fallback — terlepas dari pilihan di atas.</p>
                    <button @click="saveUsStockSettings()"
                            :disabled="savingUsStockSettings"
                            class="px-4 py-2 rounded-lg text-xs font-medium bg-purple-600 hover:bg-purple-700 text-white transition disabled:opacity-50">
                        <span x-show="!savingUsStockSettings">Simpan</span>
                        <span x-show="savingUsStockSettings" class="flex items-center gap-1">
                            <svg class="animate-spin h-3 w-3" 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>
                            Menyimpan...
                        </span>
                    </button>
                </div>
            </div>

            <!-- Data Capabilities -->
            <div class="glass rounded-xl border border-purple-900/50 p-6">
                <h3 class="text-base font-semibold text-white mb-4">Data yang Tersedia</h3>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                    <div class="p-3 rounded-lg border border-gray-800 bg-gray-900/30">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-sm text-purple-400">&#10003;</span>
                            <span class="text-sm font-medium text-white">OHLCV</span>
                        </div>
                        <p class="text-xs text-gray-500">Daily & weekly candles + volume (USD)</p>
                    </div>
                    <div class="p-3 rounded-lg border border-gray-800 bg-gray-900/30">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-sm text-purple-400">&#10003;</span>
                            <span class="text-sm font-medium text-white">Company Profile</span>
                        </div>
                        <p class="text-xs text-gray-500">Nama, sektor, industri perusahaan</p>
                    </div>
                    <div class="p-3 rounded-lg border border-gray-800 bg-gray-900/30">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-sm text-purple-400">&#10003;</span>
                            <span class="text-sm font-medium text-white">Market Cap</span>
                        </div>
                        <p class="text-xs text-gray-500">Kapitalisasi pasar (USD)</p>
                    </div>
                    <div class="p-3 rounded-lg border border-gray-800 bg-gray-900/30">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-sm text-purple-400">&#10003;</span>
                            <span class="text-sm font-medium text-white">Current Price</span>
                        </div>
                        <p class="text-xs text-gray-500">Harga real-time USD</p>
                    </div>
                    <div class="p-3 rounded-lg border border-gray-800 bg-gray-900/30">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-sm text-purple-400">&#10003;</span>
                            <span class="text-sm font-medium text-white">Search Stocks</span>
                        </div>
                        <p class="text-xs text-gray-500">Cari saham dari NYSE & NASDAQ</p>
                    </div>
                    <div class="p-3 rounded-lg border border-gray-800 bg-gray-900/30">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-sm text-purple-400">&#10003;</span>
                            <span class="text-sm font-medium text-white">Intraday</span>
                        </div>
                        <p class="text-xs text-gray-500">15m, 30m, 1h, 4h (via agregasi 1h)</p>
                    </div>
                </div>
            </div>

            <!-- Timeframes -->
            <div class="glass rounded-xl border border-purple-900/50 p-6">
                <h3 class="text-base font-semibold text-white mb-3">Timeframe Didukung</h3>
                <div class="flex flex-wrap gap-2 mb-2">
                    <span class="px-3 py-1 rounded-full text-xs font-mono bg-purple-900/30 text-purple-300 border border-purple-700/50">15m</span>
                    <span class="px-3 py-1 rounded-full text-xs font-mono bg-purple-900/30 text-purple-300 border border-purple-700/50">30m</span>
                    <span class="px-3 py-1 rounded-full text-xs font-mono bg-purple-900/30 text-purple-300 border border-purple-700/50">1h</span>
                    <span class="px-3 py-1 rounded-full text-xs font-mono bg-purple-900/30 text-purple-300 border border-purple-700/50">4h</span>
                    <span class="px-3 py-1 rounded-full text-xs font-mono bg-purple-900/30 text-purple-300 border border-purple-700/50">1D</span>
                    <span class="px-3 py-1 rounded-full text-xs font-mono bg-purple-900/30 text-purple-300 border border-purple-700/50">1W</span>
                </div>
                <p class="text-xs text-gray-500">Yahoo Finance mendukung 6 timeframe untuk saham US. Data intraday (15m/30m/1h) tersedia hingga 60 hari ke belakang. Market hours: 09:30–16:00 ET (NYSE/NASDAQ).</p>
            </div>

            <!-- Pros & Cons -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="glass rounded-xl border border-purple-900/50 p-6">
                    <h3 class="text-base font-semibold text-purple-400 mb-3">Keunggulan</h3>
                    <ul class="space-y-2">
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-purple-400 mt-0.5 shrink-0">+</span>
                            <span>Gratis tanpa API key — tidak perlu registrasi</span>
                        </li>
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-purple-400 mt-0.5 shrink-0">+</span>
                            <span>Data profil perusahaan lengkap (sektor, industri, market cap)</span>
                        </li>
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-purple-400 mt-0.5 shrink-0">+</span>
                            <span>OHLCV lengkap dengan volume (USD, daily & weekly)</span>
                        </li>
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-purple-400 mt-0.5 shrink-0">+</span>
                            <span>Mendukung 8,000+ emiten dari NYSE & NASDAQ</span>
                        </li>
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-purple-400 mt-0.5 shrink-0">+</span>
                            <span>Lot size 1 lembar — cocok untuk modal kecil</span>
                        </li>
                    </ul>
                </div>
                <div class="glass rounded-xl border border-purple-900/50 p-6">
                    <h3 class="text-base font-semibold text-amber-400 mb-3">Limitasi</h3>
                    <ul class="space-y-2">
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-amber-400 mt-0.5 shrink-0">!</span>
                            <span>Harga dalam USD — konversi ke IDR tergantung kurs</span>
                        </li>
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-amber-400 mt-0.5 shrink-0">!</span>
                            <span>Rate limit tidak terdokumentasi — bisa berubah</span>
                        </li>
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-amber-400 mt-0.5 shrink-0">!</span>
                            <span>Data bisa delay beberapa menit dari real-time</span>
                        </li>
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-amber-400 mt-0.5 shrink-0">!</span>
                            <span>Market hours berbeda timezone (ET vs WIB)</span>
                        </li>
                        <li class="flex items-start gap-2 text-sm text-gray-300">
                            <span class="text-amber-400 mt-0.5 shrink-0">!</span>
                            <span>Unofficial API — bisa berubah tanpa pemberitahuan</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Ticker Info -->
            <div class="glass rounded-xl border border-purple-900/50 p-6">
                <h3 class="text-base font-semibold text-white mb-3">Format Ticker</h3>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                    <div class="text-center p-3 rounded-lg bg-gray-900/30 border border-gray-800">
                        <p class="text-lg font-mono font-bold text-purple-400">AAPL</p>
                        <p class="text-xs text-gray-500 mt-1">Apple Inc.</p>
                        <p class="text-[10px] text-gray-600">NASDAQ</p>
                    </div>
                    <div class="text-center p-3 rounded-lg bg-gray-900/30 border border-gray-800">
                        <p class="text-lg font-mono font-bold text-purple-400">MSFT</p>
                        <p class="text-xs text-gray-500 mt-1">Microsoft Corp.</p>
                        <p class="text-[10px] text-gray-600">NASDAQ</p>
                    </div>
                    <div class="text-center p-3 rounded-lg bg-gray-900/30 border border-gray-800">
                        <p class="text-lg font-mono font-bold text-purple-400">JPM</p>
                        <p class="text-xs text-gray-500 mt-1">JPMorgan Chase</p>
                        <p class="text-[10px] text-gray-600">NYSE</p>
                    </div>
                    <div class="text-center p-3 rounded-lg bg-gray-900/30 border border-gray-800">
                        <p class="text-lg font-mono font-bold text-purple-400">TSLA</p>
                        <p class="text-xs text-gray-500 mt-1">Tesla Inc.</p>
                        <p class="text-[10px] text-gray-600">NASDAQ</p>
                    </div>
                </div>
                <p class="text-xs text-gray-500 mt-3">Ticker US tidak menggunakan suffix (berbeda dengan saham IDX yang menggunakan <code class="text-emerald-400">.JK</code>). Namespace internal: <code class="text-purple-400">NYSE.JPM</code>, <code class="text-purple-400">NASDAQ.AAPL</code></p>
            </div>

        </div>
    </div>

    <!-- ===================== SYNC STATUS TAB ===================== -->
    <div x-show="activeTab === 'sync-status'" x-cloak x-init="$watch('activeTab', v => { if (v === 'sync-status') fetchSyncStatus(); })">
        <div class="space-y-6">

            <!-- Loading -->
            <div x-show="syncStatusLoading" class="text-center py-12">
                <svg class="animate-spin h-8 w-8 text-koin-400 mx-auto" 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>
                <p class="text-gray-500 mt-2 text-sm">Memuat sync status...</p>
            </div>

            <template x-if="syncStatus && !syncStatusLoading">
                <div class="space-y-6">
                    <!-- Stats Cards -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                        <div class="glass rounded-xl border border-gray-800 p-4">
                            <p class="text-xs text-gray-500 uppercase tracking-wider">Last Sync</p>
                            <p class="text-lg font-bold text-white mt-1" x-text="syncStatus.last_sync_at ? KK.fmtDate(syncStatus.last_sync_at) : 'Belum pernah'"></p>
                        </div>
                        <div class="glass rounded-xl border border-gray-800 p-4">
                            <p class="text-xs text-gray-500 uppercase tracking-wider">Coins Synced</p>
                            <p class="text-lg font-bold text-white mt-1">
                                <span x-text="syncStatus.total_coins_synced"></span>
                                <span class="text-gray-500 text-sm">/ <span x-text="syncStatus.total_coins"></span></span>
                            </p>
                        </div>
                        <div class="glass rounded-xl border border-gray-800 p-4">
                            <p class="text-xs text-gray-500 uppercase tracking-wider">OHLCV Records</p>
                            <p class="text-lg font-bold text-white mt-1" x-text="KK.fmtIdr(syncStatus.total_ohlcv_records)"></p>
                        </div>
                        <div class="glass rounded-xl border border-gray-800 p-4">
                            <p class="text-xs text-gray-500 uppercase tracking-wider">Active Source</p>
                            <p class="text-lg font-bold text-koin-400 mt-1 capitalize" x-text="syncStatus.active_source"></p>
                        </div>
                    </div>

                    <!-- Quick Sync Button -->
                    <div class="glass rounded-xl border border-gray-800 p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <h3 class="text-lg font-semibold text-white">Quick Sync</h3>
                                <p class="text-xs text-gray-500 mt-1">Sinkronisasi profil semua koin aktif dari sumber data utama.</p>
                            </div>
                            <button @click="quickSync()" :disabled="syncing"
                                    class="px-5 py-2 bg-koin-600 hover:bg-koin-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg text-sm transition flex items-center gap-2">
                                <svg x-show="syncing" 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"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                                <svg x-show="!syncing" 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="syncing ? 'Syncing...' : 'Sync Now'"></span>
                            </button>
                        </div>
                    </div>

                    <!-- Timeframe Breakdown -->
                    <div class="glass rounded-xl border border-gray-800 overflow-hidden" x-show="syncStatus.per_timeframe.length > 0">
                        <div class="px-4 py-3 border-b border-gray-800">
                            <h3 class="text-sm font-semibold text-white">OHLCV per Timeframe</h3>
                        </div>
                        <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">Timeframe</th>
                                    <th class="px-4 py-2 text-right">Records</th>
                                    <th class="px-4 py-2 text-right">Oldest</th>
                                    <th class="px-4 py-2 text-right">Newest</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-800/50">
                                <template x-for="tf in syncStatus.per_timeframe" :key="tf.timeframe">
                                    <tr class="hover:bg-gray-800/30">
                                        <td class="px-4 py-2.5 text-white font-medium" x-text="tf.timeframe"></td>
                                        <td class="px-4 py-2.5 text-right text-gray-300" x-text="KK.fmtIdr(tf.count)"></td>
                                        <td class="px-4 py-2.5 text-right text-gray-500 text-xs" x-text="tf.oldest ? KK.fmtDateShort(tf.oldest) : '-'"></td>
                                        <td class="px-4 py-2.5 text-right text-gray-500 text-xs" x-text="tf.newest ? KK.fmtDateShort(tf.newest) : '-'"></td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>

                    <!-- Recent Activity -->
                    <div class="glass rounded-xl border border-gray-800 overflow-hidden" x-show="syncStatus.recent_profiles.length > 0">
                        <div class="px-4 py-3 border-b border-gray-800">
                            <h3 class="text-sm font-semibold text-white">Recent Profile Updates</h3>
                        </div>
                        <div class="divide-y divide-gray-800/50">
                            <template x-for="p in syncStatus.recent_profiles" :key="p.asset_id + p.fetched_at">
                                <div class="flex items-center justify-between px-4 py-2.5 hover:bg-gray-800/30">
                                    <div class="flex items-center gap-2 min-w-0">
                                        <img x-show="p.icon" :src="p.icon" class="w-5 h-5 rounded-full" loading="lazy" onerror="this.style.display='none'">
                                        <span x-show="!p.icon" class="w-5 h-5 rounded-full bg-gray-700 flex items-center justify-center text-[10px] text-gray-400" x-text="(p.coin_symbol || '?')[0]"></span>
                                        <span class="text-sm text-white truncate" x-text="p.coin_name"></span>
                                        <span class="text-xs text-gray-500" x-text="p.coin_symbol"></span>
                                    </div>
                                    <div class="flex items-center gap-4 shrink-0">
                                        <span class="text-sm text-gray-300" x-text="p.current_price_idr ? 'Rp ' + KK.fmtPrice(p.current_price_idr) : '-'"></span>
                                        <span class="text-xs text-gray-500" x-text="KK.fmtDateShort(p.fetched_at)"></span>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>

</div>
{% endblock %}

{% block settings_scripts %}
<script>
function dataSourceSettings() {
    return {
        activeTab: 'overview',
        activeSource: '{{ active_source }}',
        syncTimeframes: {{ sync_timeframes | tojson }},
        allTimeframes: ['1m', '15m', '30m', '1h', '4h', '1D', '1W'],
        /* Toast via global KKToast */

        // Stock settings
        stockIconSource: '{{ stock_icon_source }}',
        stockDataSource: '{{ stock_data_source }}',
        savingStockSettings: false,

        // US Stock settings
        usStockIconSource: '{{ us_stock_icon_source }}',
        savingUsStockSettings: false,

        // Tab definitions
        tabs: [
            { id: 'overview', label: 'Overview', dot: '' },
            { id: 'coingecko', label: 'CoinGecko', dot: '{{ "bg-emerald-400" if active_source == "coingecko" else "bg-gray-600" }}' },
            { id: 'indodax', label: 'Indodax', dot: '{{ "bg-emerald-400" if active_source == "indodax" else "bg-gray-600" }}' },
            { id: 'tokocrypto', label: 'Tokocrypto', dot: 'bg-amber-400' },
            { id: 'stock', label: 'Saham (IDX)', dot: 'bg-emerald-400' },
            { id: 'stock_us', label: 'Saham US', dot: 'bg-purple-400' },
            { id: 'sync-status', label: 'Sync Status', dot: 'bg-koin-400' },
        ],

        // Sync status state
        syncStatus: null,
        syncStatusLoading: false,
        syncing: false,

        // Loading states for save buttons
        savingTimeframes: false,
        savingApiKey: {},
        savingSyncConfig: {},
        savingSource: false,

        // API key state
        apiKeys: {
            coingecko: { hasKey: {{ 'true' if coingecko_has_key else 'false' }}, maskedKey: '{{ coingecko_api_key_masked }}', maskedSecret: '' },
            indodax:   { hasKey: {{ 'true' if indodax_has_key else 'false' }}, maskedKey: '{{ indodax_api_key_masked }}', maskedSecret: '{{ indodax_api_secret_masked }}' },
            tokocrypto: { hasKey: {{ 'true' if tokocrypto_has_key else 'false' }}, maskedKey: '{{ tokocrypto_api_key_masked }}', maskedSecret: '{{ tokocrypto_api_secret_masked }}' },
        },
        apiForm: {
            coingecko:  { apiKey: '', apiSecret: '' },
            indodax:    { apiKey: '', apiSecret: '' },
            tokocrypto: { apiKey: '', apiSecret: '' },
        },
        showApiKey: { coingecko: false, indodax: false, tokocrypto: false },

        // Sync config per source
        syncConfig: {{ sync_configs | tojson }},

        // Source metadata
        sources: {
            coingecko: {
                name: 'CoinGecko',
                type: 'Aggregator Global',
                status: 'active',
                shortDesc: 'Data global agregasi, profil koin lengkap, gratis.',
                description: 'CoinGecko adalah agregator data crypto terbesar. Menyediakan data harga, market cap, volume, profil koin, data komunitas, dan exchange tickers dari berbagai sumber. Free tier 10-30 calls/min. OHLC candle tersedia tapi tanpa volume di free tier.',
                website: 'https://www.coingecko.com',
                docsUrl: 'https://docs.coingecko.com/v3.0.1/reference/introduction',
                baseUrl: 'api.coingecko.com/api/v3',
                rateLimit: '10-30 req/min (free), 500 req/min (pro)',
                hasSecret: false,
                apiNote: 'Gratis tanpa API key (rate-limited). Daftar di coingecko.com/api untuk Demo key (30 calls/min) atau Pro key (500 calls/min).',
                timeframes: ['1m', '15m', '30m', '1h', '4h', '1D', '1W'],
                timeframeNote: 'Mendukung semua 7 timeframe via mapping days. Candle granularity otomatis: 1m/15m/30m → 30min candles (1-2 hari), 1h/4h → 4h candles (30-90 hari), 1D/1W → daily candles (365 hari).',
                capabilities: [
                    { name: 'OHLCV', available: true, note: 'OHLC only (no volume di free tier)' },
                    { name: 'Coin Profile', available: true, note: 'Lengkap: deskripsi, kategori, links, contract' },
                    { name: 'Search Coins', available: true, note: 'Search by nama atau symbol' },
                    { name: 'Market Tickers', available: true, note: 'Exchange & pair data per koin' },
                    { name: 'Community Data', available: true, note: 'Twitter, Reddit, Telegram, GitHub' },
                    { name: 'Realtime Price', available: true, note: 'Current price (IDR & USD)' },
                ],
                pros: [
                    'Data profil koin paling lengkap (deskripsi, links, kontrak)',
                    'Mendukung 15,000+ koin termasuk altcoin kecil',
                    'Data komunitas & sosial (Twitter, Reddit, GitHub)',
                    'Market tickers dari berbagai exchange',
                    'Gratis tanpa API key (rate limited)',
                    'Data harga dalam IDR secara native',
                ],
                cons: [
                    'OHLC tanpa volume di free tier',
                    'Timeframe tidak granular (30m/4h/1D saja)',
                    'Rate limit ketat di free tier (10-30 req/min)',
                    'Data OHLC bisa delay hingga beberapa menit',
                    'Tidak ada data order book atau depth',
                ],
            },
            indodax: {
                name: 'Indodax',
                type: 'Exchange Indonesia',
                status: 'active',
                shortDesc: 'Exchange IDR terbesar, OHLCV lengkap + volume.',
                description: 'Indodax adalah exchange crypto terbesar di Indonesia. Menyediakan data OHLCV lengkap termasuk volume melalui TradingView charting API. Semua pair dalam IDR. Mendukung semua 7 timeframe dari 1 menit sampai 1 minggu.',
                website: 'https://indodax.com',
                docsUrl: 'https://indodax.com/downloads/indodaxcom-api-documentation.pdf',
                baseUrl: 'indodax.com/tradingview',
                rateLimit: '~3 req/sec',
                hasSecret: true,
                apiNote: 'OHLCV gratis tanpa API key. API key diperlukan untuk private endpoints (balance, trade). Buat di indodax.com > Settings > API.',
                timeframes: ['1m', '15m', '30m', '1h', '4h', '1D', '1W'],
                timeframeNote: 'Mendukung semua 7 timeframe. Data diambil via TradingView charting library endpoint. Volume tersedia di semua timeframe.',
                capabilities: [
                    { name: 'OHLCV', available: true, note: 'Lengkap dengan volume, semua timeframe' },
                    { name: 'Coin Profile', available: false, note: 'Tidak tersedia, gunakan CoinGecko' },
                    { name: 'Search Coins', available: false, note: 'Hanya daftar pair yang diperdagangkan' },
                    { name: 'Market Tickers', available: true, note: 'Harga bid/ask & volume 24h per pair' },
                    { name: 'Community Data', available: false, note: 'Tidak tersedia' },
                    { name: 'Realtime Price', available: true, note: 'Ticker real-time via API' },
                ],
                pros: [
                    'OHLCV lengkap dengan volume di semua timeframe',
                    'Data langsung dari exchange IDR (harga native)',
                    'Mendukung semua 7 timeframe (1m sampai 1W)',
                    'Rate limit cukup longgar (~3 req/sec)',
                    'Exchange terbesar & paling likuid di Indonesia',
                    'Trading API tersedia (balance, order, trade)',
                ],
                cons: [
                    'Tidak ada data profil koin (deskripsi, links)',
                    'Hanya koin yang listing di Indodax',
                    'Tidak ada data komunitas/sosial',
                    'Dokumentasi API terbatas',
                    'Beberapa pair low-volume bisa tidak akurat',
                ],
            },
            tokocrypto: {
                name: 'Tokocrypto',
                type: 'Exchange Indonesia (Binance)',
                status: 'coming_soon',
                shortDesc: 'Binance-backed, IDR pairs, klines API lengkap.',
                description: 'Tokocrypto (sekarang bagian dari Binance) adalah exchange crypto Indonesia yang menggunakan infrastruktur Binance. Mendukung IDR pairs dengan OHLCV lengkap melalui klines API. Provider belum diimplementasikan.',
                website: 'https://www.tokocrypto.com',
                docsUrl: 'https://www.tokocrypto.com/apidocs/',
                baseUrl: 'api.tokocrypto.com',
                rateLimit: 'Weight-based (~1200/min)',
                hasSecret: true,
                apiNote: 'Provider belum diimplementasikan. API key bisa disimpan untuk persiapan. Buat di tokocrypto.com > API Management.',
                timeframes: ['1m', '15m', '30m', '1h', '4h', '1D', '1W'],
                timeframeNote: 'Mendukung semua 7 timeframe via /api/v1/klines. Volume tersedia. Rate limit berbasis weight (1200 weight/min).',
                capabilities: [
                    { name: 'OHLCV', available: true, note: 'Klines API lengkap (belum diimplementasi)' },
                    { name: 'Coin Profile', available: false, note: 'Tidak tersedia, gunakan CoinGecko' },
                    { name: 'Search Coins', available: false, note: 'Hanya daftar pair yang diperdagangkan' },
                    { name: 'Market Tickers', available: true, note: '24h ticker per pair (belum diimplementasi)' },
                    { name: 'Community Data', available: false, note: 'Tidak tersedia' },
                    { name: 'Realtime Price', available: true, note: 'Ticker real-time (belum diimplementasi)' },
                ],
                pros: [
                    'Infrastruktur Binance (stabil & cepat)',
                    'OHLCV lengkap dengan volume di semua timeframe',
                    'IDR pairs native',
                    'Rate limit berbasis weight (lebih fleksibel)',
                    'CCXT compatible (mudah diintegrasikan)',
                    'Depth / order book data tersedia',
                ],
                cons: [
                    'Provider belum diimplementasikan (Coming Soon)',
                    'Tidak ada data profil koin',
                    'Registrasi & KYC diperlukan untuk API key',
                    'Jumlah pair IDR mungkin lebih sedikit dari Indodax',
                    'Perubahan pasca-akuisisi Binance masih berlangsung',
                ],
            },
        },

        // Comparison table rows
        comparisonRows: [
            { feature: 'OHLCV Data',        coingecko: 'OHLC only',   indodax: true,          tokocrypto: 'Coming Soon' },
            { feature: 'Volume',             coingecko: false,         indodax: true,          tokocrypto: 'Coming Soon' },
            { feature: 'Coin Profile',       coingecko: true,          indodax: false,         tokocrypto: false },
            { feature: 'Community Data',     coingecko: true,          indodax: false,         tokocrypto: false },
            { feature: 'Market Tickers',     coingecko: true,          indodax: true,          tokocrypto: 'Coming Soon' },
            { feature: 'Realtime Price',     coingecko: true,          indodax: true,          tokocrypto: 'Coming Soon' },
            { feature: 'Timeframes',         coingecko: '7 (all)*', indodax: '7 (all)',  tokocrypto: '7 (all)' },
            { feature: 'Harga IDR Native',   coingecko: true,          indodax: true,          tokocrypto: true },
            { feature: 'API Key Needed',     coingecko: 'Opsional',    indodax: 'Untuk trade', tokocrypto: 'Untuk trade' },
            { feature: 'Rate Limit',         coingecko: '10-30/min',   indodax: '~3/sec',     tokocrypto: '1200w/min' },
        ],

        // Methods
        getStatusBadge(src) {
            if (this.sources[src].status === 'coming_soon') {
                return { cls: 'bg-amber-900/50 text-amber-400 border border-amber-700/50', text: 'Coming Soon' };
            }
            if (this.activeSource === src) {
                return { cls: 'bg-emerald-900/50 text-emerald-400 border border-emerald-700/50', text: 'Active' };
            }
            return { cls: 'bg-gray-800 text-gray-500 border border-gray-700', text: 'Inactive' };
        },

        flash(msg, type) {
            type = type || 'success';
            KKToast.show(msg, type);
        },

        setSource(source) {
            fetch('/api/v1/settings/data-source', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ source })
            })
            .then(r => r.json())
            .then(data => {
                if (data.error) {
                    this.flash(data.error, 'error');
                    return;
                }
                this.activeSource = source;
                // Update tab dots
                this.tabs[1].dot = source === 'coingecko' ? 'bg-emerald-400' : 'bg-gray-600';
                this.tabs[2].dot = source === 'indodax' ? 'bg-emerald-400' : 'bg-gray-600';
                this.flash('Data source diubah ke ' + this.sources[source].name);
            });
        },

        toggleTimeframe(tf) {
            const idx = this.syncTimeframes.indexOf(tf);
            if (idx >= 0) this.syncTimeframes.splice(idx, 1);
            else this.syncTimeframes.push(tf);
        },

        saveTimeframes() {
            this.savingTimeframes = true;
            fetch('/api/v1/settings/', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ key: 'sync_timeframes', value: this.syncTimeframes, category: 'data_source' })
            })
            .then(() => this.flash('Timeframes tersimpan!'))
            .catch(() => this.flash('Gagal menyimpan timeframes', 'error'))
            .finally(() => { this.savingTimeframes = false; });
        },

        saveApiKey(src) {
            const key = this.apiForm[src].apiKey.trim();
            if (!key) return;
            this.savingApiKey[src] = true;
            const payload = { source: src, api_key: key };
            if (this.sources[src].hasSecret && this.apiForm[src].apiSecret) {
                payload.api_secret = this.apiForm[src].apiSecret.trim();
            }
            fetch('/api/v1/settings/data-source/api-keys', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            })
            .then(r => r.json())
            .then(data => {
                if (data.error) {
                    this.flash(data.error, 'error');
                    return;
                }
                this.apiKeys[src].hasKey = true;
                this.apiKeys[src].maskedKey = data.masked_key;
                this.apiForm[src].apiKey = '';
                this.apiForm[src].apiSecret = '';
                this.flash('API key untuk ' + this.sources[src].name + ' tersimpan!');
            })
            .catch(() => this.flash('Gagal menyimpan API key', 'error'))
            .finally(() => { this.savingApiKey[src] = false; });
        },

        removeApiKey(src) {
            if (!confirm('Hapus API key untuk ' + this.sources[src].name + '?')) return;
            fetch('/api/v1/settings/data-source/api-keys', {
                method: 'DELETE',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ source: src })
            })
            .then(r => r.json())
            .then(data => {
                if (data.error) {
                    this.flash(data.error, 'error');
                    return;
                }
                this.apiKeys[src].hasKey = false;
                this.apiKeys[src].maskedKey = '';
                this.apiKeys[src].maskedSecret = '';
                this.flash('API key untuk ' + this.sources[src].name + ' dihapus.');
            });
        },

        saveSyncConfig(src) {
            this.savingSyncConfig[src] = true;
            fetch('/api/v1/settings/data-source/sync-config', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ source: src, config: this.syncConfig[src] })
            })
            .then(r => r.json())
            .then(data => {
                if (data.error) {
                    this.flash(data.error, 'error');
                    return;
                }
                this.syncConfig[src] = data.config;
                this.flash('Konfigurasi sync ' + this.sources[src].name + ' tersimpan!');
            })
            .catch(() => this.flash('Gagal menyimpan konfigurasi sync', 'error'))
            .finally(() => { this.savingSyncConfig[src] = false; });
        },

        resetSyncConfig(src) {
            if (!confirm('Reset konfigurasi sync ' + this.sources[src].name + ' ke default?')) return;
            fetch('/api/v1/settings/data-source/sync-config', {
                method: 'DELETE',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ source: src })
            })
            .then(r => r.json())
            .then(data => {
                if (data.error) {
                    this.flash(data.error, 'error');
                    return;
                }
                this.syncConfig[src] = data.config;
                this.flash('Konfigurasi sync ' + this.sources[src].name + ' direset ke default.');
            });
        },

        async fetchSyncStatus() {
            if (this.syncStatus) return; // cached
            this.syncStatusLoading = true;
            try {
                const r = await fetch('/api/v1/settings/sync-status');
                this.syncStatus = await r.json();
            } catch (e) {
                KKToast.error('Gagal memuat sync status');
            } finally {
                this.syncStatusLoading = false;
            }
        },

        saveStockSettings() {
            this.savingStockSettings = true;
            Promise.all([
                fetch('/api/v1/settings/', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ key: 'stock_icon_source', value: this.stockIconSource, category: 'data_source' })
                }),
                fetch('/api/v1/settings/', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ key: 'stock_data_source', value: this.stockDataSource, category: 'data_source' })
                }),
            ])
            .then(() => this.flash('Pengaturan saham tersimpan!'))
            .catch(() => this.flash('Gagal menyimpan pengaturan saham', 'error'))
            .finally(() => { this.savingStockSettings = false; });
        },

        saveUsStockSettings() {
            this.savingUsStockSettings = true;
            fetch('/api/v1/settings/', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ key: 'us_stock_icon_source', value: this.usStockIconSource, category: 'data_source' })
            })
            .then(() => this.flash('Pengaturan icon saham US tersimpan!'))
            .catch(() => this.flash('Gagal menyimpan pengaturan', 'error'))
            .finally(() => { this.savingUsStockSettings = false; });
        },

        async quickSync() {
            this.syncing = true;
            KKToast.info('Memulai sinkronisasi...');
            try {
                const r = await fetch('/api/v1/market/sync/batch', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({scope: 'profile'})
                });
                const data = await r.json();
                if (data.error) {
                    KKToast.error(data.error);
                } else {
                    KKToast.success('Sync selesai! ' + (data.message || ''));
                    // Refresh status
                    this.syncStatus = null;
                    await this.fetchSyncStatus();
                }
            } catch (e) {
                KKToast.error('Sync gagal: ' + e.message);
            } finally {
                this.syncing = false;
            }
        },
    };
}
</script>
{% endblock %}