@extends('layouts.app')

@section('title', 'Monitoring Dashboard')

@section('styles')
<style>
    .monitoring-dashboard {
        padding: 20px;
        background: #f8f9fa;
    }

    .metric-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s;
    }

    .metric-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .metric-value {
        font-size: 2.5rem;
        font-weight: bold;
        margin: 10px 0;
    }

    .metric-label {
        color: #666;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .metric-change {
        font-size: 0.8rem;
        margin-top: 5px;
    }

    .status-excellent { color: #28a745; }
    .status-good { color: #17a2b8; }
    .status-warning { color: #ffc107; }
    .status-critical { color: #dc3545; }
    .status-unknown { color: #6c757d; }

    .progress-bar {
        height: 8px;
        background: #e9ecef;
        border-radius: 4px;
        overflow: hidden;
        margin: 10px 0;
    }

    .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #28a745, #20c997);
        transition: width 0.3s ease;
    }

    .alert-item {
        padding: 15px;
        margin: 10px 0;
        border-radius: 6px;
        border-left: 4px solid;
        background: #fff;
    }

    .alert-critical {
        border-left-color: #dc3545;
        background: #f8d7da;
    }

    .alert-warning {
        border-left-color: #ffc107;
        background: #fff3cd;
    }

    .alert-info {
        border-left-color: #17a2b8;
        background: #d1ecf1;
    }

    .chart-container {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .refresh-button {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        transition: all 0.3s;
    }

    .refresh-button:hover {
        background: #0056b3;
        transform: scale(1.1);
    }

    .refresh-button.loading {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

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

    .status-up { background: #28a745; }
    .status-down { background: #dc3545; }
    .status-warning { background: #ffc107; }

    .metric-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .panel-header {
        display: flex;
        justify-content: between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e9ecef;
    }

    .panel-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: #333;
    }

    .panel-actions {
        display: flex;
        gap: 10px;
    }

    .btn-sm {
        padding: 5px 10px;
        font-size: 0.8rem;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: white;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-sm:hover {
        background: #f8f9fa;
    }

    .health-check {
        display: flex;
        align-items: center;
        padding: 10px;
        margin: 5px 0;
        border-radius: 4px;
        background: #f8f9fa;
    }

    .health-check.healthy {
        background: #d4edda;
        color: #155724;
    }

    .health-check.unhealthy {
        background: #f8d7da;
        color: #721c24;
    }

    .loading-skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
        border-radius: 4px;
        height: 20px;
        margin: 10px 0;
    }

    @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    .metric-trend {
        display: inline-block;
        font-size: 0.8rem;
        margin-left: 5px;
    }

    .trend-up { color: #28a745; }
    .trend-down { color: #dc3545; }
    .trend-neutral { color: #6c757d; }

    .dark-mode {
        background: #1a1a1a;
        color: #e0e0e0;
    }

    .dark-mode .metric-card {
        background: #2d2d2d;
        color: #e0e0e0;
    }

    .dark-mode .chart-container {
        background: #2d2d2d;
        color: #e0e0e0;
    }
</style>
@endsection

@section('content')
<div class="monitoring-dashboard">
    <div class="container-fluid">
        <div class="panel-header">
            <h1 class="panel-title">Monitoring Dashboard</h1>
            <div class="panel-actions">
                <button class="btn-sm" onclick="exportMetrics('json')">Export JSON</button>
                <button class="btn-sm" onclick="exportMetrics('csv')">Export CSV</button>
                <button class="btn-sm" onclick="toggleAutoRefresh()">Auto Refresh: <span id="refresh-status">OFF</span></button>
            </div>
        </div>

        <!-- System Overview -->
        <div class="metric-grid">
            <div class="metric-card">
                <div class="metric-label">CPU Usage</div>
                <div class="metric-value status-{{ $system_metrics['cpu_usage']['percentage'] > 80 ? 'critical' : ($system_metrics['cpu_usage']['percentage'] > 60 ? 'warning' : 'excellent') }}">
                    {{ number_format($system_metrics['cpu_usage']['percentage'], 1) }}%
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: {{ min(100, $system_metrics['cpu_usage']['percentage']) }}%; background: {{ $system_metrics['cpu_usage']['percentage'] > 80 ? '#dc3545' : ($system_metrics['cpu_usage']['percentage'] > 60 ? '#ffc107' : '#28a745') }};"></div>
                </div>
                <div class="metric-change">Load: {{ number_format($system_metrics['load_average']['1min'], 2) }}</div>
            </div>

            <div class="metric-card">
                <div class="metric-label">Memory Usage</div>
                <div class="metric-value status-{{ $system_metrics['memory_usage']['percentage'] > 85 ? 'critical' : ($system_metrics['memory_usage']['percentage'] > 70 ? 'warning' : 'excellent') }}">
                    {{ number_format($system_metrics['memory_usage']['percentage'], 1) }}%
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: {{ min(100, $system_metrics['memory_usage']['percentage']) }}%; background: {{ $system_metrics['memory_usage']['percentage'] > 85 ? '#dc3545' : ($system_metrics['memory_usage']['percentage'] > 70 ? '#ffc107' : '#28a745') }};"></div>
                </div>
                <div class="metric-change">{{ number_format($system_metrics['memory_usage']['current_mb'], 1) }}MB / {{ number_format($system_metrics['memory_usage']['limit_mb'], 1) }}MB</div>
            </div>

            <div class="metric-card">
                <div class="metric-label">Disk Usage</div>
                <div class="metric-value status-{{ $system_metrics['disk_usage']['percentage'] > 90 ? 'critical' : ($system_metrics['disk_usage']['percentage'] > 75 ? 'warning' : 'excellent') }}">
                    {{ number_format($system_metrics['disk_usage']['percentage'], 1) }}%
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: {{ min(100, $system_metrics['disk_usage']['percentage']) }}%; background: {{ $system_metrics['disk_usage']['percentage'] > 90 ? '#dc3545' : ($system_metrics['disk_usage']['percentage'] > 75 ? '#ffc107' : '#28a745') }};"></div>
                </div>
                <div class="metric-change">{{ number_format($system_metrics['disk_usage']['used_gb'], 1) }}GB / {{ number_format($system_metrics['disk_usage']['total_gb'], 1) }}GB</div>
            </div>

            <div class="metric-card">
                <div class="metric-label">System Uptime</div>
                <div class="metric-value status-excellent">
                    {{ $system_metrics['uptime']['days'] }}d
                </div>
                <div class="metric-change">{{ $system_metrics['uptime']['formatted'] }}</div>
            </div>
        </div>

        <!-- Application Metrics -->
        <div class="metric-grid">
            <div class="metric-card">
                <div class="metric-label">Response Time</div>
                <div class="metric-value status-{{ $application_metrics['response_time']['status'] }}">
                    {{ number_format($application_metrics['response_time']['current'], 0) }}ms
                </div>
                <div class="metric-change">Status: {{ ucfirst($application_metrics['response_time']['status']) }}</div>
            </div>

            <div class="metric-card">
                <div class="metric-label">Error Rate</div>
                <div class="metric-value status-{{ $application_metrics['error_rate']['status'] }}">
                    {{ number_format($application_metrics['error_rate']['current'], 2) }}%
                </div>
                <div class="metric-change">Status: {{ ucfirst($application_metrics['error_rate']['status']) }}</div>
            </div>

            <div class="metric-card">
                <div class="metric-label">Active Users</div>
                <div class="metric-value status-excellent">
                    {{ $application_metrics['active_users']['current'] }}
                </div>
                <div class="metric-change">Last hour: {{ $application_metrics['active_users']['last_hour'] }}</div>
            </div>

            <div class="metric-card">
                <div class="metric-label">Cache Hit Rate</div>
                <div class="metric-value status-{{ $application_metrics['cache_hit_rate']['status'] }}">
                    {{ number_format($application_metrics['cache_hit_rate']['current'], 1) }}%
                </div>
                <div class="metric-change">Hits: {{ $application_metrics['cache_hit_rate']['hits'] }}, Misses: {{ $application_metrics['cache_hit_rate']['misses'] }}</div>
            </div>
        </div>

        <!-- Business Metrics -->
        <div class="metric-grid">
            <div class="metric-card">
                <div class="metric-label">Today's Revenue</div>
                <div class="metric-value status-excellent">
                    ${{ number_format($business_metrics['revenue']['today'], 2) }}
                </div>
                <div class="metric-change">This month: ${{ number_format($business_metrics['revenue']['this_month'], 2) }}</div>
            </div>

            <div class="metric-card">
                <div class="metric-label">Challenge Purchases</div>
                <div class="metric-value status-excellent">
                    {{ $business_metrics['challenge_purchases']['today'] }}
                </div>
                <div class="metric-change">This week: {{ $business_metrics['challenge_purchases']['this_week'] }}</div>
            </div>

            <div class="metric-card">
                <div class="metric-label">User Registrations</div>
                <div class="metric-value status-excellent">
                    {{ $business_metrics['user_registrations']['today'] }}
                </div>
                <div class="metric-change">This month: {{ $business_metrics['user_registrations']['this_month'] }}</div>
            </div>

            <div class="metric-card">
                <div class="metric-label">Conversion Rate</div>
                <div class="metric-value status-{{ $business_metrics['conversion_rate']['current'] > 5 ? 'excellent' : ($business_metrics['conversion_rate']['current'] > 2 ? 'good' : 'warning') }}">
                    {{ number_format($business_metrics['conversion_rate']['current'], 2) }}%
                </div>
                <div class="metric-change">{{ $business_metrics['conversion_rate']['visitors'] }} visitors, {{ $business_metrics['conversion_rate']['registrations'] }} registrations</div>
            </div>
        </div>

        <!-- Health Status -->
        <div class="chart-container">
            <div class="panel-header">
                <h2 class="panel-title">System Health</h2>
            </div>
            <div class="row">
                @foreach($health_status['checks'] as $service => $status)
                    <div class="col-md-6">
                        <div class="health-check {{ $status['status'] == 'healthy' ? 'healthy' : 'unhealthy' }}">
                            <span class="status-indicator {{ $status['status'] == 'healthy' ? 'status-up' : 'status-down' }}"></span>
                            <strong>{{ ucfirst($service) }}</strong>
                            <span class="float-right">{{ $status['message'] }}</span>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Active Alerts -->
        @if(!empty($active_alerts))
            <div class="chart-container">
                <div class="panel-header">
                    <h2 class="panel-title">Active Alerts</h2>
                </div>
                @foreach($active_alerts as $alert)
                    <div class="alert-item alert-{{ $alert['severity'] }}">
                        <strong>{{ $alert['title'] }}</strong>
                        <div class="text-muted">{{ $alert['message'] }}</div>
                        <small>{{ $alert['timestamp'] }}</small>
                    </div>
                @endforeach
            </div>
        @endif

        <!-- Performance Charts -->
        <div class="chart-container">
            <div class="panel-header">
                <h2 class="panel-title">Performance Overview</h2>
            </div>
            <canvas id="performanceChart" width="400" height="200"></canvas>
        </div>

        <!-- Queue Status -->
        <div class="chart-container">
            <div class="panel-header">
                <h2 class="panel-title">Queue Status</h2>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="metric-card">
                        <div class="metric-label">Pending Jobs</div>
                        <div class="metric-value status-{{ $application_metrics['queue_jobs']['status'] }}">
                            {{ $application_metrics['queue_jobs']['pending'] }}
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="metric-card">
                        <div class="metric-label">Failed Jobs</div>
                        <div class="metric-value status-{{ $application_metrics['queue_jobs']['failed'] > 0 ? 'critical' : 'excellent' }}">
                            {{ $application_metrics['queue_jobs']['failed'] }}
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="metric-card">
                        <div class="metric-label">Processed Today</div>
                        <div class="metric-value status-excellent">
                            {{ $application_metrics['queue_jobs']['processed_today'] }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Refresh Button -->
<button class="refresh-button" id="refreshBtn" onclick="refreshDashboard()" title="Refresh Dashboard">
    <i class="fas fa-sync-alt"></i>
</button>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let autoRefreshInterval = null;
let isRefreshing = false;

// Initialize dashboard
document.addEventListener('DOMContentLoaded', function() {
    initializeCharts();
    startRealTimeUpdates();
});

// Initialize performance chart
function initializeCharts() {
    const ctx = document.getElementById('performanceChart').getContext('2d');
    
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['1h ago', '45m ago', '30m ago', '15m ago', 'Now'],
            datasets: [{
                label: 'Response Time (ms)',
                data: [150, 180, 160, 140, 120],
                borderColor: '#007bff',
                backgroundColor: 'rgba(0, 123, 255, 0.1)',
                tension: 0.4
            }, {
                label: 'Error Rate (%)',
                data: [2, 3, 2.5, 2, 1.5],
                borderColor: '#dc3545',
                backgroundColor: 'rgba(220, 53, 69, 0.1)',
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

// Start real-time updates
function startRealTimeUpdates() {
    // Update metrics every 30 seconds
    setInterval(function() {
        updateMetrics();
    }, 30000);
}

// Update metrics
function updateMetrics() {
    fetch('/monitoring/metrics/system')
        .then(response => response.json())
        .then(data => {
            updateMetricCards(data);
        })
        .catch(error => console.error('Error updating metrics:', error));
}

// Update metric cards
function updateMetricCards(data) {
    // Update CPU usage
    const cpuCard = document.querySelector('.metric-card:nth-child(1) .metric-value');
    if (cpuCard && data.cpu_usage) {
        cpuCard.textContent = data.cpu_usage.percentage.toFixed(1) + '%';
        cpuCard.className = 'metric-value status-' + getStatusClass(data.cpu_usage.percentage, [60, 80]);
    }
    
    // Update memory usage
    const memCard = document.querySelector('.metric-card:nth-child(2) .metric-value');
    if (memCard && data.memory_usage) {
        memCard.textContent = data.memory_usage.percentage.toFixed(1) + '%';
        memCard.className = 'metric-value status-' + getStatusClass(data.memory_usage.percentage, [70, 85]);
    }
    
    // Update disk usage
    const diskCard = document.querySelector('.metric-card:nth-child(3) .metric-value');
    if (diskCard && data.disk_usage) {
        diskCard.textContent = data.disk_usage.percentage.toFixed(1) + '%';
        diskCard.className = 'metric-value status-' + getStatusClass(data.disk_usage.percentage, [75, 90]);
    }
}

// Get status class based on thresholds
function getStatusClass(value, thresholds) {
    if (value > thresholds[1]) return 'critical';
    if (value > thresholds[0]) return 'warning';
    return 'excellent';
}

// Refresh dashboard
function refreshDashboard() {
    if (isRefreshing) return;
    
    isRefreshing = true;
    const refreshBtn = document.getElementById('refreshBtn');
    refreshBtn.classList.add('loading');
    
    // Reload the page
    setTimeout(function() {
        window.location.reload();
    }, 1000);
}

// Toggle auto refresh
function toggleAutoRefresh() {
    const statusElement = document.getElementById('refresh-status');
    
    if (autoRefreshInterval) {
        clearInterval(autoRefreshInterval);
        autoRefreshInterval = null;
        statusElement.textContent = 'OFF';
    } else {
        autoRefreshInterval = setInterval(function() {
            refreshDashboard();
        }, 60000); // Refresh every minute
        statusElement.textContent = 'ON';
    }
}

// Export metrics
function exportMetrics(format) {
    const url = `/monitoring/export?format=${format}&type=all`;
    window.open(url, '_blank');
}

// Handle keyboard shortcuts
document.addEventListener('keydown', function(e) {
    if (e.key === 'r' && e.ctrlKey) {
        e.preventDefault();
        refreshDashboard();
    }
    if (e.key === 'e' && e.ctrlKey) {
        e.preventDefault();
        exportMetrics('json');
    }
});

// Add dark mode toggle
function toggleDarkMode() {
    document.body.classList.toggle('dark-mode');
    localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
}

// Check for saved dark mode preference
if (localStorage.getItem('darkMode') === 'true') {
    document.body.classList.add('dark-mode');
}
</script>
@endsection