<?= $this->extend('layouts/app') ?>

<?= $this->section('content') ?>
<style>
    :root {
        --bg-main: #f8fafc;
        --cobalt: #1e40af;
        --slate-700: #334155;
        --slate-100: #f1f5f9;
        --emerald: #10b981;
    }

    body { background-color: var(--bg-main) !important; color: var(--slate-700); }
    
    .glass-card {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(226, 232, 240, 0.8);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .glass-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .timeline-line {
        position: relative;
        padding-left: 1.5rem;
    }

    .timeline-line::before {
        content: '';
        position: absolute;
        left: 7px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--slate-100);
    }

    .chart-container {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: 300px;
        max-height: 350px;
    }

    .avatar-circle {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-weight: 600;
        background: linear-gradient(135deg, var(--cobalt), #3b82f6);
        color: white;
    }
</style>

<div class="container-fluid py-4">
    <!-- Section: Header -->
    <div class="row mb-4 align-items-center">
        <div class="col-md-8">
            <h2 class="fw-bold text-dark mb-1">Pusat Kendali Sistem</h2>
            <p class="text-muted">Pantau interaksi pengguna, integritas sesi, dan log audit sistem secara real-time.</p>
        </div>
        <div class="col-md-4 text-md-end">
            <div class="d-inline-flex align-items-center bg-white border px-3 py-2 rounded-pill shadow-sm">
                <i class="far fa-clock text-primary me-2"></i>
                <span class="fw-medium small"><?= date('l, d F Y') ?></span>
            </div>
        </div>
    </div>

    <!-- Section: KPI Overview -->
    <div class="row g-3 mb-4">
        <div class="col-xl-4">
            <div class="card glass-card border-0 shadow-sm rounded-4">
                <div class="card-body p-4 d-flex align-items-center">
                    <div class="rounded-4 bg-primary bg-opacity-10 p-3 text-primary me-3">
                        <i class="fas fa-users-cog fa-2x"></i>
                    </div>
                    <div>
                        <div class="text-muted small text-uppercase fw-bold tracking-wider">Total Entitas User</div>
                        <h3 class="fw-bold mb-0"><?= number_format($total_user) ?></h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card glass-card border-0 shadow-sm rounded-4">
                <div class="card-body p-4 d-flex align-items-center">
                    <div class="rounded-4 bg-info bg-opacity-10 p-3 text-info me-3">
                        <i class="fas fa-fingerprint fa-2x"></i>
                    </div>
                    <div>
                        <div class="text-muted small text-uppercase fw-bold tracking-wider">Aktivitas Terekam</div>
                        <h3 class="fw-bold mb-0"><?= number_format($total_activity) ?></h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card glass-card border-0 shadow-sm rounded-4">
                <div class="card-body p-4 d-flex align-items-center">
                    <div class="rounded-4 bg-warning bg-opacity-10 p-3 text-warning me-3">
                        <i class="fas fa-key fa-2x"></i>
                    </div>
                    <div>
                        <div class="text-muted small text-uppercase fw-bold tracking-wider">Sesi Login</div>
                        <h3 class="fw-bold mb-0"><?= number_format($total_login) ?></h3>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Section: Analytics & Activity -->
    <div class="row g-4">
        <!-- Activity Timeline -->
        <div class="col-xl-5">
            <div class="card glass-card border-0 shadow-sm rounded-4 h-100">
                <div class="card-header bg-transparent border-0 pt-4 px-4">
                    <h5 class="fw-bold mb-0">Audit Log Terbaru</h5>
                    <p class="text-muted small">Jejak aktivitas pengguna 24 jam terakhir.</p>
                </div>
                <div class="card-body px-4 pb-4">
                    <div class="timeline-line">
                        <?php if (!empty($latest_activity)): ?>
                            <?php foreach ($latest_activity as $act): ?>
                                <div class="mb-4 position-relative">
                                    <div class="position-absolute bg-primary rounded-circle" style="left: -21px; top: 4px; width: 10px; height: 10px; border: 2px solid white;"></div>
                                    <div class="d-flex justify-content-between">
                                        <span class="fw-bold small"><?= esc($act['nama_lengkap'] ?: $act['username']) ?></span>
                                        <span class="text-muted" style="font-size: 0.75rem;"><?= date('H:i', strtotime($act['timestamp'])) ?></span>
                                    </div>
                                    <div class="bg-light p-2 rounded mt-1 border-start border-3 border-primary shadow-sm">
                                        <p class="mb-0 small text-dark"><?= esc($act['aktivitas']) ?></p>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <div class="text-center py-5">
                                <i class="fas fa-ghost fa-3x text-light mb-3"></i>
                                <p class="text-muted">Tidak ada aktivitas terdeteksi.</p>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>

        <!-- Security & User Monitoring -->
        <div class="col-xl-7">
            <div class="row g-4">
                <!-- Login Log -->
                <div class="col-12">
                    <div class="card glass-card border-0 shadow-sm rounded-4">
                        <div class="card-header bg-transparent border-0 pt-4 px-4 d-flex justify-content-between align-items-center">
                            <h5 class="fw-bold mb-0">Keamanan Sesi</h5>
                            <span class="badge bg-soft-primary text-primary">Live Monitor</span>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover align-middle mb-0">
                                    <thead class="bg-light">
                                        <tr class="text-muted small">
                                            <th class="ps-4">PENGGUNA</th>
                                            <th>METADATA</th>
                                            <th class="pe-4">STATUS</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php if (!empty($latest_login)): ?>
                                            <?php foreach ($latest_login as $l): ?>
                                                <tr>
                                                    <td class="ps-4">
                                                        <div class="fw-bold"><?= esc($l['nama_lengkap'] ?: $l['username']) ?></div>
                                                        <div class="text-muted small">@<?= esc($l['username']) ?></div>
                                                    </td>
                                                    <td>
                                                        <div class="small"><i class="fas fa-network-wired me-1"></i> <?= esc($l['ip_address']) ?></div>
                                                        <div class="text-muted" style="font-size: 10px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                                            <?= esc($l['browser']) ?>
                                                        </div>
                                                    </td>
                                                    <td class="pe-4">
                                                        <?php if (empty($l['logout_at'])): ?>
                                                            <span class="badge rounded-pill bg-success px-3">Aktif</span>
                                                        <?php else: ?>
                                                            <span class="text-muted small"><?= date('H:i', strtotime($l['login_at'])) ?></span>
                                                        <?php endif; ?>
                                                    </td>
                                                </tr>
                                            <?php endforeach; ?>
                                        <?php endif; ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- New Registrations -->
                <div class="col-12">
                    <div class="card glass-card border-0 shadow-sm rounded-4">
                        <div class="card-header bg-transparent border-0 pt-4 px-4">
                            <h5 class="fw-bold mb-0">Registrasi Terbaru</h5>
                        </div>
                        <div class="card-body px-4 pb-4">
                            <div class="row row-cols-1 row-cols-md-2 g-3">
                                <?php if (!empty($latest_users)): ?>
                                    <?php foreach ($latest_users as $u): ?>
                                        <div class="col">
                                            <div class="d-flex align-items-center p-2 border rounded-3 bg-white">
                                                <div class="avatar-circle me-3">
                                                    <?= strtoupper(substr($u['nama_lengkap'] ?: $u['username'], 0, 1)) ?>
                                                </div>
                                                <div class="overflow-hidden">
                                                    <div class="fw-bold text-truncate" style="font-size: 0.9rem;"><?= esc($u['nama_lengkap'] ?: 'System User') ?></div>
                                                    <div class="text-muted" style="font-size: 0.75rem;"><?= isset($u['created_at']) ? date('d M Y', strtotime($u['created_at'])) : '-' ?></div>
                                                </div>
                                            </div>
                                        </div>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Placeholder for future visualization needs
    console.log("Superadmin Dashboard Initialized: Audit Security Layer Active.");
</script>
<?= $this->endSection() ?>