<h2 class="mb-4"><i class="bi bi-journal-text"></i> Logs</h2>

<ul class="nav nav-tabs mb-3" id="logTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link <?= $activeTab === 'admin' ? 'active' : '' ?>" id="admin-log-tab" data-bs-toggle="tab" data-bs-target="#admin-log" type="button" role="tab">Activiteitenlog</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link <?= $activeTab === 'requests' ? 'active' : '' ?>" id="request-log-tab" data-bs-toggle="tab" data-bs-target="#request-log" type="button" role="tab">Requests log</button>
    </li>
</ul>

<div class="tab-content">
    <!-- Admin activity log -->
    <div class="tab-pane fade <?= $activeTab === 'admin' ? 'show active' : '' ?>" id="admin-log" role="tabpanel">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <small class="text-muted"><?= count($adminLogs) ?> regels</small>
            <div>
                <a href="/admin/logs?tab=admin&download=1" class="btn btn-sm btn-outline-secondary"><i class="bi bi-download"></i> Download</a>
                <a href="/admin/logs?tab=admin&clear=1" class="btn btn-sm btn-outline-danger" onclick="return confirm('Activiteitenlog wissen?')"><i class="bi bi-trash"></i> Wissen</a>
            </div>
        </div>
        <div class="card shadow-sm">
            <div class="card-body p-0" style="max-height: 500px; overflow-y: auto;">
                <?php if (empty($adminLogs)): ?>
                    <p class="text-muted p-3 mb-0">Geen activiteiten geregistreerd.</p>
                <?php else: ?>
                    <table class="table table-sm table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Tijd</th>
                                <th>Niveau</th>
                                <th>IP</th>
                                <th>Bericht</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($adminLogs as $log): ?>
                                <tr>
                                    <td class="text-nowrap small text-muted"><?= htmlspecialchars($log['time']) ?></td>
                                    <td><span class="badge bg-<?= $log['level'] === 'warning' ? 'warning text-dark' : ($log['level'] === 'error' ? 'danger' : 'info') ?>"><?= htmlspecialchars($log['level']) ?></span></td>
                                    <td><code class="small"><?= htmlspecialchars($log['ip']) ?></code></td>
                                    <td><?= htmlspecialchars($log['message']) ?></td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- Request log -->
    <div class="tab-pane fade <?= $activeTab === 'requests' ? 'show active' : '' ?>" id="request-log" role="tabpanel">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <small class="text-muted"><?= count($requestLogs) ?> regels</small>
            <div>
                <a href="/admin/logs?tab=requests&download=1" class="btn btn-sm btn-outline-secondary"><i class="bi bi-download"></i> Download</a>
                <a href="/admin/logs?tab=requests&clear=1" class="btn btn-sm btn-outline-danger" onclick="return confirm('Requestlog wissen?')"><i class="bi bi-trash"></i> Wissen</a>
            </div>
        </div>
        <div class="card shadow-sm">
            <div class="card-body p-0" style="max-height: 500px; overflow-y: auto;">
                <?php if (empty($requestLogs)): ?>
                    <p class="text-muted p-3 mb-0">Geen requests geregistreerd.</p>
                <?php else: ?>
                    <table class="table table-sm table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Tijd</th>
                                <th>IP</th>
                                <th>Pagina</th>
                                <th>Domein</th>
                                <th>Taal</th>
                                <th>User agent</th>
                                <th>Referrer</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($requestLogs as $log): ?>
                                <tr>
                                    <td class="text-nowrap small text-muted"><?= htmlspecialchars($log['time']) ?></td>
                                    <td><code class="small"><?= htmlspecialchars($log['ip']) ?></code></td>
                                    <td><?= htmlspecialchars($log['page']) ?></td>
                                    <td><?= htmlspecialchars($log['host']) ?></td>
                                    <td><?= htmlspecialchars($log['lang']) ?></td>
                                    <td class="small text-muted" title="<?= htmlspecialchars($log['ua']) ?>"><?= htmlspecialchars(substr($log['ua'], 0, 60)) ?><?= strlen($log['ua']) > 60 ? '…' : '' ?></td>
                                    <td class="small text-muted" title="<?= htmlspecialchars($log['referrer']) ?>"><?= htmlspecialchars(substr($log['referrer'], 0, 40)) ?><?= strlen($log['referrer']) > 40 ? '…' : '' ?></td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>