{% extends "base.html" %}
{% block content %}
<div x-data="mlHealthPanel()" class="space-y-5">

    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold text-white flex items-center gap-2">
                <svg class="w-6 h-6 text-koin-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                ML Health Monitor
            </h1>
            <p class="text-sm text-gray-400 mt-1">Model accuracy tracking, degradation alerts & feature importance</p>
        </div>
        <button @click="fetchData()" class="px-4 py-2 bg-koin-600 hover:bg-koin-500 text-white rounded-lg text-sm font-medium transition">🔄 Refresh</button>
    </div>

    <!-- Degradation Status Banner -->
    <div x-show="report.degradation" class="rounded-xl p-4 border"
         :class="{
             'bg-green-900/20 border-green-700 text-green-300': report.degradation?.status === 'healthy',
             'bg-yellow-900/20 border-yellow-700 text-yellow-300': report.degradation?.status === 'warning',
             'bg-red-900/20 border-red-700 text-red-300': report.degradation?.status === 'critical',
             'bg-gray-800 border-gray-700 text-gray-400': report.degradation?.status === 'insufficient_data'
         }">
        <div class="flex items-center gap-2">
            <span x-text="report.degradation?.status === 'healthy' ? '✅' : report.degradation?.status === 'warning' ? '⚠️' : report.degradation?.status === 'critical' ? '🚨' : 'ℹ️'"></span>
            <span class="font-semibold" x-text="'Model Status: ' + (report.degradation?.status || 'unknown').toUpperCase()"></span>
            <span class="text-sm" x-text="'— ' + (report.degradation?.recommendation || '')"></span>
        </div>
        <template x-for="a in report.degradation?.alerts || []" :key="a.message">
            <p class="mt-1 text-sm" :class="a.level === 'critical' ? 'text-red-400' : 'text-yellow-400'" x-text="'• ' + a.message"></p>
        </template>
    </div>

    <!-- Accuracy Stats -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold" :class="accuracy.overall_accuracy >= 60 ? 'text-green-400' : accuracy.overall_accuracy >= 50 ? 'text-yellow-400' : 'text-red-400'" x-text="(accuracy.overall_accuracy || 0) + '%'">-</p>
            <p class="text-xs text-gray-400 mt-1">Overall Accuracy</p>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-white" x-text="accuracy.total_evaluated || 0">0</p>
            <p class="text-xs text-gray-400 mt-1">Signals Evaluated</p>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold" :class="accuracy.accuracy_trend >= 0 ? 'text-green-400' : 'text-red-400'" x-text="(accuracy.accuracy_trend >= 0 ? '+' : '') + (accuracy.accuracy_trend || 0) + '%'">-</p>
            <p class="text-xs text-gray-400 mt-1">7d Trend</p>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-blue-400" x-text="(accuracy.recent_7d_accuracy || 0) + '%'">-</p>
            <p class="text-xs text-gray-400 mt-1">Recent 7d Accuracy</p>
        </div>
    </div>

    <div x-show="loading" class="text-center py-12"><div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-koin-400"></div></div>

    <div x-show="!loading" class="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <!-- Buy vs Sell Accuracy -->
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
            <h3 class="text-sm font-semibold text-white mb-3">Accuracy by Signal Type</h3>
            <div class="space-y-3">
                <div>
                    <div class="flex justify-between text-xs mb-1"><span class="text-green-400">BUY (<span x-text="accuracy.buy_count || 0"></span>)</span><span class="text-white" x-text="(accuracy.buy_accuracy || 0) + '%'"></span></div>
                    <div class="w-full bg-gray-700 rounded-full h-2"><div class="bg-green-500 h-2 rounded-full" :style="'width:' + (accuracy.buy_accuracy || 0) + '%'"></div></div>
                </div>
                <div>
                    <div class="flex justify-between text-xs mb-1"><span class="text-red-400">SELL (<span x-text="accuracy.sell_count || 0"></span>)</span><span class="text-white" x-text="(accuracy.sell_accuracy || 0) + '%'"></span></div>
                    <div class="w-full bg-gray-700 rounded-full h-2"><div class="bg-red-500 h-2 rounded-full" :style="'width:' + (accuracy.sell_accuracy || 0) + '%'"></div></div>
                </div>
            </div>
        </div>

        <!-- By Confidence Band -->
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
            <h3 class="text-sm font-semibold text-white mb-3">Accuracy by Confidence</h3>
            <template x-for="(data, band) in accuracy.by_confidence || {}" :key="band">
                <div class="mb-2">
                    <div class="flex justify-between text-xs mb-1"><span class="text-gray-300" x-text="band + ' (' + data.count + ')'"></span><span class="text-white" x-text="data.accuracy + '%'"></span></div>
                    <div class="w-full bg-gray-700 rounded-full h-2"><div class="bg-koin-500 h-2 rounded-full" :style="'width:' + data.accuracy + '%'"></div></div>
                </div>
            </template>
        </div>

        <!-- Rolling Accuracy Chart -->
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
            <h3 class="text-sm font-semibold text-white mb-3">7-Day Rolling Accuracy</h3>
            <div class="space-y-1">
                <template x-for="w in accuracy.rolling_7d || []" :key="w.period_start">
                    <div class="flex items-center gap-2 text-xs">
                        <span class="text-gray-500 w-20" x-text="w.period_start"></span>
                        <div class="flex-1 bg-gray-700 rounded-full h-3 relative">
                            <div class="h-3 rounded-full transition-all" :class="w.accuracy >= 60 ? 'bg-green-500' : w.accuracy >= 50 ? 'bg-yellow-500' : 'bg-red-500'" :style="'width:' + w.accuracy + '%'"></div>
                        </div>
                        <span class="w-12 text-right" :class="w.accuracy >= 60 ? 'text-green-400' : 'text-red-400'" x-text="w.accuracy + '%'"></span>
                    </div>
                </template>
            </div>
        </div>

        <!-- Feature Importance -->
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
            <h3 class="text-sm font-semibold text-white mb-3">Feature Importance</h3>
            <div class="space-y-1.5">
                <template x-for="f in features.features || []" :key="f.name">
                    <div class="flex items-center gap-2 text-xs">
                        <span class="text-gray-300 w-32 truncate" x-text="f.name"></span>
                        <div class="flex-1 bg-gray-700 rounded-full h-2.5">
                            <div class="bg-koin-500 h-2.5 rounded-full" :style="'width:' + (f.importance * 500) + '%'"></div>
                        </div>
                        <span class="text-gray-400 w-12 text-right" x-text="(f.importance * 100).toFixed(1) + '%'"></span>
                    </div>
                </template>
            </div>
            <p x-show="features.source === 'default_weights'" class="mt-2 text-xs text-gray-500 italic" x-text="features.note"></p>
        </div>
    </div>

    <!-- Model Info -->
    <div x-show="!loading && report.model_info" class="bg-gray-800 border border-gray-700 rounded-xl p-4">
        <h3 class="text-sm font-semibold text-white mb-2">Model Information</h3>
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs text-gray-400">
            <span>Type: <span class="text-white" x-text="report.model_info?.model_type || '-'"></span></span>
            <span>Algos: <span class="text-white" x-text="(report.model_info?.algorithms || []).join(', ')"></span></span>
            <span>Files: <span class="text-white" x-text="(report.model_info?.model_files || []).length"></span></span>
            <span>Last Retrain: <span class="text-white" x-text="report.model_info?.last_retrain || 'N/A'"></span></span>
        </div>
    </div>
</div>

<script>
function mlHealthPanel() {
    return {
        report: {}, accuracy: {}, features: {},
        loading: true,

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

        async fetchData() {
            this.loading = true;
            try {
                const r = await fetch(`/api/v1/market/ml/health?asset_type={{ asset_mode }}&period=30`);
                this.report = await r.json();
                this.accuracy = this.report.accuracy || {};
                this.features = this.report.feature_importance || {};
            } catch(e) { console.error(e); }
            this.loading = false;
        }
    }
}
</script>
{% endblock %}