@extends('layouts.adminlte')

@section('title', 'Information Performa Server')
@section('page_title', 'Information Performa Server')

@push('styles')
    <style>
        .perf-card { border: 1px solid #dee2e6; border-radius: .5rem; }
        .perf-status-ok { color: #198754; }
        .perf-status-warn { color: #fd7e14; }
        .perf-status-error { color: #dc3545; }
        .perf-list { margin: 0; padding-left: 1rem; font-size: .9rem; }
        .score-hero {
            font-size: 2rem;
            font-weight: 700;
            line-height: 1.1;
        }
    </style>
@endpush

@section('content')
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Checker Performa Server</h3>
            <div class="d-flex flex-wrap gap-2">
                <a href="{{ route('guides.index', ['section' => 'queue-worker-scheduler']) }}" target="_blank" class="btn btn-outline-dark btn-sm">
                    <i class="fas fa-book me-1"></i>Guide Queue
                </a>
                <button id="btnRefreshPerformance" class="btn btn-primary btn-sm">
                    <i class="fas fa-rotate-right me-1"></i>Refresh
                </button>
            </div>
        </div>
        <div class="card-body">
            <p class="text-muted mb-2">Status checker: PHP-FPM + OPcache, Redis cache/session, index MySQL, queue worker, dan tuning web server.</p>
            <div class="mb-2">
                <div class="d-flex justify-content-between align-items-end">
                    <div>
                        <div class="small text-muted">Server Score</div>
                        <div id="serverScoreText" class="score-hero">-</div>
                    </div>
                    <span id="serverScoreBreakdown">OK: 0 | WARN: 0 | ERROR: 0</span>
                </div>
                <div class="progress mt-2" style="height: 18px;">
                    <div id="serverScoreBar" class="progress-bar" role="progressbar" style="width:0%"></div>
                </div>
            </div>
            <p class="small text-muted mb-0">Update: <span id="perfGeneratedAt">-</span></p>
        </div>
    </div>

    <div class="row g-3" id="performanceCards">
        <div class="col-12">
            <div class="alert alert-secondary mb-0">Memuat data checker...</div>
        </div>
    </div>

    <div class="card mt-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Checklist Detail</h3>
            <div class="d-flex align-items-center gap-2">
                <input id="perfTableSearch" type="text" class="form-control form-control-sm" style="width: 260px;" placeholder="Cari item..." />
                <button id="btnTogglePerfTable" class="btn btn-outline-secondary btn-sm" type="button">
                    <i class="fas fa-table me-1"></i>Show/Hide
                </button>
            </div>
        </div>
        <div class="card-body" id="perfTableWrap" style="display:none;">
            <div class="table-responsive">
                <table class="table table-sm table-striped align-middle mb-0">
                    <thead>
                        <tr>
                            <th style="width:90px">Status</th>
                            <th style="width:220px">Group</th>
                            <th style="width:280px">Item</th>
                            <th>Detail</th>
                            <th style="width:360px">Fix</th>
                        </tr>
                    </thead>
                    <tbody id="perfTableBody">
                        <tr><td colspan="5" class="text-muted">Memuat...</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="small text-muted mt-2">Catatan: kolom Fix adalah saran umum. Sesuaikan dengan OS Anda (Windows/Ubuntu) dan cara instalasi yang dipakai.</div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (function () {
            const cardsEl = document.getElementById('performanceCards');
            const generatedAtEl = document.getElementById('perfGeneratedAt');
            const btnRefresh = document.getElementById('btnRefreshPerformance');
            const scoreTextEl = document.getElementById('serverScoreText');
            const scoreBreakdownEl = document.getElementById('serverScoreBreakdown');
            const scoreBarEl = document.getElementById('serverScoreBar');
            const tableWrapEl = document.getElementById('perfTableWrap');
            const tableBodyEl = document.getElementById('perfTableBody');
            const btnToggleTableEl = document.getElementById('btnTogglePerfTable');
            const tableSearchEl = document.getElementById('perfTableSearch');

            let lastTableRows = [];

            const toStatusClass = (status) => {
                if (status === 'ok') return 'perf-status-ok';
                if (status === 'error') return 'perf-status-error';
                return 'perf-status-warn';
            };

            const toStatusBadge = (status) => {
                if (status === 'ok') return '<span class="badge text-bg-success">OK</span>';
                if (status === 'error') return '<span class="badge text-bg-danger">ERROR</span>';
                return '<span class="badge text-bg-warning">WARN</span>';
            };

            const esc = (v) => {
                const div = document.createElement('div');
                div.textContent = v ?? '';
                return div.innerHTML;
            };

            const renderCards = (rows) => {
                if (!Array.isArray(rows) || rows.length === 0) {
                    cardsEl.innerHTML = '<div class="col-12"><div class="alert alert-warning mb-0">Data checker kosong.</div></div>';
                    return;
                }

                cardsEl.innerHTML = rows.map((item) => {
                    const details = Array.isArray(item.details) ? item.details : [];
                    return `
                        <div class="col-12 col-lg-6">
                            <div class="perf-card h-100 p-3">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <h5 class="mb-0">${esc(item.title || '-')}</h5>
                                    ${toStatusBadge(item.status)}
                                </div>
                                <p class="mb-2 ${toStatusClass(item.status)}">${esc(item.summary || '-')}</p>
                                <ul class="perf-list">
                                    ${details.map((d) => `<li>${esc(d)}</li>`).join('')}
                                </ul>
                            </div>
                        </div>
                    `;
                }).join('');
            };

            const renderTable = (rows, query) => {
                const q = (query || '').toString().trim().toLowerCase();
                const filtered = !q ? rows : rows.filter((r) => {
                    const hay = `${r.status} ${r.group} ${r.item} ${r.detail} ${r.fix}`.toLowerCase();
                    return hay.includes(q);
                });

                if (!Array.isArray(filtered) || filtered.length === 0) {
                    tableBodyEl.innerHTML = '<tr><td colspan="5" class="text-muted">Tidak ada data.</td></tr>';
                    return;
                }

                tableBodyEl.innerHTML = filtered.map((r) => {
                    const badge = toStatusBadge((r.status || 'warn').toString());
                    return `
                        <tr>
                            <td>${badge}</td>
                            <td>${esc(r.group || '-')}</td>
                            <td><strong>${esc(r.item || '-')}</strong></td>
                            <td>${esc(r.detail || '-')}</td>
                            <td>${esc(r.fix || '-')}</td>
                        </tr>
                    `;
                }).join('');
            };

            const renderScore = (score) => {
                const value = Number(score?.value || 0);
                const label = (score?.label || 'N/A').toString();
                const ok = Number(score?.ok || 0);
                const warn = Number(score?.warn || 0);
                const error = Number(score?.error || 0);

                scoreTextEl.textContent = `${value}% (${label})`;
                scoreBreakdownEl.textContent = `OK: ${ok} | WARN: ${warn} | ERROR: ${error}`;
                scoreBarEl.style.width = `${Math.max(0, Math.min(100, value))}%`;
                scoreBarEl.textContent = `${value}%`;
                scoreBarEl.className = 'progress-bar';
                if (value >= 85) {
                    scoreBarEl.classList.add('bg-success');
                } else if (value >= 70) {
                    scoreBarEl.classList.add('bg-primary');
                } else if (value >= 50) {
                    scoreBarEl.classList.add('bg-warning');
                } else {
                    scoreBarEl.classList.add('bg-danger');
                }
            };

            const loadData = async () => {
                try {
                    btnRefresh.disabled = true;
                    const resp = await fetch(`{{ route('server_performance.data') }}`, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                        },
                    });
                    const data = await resp.json();
                    if (!resp.ok) {
                        throw new Error(data?.message || 'Gagal memuat checker');
                    }
                    generatedAtEl.textContent = data.generated_at || '-';
                    renderScore(data.score || {});
                    renderCards(data.data || []);
                    lastTableRows = Array.isArray(data.items) ? data.items : [];
                    renderTable(lastTableRows, tableSearchEl.value);
                } catch (e) {
                    cardsEl.innerHTML = `<div class="col-12"><div class="alert alert-danger mb-0">${esc(e.message || 'Error')}</div></div>`;
                    tableBodyEl.innerHTML = `<tr><td colspan="5" class="text-danger">${esc(e.message || 'Error')}</td></tr>`;
                } finally {
                    btnRefresh.disabled = false;
                }
            };

            btnToggleTableEl.addEventListener('click', function () {
                tableWrapEl.style.display = tableWrapEl.style.display === 'none' ? 'block' : 'none';
            });
            tableSearchEl.addEventListener('input', function () {
                renderTable(lastTableRows, tableSearchEl.value);
            });
            btnRefresh.addEventListener('click', loadData);
            loadData();
        })();
    </script>
@endpush