{% extends "base.html" %}
{% block title %}Admin — ML Control Panel{% endblock %}

{% block content %}
<div x-data="mlPanel()" x-init="loadStats()" class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-white">ML Control Panel</h1>
            <p class="mt-1 text-sm text-gray-400">Toggle mode, monitor stats, dan jalankan bulk scan</p>
        </div>
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-500" x-text="'Last refresh: ' + (lastRefresh || '-')"></span>
            <button @click="loadStats()" class="px-3 py-1.5 text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg transition">
                Refresh
            </button>
        </div>
    </div>

    <!-- Mode Toggle Card -->
    <div class="bg-gray-900 border border-gray-800 rounded-xl p-6">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-lg font-semibold text-white">ML Compute Mode</h2>
                <p class="text-sm text-gray-400 mt-1">
                    <span x-show="mlMode === 'view_only'" class="text-amber-400">View Only</span>
                    <span x-show="mlMode === 'live'" class="text-emerald-400">Live Compute</span>
                    <span x-show="!mlMode" class="text-gray-500">Loading...</span>
                </p>
                <p class="text-xs text-gray-500 mt-2" x-show="mlMode === 'view_only'">
                    Halaman hanya menampilkan data cached dari DB. Semua komputasi ML diblokir.
                </p>
                <p class="text-xs text-gray-500 mt-2" x-show="mlMode === 'live'">
                    Halaman bisa menjalankan komputasi ML langsung saat page load / button click.
                </p>
            </div>
            <div class="flex items-center gap-3">
                <button @click="setMode('view_only')"
                        :class="mlMode === 'view_only' ? 'bg-amber-600 text-white' : 'bg-gray-800 text-gray-400 hover:bg-gray-700'"
                        class="px-4 py-2 text-sm font-medium rounded-lg transition">
                    View Only
                </button>
                <button @click="setMode('live')"
                        :class="mlMode === 'live' ? 'bg-emerald-600 text-white' : 'bg-gray-800 text-gray-400 hover:bg-gray-700'"
                        class="px-4 py-2 text-sm font-medium rounded-lg transition">
                    Live
                </button>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Trading Signals -->
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-sm font-medium text-gray-400 uppercase tracking-wider">Trading Signals</h3>
                <span class="text-xs px-2 py-0.5 rounded-full"
                      :class="stats.trading_signals?.active > 0 ? 'bg-emerald-900/50 text-emerald-400' : 'bg-gray-800 text-gray-500'"
                      x-text="(stats.trading_signals?.active || 0) + ' active'"></span>
            </div>
            <p class="text-3xl font-bold text-white" x-text="stats.trading_signals?.total || 0"></p>
            <p class="text-xs text-gray-500 mt-2">
                Last computed:
                <span class="text-gray-400" x-text="formatDate(stats.trading_signals?.last_computed)"></span>
            </p>
        </div>

        <!-- Range Trading Scores -->
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-sm font-medium text-gray-400 uppercase tracking-wider">Range Trading</h3>
                <span class="text-xs px-2 py-0.5 rounded-full bg-gray-800 text-gray-500"
                      x-text="(stats.range_trading_scores?.with_cycles || 0) + ' w/ cycles'"></span>
            </div>
            <p class="text-3xl font-bold text-white" x-text="stats.range_trading_scores?.total || 0"></p>
            <p class="text-xs text-gray-500 mt-2">
                Last computed:
                <span class="text-gray-400" x-text="formatDate(stats.range_trading_scores?.last_computed)"></span>
            </p>
        </div>

        <!-- Bullish Momentum -->
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-sm font-medium text-gray-400 uppercase tracking-wider">Bullish Momentum</h3>
            </div>
            <p class="text-3xl font-bold text-white" x-text="stats.bullish_momentum_scores?.total || 0"></p>
            <p class="text-xs text-gray-500 mt-2">
                Last computed:
                <span class="text-gray-400" x-text="formatDate(stats.bullish_momentum_scores?.last_computed)"></span>
            </p>
        </div>
    </div>

    <!-- Signal Performance Dashboard -->
    <div class="bg-gray-900 border border-gray-800 rounded-xl p-6">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h2 class="text-lg font-semibold text-white">Signal Performance</h2>
                <p class="text-sm text-gray-400 mt-1">Winrate, profit factor, dan Kelly Criterion dari sinyal historis</p>
            </div>
            <div class="flex items-center gap-2">
                <select x-model="perfDays" @change="loadPerformance()"
                        class="bg-gray-800 border border-gray-700 text-gray-300 text-xs rounded-lg px-3 py-1.5">
                    <option value="30">30 hari</option>
                    <option value="90" selected>90 hari</option>
                    <option value="180">180 hari</option>
                    <option value="365">1 tahun</option>
                </select>
                <button @click="updateOutcomes()" :disabled="outcomeUpdating"
                        class="px-3 py-1.5 text-xs rounded-lg transition"
                        :class="outcomeUpdating ? 'bg-gray-700 text-gray-400' : 'bg-amber-700 hover:bg-amber-600 text-white'">
                    <span x-show="!outcomeUpdating">Update Outcomes</span>
                    <span x-show="outcomeUpdating" class="flex items-center gap-1">
                        <svg class="animate-spin h-3 w-3" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                        Evaluating...
                    </span>
                </button>
            </div>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
            <!-- Total Signals -->
            <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                <p class="text-xs text-gray-500 uppercase">Total</p>
                <p class="text-xl font-bold text-white mt-1" x-text="perf.total || 0"></p>
            </div>
            <!-- Winrate -->
            <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                <p class="text-xs text-gray-500 uppercase">Winrate</p>
                <p class="text-xl font-bold mt-1"
                   :class="(perf.winrate || 0) >= 0.5 ? 'text-emerald-400' : 'text-red-400'"
                   x-text="((perf.winrate || 0) * 100).toFixed(1) + '%'"></p>
            </div>
            <!-- Direction Accuracy -->
            <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                <p class="text-xs text-gray-500 uppercase">Dir. Accuracy</p>
                <p class="text-xl font-bold mt-1"
                   :class="(perf.direction_accuracy || 0) >= 0.5 ? 'text-emerald-400' : 'text-red-400'"
                   x-text="((perf.direction_accuracy || 0) * 100).toFixed(1) + '%'"></p>
            </div>
            <!-- Profit Factor -->
            <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                <p class="text-xs text-gray-500 uppercase">Profit Factor</p>
                <p class="text-xl font-bold mt-1"
                   :class="(perf.profit_factor || 0) >= 1.0 ? 'text-emerald-400' : 'text-red-400'"
                   x-text="(perf.profit_factor || 0).toFixed(2)"></p>
            </div>
            <!-- Avg Win / Loss -->
            <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                <p class="text-xs text-gray-500 uppercase">Avg Win / Loss</p>
                <p class="text-sm font-bold mt-1">
                    <span class="text-emerald-400" x-text="'+' + (perf.avg_win || 0).toFixed(1) + '%'"></span>
                    <span class="text-gray-600 mx-0.5">/</span>
                    <span class="text-red-400" x-text="'-' + (perf.avg_loss || 0).toFixed(1) + '%'"></span>
                </p>
            </div>
            <!-- Kelly -->
            <div class="bg-gray-800/50 rounded-lg p-3 text-center">
                <p class="text-xs text-gray-500 uppercase">Kelly %</p>
                <p class="text-xl font-bold text-blue-400 mt-1"
                   x-text="((perf.kelly_fraction || 0) * 100).toFixed(1) + '%'"></p>
            </div>
        </div>

        <!-- W/L/BE breakdown -->
        <div class="flex items-center gap-4 mt-4 text-xs text-gray-400">
            <span>W: <span class="text-emerald-400 font-medium" x-text="perf.wins || 0"></span></span>
            <span>L: <span class="text-red-400 font-medium" x-text="perf.losses || 0"></span></span>
            <span>BE: <span class="text-gray-400 font-medium" x-text="perf.breakeven || 0"></span></span>
            <span x-show="outcomeMessage" class="ml-auto text-amber-400" x-text="outcomeMessage"></span>
        </div>
    </div>

    <!-- Bulk Scan Section -->
    <div class="bg-gray-900 border border-gray-800 rounded-xl p-6">
        <h2 class="text-lg font-semibold text-white mb-4">Bulk Scan Operations</h2>
        <p class="text-sm text-gray-400 mb-6">Jalankan scan batch untuk mengisi/update data ML di database.</p>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- Range Trading Scan -->
            <div class="border border-gray-800 rounded-lg p-4">
                <h3 class="text-sm font-semibold text-white mb-1">Range Trading Scan</h3>
                <p class="text-xs text-gray-500 mb-3">Analisis oscillation & mean-reversion semua coin.</p>
                <button @click="startScan('range-trading')"
                        :disabled="scans['range-trading']?.running"
                        class="w-full px-4 py-2 text-sm font-medium rounded-lg transition disabled:opacity-50"
                        :class="scans['range-trading']?.running ? 'bg-gray-700 text-gray-400' : 'bg-koin-600 hover:bg-koin-500 text-white'">
                    <span x-show="!scans['range-trading']?.running">Mulai Scan</span>
                    <span x-show="scans['range-trading']?.running" class="flex items-center justify-center gap-2">
                        <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                        <span x-text="scans['range-trading']?.progress || 'Scanning...'"></span>
                    </span>
                </button>
            </div>

            <!-- Cycle Frequency Scan -->
            <div class="border border-gray-800 rounded-lg p-4">
                <h3 class="text-sm font-semibold text-white mb-1">Cycle Frequency Scan</h3>
                <p class="text-xs text-gray-500 mb-3">Hitung frekuensi cycle adaptive S/R semua coin.</p>
                <div class="flex gap-2 mb-3">
                    <template x-for="m in ['agresif', 'moderate', 'santai']">
                        <button @click="scanOptions.cycleMode = m"
                                :class="scanOptions.cycleMode === m ? 'bg-koin-700 text-white' : 'bg-gray-800 text-gray-400'"
                                class="px-3 py-1 text-xs rounded-lg transition" x-text="m"></button>
                    </template>
                </div>
                <button @click="startScan('cycles')"
                        :disabled="scans['cycles']?.running"
                        class="w-full px-4 py-2 text-sm font-medium rounded-lg transition disabled:opacity-50"
                        :class="scans['cycles']?.running ? 'bg-gray-700 text-gray-400' : 'bg-koin-600 hover:bg-koin-500 text-white'">
                    <span x-show="!scans['cycles']?.running">Mulai Scan</span>
                    <span x-show="scans['cycles']?.running" class="flex items-center justify-center gap-2">
                        <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                        <span x-text="scans['cycles']?.progress || 'Scanning...'"></span>
                    </span>
                </button>
            </div>

            <!-- Bullish Momentum Scan -->
            <div class="border border-gray-800 rounded-lg p-4">
                <h3 class="text-sm font-semibold text-white mb-1">Bullish Momentum Scan</h3>
                <p class="text-xs text-gray-500 mb-3">Deteksi early bullish breakout momentum.</p>
                <button @click="startScan('bullish')"
                        :disabled="scans['bullish']?.running"
                        class="w-full px-4 py-2 text-sm font-medium rounded-lg transition disabled:opacity-50"
                        :class="scans['bullish']?.running ? 'bg-gray-700 text-gray-400' : 'bg-koin-600 hover:bg-koin-500 text-white'">
                    <span x-show="!scans['bullish']?.running">Mulai Scan</span>
                    <span x-show="scans['bullish']?.running" class="flex items-center justify-center gap-2">
                        <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                        <span x-text="scans['bullish']?.progress || 'Scanning...'"></span>
                    </span>
                </button>
            </div>

            <!-- Trading Signals Scan -->
            <div class="border border-gray-800 rounded-lg p-4">
                <h3 class="text-sm font-semibold text-white mb-1">Trading Signals Scan</h3>
                <p class="text-xs text-gray-500 mb-3">Generate sinyal trading (31 algo + ML) untuk semua coin.</p>
                <div class="flex gap-2 mb-3">
                    <template x-for="tf in ['1m', '15m', '30m', '1h', '4h', '1D', '1W']">
                        <button @click="scanOptions.signalTimeframe = tf"
                                :class="scanOptions.signalTimeframe === tf ? 'bg-koin-700 text-white' : 'bg-gray-800 text-gray-400'"
                                class="px-3 py-1 text-xs rounded-lg transition" x-text="tf"></button>
                    </template>
                </div>
                <button @click="startScan('signals')"
                        :disabled="scans['signals']?.running"
                        class="w-full px-4 py-2 text-sm font-medium rounded-lg transition disabled:opacity-50"
                        :class="scans['signals']?.running ? 'bg-gray-700 text-gray-400' : 'bg-koin-600 hover:bg-koin-500 text-white'">
                    <span x-show="!scans['signals']?.running">Mulai Scan</span>
                    <span x-show="scans['signals']?.running" class="flex items-center justify-center gap-2">
                        <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                        <span x-text="scans['signals']?.progress || 'Scanning...'"></span>
                    </span>
                </button>
            </div>
        </div>

        <!-- Scan Log -->
        <div x-show="scanLog.length > 0" class="mt-6">
            <h3 class="text-sm font-medium text-gray-400 mb-2">Scan Log</h3>
            <div class="bg-gray-950 border border-gray-800 rounded-lg p-3 max-h-64 overflow-y-auto font-mono text-xs space-y-0.5">
                <template x-for="(line, i) in scanLog" :key="i">
                    <div :class="{
                        'text-emerald-400': line.includes('[done]') || line.includes('[complete]'),
                        'text-red-400': line.includes('[error]') || line.includes('[fail]'),
                        'text-amber-400': line.includes('[warn]') || line.includes('[skip]'),
                        'text-gray-500': !line.includes('[done]') && !line.includes('[complete]') && !line.includes('[error]') && !line.includes('[fail]') && !line.includes('[warn]') && !line.includes('[skip]')
                    }" x-text="line"></div>
                </template>
            </div>
            <button @click="scanLog = []" class="mt-2 text-xs text-gray-500 hover:text-gray-400">Clear log</button>
        </div>
    </div>
