{% extends "base.html" %}
{% block title %}Auto-Scan Scheduler{% endblock %}

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

    <!-- ═══════════════════════════════════════════════════════════════
         A. 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">
                    ⏰ Auto-Scan Scheduler
                </h1>
                <p class="text-sm text-gray-500 mt-0.5">Atur jadwal otomatis untuk semua jenis scan — crypto, saham ID & US.</p>
            </div>
        </div>
        <div class="flex items-center gap-2">
            <button @click="initDefaults()" :disabled="loading"
                    class="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition bg-gray-700 hover:bg-gray-600 text-gray-200 disabled:opacity-40 disabled:cursor-not-allowed">
                <svg 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="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                </svg>
                Init Defaults
            </button>
            <button @click="runDueScans()" :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-indigo-600 hover:bg-indigo-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 ? 'Running...' : 'Run Due Scans'"></span>
            </button>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════
         B. STATS ROW
         ═══════════════════════════════════════════════════════════════ -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
        <!-- Total Schedules -->
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Total Schedules</p>
            <p class="text-2xl font-bold text-white mt-1" x-text="schedules.length">0</p>
        </div>
        <!-- Enabled -->
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Enabled</p>
            <p class="text-2xl font-bold text-emerald-400 mt-1"
               x-text="schedules.filter(s => s.is_enabled).length">0</p>
        </div>
        <!-- Overdue -->
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Overdue</p>
            <p class="text-2xl font-bold mt-1"
               :class="schedules.filter(s => s.is_enabled && s.next_run && new Date(s.next_run) < new Date()).length > 0 ? 'text-red-400' : 'text-gray-400'"
               x-text="schedules.filter(s => s.is_enabled && s.next_run && new Date(s.next_run) < new Date()).length">0</p>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════
         C. SCHEDULE CARDS
         ═══════════════════════════════════════════════════════════════ -->
    <!-- Loading Skeleton -->
    <template x-if="loading && schedules.length === 0">
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
            <template x-for="i in 3" :key="i">
                <div class="bg-gray-900 border border-gray-800 rounded-xl p-5 animate-pulse">
                    <div class="h-5 bg-gray-800 rounded w-2/3 mb-3"></div>
                    <div class="h-3 bg-gray-800 rounded w-1/2 mb-2"></div>
                    <div class="h-3 bg-gray-800 rounded w-3/4 mb-2"></div>
                    <div class="h-3 bg-gray-800 rounded w-1/3"></div>
                </div>
            </template>
        </div>
    </template>

    <!-- Empty State -->
    <template x-if="!loading && schedules.length === 0">
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-10 text-center">
            <svg class="w-12 h-12 text-gray-700 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <p class="text-gray-500 text-sm">Belum ada jadwal scan. Klik <span class="text-indigo-400 font-medium">Init Defaults</span> atau buat manual.</p>
        </div>
    </template>

    <!-- Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" x-show="schedules.length > 0">
        <template x-for="s in schedules" :key="s.id">
            <div class="bg-gray-900 border rounded-xl p-5 transition-all hover:border-gray-700"
                 :class="s.is_enabled ? 'border-gray-800' : 'border-gray-800/50 opacity-60'">

                <!-- Card Header: Name + Badges -->
                <div class="flex items-start justify-between gap-2 mb-3">
                    <div class="min-w-0">
                        <h3 class="text-sm font-semibold text-white truncate" x-text="s.name"></h3>
                        <div class="flex flex-wrap items-center gap-1.5 mt-1.5">
                            <!-- Scan Type Badge -->
                            <span class="px-2 py-0.5 text-[10px] font-semibold uppercase rounded-full bg-indigo-900/40 text-indigo-400 border border-indigo-800/50"
                                  x-text="s.scan_type?.replace('_', ' ')"></span>
                            <!-- Asset Type Badge -->
                            <span class="px-2 py-0.5 text-[10px] font-semibold uppercase rounded-full"
                                  :class="{
                                      'bg-amber-900/40 text-amber-400 border border-amber-800/50': s.asset_type === 'crypto',
                                      'bg-sky-900/40 text-sky-400 border border-sky-800/50': s.asset_type === 'stock',
                                      'bg-emerald-900/40 text-emerald-400 border border-emerald-800/50': s.asset_type === 'stock_us'
                                  }"
                                  x-text="s.asset_type?.replace('_', ' ')"></span>
                        </div>
                    </div>
                    <!-- Delete -->
                    <button @click="deleteSchedule(s.id)" class="text-gray-600 hover:text-red-400 transition shrink-0" title="Delete">
                        <svg 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                        </svg>
                    </button>
                </div>

                <!-- Interval -->
                <div class="flex items-center gap-2 text-xs text-gray-400 mb-2">
                    <svg class="w-3.5 h-3.5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span>Every <span class="text-white font-medium" x-text="s.interval_hours"></span> hours</span>
                </div>

                <!-- Last Run -->
                <div class="flex items-center gap-2 text-xs text-gray-400 mb-2">
                    <svg class="w-3.5 h-3.5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span>Last run:</span>
                    <template x-if="s.last_run_status">
                        <span class="px-1.5 py-0.5 text-[10px] font-semibold uppercase rounded"
                              :class="statusColor(s.last_run_status)"
                              x-text="s.last_run_status"></span>
                    </template>
                    <span class="text-gray-500" x-text="timeAgo(s.last_run_at)"></span>
                </div>

                <!-- Next Run -->
                <div class="flex items-center gap-2 text-xs text-gray-400 mb-3">
                    <svg class="w-3.5 h-3.5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                    </svg>
                    <span>Next run:</span>
                    <template x-if="s.is_enabled && s.next_run">
                        <span class="font-medium"
                              :class="new Date(s.next_run) < new Date() ? 'text-red-400' : 'text-white'"
                              x-text="new Date(s.next_run).toLocaleString('id-ID', {day:'2-digit',month:'short',hour:'2-digit',minute:'2-digit'})"></span>
                    </template>
                    <template x-if="!s.is_enabled">
                        <span class="text-gray-600 italic">Disabled</span>
                    </template>
                </div>

                <!-- Last Run Results (if available) -->
                <template x-if="s.last_run_results">
                    <div class="bg-gray-950 border border-gray-800 rounded-lg p-2.5 mb-3">
                        <div class="grid grid-cols-4 gap-2 text-center">
                            <div>
                                <p class="text-[10px] text-gray-600 uppercase">Scanned</p>
                                <p class="text-xs font-bold text-white" x-text="s.last_run_results.scanned ?? '-'"></p>
                            </div>
                            <div>
                                <p class="text-[10px] text-gray-600 uppercase">Buy</p>
                                <p class="text-xs font-bold text-emerald-400" x-text="s.last_run_results.buy ?? '-'"></p>
                            </div>
                            <div>
                                <p class="text-[10px] text-gray-600 uppercase">Sell</p>
                                <p class="text-xs font-bold text-red-400" x-text="s.last_run_results.sell ?? '-'"></p>
                            </div>
                            <div>
                                <p class="text-[10px] text-gray-600 uppercase">Errors</p>
                                <p class="text-xs font-bold"
                                   :class="(s.last_run_results.errors ?? 0) > 0 ? 'text-red-400' : 'text-gray-500'"
                                   x-text="s.last_run_results.errors ?? '0'"></p>
                            </div>
                        </div>
                    </div>
                </template>

                <!-- Card Footer: Actions -->
                <div class="flex items-center justify-between pt-3 border-t border-gray-800">
                    <div class="flex items-center gap-3">
                        <!-- Run Now -->
                        <button @click="runScan(s.id)" :disabled="running[s.id]"
                                class="text-xs font-medium px-3 py-1.5 rounded-lg transition"
                                :class="running[s.id]
                                    ? 'bg-gray-800 text-gray-500 cursor-not-allowed'
                                    : 'bg-indigo-600/20 text-indigo-400 hover:bg-indigo-600/30 border border-indigo-700/40'">
                            <span x-show="!running[s.id]">Run Now</span>
                            <span x-show="running[s.id]" class="flex items-center gap-1">
                                <svg class="w-3 h-3 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                                </svg>
                                Running
                            </span>
                        </button>
                        <!-- Telegram indicator -->
                        <span class="text-[10px] uppercase tracking-wider"
                              :class="s.send_telegram ? 'text-sky-400' : 'text-gray-700'"
                              x-text="s.send_telegram ? 'TG ON' : 'TG OFF'"></span>
                    </div>
                    <!-- Enable/Disable Toggle -->
                    <button @click="toggleSchedule(s)"
                            class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none"
                            :class="s.is_enabled ? 'bg-emerald-600' : 'bg-gray-700'"
                            role="switch" :aria-checked="s.is_enabled">
                        <span class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                              :class="s.is_enabled ? 'translate-x-4' : 'translate-x-0'"></span>
                    </button>
                </div>
            </div>
        </template>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════
         D. ADD NEW SCHEDULE (Collapsible)
         ═══════════════════════════════════════════════════════════════ -->
    <div class="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
        <!-- Toggle Header -->
        <button @click="showAdd = !showAdd"
                class="w-full flex items-center justify-between px-5 py-4 hover:bg-gray-800/50 transition">
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                </svg>
                <span class="text-sm font-semibold text-white">Add New Schedule</span>
            </div>
            <svg class="w-4 h-4 text-gray-500 transition-transform duration-200"
                 :class="showAdd && 'rotate-180'"
                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
        </button>

        <!-- Form Body -->
        <div x-show="showAdd" x-collapse>
            <div class="px-5 pb-5 pt-2 border-t border-gray-800">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">

                    <!-- Name -->
                    <div class="sm:col-span-2 lg:col-span-3">
                        <label class="block text-xs text-gray-500 uppercase tracking-wider mb-1.5">Schedule Name</label>
                        <input x-model="newSchedule.name" type="text" placeholder="e.g. Crypto Full Scan 4h"
                               class="w-full bg-gray-950 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition">
                    </div>

                    <!-- Scan Type -->
                    <div>
                        <label class="block text-xs text-gray-500 uppercase tracking-wider mb-1.5">Scan Type</label>
                        <select x-model="newSchedule.scan_type"
                                class="w-full bg-gray-950 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition appearance-none">
                            <option value="full_scan">Full Scan</option>
                            <option value="buy_signal">Buy Signal</option>
                            <option value="sell_signal">Sell Signal</option>
                            <option value="multibagger">Multibagger</option>
                            <option value="swing_trade">Swing Trade</option>
                            <option value="breakout">Breakout</option>
                            <option value="oversold_bounce">Oversold Bounce</option>
                        </select>
                    </div>

                    <!-- Asset Type -->
                    <div>
                        <label class="block text-xs text-gray-500 uppercase tracking-wider mb-1.5">Asset Type</label>
                        <select x-model="newSchedule.asset_type"
                                class="w-full bg-gray-950 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition appearance-none">
                            <option value="crypto">Crypto</option>
                            <option value="stock">Stock (ID)</option>
                            <option value="stock_us">Stock (US)</option>
                        </select>
                    </div>

                    <!-- Interval Hours -->
                    <div>
                        <label class="block text-xs text-gray-500 uppercase tracking-wider mb-1.5">Interval (Hours)</label>
                        <input x-model.number="newSchedule.interval_hours" type="number" min="1" max="168" step="1"
                               class="w-full bg-gray-950 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition">
                    </div>

                    <!-- Send Telegram Toggle -->
                    <div class="flex items-center gap-3 sm:col-span-2 lg:col-span-3">
                        <button @click="newSchedule.send_telegram = !newSchedule.send_telegram" type="button"
                                class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none"
                                :class="newSchedule.send_telegram ? 'bg-sky-600' : 'bg-gray-700'"
                                role="switch" :aria-checked="newSchedule.send_telegram">
                            <span class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                                  :class="newSchedule.send_telegram ? 'translate-x-4' : 'translate-x-0'"></span>
                        </button>
                        <span class="text-sm text-gray-400">Send Telegram notification on completion</span>
                    </div>
                </div>

                <!-- Create Button -->
                <div class="mt-5 flex justify-end">
                    <button @click="createSchedule()"
                            :disabled="!newSchedule.name.trim()"
                            class="flex items-center gap-2 px-5 py-2 text-sm font-medium rounded-lg transition"
                            :class="newSchedule.name.trim()
                                ? 'bg-indigo-600 hover:bg-indigo-700 text-white'
                                : 'bg-gray-800 text-gray-500 cursor-not-allowed'">
                        <svg 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="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                        </svg>
                        Create Schedule
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}

