<?php
session_start();
require_once '../db_connect.php';

if(!isset($_SESSION['user_id']) || $_SESSION['role'] != 'admin') {
    header('Location: ../login');
    exit;
}

// Get activity logs
$logs = mysqli_query($conn, "
    SELECT al.*, u.username, u.full_name
    FROM activity_logs al
    LEFT JOIN users u ON al.user_id = u.id
    ORDER BY al.created_at DESC
    LIMIT 500
");

// Stats
$total_logs = mysqli_fetch_assoc(mysqli_query($conn, "SELECT COUNT(*) as c FROM activity_logs"))['c'];
$today_logs = mysqli_fetch_assoc(mysqli_query($conn, "SELECT COUNT(*) as c FROM activity_logs WHERE DATE(created_at) = CURDATE()"))['c'];
$login_count = mysqli_fetch_assoc(mysqli_query($conn, "SELECT COUNT(*) as c FROM activity_logs WHERE action LIKE '%login%' AND DATE(created_at) = CURDATE()"))['c'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Activity Logs - Admin</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../assets/font-awesome/css/all.min.css">
    <link href="../assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../assets/DataTables/datatables.min.css" rel="stylesheet">
</head>
<body>
    <?php include 'includes/sidebar.php'; ?>

    <main class="admin-main">
        <!-- Page Header -->
        <div class="page-header">
            <div class="page-header-content">
                <div class="page-title">
                    <h1><i class="fas fa-history"></i> Activity Logs</h1>
                    <p>Monitor system activities and user actions</p>
                </div>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="stats-row">
            <div class="stat-card">
                <div class="stat-icon purple">
                    <i class="fas fa-list-alt"></i>
                </div>
                <div class="stat-info">
                    <h3><?php echo number_format($total_logs); ?></h3>
                    <p>Total Logs</p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon blue">
                    <i class="fas fa-calendar-day"></i>
                </div>
                <div class="stat-info">
                    <h3><?php echo $today_logs; ?></h3>
                    <p>Today's Activity</p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon green">
                    <i class="fas fa-sign-in-alt"></i>
                </div>
                <div class="stat-info">
                    <h3><?php echo $login_count; ?></h3>
                    <p>Today's Logins</p>
                </div>
            </div>
        </div>

        <div class="content-card">
            <div class="card-header-custom">
                <h3><i class="fas fa-stream"></i> Activity Stream</h3>
                <span class="result-count">Last 500 entries</span>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table modern-table" id="logsTable">
                        <thead>
                            <tr>
                                <th>Date/Time</th>
                                <th>User</th>
                                <th>Action</th>
                                <th>Description</th>
                                <th>IP Address</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php while($log = mysqli_fetch_assoc($logs)): ?>
                            <tr>
                                <td>
                                    <div class="datetime-cell">
                                        <span class="date"><?php echo date('M d, Y', strtotime($log['created_at'])); ?></span>
                                        <span class="time"><?php echo date('H:i:s', strtotime($log['created_at'])); ?></span>
                                    </div>
                                </td>
                                <td>
                                    <?php if($log['username']): ?>
                                    <div class="user-cell">
                                        <div class="user-avatar-sm">
                                            <?php echo strtoupper(substr($log['username'], 0, 1)); ?>
                                        </div>
                                        <span><?php echo htmlspecialchars($log['full_name'] ?: $log['username']); ?></span>
                                    </div>
                                    <?php else: ?>
                                    <span class="system-badge"><i class="fas fa-robot"></i> System</span>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <?php
                                    $action_class = 'action-default';
                                    if(strpos($log['action'], 'login') !== false) $action_class = 'action-login';
                                    elseif(strpos($log['action'], 'logout') !== false) $action_class = 'action-logout';
                                    elseif(strpos($log['action'], 'create') !== false || strpos($log['action'], 'add') !== false) $action_class = 'action-create';
                                    elseif(strpos($log['action'], 'update') !== false || strpos($log['action'], 'edit') !== false) $action_class = 'action-update';
                                    elseif(strpos($log['action'], 'delete') !== false) $action_class = 'action-delete';
                                    ?>
                                    <span class="action-badge <?php echo $action_class; ?>">
                                        <?php echo ucfirst(str_replace('_', ' ', $log['action'])); ?>
                                    </span>
                                </td>
                                <td>
                                    <span class="description-text"><?php echo htmlspecialchars($log['description'] ?: '-'); ?></span>
                                </td>
                                <td>
                                    <code class="ip-address"><?php echo $log['ip_address']; ?></code>
                                </td>
                            </tr>
                            <?php endwhile; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>

    <style>
    /* Page-specific styles */
    .page-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 20px;
        padding: 30px;
        margin-bottom: 30px;
        color: white;
    }

    .page-title h1 {
        font-size: 28px;
        font-weight: 700;
        margin: 0 0 8px 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .page-title p {
        margin: 0;
        opacity: 0.9;
        font-size: 15px;
    }

    .stats-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .stat-card {
        background: white;
        border-radius: 16px;
        padding: 24px;
        display: flex;
        align-items: center;
        gap: 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }

    .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
    }

    .stat-icon.purple {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .stat-icon.blue {
        background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    }

    .stat-icon.green {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    }

    .stat-info h3 {
        font-size: 24px;
        font-weight: 700;
        margin: 0;
        color: #1e293b;
    }

    .stat-info p {
        margin: 4px 0 0 0;
        color: #64748b;
        font-size: 14px;
    }

    .content-card {
        background: white;
        border-radius: 20px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        overflow: hidden;
    }

    .card-header-custom {
        padding: 24px 30px;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card-header-custom h3 {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .result-count {
        background: #f1f5f9;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 13px;
        color: #64748b;
        font-weight: 500;
    }

    .card-body {
        padding: 0;
    }

    .modern-table {
        margin: 0;
    }

    .modern-table thead th {
        background: #f8fafc;
        border: none;
        padding: 16px 20px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #64748b;
    }

    .modern-table tbody td {
        padding: 14px 20px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .modern-table tbody tr:hover {
        background: #f8fafc;
    }

    .datetime-cell {
        display: flex;
        flex-direction: column;
    }

    .datetime-cell .date {
        font-size: 14px;
        color: #1e293b;
        font-weight: 500;
    }

    .datetime-cell .time {
        font-size: 12px;
        color: #94a3b8;
    }

    .user-cell {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .user-avatar-sm {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 13px;
    }

    .system-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: #f1f5f9;
        border-radius: 8px;
        color: #64748b;
        font-size: 13px;
    }

    .action-badge {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
    }

    .action-login {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.15) 100%);
        color: #16a34a;
    }

    .action-logout {
        background: #f1f5f9;
        color: #64748b;
    }

    .action-create {
        background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(8, 145, 178, 0.15) 100%);
        color: #0891b2;
    }

    .action-update {
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.15) 100%);
        color: #d97706;
    }

    .action-delete {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);
        color: #dc2626;
    }

    .action-default {
        background: #f1f5f9;
        color: #475569;
    }

    .description-text {
        font-size: 13px;
        color: #475569;
        max-width: 300px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ip-address {
        background: #f1f5f9;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 12px;
        color: #475569;
    }

    @media (max-width: 768px) {
        .page-header {
            padding: 20px;
        }

        .page-title h1 {
            font-size: 22px;
        }

        .stats-row {
            grid-template-columns: 1fr 1fr;
        }

        .stat-card {
            padding: 16px;
        }

        .stat-icon {
            width: 44px;
            height: 44px;
            font-size: 18px;
        }

        .stat-info h3 {
            font-size: 18px;
        }

        .card-header-custom {
            padding: 16px 20px;
            flex-direction: column;
            gap: 12px;
            align-items: flex-start;
        }

        .modern-table thead th,
        .modern-table tbody td {
            padding: 12px 14px;
        }

        .description-text {
            max-width: 150px;
        }
    }
    </style>

    <script src="../assets/vendor/jquery/jquery.min.js"></script>
    <script src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../assets/DataTables/datatables.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#logsTable').DataTable({
                order: [[0, 'desc']],
                pageLength: 50,
                language: {
                    search: "",
                    searchPlaceholder: "Search logs..."
                }
            });
        });
    </script>
</body>
</html>
