{% extends "base.html" %}

{% block title %}AI-AntiBot Training Monitor{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">AI-AntiBot Training Monitor</h1>
                <div class="d-flex align-items-center">
                    <div class="badge bg-success me-3" id="systemStatus">
                        <i class="fas fa-circle"></i> Live
                    </div>
                    <button class="btn btn-outline-primary btn-sm" onclick="forceTraining()">
                        <i class="fas fa-brain"></i> Force Training
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Overview Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title" id="totalSamples">0</h4>
                            <p class="card-text">Total Training Samples</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-database fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title" id="modelAccuracy">0%</h4>
                            <p class="card-text">Model Accuracy</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-bullseye fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title" id="humanSamples">0</h4>
                            <p class="card-text">Human Samples</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-user fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title" id="botSamples">0</h4>
                            <p class="card-text">Bot Samples</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-robot fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Real-time Feed and Training Progress -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-stream"></i> Live Training Feed
                    </h5>
                </div>
                <div class="card-body">
                    <div id="liveFeed" class="live-feed" style="height: 400px; overflow-y: auto;">
                        <div class="text-center py-4">
                            <i class="fas fa-spinner fa-spin"></i> Loading feed...
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-chart-line"></i> Training Progress
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Samples Collected</label>
                        <div class="progress">
                            <div class="progress-bar" id="progressBar" role="progressbar" style="width: 0%"></div>
                        </div>
                        <small class="text-muted" id="progressText">0 / 1000 samples</small>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Class Balance</label>
                        <div class="d-flex justify-content-between">
                            <span class="text-success" id="humanRatio">0%</span>
                            <span class="text-warning" id="botRatio">0%</span>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">System Health</label>
                        <div class="d-flex align-items-center">
                            <div class="badge bg-secondary" id="healthBadge">Unknown</div>
                            <small class="text-muted ms-2" id="healthScore">0%</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-chart-pie"></i> Sample Distribution
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="distributionChart" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-chart-bar"></i> Feature Importance
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="featureChart" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Performance Metrics -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-tachometer-alt"></i> Performance Metrics
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center">
                                <h3 class="text-primary" id="accuracyMetric">0%</h3>
                                <p class="text-muted">Accuracy</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h3 class="text-success" id="precisionMetric">0%</h3>
                                <p class="text-muted">Precision</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h3 class="text-info" id="recallMetric">0%</h3>
                                <p class="text-muted">Recall</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h3 class="text-warning" id="f1Metric">0%</h3>
                                <p class="text-muted">F1 Score</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.live-feed {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 15px;
}

.feed-entry {
    margin-bottom: 10px;
    padding: 8px;
    border-left: 3px solid #dee2e6;
    background: white;
    border-radius: 4px;
}

.feed-entry.human {
    border-left-color: #28a745;
}

.feed-entry.bot {
    border-left-color: #ffc107;
}

.feed-entry.training {
    border-left-color: #007bff;
}

.feed-timestamp {
    color: #6c757d;
    font-size: 0.8rem;
}

.feed-content {
    margin-top: 5px;
}

.badge {
    font-size: 0.9rem;
}
</style>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Global variables
let lastFeedId = 0;
let distributionChart, featureChart;

// Initialize dashboard
document.addEventListener('DOMContentLoaded', function() {
    initCharts();
    loadDashboardData();
    startLiveFeed();
});

// Initialize charts
function initCharts() {
    // Distribution chart
    const distCtx = document.getElementById('distributionChart').getContext('2d');
    distributionChart = new Chart(distCtx, {
        type: 'doughnut',
        data: {
            labels: ['Human', 'Bot'],
            datasets: [{
                data: [0, 0],
                backgroundColor: ['#28a745', '#ffc107']
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });

    // Feature importance chart
    const featureCtx = document.getElementById('featureChart').getContext('2d');
    featureChart = new Chart(featureCtx, {
        type: 'bar',
        data: {
            labels: [],
            datasets: [{
                label: 'Importance',
                data: [],
                backgroundColor: '#007bff'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

// Load dashboard data
function loadDashboardData() {
    fetch('/ai-dashboard/data')
        .then(response => response.json())
        .then(data => {
            updateOverview(data.overview);
            updateProgressBar(data.training_progress);
            updateSystemHealth(data.system_status);
            updatePerformanceMetrics(data.performance_metrics);
            updateCharts(data);
        })
        .catch(error => {
            console.error('Error loading dashboard data:', error);
        });
}

// Update overview cards
function updateOverview(overview) {
    document.getElementById('totalSamples').textContent = overview.total_training_samples;
    document.getElementById('modelAccuracy').textContent = Math.round(overview.model_accuracy * 100) + '%';
    document.getElementById('humanSamples').textContent = overview.human_samples;
    document.getElementById('botSamples').textContent = overview.bot_samples;
}

// Update progress bar
function updateProgressBar(progress) {
    const percentage = Math.round(progress.progress_percentage);
    document.getElementById('progressBar').style.width = percentage + '%';
    document.getElementById('progressText').textContent = `${progress.current_samples} / ${progress.threshold} samples`;
}

// Update system health
function updateSystemHealth(status) {
    const badge = document.getElementById('healthBadge');
    const score = document.getElementById('healthScore');
    
    badge.textContent = status.status.charAt(0).toUpperCase() + status.status.slice(1);
    score.textContent = status.health_score + '%';
    
    badge.className = 'badge ';
    if (status.status === 'excellent') badge.className += 'bg-success';
    else if (status.status === 'good') badge.className += 'bg-info';
    else if (status.status === 'fair') badge.className += 'bg-warning';
    else badge.className += 'bg-danger';
}

// Update performance metrics
function updatePerformanceMetrics(metrics) {
    document.getElementById('accuracyMetric').textContent = Math.round(metrics.accuracy * 100) + '%';
    document.getElementById('precisionMetric').textContent = Math.round(metrics.precision * 100) + '%';
    document.getElementById('recallMetric').textContent = Math.round(metrics.recall * 100) + '%';
    document.getElementById('f1Metric').textContent = Math.round(metrics.f1_score * 100) + '%';
}

// Update charts
function updateCharts(data) {
    // Update distribution chart
    const dist = data.training_visualization_data?.sample_distribution || {human: 0, bot: 0};
    distributionChart.data.datasets[0].data = [dist.human, dist.bot];
    distributionChart.update();

    // Update feature importance chart
    const features = data.feature_importance || {};
    const featureNames = Object.keys(features).slice(0, 10);
    const featureValues = Object.values(features).slice(0, 10);
    
    featureChart.data.labels = featureNames;
    featureChart.data.datasets[0].data = featureValues;
    featureChart.update();
}

// Start live feed
function startLiveFeed() {
    setInterval(updateLiveFeed, 2000); // Update every 2 seconds
}

// Update live feed
function updateLiveFeed() {
    fetch(`/ai-dashboard/feed?since=${lastFeedId}`)
        .then(response => response.json())
        .then(events => {
            if (events.length > 0) {
                const feed = document.getElementById('liveFeed');
                
                events.forEach(event => {
                    const entry = createFeedEntry(event);
                    feed.appendChild(entry);
                    lastFeedId = Math.max(lastFeedId, event.id);
                });
                
                // Auto-scroll to bottom
                feed.scrollTop = feed.scrollHeight;
                
                // Remove old entries (keep last 100)
                const entries = feed.querySelectorAll('.feed-entry');
                while (entries.length > 100) {
                    entries[0].remove();
                }
            }
        })
        .catch(error => {
            console.error('Error updating live feed:', error);
        });
}

// Create feed entry
function createFeedEntry(event) {
    const entry = document.createElement('div');
    entry.className = `feed-entry ${event.event_type}`;
    
    const timestamp = new Date(event.timestamp).toLocaleTimeString();
    const data = event.data;
    
    let content = '';
    if (event.event_type === 'turnstile_interaction') {
        content = `<strong>${data.label.toUpperCase()}</strong> - IP: ${data.ip_hash} | Duration: ${data.session_duration}ms | Total: ${data.total_samples}`;
    } else if (event.event_type === 'ai_prediction') {
        content = `<strong>AI PREDICTION</strong> - ${data.label.toUpperCase()} (${Math.round(data.confidence * 100)}% confidence)`;
    } else if (event.event_type === 'model_training') {
        content = `<strong>MODEL TRAINING</strong> - Accuracy: ${Math.round(data.stats?.accuracy * 100)}%`;
    }
    
    entry.innerHTML = `
        <div class="feed-timestamp">${timestamp}</div>
        <div class="feed-content">${content}</div>
    `;
    
    return entry;
}

// Force training
function forceTraining() {
    fetch('/ai-dashboard/force-training', {method: 'POST'})
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                showNotification('Training initiated successfully', 'success');
                loadDashboardData();
            } else {
                showNotification('Training failed: ' + result.error, 'danger');
            }
        })
        .catch(error => {
            console.error('Error forcing training:', error);
            showNotification('Error initiating training', 'danger');
        });
}

// Show notification
function showNotification(message, type) {
    const notification = document.createElement('div');
    notification.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
    notification.style.top = '20px';
    notification.style.right = '20px';
    notification.style.zIndex = '9999';
    notification.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(notification);
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        notification.remove();
    }, 5000);
}

// Auto-refresh dashboard data every 30 seconds
setInterval(loadDashboardData, 30000);
</script>
{% endblock %}