<div class="stats-grid mb-8" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem;">
    <div class="sa-card sa-stat-card">
        <div class="sa-stat-label">Total Tenants</div>
        <div class="sa-stat-value"><?= number_format($tenantsTotal) ?></div>
        <div class="sa-stat-footer">
            <span class="text-success"><?= number_format($tenantsActive) ?> active</span> / 
            <span class="text-info"><?= number_format($tenantsTrial) ?> trial</span>
        </div>
    </div>
    
    <div class="sa-card sa-stat-card">
        <div class="sa-stat-label">Active Subscriptions</div>
        <div class="sa-stat-value"><?= number_format($activeSubs) ?></div>
        <div class="sa-stat-footer">Currently paying</div>
    </div>

    <div class="sa-card sa-stat-card">
        <div class="sa-stat-label">Monthly Revenue</div>
        <div class="sa-stat-value" style="color: var(--sa-primary);">GH₵<?= number_format($totalRevenue, 2) ?></div>
        <div class="sa-stat-footer">Projected earnings</div>
    </div>
</div>

<div style="display: grid; grid-template-columns: 2fr 1.2fr; gap: 1.5rem;">
    <div class="sa-card">
        <div class="flex justify-between items-center mb-6">
            <h3 class="text-lg font-bold">Recent Signups</h3>
            <a href="<?= APP_URL ?>/superadmin/tenants" class="btn btn-outline btn-sm">All Tenants</a>
        </div>
        <div class="table-wrapper">
            <table class="table-sa">
                <thead>
                    <tr>
                        <th>Domain / Slug</th>
                        <th>Business Name</th>
                        <th>Joined</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($recentTenants as $t): ?>
                    <tr>
                        <td><code class="text-xs"><?= e($t['slug']) ?></code></td>
                        <td><strong><?= e($t['business_name']) ?></strong></td>
                        <td class="text-xs"><?= date('M j, Y', strtotime($t['created_at'])) ?></td>
                        <td>
                            <span class="badge-sa <?= $t['status'] === 'active' ? 'badge-success' : ($t['status'] === 'trial' ? 'badge-info' : 'badge-danger') ?>" style="font-size: 0.65rem;">
                                <?= e($t['status']) ?>
                            </span>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

    <div class="sa-card">
        <div class="flex justify-between items-center mb-6">
            <h3 class="text-lg font-bold">Plan Distribution</h3>
        </div>
        <div class="flex flex-column gap-2">
            <?php foreach ($planStats as $p): ?>
            <div class="flex justify-between items-center p-3 rounded" style="background: var(--sa-surface-elev); border: 1px solid var(--sa-border);">
                <div>
                    <div class="font-bold text-xs uppercase tracking-wider opacity-60"><?= e($p['name']) ?></div>
                </div>
                <div class="text-right">
                    <div class="text-xl font-bold"><?= number_format($p['count']) ?> <span class="text-xs text-muted font-normal uppercase" style="margin-left: 4px;">Users</span></div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<div class="mt-8">
    <div class="sa-card" style="border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.05);">
        <div class="flex items-center gap-4 mb-4">
            <div style="background: #ef4444; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white;">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="width: 20px;"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
            </div>
            <div>
                <h3 class="text-lg font-bold">Platform Maintenance</h3>
                <p class="text-xs text-muted">Perform critical system operations. <strong>Use with extreme caution.</strong></p>
            </div>
        </div>

        <div class="p-4 rounded border border-danger-soft bg-danger-soft flex items-center justify-between gap-6" style="background: rgba(239, 68, 68, 0.08); border: 1px dashed rgba(239, 68, 68, 0.3);">
            <div style="flex: 1;">
                <h4 class="font-bold text-sm text-danger mb-1">Total System Factory Reset</h4>
                <p class="text-xs text-muted mb-0">This will completely wipe <strong>ALL business accounts, users, sales, products, and configurations</strong> across the entire platform. All database IDs will reset to 1. This action is terminal and cannot be reversed.</p>
            </div>
            <div>
                <form action="<?= APP_URL ?>/superadmin/system-reset" method="POST">
                    <?= Security::csrfField() ?>
                    <input type="hidden" name="confirmation" id="system-reset-confirmation" value="">
                    <button type="button" onclick="const text = prompt('TOTAL SYSTEM WIPE: This will delete EVERYTHING.\n\nType \'SYSTEM RESET\' (all caps) to confirm:'); if(text === 'SYSTEM RESET') { document.getElementById('system-reset-confirmation').value = text; this.form.submit(); }" class="btn btn-sa-danger btn-sm" style="background: #ef4444; color: white; border: none; padding: 10px 16px; border-radius: 8px; font-weight: 700; cursor: pointer;">
                        WIPE PLATFORM
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

