<?php
$pass = $warn = $fail = 0;
$grouped = [];
foreach ($healthChecks as $check) {
    $grouped[$check['category']][] = $check;
    if ($check['status'] === 'pass') $pass++;
    elseif ($check['status'] === 'warn') $warn++;
    else $fail++;
}
$total = $pass + $warn + $fail;
$overallStatus = $fail > 0 ? 'fail' : ($warn > 0 ? 'warn' : 'pass');
$statusConfig = [
    'pass' => ['bg' => 'bg-green-50', 'border' => 'border-green-200', 'text' => 'text-green-800', 'icon' => '<svg class="w-6 h-6 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>', 'label' => 'All systems healthy'],
    'warn' => ['bg' => 'bg-yellow-50', 'border' => 'border-yellow-200', 'text' => 'text-yellow-800', 'icon' => '<svg class="w-6 h-6 text-yellow-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>', 'label' => 'Some recommendations'],
    'fail' => ['bg' => 'bg-red-50', 'border' => 'border-red-200', 'text' => 'text-red-800', 'icon' => '<svg class="w-6 h-6 text-red-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>', 'label' => 'Issues found'],
];
$sc = $statusConfig[$overallStatus];
?>


<div class="flex items-center gap-4 p-4 <?= $sc['bg'] ?> border <?= $sc['border'] ?> rounded-lg mb-6">
    <?= $sc['icon'] ?>
    <div>
        <p class="text-sm font-semibold <?= $sc['text'] ?>"><?= $sc['label'] ?></p>
        <p class="text-xs text-gray-600 mt-0.5">
            <span class="text-green-700 font-medium"><?= $pass ?> passed</span>
            <?php if ($warn > 0): ?> &middot; <span class="text-yellow-700 font-medium"><?= $warn ?> warning<?= $warn !== 1 ? 's' : '' ?></span><?php endif; ?>
            <?php if ($fail > 0): ?> &middot; <span class="text-red-700 font-medium"><?= $fail ?> failed</span><?php endif; ?>
            &middot; <?= $total ?> total checks
        </p>
    </div>
</div>


<?php foreach ($grouped as $category => $checks): ?>
<div class="mb-6">
    <h3 class="text-sm font-semibold text-gray-700 mb-2"><?= htmlspecialchars($category) ?></h3>
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <table class="w-full">
            <thead>
                <tr class="bg-gray-50">
                    <th class="w-10 px-3 py-2 text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500"></th>
                    <th class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500">Check</th>
                    <th class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500">Current</th>
                    <th class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500">Recommended</th>
                    <th class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 hidden sm:table-cell">Fix</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                <?php foreach ($checks as $check):
                    $icons = [
                        'pass' => '<span class="text-green-600 font-bold text-sm">&#10003;</span>',
                        'warn' => '<span class="text-yellow-600 font-bold text-sm">&#9888;</span>',
                        'fail' => '<span class="text-red-600 font-bold text-sm">&#10007;</span>',
                    ];
                    $rowBg = match($check['status']) {
                        'fail' => 'bg-red-50/50',
                        'warn' => 'bg-yellow-50/30',
                        default => '',
                    };
                ?>
                <tr class="<?= $rowBg ?> hover:bg-gray-50 transition-colors">
                    <td class="px-3 py-2 text-center"><?= $icons[$check['status']] ?? '' ?></td>
                    <td class="px-3 py-2 text-xs font-medium text-gray-900"><?= htmlspecialchars($check['name']) ?></td>
                    <td class="px-3 py-2 text-xs <?= $check['status'] === 'pass' ? 'text-green-700' : ($check['status'] === 'fail' ? 'text-red-700 font-medium' : 'text-yellow-700') ?>">
                        <?= htmlspecialchars($check['current']) ?>
                    </td>
                    <td class="px-3 py-2 text-xs text-gray-500"><?= htmlspecialchars($check['recommended']) ?></td>
                    <td class="px-3 py-2 text-xs text-gray-400 hidden sm:table-cell">
                        <?php if (!empty($check['fix'])): ?>
                            <code class="text-[11px] bg-gray-100 px-1.5 py-0.5 rounded"><?= htmlspecialchars($check['fix']) ?></code>
                        <?php endif; ?>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
<?php endforeach; ?>