{% block scripts %}
<script>
function schedulerPanel() {
    return {
        schedules: [],
        scanTypes: {},
        loading: false,
        showAdd: false,
        running: {},
        newSchedule: {
            name: '',
            scan_type: 'full_scan',
            asset_type: 'crypto',
            interval_hours: 4,
            send_telegram: true
        },

        init() {
            this.fetchData();
        },

        async fetchData() {
            this.loading = true;
            try {
                const r = await fetch('/api/v1/market/scan/schedules');
                const data = await r.json();
                this.schedules = data.schedules || [];
                this.scanTypes = data.scan_types || {};
            } catch (e) {
                console.error('Failed to fetch schedules:', e);
            }
            this.loading = false;
        },

        async createSchedule() {
            if (!this.newSchedule.name.trim()) return;
            try {
                await fetch('/api/v1/market/scan/schedules', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(this.newSchedule)
                });
                this.showAdd = false;
                this.newSchedule = {
                    name: '',
                    scan_type: 'full_scan',
                    asset_type: 'crypto',
                    interval_hours: 4,
                    send_telegram: true
                };
                this.fetchData();
            } catch (e) {
                console.error('Failed to create schedule:', e);
            }
        },

        async runScan(id) {
            this.running[id] = true;
            try {
                await fetch('/api/v1/market/scan/run/' + id, { method: 'POST' });
            } catch (e) {
                console.error('Failed to run scan:', e);
            }
            this.running[id] = false;
            this.fetchData();
        },

        async toggleSchedule(s) {
            try {
                await fetch('/api/v1/market/scan/schedules/' + s.id, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ is_enabled: !s.is_enabled })
                });
                this.fetchData();
            } catch (e) {
                console.error('Failed to toggle schedule:', e);
            }
        },

        async deleteSchedule(id) {
            if (!confirm('Delete this schedule?')) return;
            try {
                await fetch('/api/v1/market/scan/schedules/' + id, { method: 'DELETE' });
                this.fetchData();
            } catch (e) {
                console.error('Failed to delete schedule:', e);
            }
        },

        async runDueScans() {
            this.loading = true;
            try {
                await fetch('/api/v1/market/scan/run-due', { method: 'POST' });
            } catch (e) {
                console.error('Failed to run due scans:', e);
            }
            this.fetchData();
        },

        async initDefaults() {
            this.loading = true;
            try {
                await fetch('/api/v1/market/scan/init-defaults', { method: 'POST' });
            } catch (e) {
                console.error('Failed to init defaults:', e);
            }
            this.fetchData();
        },

        statusColor(s) {
            return {
                success: 'text-emerald-400 bg-emerald-900/30',
                failed: 'text-red-400 bg-red-900/30',
                running: 'text-blue-400 bg-blue-900/30'
            }[s] || 'text-gray-400';
        },

        timeAgo(iso) {
            if (!iso) return 'Never';
            const diff = Math.floor((new Date() - new Date(iso)) / 1000);
            if (diff < 0) return 'just now';
            if (diff < 60) return diff + 's ago';
            if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
            if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
            return Math.floor(diff / 86400) + 'd ago';
        }
    };
}
</script>
{% endblock %}