{% extends "admin/base.html" %}

{% block title %}Admin Control Center - System Monitoring{% endblock %}

{% block admin_content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="mb-1">🚀 Admin Control Center</h2>
                    <p class="text-muted mb-0">Real-time system monitoring & automated repairs</p>
                </div>
                <div class="d-flex gap-2">
                    <button class="btn btn-outline-primary" onclick="refreshDashboard()">
                        <i data-feather="refresh-cw"></i> Refresh
                    </button>
                    <button class="btn btn-warning" onclick="restartMonitoring()">
                        <i data-feather="restart"></i> Restart Monitoring
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- System Health Overview -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="p-3 rounded-3" style="background: rgba(40, 167, 69, 0.1);">
                                <i data-feather="heart" style="color: #28a745; width: 24px; height: 24px;"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="fw-bold text-dark" id="system-health">---%</div>
                            <div class="text-muted small">System Health</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="p-3 rounded-3" style="background: rgba(0, 123, 255, 0.1);">
                                <i data-feather="check-circle" style="color: #007bff; width: 24px; height: 24px;"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="fw-bold text-dark" id="total-checks">---</div>
                            <div class="text-muted small">Total Checks</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="p-3 rounded-3" style="background: rgba(220, 53, 69, 0.1);">
                                <i data-feather="alert-triangle" style="color: #dc3545; width: 24px; height: 24px;"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="fw-bold text-dark" id="active-alerts">---</div>
                            <div class="text-muted small">Active Alerts</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="p-3 rounded-3" style="background: rgba(123, 74, 142, 0.1);">
                                <i data-feather="database" style="color: #7a4b8e; width: 24px; height: 24px;"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="fw-bold text-dark" id="orchid-count">---</div>
                            <div class="text-muted small">Orchid Records</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Real-time Alerts -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="mb-0 d-flex align-items-center">
                        <i data-feather="bell" class="me-2" style="color: #dc3545;"></i>
                        System Alerts
                        <span class="badge bg-danger ms-2" id="alert-count">0</span>
                    </h5>
                </div>
                <div class="card-body">
                    <div id="alerts-container">
                        <div class="text-center text-muted py-3">
                            <i data-feather="check-circle" style="color: #28a745; width: 48px; height: 48px;"></i>
                            <div class="mt-2">All systems operational</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Component Status Grid -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="mb-0 d-flex align-items-center">
                        <i data-feather="grid" class="me-2" style="color: #007bff;"></i>
                        Component Status Matrix
                    </h5>
                </div>
                <div class="card-body">
                    <div id="components-grid" class="row g-3">
                        <!-- Components will be loaded here -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Orchid Collection Progress -->
    <div class="row mb-4">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="mb-0 d-flex align-items-center">
                        <i data-feather="trending-up" class="me-2" style="color: #7a4b8e;"></i>
                        Orchid Data Collection Progress
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="fw-medium">Overall Progress</span>
                            <span id="collection-percentage" class="text-muted">---%</span>
                        </div>
                        <div class="progress" style="height: 10px;">
                            <div id="collection-progress-bar" class="progress-bar" style="background: #7a4b8e;" role="progressbar"></div>
                        </div>
                    </div>
                    
                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="text-center p-3 border rounded">
                                <div class="h4 mb-1 text-primary" id="gary-count">---</div>
                                <div class="small text-muted">Gary Yong Gee</div>
                                <button class="btn btn-sm btn-outline-primary mt-2" onclick="triggerCollection('gary_yong_gee')">
                                    <i data-feather="download"></i> Collect
                                </button>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center p-3 border rounded">
                                <div class="h4 mb-1 text-success" id="gbif-count">---</div>
                                <div class="small text-muted">GBIF Records</div>
                                <button class="btn btn-sm btn-outline-success mt-2" onclick="triggerCollection('gbif')">
                                    <i data-feather="download"></i> Collect
                                </button>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center p-3 border rounded">
                                <div class="h4 mb-1" style="color: #7a4b8e;" id="drive-count">---</div>
                                <div class="small text-muted">Google Drive</div>
                                <button class="btn btn-sm mt-2" style="background: #7a4b8e; color: white;" onclick="triggerCollection('google_drive')">
                                    <i data-feather="refresh-cw"></i> Sync
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="mb-0 d-flex align-items-center">
                        <i data-feather="activity" class="me-2" style="color: #ffc107;"></i>
                        System Performance
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="small">CPU Usage</span>
                            <span id="cpu-usage" class="small text-muted">---%</span>
                        </div>
                        <div class="progress" style="height: 6px;">
                            <div id="cpu-progress" class="progress-bar bg-info" role="progressbar"></div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="small">Memory Usage</span>
                            <span id="memory-usage" class="small text-muted">---%</span>
                        </div>
                        <div class="progress" style="height: 6px;">
                            <div id="memory-progress" class="progress-bar bg-warning" role="progressbar"></div>
                        </div>
                    </div>
                    
                    <div class="text-center mt-4">
                        <div class="small text-muted mb-1">Uptime</div>
                        <div class="fw-bold" id="system-uptime">--- hours</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity Log -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="mb-0 d-flex align-items-center">
                        <i data-feather="clock" class="me-2" style="color: #6c757d;"></i>
                        Recent Activity & Repairs
                    </h5>
                </div>
                <div class="card-body">
                    <div id="activity-log" style="max-height: 300px; overflow-y: auto;">
                        <!-- Activity log will be populated here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.component-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.component-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.status-healthy { background-color: #28a745; }
.status-degraded { background-color: #ffc107; }
.status-down { background-color: #dc3545; }
.status-fixing { background-color: #17a2b8; }

.progress {
    border-radius: 10px;
}

.progress-bar {
    border-radius: 10px;
}

.alert-item {
    border-left: 4px solid;
    padding: 12px 16px;
    margin-bottom: 8px;
    border-radius: 0 6px 6px 0;
}

.alert-critical {
    border-left-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

.alert-warning {
    border-left-color: #ffc107;
    background-color: rgba(255, 193, 7, 0.1);
}

.card {
    border-radius: 12px;
}

.card-header {
    border-radius: 12px 12px 0 0 !important;
}
</style>

<script>
let dashboardData = {};
let updateInterval;

// Initialize dashboard
document.addEventListener('DOMContentLoaded', function() {
    loadDashboard();
    
    // Auto-refresh every 30 seconds
    updateInterval = setInterval(loadDashboard, 30000);
    
    // Initialize feather icons
    feather.replace();
});

async function loadDashboard() {
    try {
        const response = await fetch('/admin/api/dashboard-data');
        dashboardData = await response.json();
        
        updateOverviewCards();
        updateAlerts();
        updateComponentsGrid();
        updateCollectionProgress();
        updatePerformanceMetrics();
        
        // Update last refresh time
        document.getElementById('last-update').textContent = new Date().toLocaleTimeString();
        
    } catch (error) {
        console.error('Error loading dashboard:', error);
        showToast('Error loading dashboard data', 'error');
    }
}

function updateOverviewCards() {
    document.getElementById('system-health').textContent = `${dashboardData.system_health?.toFixed(1) || '---'}%`;
    document.getElementById('total-checks').textContent = dashboardData.total_checks || '---';
    document.getElementById('orchid-count').textContent = dashboardData.orchid_progress?.current_count || '---';
}

async function updateAlerts() {
    try {
        const response = await fetch('/admin/api/system-alerts');
        const alerts = await response.json();
        
        document.getElementById('alert-count').textContent = alerts.length;
        document.getElementById('active-alerts').textContent = alerts.length;
        
        const alertsContainer = document.getElementById('alerts-container');
        
        if (alerts.length === 0) {
            alertsContainer.innerHTML = `
                <div class="text-center text-muted py-3">
                    <i data-feather="check-circle" style="color: #28a745; width: 48px; height: 48px;"></i>
                    <div class="mt-2">All systems operational</div>
                </div>
            `;
        } else {
            alertsContainer.innerHTML = alerts.map(alert => `
                <div class="alert-item alert-${alert.level}">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <div class="fw-medium">${alert.component}</div>
                            <div class="text-muted small">${alert.message}</div>
                        </div>
                        <div class="text-muted small">${new Date(alert.timestamp).toLocaleTimeString()}</div>
                    </div>
                </div>
            `).join('');
        }
        
        feather.replace();
        
    } catch (error) {
        console.error('Error updating alerts:', error);
    }
}

function updateComponentsGrid() {
    const componentsGrid = document.getElementById('components-grid');
    const components = dashboardData.components || {};
    
    componentsGrid.innerHTML = Object.entries(components).map(([name, component]) => `
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="card component-card border-0 shadow-sm h-100" onclick="repairComponent('${name}')">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center mb-2">
                        <span class="status-indicator status-${component.status}"></span>
                        <span class="fw-medium">${name.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}</span>
                    </div>
                    <div class="small text-muted mb-1">${component.type}</div>
                    <div class="small">
                        <span class="text-success">${component.success_count || 0}</span> /
                        <span class="text-danger">${component.error_count || 0}</span>
                    </div>
                    ${component.response_time_ms ? `<div class="small text-muted">${component.response_time_ms}ms</div>` : ''}
                </div>
            </div>
        </div>
    `).join('');
}

function updateCollectionProgress() {
    const progress = dashboardData.orchid_progress || {};
    
    const totalCollected = (progress.gary_yong_gee_collected || 0) + 
                          (progress.gbif_collected || 0) + 
                          (progress.google_drive_synced || 0);
    
    const percentage = progress.total_target ? (totalCollected / progress.total_target * 100).toFixed(1) : 0;
    
    document.getElementById('collection-percentage').textContent = `${percentage}%`;
    document.getElementById('collection-progress-bar').style.width = `${percentage}%`;
    
    document.getElementById('gary-count').textContent = progress.gary_yong_gee_collected || 0;
    document.getElementById('gbif-count').textContent = progress.gbif_collected || 0;
    document.getElementById('drive-count').textContent = progress.google_drive_synced || 0;
}

function updatePerformanceMetrics() {
    const cpuUsage = dashboardData.system_load || 0;
    const memoryUsage = dashboardData.memory_usage || 0;
    const uptime = dashboardData.uptime_hours || 0;
    
    document.getElementById('cpu-usage').textContent = `${cpuUsage.toFixed(1)}%`;
    document.getElementById('cpu-progress').style.width = `${cpuUsage}%`;
    
    document.getElementById('memory-usage').textContent = `${memoryUsage.toFixed(1)}%`;
    document.getElementById('memory-progress').style.width = `${memoryUsage}%`;
    
    document.getElementById('system-uptime').textContent = `${uptime.toFixed(1)} hours`;
}

async function repairComponent(componentName) {
    try {
        showToast(`Attempting to repair ${componentName}...`, 'info');
        
        const response = await fetch(`/admin/api/repair-component/${componentName}`, {
            method: 'POST'
        });
        
        const result = await response.json();
        
        if (result.success) {
            showToast(`✅ ${result.message}`, 'success');
        } else {
            showToast(`❌ ${result.message}`, 'error');
        }
        
        // Refresh dashboard after repair attempt
        setTimeout(loadDashboard, 2000);
        
    } catch (error) {
        console.error('Error repairing component:', error);
        showToast('Error attempting repair', 'error');
    }
}

async function triggerCollection(source) {
    try {
        showToast(`Starting ${source} collection...`, 'info');
        
        const response = await fetch(`/admin/api/trigger-collection/${source}`, {
            method: 'POST'
        });
        
        const result = await response.json();
        
        if (result.success) {
            showToast(`✅ ${result.message}`, 'success');
        } else {
            showToast(`❌ ${result.message || 'Collection failed'}`, 'error');
        }
        
        // Refresh progress after a delay
        setTimeout(loadDashboard, 5000);
        
    } catch (error) {
        console.error('Error triggering collection:', error);
        showToast('Error triggering collection', 'error');
    }
}

async function restartMonitoring() {
    try {
        showToast('Restarting monitoring system...', 'info');
        
        const response = await fetch('/admin/api/restart-monitoring', {
            method: 'POST'
        });
        
        const result = await response.json();
        
        if (result.success) {
            showToast('✅ Monitoring system restarted', 'success');
            setTimeout(loadDashboard, 3000);
        } else {
            showToast('❌ Failed to restart monitoring', 'error');
        }
        
    } catch (error) {
        console.error('Error restarting monitoring:', error);
        showToast('Error restarting monitoring', 'error');
    }
}

function refreshDashboard() {
    loadDashboard();
    showToast('Dashboard refreshed', 'success');
}

function showToast(message, type = 'info') {
    // Simple toast notification
    const toast = document.createElement('div');
    toast.className = `alert alert-${type === 'error' ? 'danger' : type === 'success' ? 'success' : 'info'} position-fixed`;
    toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    toast.textContent = message;
    
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.remove();
    }, 5000);
}

// Cleanup on page unload
window.addEventListener('beforeunload', function() {
    if (updateInterval) {
        clearInterval(updateInterval);
    }
});
</script>

<!-- Hidden element for last update time -->
<div class="d-none" id="last-update"></div>

{% endblock %}