</div>

<script>
function mlPanel() {
    return {
        mlMode: '',
        stats: {},
        lastRefresh: null,
        scanLog: [],
        perf: {},
        perfDays: 90,
        outcomeUpdating: false,
        outcomeMessage: '',
        scanOptions: {
            cycleMode: 'agresif',
            signalTimeframe: '1D',
        },
        scans: {
            'range-trading': { running: false, progress: '' },
            'cycles': { running: false, progress: '' },
            'bullish': { running: false, progress: '' },
            'signals': { running: false, progress: '' },
        },

        async loadStats() {
            try {
                const [modeRes, statsRes] = await Promise.all([
                    fetch('/api/v1/settings/ml-mode'),
                    fetch('/api/v1/settings/ml-stats'),
                ]);
                if (modeRes.redirected || statsRes.redirected) {
                    window.location.href = '/auth/login';
                    return;
                }
                const modeData = await modeRes.json();
                const statsData = await statsRes.json();
                this.mlMode = modeData.ml_mode;
                this.stats = statsData;
                this.lastRefresh = new Date().toLocaleTimeString('id-ID');
            } catch (e) {
                console.error('loadStats error:', e);
            }
            this.loadPerformance();
        },

        async loadPerformance() {
            try {
                const res = await fetch(`/api/v1/market/screener/signals/performance?days=${this.perfDays}`);
                if (res.redirected) { window.location.href = '/auth/login'; return; }
                const data = await res.json();
                if (data.ok) this.perf = data.stats;
            } catch (e) {
                console.error('loadPerformance error:', e);
            }
        },

        async updateOutcomes() {
            this.outcomeUpdating = true;
            this.outcomeMessage = '';
            try {
                const res = await fetch('/api/v1/market/screener/signals/update-outcomes', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ limit: 500 }),
                });
                if (res.redirected) { window.location.href = '/auth/login'; return; }
                const data = await res.json();
                if (data.ok) {
                    const r = data.results;
                    this.outcomeMessage = `Evaluated ${r.evaluated} (W:${r.win} L:${r.loss} BE:${r.breakeven} Skip:${r.skipped})`;
                    this.addLog(`[outcome] ${this.outcomeMessage}`);
                    this.loadPerformance();
                    this.loadStats();
                }
            } catch (e) {
                this.outcomeMessage = 'Error: ' + e.message;
            }
            this.outcomeUpdating = false;
        },

        async setMode(mode) {
            try {
                const res = await fetch('/api/v1/settings/ml-mode', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ mode }),
                });
                if (res.redirected) { window.location.href = '/auth/login'; return; }
                const data = await res.json();
                if (data.ml_mode) {
                    this.mlMode = data.ml_mode;
                    this.addLog(`[mode] ML mode set to: ${data.ml_mode}`);
                } else if (data.error) {
                    this.addLog(`[error] ${data.error}`);
                }
            } catch (e) {
                this.addLog(`[error] setMode failed: ${e.message}`);
            }
        },

        startScan(type) {
            if (this.scans[type]?.running) return;

            const urlMap = {
                'range-trading': '/api/v1/market/screener/range-trading/scan',
                'cycles': '/api/v1/market/screener/range-trading/scan-cycles',
                'bullish': '/api/v1/market/screener/early-bullish/scan',
                'signals': '/api/v1/market/screener/signals/scan',
            };

            const bodyMap = {
                'range-trading': {},
                'cycles': { mode: this.scanOptions.cycleMode },
                'bullish': {},
                'signals': { timeframe: this.scanOptions.signalTimeframe },
            };

            this.scans[type] = { running: true, progress: 'Starting...' };
            this.addLog(`[start] ${type} scan started`);

            // SSE via fetch + POST (EventSource doesn't support POST)
            fetch(urlMap[type], {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(bodyMap[type]),
            }).then(response => {
                if (response.redirected) { window.location.href = '/auth/login'; return; }
                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let buffer = '';

                const read = () => {
                    reader.read().then(({ done, value }) => {
                        if (done) {
                            this.scans[type] = { running: false, progress: '' };
                            this.addLog(`[complete] ${type} scan finished`);
                            this.loadStats();
                            return;
                        }
                        buffer += decoder.decode(value, { stream: true });
                        const lines = buffer.split('\n');
                        buffer = lines.pop();

                        for (const line of lines) {
                            if (line.startsWith('data: ')) {
                                try {
                                    const evt = JSON.parse(line.slice(6));
                                    this.handleScanEvent(type, evt);
                                } catch (e) { /* skip parse errors */ }
                            }
                        }
                        read();
                    }).catch(err => {
                        this.scans[type] = { running: false, progress: '' };
                        this.addLog(`[error] ${type}: ${err.message}`);
                    });
                };
                read();
            }).catch(err => {
                this.scans[type] = { running: false, progress: '' };
                this.addLog(`[error] ${type}: ${err.message}`);
            });
        },

        handleScanEvent(type, evt) {
            const processed = evt.processed || evt.current || 0;
            const total = evt.total || 0;

            if (evt.type === 'start') {
                this.scans[type].progress = `0/${total}`;
            } else if (evt.type === 'progress' || evt.type === 'scored' || evt.type === 'skip') {
                const pct = total > 0 ? Math.round((processed / total) * 100) : 0;
                this.scans[type].progress = `${pct}% (${processed}/${total})`;
                if (evt.asset_id && evt.type !== 'skip') {
                    this.addLog(`[${type}] ${evt.symbol || evt.asset_id}: ${evt.signal || evt.status || 'ok'}`);
                }
            } else if (evt.type === 'done' || evt.type === 'complete') {
                this.scans[type] = { running: false, progress: '' };
                const msg = evt.message || `${evt.scored || evt.scanned || '?'} coins scanned`;
                this.addLog(`[done] ${type}: ${msg}`);
                this.loadStats();
            } else if (evt.type === 'error') {
                this.addLog(`[error] ${type}: ${evt.message || evt.error || 'unknown error'}`);
            }
        },

        addLog(msg) {
            const ts = new Date().toLocaleTimeString('id-ID');
            this.scanLog.unshift(`${ts} ${msg}`);
            if (this.scanLog.length > 200) this.scanLog.length = 200;
        },

        formatDate(iso) {
            if (!iso) return 'Belum pernah';
            try {
                const d = new Date(iso);
                return d.toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' })
                     + ' ' + d.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
            } catch { return iso; }
        },
    };
}
</script>
{% endblock %}