@extends('layouts.super-admin')

@section('title', 'System Health')
@section('page-title', 'System Health Monitor')
@section('page-description', 'Monitoring kesehatan sistem server')

@section('content')
<div class="health-container">
    <!-- Health Overview -->
    <div class="overview-card">
        <div class="overview-status">
            <div class="status-indicator" id="systemStatus">
                <span class="status-dot healthy"></span>
                <span class="status-text">System Healthy</span>
            </div>
            <div class="last-check">Last check: <span id="lastCheck">Just now</span></div>
        </div>
        <button onclick="refreshHealth()" class="btn-refresh">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path d="M23 4v6h-6M1 20v-6h6"/>
                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
            </svg>
            Refresh
        </button>
    </div>

    <!-- Services Status -->
    <div class="services-grid">
        <div class="service-card">
            <div class="service-icon database">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <ellipse cx="12" cy="6" rx="8" ry="3"/>
                    <path d="M4 6v12c0 1.66 3.58 3 8 3s8-1.34 8-3V6"/>
                    <path d="M4 12c0 1.66 3.58 3 8 3s8-1.34 8-3"/>
                </svg>
            </div>
            <div class="service-info">
                <div class="service-name">Database</div>
                <div class="service-status" id="dbStatus">Checking...</div>
                <div class="service-metrics" id="dbMetrics"></div>
            </div>
        </div>
        <div class="service-card">
            <div class="service-icon cache">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <rect x="2" y="2" width="20" height="20" rx="2.18"/>
                    <line x1="8" y1="2" x2="8" y2="22"/>
                    <line x1="16" y1="2" x2="16" y2="22"/>
                </svg>
            </div>
            <div class="service-info">
                <div class="service-name">Cache</div>
                <div class="service-status" id="cacheStatus">Checking...</div>
            </div>
        </div>
        <div class="service-card">
            <div class="service-icon queue">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path d="M4 4h16v16H4z"/>
                    <line x1="8" y1="8" x2="16" y2="8"/>
                    <line x1="8" y1="12" x2="16" y2="12"/>
                    <line x1="8" y1="16" x2="12" y2="16"/>
                </svg>
            </div>
            <div class="service-info">
                <div class="service-name">Queue Worker</div>
                <div class="service-status" id="queueStatus">Checking...</div>
                <div class="service-metrics" id="queueMetrics"></div>
            </div>
        </div>
        <div class="service-card">
            <div class="service-icon websocket">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <circle cx="12" cy="12" r="2"/>
                    <path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>
                </svg>
            </div>
            <div class="service-info">
                <div class="service-name">WebSocket</div>
                <div class="service-status" id="wsStatus">Checking...</div>
            </div>
        </div>
    </div>

    <!-- System Metrics -->
    <div class="metrics-card">
        <div class="card-header">
            <h3>System Metrics</h3>
        </div>
        <div class="metrics-list">
            <div class="metric-row">
                <span class="metric-label">PHP Version</span>
                <span class="metric-value" id="phpVersion">-</span>
            </div>
            <div class="metric-row">
                <span class="metric-label">Laravel Version</span>
                <span class="metric-value" id="laravelVersion">-</span>
            </div>
            <div class="metric-row">
                <span class="metric-label">Server Software</span>
                <span class="metric-value" id="serverSoftware">-</span>
            </div>
            <div class="metric-row">
                <span class="metric-label">Memory Limit</span>
                <span class="metric-value" id="memoryLimit">-</span>
            </div>
            <div class="metric-row">
                <span class="metric-label">Max Execution Time</span>
                <span class="metric-value" id="maxExecution">-</span>
            </div>
            <div class="metric-row">
                <span class="metric-label">Upload Max Size</span>
                <span class="metric-value" id="uploadMax">-</span>
            </div>
        </div>
    </div>

    <!-- Failed Jobs -->
    <div class="failed-jobs-card">
        <div class="card-header">
            <h3>Failed Jobs</h3>
            <button onclick="retryFailedJobs()" class="btn-retry">Retry All</button>
        </div>
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr><th>ID</th><th>Connection</th><th>Queue</th><th>Failed At</th><th>Exception</th><th>Actions</th></tr>
                </thead>
                <tbody id="failedJobsTable">
                    <tr><td colspan="6" class="text-center">No failed jobs</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
async function loadSystemHealth() {
    try {
        const response = await fetch('/super-admin/api/system-health');
        const data = await response.json();
        
        if (data.success) {
            updateServiceStatus(data.services);
            updateSystemMetrics(data.metrics);
            updateFailedJobs(data.failed_jobs);
            updateSystemStatus(data);
        }
    } catch (error) {
        console.error('Error loading system health:', error);
        loadMockHealth();
    }
}

function updateServiceStatus(services) {
    // Database
    const dbStatus = document.getElementById('dbStatus');
    dbStatus.innerHTML = services.database?.healthy ? '<span class="status-badge healthy"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg> Healthy</span>' : '<span class="status-badge unhealthy"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> Unhealthy</span>';
    document.getElementById('dbMetrics').innerHTML = services.database?.latency ? `Latency: ${services.database.latency}ms` : '';
    
    // Cache
    const cacheStatus = document.getElementById('cacheStatus');
    cacheStatus.innerHTML = services.cache?.healthy ? '<span class="status-badge healthy"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg> Healthy</span>' : '<span class="status-badge unhealthy"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> Unhealthy</span>';
    
    // Queue
    const queueStatus = document.getElementById('queueStatus');
    queueStatus.innerHTML = services.queue?.healthy ? '<span class="status-badge healthy"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg> Healthy</span>' : '<span class="status-badge warning"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 8v4l3 3M12 2a10 10 0 0 1 10 10c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"/></svg> Warning</span>';
    document.getElementById('queueMetrics').innerHTML = services.queue?.failed_jobs ? `Failed: ${services.queue.failed_jobs}` : '';
    
    // WebSocket
    const wsStatus = document.getElementById('wsStatus');
    wsStatus.innerHTML = services.websocket?.healthy ? '<span class="status-badge healthy"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg> Healthy</span>' : '<span class="status-badge warning"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 8v4l3 3M12 2a10 10 0 0 1 10 10c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"/></svg> Not running</span>';
}

