@extends('crm.layouts.app')

@section('title', 'System Health')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">System Health Monitor</h1>
        <p class="text-gray-600">Monitor your application's health and performance metrics</p>
    </div>

    <!-- Overall Health Score -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-xl font-bold text-gray-900 mb-2">Overall Health Score</h2>
                <div class="flex items-center">
                    <div class="text-4xl font-bold text-{{ $systemStatus['overall_status'] === 'excellent' ? 'green' : ($systemStatus['overall_status'] === 'good' ? 'blue' : ($systemStatus['overall_status'] === 'fair' ? 'yellow' : 'red')) }}-600">
                        {{ $systemStatus['health_score'] }}%
                    </div>
                    <div class="ml-4">
                        <span class="px-3 py-1 text-sm font-medium rounded-full bg-{{ $systemStatus['overall_status'] === 'excellent' ? 'green' : ($systemStatus['overall_status'] === 'good' ? 'blue' : ($systemStatus['overall_status'] === 'fair' ? 'yellow' : 'red')) }}-100 text-{{ $systemStatus['overall_status'] === 'excellent' ? 'green' : ($systemStatus['overall_status'] === 'good' ? 'blue' : ($systemStatus['overall_status'] === 'fair' ? 'yellow' : 'red')) }}-800">
                            {{ ucfirst($systemStatus['overall_status']) }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="text-right">
                <button onclick="refreshHealthData()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                    <i class="fas fa-sync-alt mr-2"></i>Refresh
                </button>
            </div>
        </div>
    </div>

    <!-- System Status Checks -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-8">
        <h2 class="text-xl font-bold text-gray-900 mb-4">System Status</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach($systemStatus['checks'] as $checkName => $check)
                <div class="bg-gray-50 rounded-lg p-4">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="font-semibold text-gray-900">{{ ucwords(str_replace('_', ' ', $checkName)) }}</h3>
                        <span class="w-3 h-3 rounded-full bg-{{ $check['status'] === 'healthy' ? 'green' : ($check['status'] === 'warning' ? 'yellow' : 'red') }}-500"></span>
                    </div>
                    <p class="text-sm text-gray-600">{{ $check['message'] }}</p>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Health Metrics -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        <!-- Database Health -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-semibold text-gray-900">Database</h3>
                <i class="fas fa-database text-blue-600 text-xl"></i>
            </div>
            @if($healthMetrics['database']['status'] === 'healthy')
                <div class="space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Connection Time</span>
                        <span class="font-medium">{{ $healthMetrics['database']['connection_time'] }}ms</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Tables</span>
                        <span class="font-medium">{{ $healthMetrics['database']['table_count'] }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Size</span>
                        <span class="font-medium">{{ $healthMetrics['database']['size_mb'] }} MB</span>
                    </div>
                </div>
            @else
                <div class="text-red-600 text-sm">
                    Error: {{ $healthMetrics['database']['error'] }}
                </div>
            @endif
        </div>

        <!-- Cache Health -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-semibold text-gray-900">Cache</h3>
                <i class="fas fa-bolt text-yellow-600 text-xl"></i>
            </div>
            @if($healthMetrics['cache']['status'] === 'healthy')
                <div class="space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Response Time</span>
                        <span class="font-medium">{{ $healthMetrics['cache']['response_time'] }}ms</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Driver</span>
                        <span class="font-medium">{{ ucfirst($healthMetrics['cache']['driver']) }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Hit Rate</span>
                        <span class="font-medium">{{ $performanceData['cache_hit_rate'] }}%</span>
                    </div>
                </div>
            @else
                <div class="text-red-600 text-sm">
                    Error: {{ $healthMetrics['cache']['error'] }}
                </div>
            @endif
        </div>

        <!-- Storage Health -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-semibold text-gray-900">Storage</h3>
                <i class="fas fa-hdd text-purple-600 text-xl"></i>
            </div>
            @if($healthMetrics['storage']['status'] !== 'unhealthy')
                <div class="space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Total Space</span>
                        <span class="font-medium">{{ $healthMetrics['storage']['total_space'] }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Used Space</span>
                        <span class="font-medium">{{ $healthMetrics['storage']['used_space'] }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Usage</span>
                        <span class="font-medium text-{{ $healthMetrics['storage']['usage_percent'] > 80 ? 'red' : 'green' }}-600">
                            {{ $healthMetrics['storage']['usage_percent'] }}%
                        </span>
                    </div>
                </div>
            @else
                <div class="text-red-600 text-sm">
                    Error: {{ $healthMetrics['storage']['error'] }}
                </div>
            @endif
        </div>

        <!-- Queue Health -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-semibold text-gray-900">Queue</h3>
                <i class="fas fa-tasks text-green-600 text-xl"></i>
            </div>
            @if($healthMetrics['queue']['status'] !== 'unhealthy')
                <div class="space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Queue Size</span>
                        <span class="font-medium">{{ $healthMetrics['queue']['queue_size'] }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Failed Jobs</span>
                        <span class="font-medium text-{{ $healthMetrics['queue']['failed_jobs'] > 0 ? 'red' : 'green' }}-600">
                            {{ $healthMetrics['queue']['failed_jobs'] }}
                        </span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Driver</span>
                        <span class="font-medium">{{ ucfirst($healthMetrics['queue']['driver']) }}</span>
                    </div>
                </div>
            @else
                <div class="text-red-600 text-sm">
                    Error: {{ $healthMetrics['queue']['error'] }}
                </div>
            @endif
        </div>

        <!-- Memory Usage -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-semibold text-gray-900">Memory</h3>
                <i class="fas fa-memory text-orange-600 text-xl"></i>
            </div>
            <div class="space-y-2">
                <div class="flex justify-between text-sm">
                    <span class="text-gray-600">Current</span>
                    <span class="font-medium">{{ $healthMetrics['memory']['current'] }}</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-600">Peak</span>
                    <span class="font-medium">{{ $healthMetrics['memory']['peak'] }}</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-600">Usage</span>
                    <span class="font-medium text-{{ $healthMetrics['memory']['usage_percent'] > 80 ? 'red' : 'green' }}-600">
                        {{ $healthMetrics['memory']['usage_percent'] }}%
                    </span>
                </div>
            </div>
        </div>

        <!-- CPU Load -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-semibold text-gray-900">CPU Load</h3>
                <i class="fas fa-microchip text-red-600 text-xl"></i>
            </div>
            <div class="space-y-2">
                <div class="flex justify-between text-sm">
                    <span class="text-gray-600">1 min</span>
                    <span class="font-medium">{{ number_format($healthMetrics['cpu']['1min'], 2) }}</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-600">5 min</span>
                    <span class="font-medium">{{ number_format($healthMetrics['cpu']['5min'], 2) }}</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-600">15 min</span>
                    <span class="font-medium">{{ number_format($healthMetrics['cpu']['15min'], 2) }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Performance Metrics -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-8">
        <h2 class="text-xl font-bold text-gray-900 mb-4">Performance Metrics</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="text-center">
                <div class="text-2xl font-bold text-blue-600">{{ $performanceData['response_times']['average'] }}ms</div>
                <div class="text-sm text-gray-600">Avg Response Time</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-green-600">{{ $performanceData['database_queries']['avg_query_time'] }}ms</div>
                <div class="text-sm text-gray-600">Avg Query Time</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-purple-600">{{ $performanceData['cache_hit_rate'] }}%</div>
                <div class="text-sm text-gray-600">Cache Hit Rate</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-orange-600">{{ $performanceData['error_rates']['5xx_errors'] }}</div>
                <div class="text-sm text-gray-600">Server Errors (24h)</div>
            </div>
        </div>
    </div>

    <!-- Recent Error Logs -->
    <div class="bg-white rounded-lg shadow-sm p-6">
        <h2 class="text-xl font-bold text-gray-900 mb-4">Recent Error Logs</h2>

        @if(count($errorLogs) > 0)
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Level</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Message</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($errorLogs as $log)
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    {{ $log['timestamp']->format('M d, H:i:s') }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 text-xs font-medium rounded-full
                                        {{ $log['level'] === 'ERROR' ? 'bg-red-100 text-red-800' :
                                           ($log['level'] === 'WARNING' ? 'bg-yellow-100 text-yellow-800' :
                                           'bg-blue-100 text-blue-800') }}">
                                        {{ $log['level'] }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-900 max-w-md truncate">
                                    {{ $log['message'] }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="text-center py-8">
                <i class="fas fa-check-circle text-green-500 text-4xl mb-4"></i>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">No Recent Errors</h3>
                <p class="text-gray-600">Your application is running smoothly with no errors in the recent logs.</p>
            </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
// Auto-refresh health data every 30 seconds
let refreshInterval;

function startAutoRefresh() {
    refreshInterval = setInterval(refreshHealthData, 30000);
}

function stopAutoRefresh() {
    if (refreshInterval) {
        clearInterval(refreshInterval);
    }
}

function refreshHealthData() {
    fetch('{{ route("system-health.api") }}', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Update the page with new data
            location.reload();
        }
    })
    .catch(error => {
        console.error('Error refreshing health data:', error);
    });
}

// Start auto-refresh when page loads
document.addEventListener('DOMContentLoaded', function() {
    startAutoRefresh();
});

// Stop auto-refresh when page is hidden
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        stopAutoRefresh();
    } else {
        startAutoRefresh();
    }
});
</script>
@endpush
@endsection