<?php
require_once '../includes/auth.php';

if (!isAdmin()) {
    redirect('../login.php');
}

// Hitung statistik dengan error handling
try {
    $stmt = $pdo->query("SELECT COUNT(*) as total FROM peserta");
    $total_peserta = $stmt->fetch()['total'] ?? 0;

    $stmt = $pdo->query("SELECT COUNT(*) as total FROM stations");
    $total_stations = $stmt->fetch()['total'] ?? 0;

    $stmt = $pdo->query("SELECT COUNT(*) as total FROM ujian");
    $total_ujian = $stmt->fetch()['total'] ?? 0;

    $stmt = $pdo->query("SELECT COUNT(*) as total FROM users WHERE role = 'penguji'");
    $total_penguji = $stmt->fetch()['total'] ?? 0;

    $stmt = $pdo->query("SELECT COUNT(*) as total FROM ujian WHERE status = 'aktif'");
    $ujian_aktif = $stmt->fetch()['total'] ?? 0;
    
    // Tambahan: hitung peserta aktif bulan ini
    $stmt = $pdo->query("SELECT COUNT(*) as total FROM peserta WHERE MONTH(created_at) = MONTH(NOW())");
    $peserta_baru = $stmt->fetch()['total'] ?? 0;
    
} catch (PDOException $e) {
    error_log("Dashboard stats error: " . $e->getMessage());
    $total_peserta = $total_stations = $total_ujian = $total_penguji = $ujian_aktif = $peserta_baru = 0;
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard | OSCE System</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #eef2f6 100%);
            min-height: 100vh;
        }

        /* Main Container Layout */
        .dashboard-wrapper {
            display: flex;
            min-height: 100vh;
        }

        /* Sidebar Modern */
        .sidebar {
            width: 280px;
            background: linear-gradient(180deg, #1a1f2e 0%, #0f1119 100%);
            color: white;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 100;
            box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
        }

        .sidebar-header {
            padding: 1.8rem 1.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            text-align: center;
        }

        .logo-area {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 0.5rem;
        }

        .logo-icon {
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, #667eea, #1958e1);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .logo-text h3 {
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: -0.3px;
            background: linear-gradient(135deg, #fff, #1958e1);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }

        .logo-text p {
            font-size: 0.7rem;
            opacity: 0.7;
            margin-top: 2px;
        }

        .user-info-sidebar {
            padding: 1.2rem;
            background: rgba(255, 255, 255, 0.05);
            margin: 1rem;
            border-radius: 16px;
            text-align: center;
        }

        .user-avatar {
            width: 55px;
            height: 55px;
            background: linear-gradient(135deg, #667eea, #1958e1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            font-size: 1.5rem;
        }

        .nav-menu {
            padding: 1rem 0;
        }

        .nav-item {
            padding: 0.75rem 1.5rem;
            margin: 0.25rem 0.75rem;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
            color: rgba(255, 255, 255, 0.7);
            transition: all 0.2s;
            cursor: pointer;
        }

        .nav-item:hover, .nav-item.active {
            background: rgba(102, 126, 234, 0.2);
            color: white;
        }

        .nav-item i {
            width: 24px;
            font-size: 1.1rem;
        }

        /* Main Content */
        .main-content {
            flex: 1;
            margin-left: 280px;
            padding: 1.5rem 2rem 2rem;
        }

        /* Top Navbar */
        .top-navbar {
            background: white;
            border-radius: 20px;
            padding: 1rem 1.8rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .page-title h2 {
            font-size: 1.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, #1e293b, #334155);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }

        .user-dropdown {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-name {
            font-weight: 600;
            color: #1e293b;
        }

        /* Stats Grid Premium */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2.5rem;
        }

        .stat-card {
            background: white;
            border-radius: 24px;
            padding: 1.5rem;
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.04);
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(135deg, #667eea, #1958e1);
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.12);
        }

        .stat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .stat-icon {
            width: 55px;
            height: 55px;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            color: #1958e1;
        }

        .stat-value {
            font-size: 2.2rem;
            font-weight: 800;
            color: #0f172a;
            line-height: 1;
            margin-bottom: 0.3rem;
        }

        .stat-label {
            color: #64748b;
            font-size: 0.85rem;
            font-weight: 500;
            letter-spacing: 0.3px;
        }

        .trend-badge {
            font-size: 0.7rem;
            background: #e6f7e6;
            color: #27ae60;
            padding: 4px 10px;
            border-radius: 30px;
            font-weight: 600;
        }

        /* Quick Actions Card */
        .quick-actions {
            background: white;
            border-radius: 28px;
            padding: 1.8rem;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.04);
        }

        .section-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 1.8rem;
            padding-bottom: 0.8rem;
            border-bottom: 2px solid #f1f5f9;
        }

        .section-header i {
            font-size: 1.4rem;
            color: #1958e1;
            background: rgba(102, 126, 234, 0.1);
            padding: 10px;
            border-radius: 14px;
        }

        .section-header h3 {
            font-size: 1.3rem;
            font-weight: 700;
            color: #0f172a;
        }

        .action-buttons {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 1.2rem;
        }

        .action-card {
            background: #f8fafc;
            border-radius: 20px;
            padding: 1.3rem;
            text-align: center;
            transition: all 0.25s ease;
            text-decoration: none;
            border: 1px solid #eef2ff;
        }

        .action-card:hover {
            transform: translateY(-4px);
            background: white;
            border-color: #c7d2fe;
            box-shadow: 0 12px 20px -12px rgba(102, 126, 234, 0.25);
        }

        .action-icon {
            width: 55px;
            height: 55px;
            background: linear-gradient(135deg, #667eea, #1958e1);
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
            font-size: 1.4rem;
            color: white;
        }

        .action-card h4 {
            font-size: 1rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 5px;
        }

        .action-card p {
            font-size: 0.7rem;
            color: #64748b;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .sidebar {
                width: 250px;
            }
            .main-content {
                margin-left: 250px;
            }
        }

        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
                position: fixed;
            }
            .sidebar.active {
                transform: translateX(0);
            }
            .main-content {
                margin-left: 0;
                padding: 1rem;
            }
            .stats-grid {
                grid-template-columns: 1fr;
            }
            .action-buttons {
                grid-template-columns: 1fr 1fr;
            }
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }

        .welcome-text {
            font-size: 0.85rem;
            color: #475569;
        }
    </style>
</head>
<body>
<div class="dashboard-wrapper">
    <!-- Sidebar -->
    <aside class="sidebar">
        <div class="sidebar-header">
            <div class="logo-area">
                <div class="logo-icon">
                    <i class="fas fa-tooth"></i>
                </div>
                <div class="logo-text">
                    <h3>OSCE</h3>
                    <p>Admin Center</p>
                </div>
            </div>
        </div>
        <div class="user-info-sidebar">
            <div class="user-avatar">
                <i class="fas fa-user-cog"></i>
            </div>
            <div style="font-weight: 600;"><?php echo htmlspecialchars($_SESSION['user_name'] ?? 'Administrator'); ?></div>
            <div style="font-size: 0.7rem; opacity: 0.7;">Administrator</div>
        </div>
        <div class="nav-menu">
            <a href="dashboard.php" class="nav-item active" style="text-decoration: none;">
                <i class="fas fa-tachometer-alt"></i> <span>Dashboard</span>
            </a>
            <a href="soal.php" class="nav-item" style="text-decoration: none;">
                <i class="fas fa-question-circle"></i> <span>Kelola Soal</span>
            </a>
            <a href="ujian.php" class="nav-item" style="text-decoration: none;">
                <i class="fas fa-calendar-alt"></i> <span>Kelola Ujian</span>
            </a>
            <a href="peserta.php" class="nav-item" style="text-decoration: none;">
                <i class="fas fa-users"></i> <span>Kelola Peserta</span>
            </a>
            <a href="penguji.php" class="nav-item" style="text-decoration: none;">
                <i class="fas fa-chalkboard-user"></i> <span>Kelola Penguji</span>
            </a>
            <a href="nilai.php" class="nav-item" style="text-decoration: none;">
                <i class="fas fa-chart-line"></i> <span>Lihat Nilai</span>
            </a>
            <a href="../logout.php" class="nav-item" style="text-decoration: none; margin-top: 2rem;">
                <i class="fas fa-sign-out-alt"></i> <span>Logout</span>
            </a>
        </div>
    </aside>

    <!-- Main Content -->
    <main class="main-content">
        <div class="top-navbar">
            <div class="page-title">
                <h2><i class="fas fa-tachometer-alt" style="margin-right: 10px; color: #1958e1;"></i>Dashboard Overview</h2>
                <div class="welcome-text">Selamat datang kembali, <?php echo htmlspecialchars($_SESSION['user_name'] ?? 'Admin'); ?> !</div>
            </div>
            <div class="user-dropdown">
                <span class="user-name"><?php echo htmlspecialchars($_SESSION['user_name'] ?? 'Admin'); ?></span>
                <i class="fas fa-bell" style="color: #94a3b8; cursor: pointer;"></i>
            </div>
        </div>

        <!-- Statistics Grid -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-header">
                    <div class="stat-icon"><i class="fas fa-user-graduate"></i></div>
                    <span class="trend-badge"><i class="fas fa-chart-line"></i> +<?php echo $peserta_baru; ?> baru</span>
                </div>
                <div class="stat-value"><?php echo number_format($total_peserta); ?></div>
                <div class="stat-label">Total Peserta Terdaftar</div>
            </div>

            <div class="stat-card">
                <div class="stat-header">
                    <div class="stat-icon"><i class="fas fa-microscope"></i></div>
                </div>
                <div class="stat-value"><?php echo number_format($total_stations); ?></div>
                <div class="stat-label">Total Stations OSCE</div>
            </div>

            <div class="stat-card">
                <div class="stat-header">
                    <div class="stat-icon"><i class="fas fa-file-alt"></i></div>
                </div>
                <div class="stat-value"><?php echo number_format($total_ujian); ?></div>
                <div class="stat-label">Total Sesi Ujian</div>
            </div>

            <div class="stat-card">
                <div class="stat-header">
                    <div class="stat-icon"><i class="fas fa-user-tie"></i></div>
                </div>
                <div class="stat-value"><?php echo number_format($total_penguji); ?></div>
                <div class="stat-label">Total Penguji Aktif</div>
            </div>

            <div class="stat-card">
                <div class="stat-header">
                    <div class="stat-icon"><i class="fas fa-play-circle"></i></div>
                    <?php if($ujian_aktif > 0): ?>
                    <span class="trend-badge" style="background: #fee2e2; color:#dc2626;"><i class="fas fa-clock"></i> Live</span>
                    <?php endif; ?>
                </div>
                <div class="stat-value"><?php echo number_format($ujian_aktif); ?></div>
                <div class="stat-label">Ujian Sedang Berlangsung</div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="quick-actions">
            <div class="section-header">
                <i class="fas fa-bolt"></i>
                <h3>Akses Cepat & Manajemen</h3>
            </div>
            <div class="action-buttons">
                <a href="soal.php" class="action-card">
                    <div class="action-icon"><i class="fas fa-question-circle"></i></div>
                    <h4>Bank Soal</h4>
                    <p>Kelola kumpulan soal OSCE</p>
                </a>
                <a href="ujian.php" class="action-card">
                    <div class="action-icon"><i class="fas fa-clipboard-list"></i></div>
                    <h4>Jadwal Ujian</h4>
                    <p>Atur sesi & ruang OSCE</p>
                </a>
                <a href="peserta.php" class="action-card">
                    <div class="action-icon"><i class="fas fa-users"></i></div>
                    <h4>Data Peserta</h4>
                    <p>Registrasi & kelompok</p>
                </a>
                <a href="penguji.php" class="action-card">
                    <div class="action-icon"><i class="fas fa-chalkboard-user"></i></div>
                    <h4>Penguji Klinis</h4>
                    <p>Kelola tim penguji</p>
                </a>
                <a href="nilai.php" class="action-card">
                    <div class="action-icon"><i class="fas fa-chart-bar"></i></div>
                    <h4>Rekap Nilai</h4>
                    <p>Analisis hasil ujian</p>
                </a>
                <a href="laporan.php" class="action-card">
                    <div class="action-icon"><i class="fas fa-file-pdf"></i></div>
                    <h4>Laporan</h4>
                    <p>Export data & statistik</p>
                </a>
            </div>
        </div>
    </main>
</div>

<script>
    // Sidebar mobile toggle sederhana (optional)
    // untuk responsive bisa ditambahkan tombol hamburger, namun untuk saat ini biarkan modern.
    // tambahan effect untuk active link
    console.log("SOCA OSCE Admin Dashboard - Elegant Mode");
</script>
</body>
</html>