function updateSystemMetrics(metrics) {
    document.getElementById('phpVersion').innerText = metrics.php_version || '-';
    document.getElementById('laravelVersion').innerText = metrics.laravel_version || '-';
    document.getElementById('serverSoftware').innerText = metrics.server_software || '-';
    document.getElementById('memoryLimit').innerText = metrics.memory_limit || '-';
    document.getElementById('maxExecution').innerText = metrics.max_execution_time || '-';
    document.getElementById('uploadMax').innerText = metrics.upload_max_filesize || '-';
}

function updateFailedJobs(jobs) {
    const tbody = document.getElementById('failedJobsTable');
    if (!jobs || jobs.length === 0) {
        tbody.innerHTML = '<tr><td colspan="6" class="text-center">No failed jobs</td></tr>';
        return;
    }
    
    tbody.innerHTML = jobs.map(job => `
        <tr>
            <td>#${job.id}</td>
            <td>${job.connection}</td>
            <td>${job.queue}</td>
            <td>${new Date(job.failed_at).toLocaleString()}</td>
            <td class="exception-cell" title="${escapeHtml(job.exception)}">${escapeHtml(job.exception).substring(0, 50)}...</td>
            <td><button class="btn-retry" onclick="retryJob(${job.id})">Retry</button></td>
        </tr>
    `).join('');
}

function updateSystemStatus(data) {
    const overall = data.overall === 'healthy';
    const statusElement = document.getElementById('systemStatus');
    statusElement.innerHTML = `
        <span class="status-dot ${overall ? 'healthy' : 'warning'}"></span>
        <span class="status-text">System ${overall ? 'Healthy' : 'Degraded'}</span>
    `;
    document.getElementById('lastCheck').innerText = new Date().toLocaleTimeString();
}

function refreshHealth() {
    loadSystemHealth();
}

function retryFailedJobs() {
    fetch('/super-admin/api/queue/retry-failed', {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
    }).then(() => loadSystemHealth());
}

function retryJob(id) {
    fetch(`/super-admin/api/queue/retry/${id}`, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
    }).then(() => loadSystemHealth());
}

function escapeHtml(str) {
    if (!str) return '';
    return str.replace(/[&<>]/g, function(m) {
        if (m === '&') return '&amp;';
        if (m === '<') return '&lt;';
        if (m === '>') return '&gt;';
        return m;
    });
}

function loadMockHealth() {
    updateServiceStatus({
        database: { healthy: true, latency: 8 },
        cache: { healthy: true },
        queue: { healthy: true, failed_jobs: 0 },
        websocket: { healthy: false }
    });
    updateSystemMetrics({
        php_version: '8.4.16', laravel_version: '13.8.0', server_software: 'Laravel Artisan',
        memory_limit: '256M', max_execution_time: '60s', upload_max_filesize: '64M'
    });
    updateFailedJobs([]);
}

// Auto-refresh every 60 seconds
setInterval(loadSystemHealth, 60000);
document.addEventListener('DOMContentLoaded', loadSystemHealth);
</script>

<style>
.health-container { max-width: 1200px; margin: 0 auto; }
.overview-card {
    background: white;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.overview-status { display: flex; align-items: center; gap: 1rem; }
.status-indicator { display: flex; align-items: center; gap: 0.5rem; }
.status-dot { width: 12px; height: 12px; border-radius: 50%; }
.status-dot.healthy { background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,0.2); }
.status-dot.warning { background: #f59e0b; }
.status-text { font-weight: 500; }
.last-check { font-size: 0.75rem; color: #6b7280; }
.btn-refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.service-card {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.service-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-icon.database { background: #eff6ff; color: #3b82f6; }
.service-icon.cache { background: #fef2f2; color: #dc2626; }
.service-icon.queue { background: #f0fdf4; color: #10b981; }
.service-icon.websocket { background: #faf5ff; color: #a855f7; }
.service-info { flex: 1; }
.service-name { font-size: 0.75rem; font-weight: 500; color: #6b7280; }
.service-metrics { font-size: 0.65rem; color: #9ca3af; margin-top: 0.25rem; }
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
}
.status-badge svg { width: 10px; height: 10px; }
.status-badge.healthy { background: #d1fae5; color: #065f46; }
.status-badge.unhealthy { background: #fee2e2; color: #991b1b; }
.status-badge.warning { background: #fffbeb; color: #92400e; }

.metrics-card, .failed-jobs-card {
    background: white;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.metrics-list { padding: 1rem; }
.metric-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}
.metric-label { color: #6b7280; font-size: 0.875rem; }
.metric-value { font-weight: 500; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #f3f4f6; }
.data-table th { background: #f9fafb; font-weight: 600; font-size: 0.75rem; }
.exception-cell { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-retry {
    padding: 0.25rem 0.75rem;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.7rem;
}
.text-center { text-align: center; padding: 2rem; color: #6b7280; }
</style>
@endsection