<?php
require_once 'includes/conn.php';
require_once 'includes/functions.php';

enforceAccessControl($pdo);

$user_id = (int)$_SESSION['user_id'];

$stmt = $pdo->prepare("
    SELECT first_name, last_name, username, email, role, status, created_at
    FROM users
    WHERE id = :id
");
$stmt->execute([':id' => $user_id]);
$user = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$user) {
    session_destroy();
    header('Location: login.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Profile</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        :root {
            --bg: #0f172a;
            --card: #ffffff;
            --primary: #2563eb;
            --muted: #64748b;
            --danger: #dc2626;
            --success: #16a34a;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: "Segoe UI", Tahoma, Arial, sans-serif;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #0f172a, #1e293b);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .profile-card {
            background: var(--card);
            width: 100%;
            max-width: 520px;
            border-radius: 14px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
            overflow: hidden;
            animation: fadeIn 0.4s ease;
        }

        .profile-header {
            background: var(--primary);
            color: #fff;
            padding: 28px;
            text-align: center;
        }

        .avatar {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            margin: 0 auto 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            font-weight: bold;
        }

        .profile-header h2 {
            font-size: 1.4rem;
        }

        .profile-header span {
            font-size: 0.85rem;
            opacity: 0.9;
        }

        .profile-body {
            padding: 28px;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #e5e7eb;
            font-size: 0.9rem;
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .label {
            color: var(--muted);
        }

        .value {
            font-weight: 600;
            color: #0f172a;
            text-align: right;
        }

        .status {
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.75rem;
            text-transform: uppercase;
        }

        .status.active {
            background: #dcfce7;
            color: var(--success);
        }

        .status.disabled {
            background: #fee2e2;
            color: var(--danger);
        }

        .notice {
            background: #fff7ed;
            border-left: 4px solid var(--danger);
            padding: 12px;
            margin-top: 18px;
            font-size: 0.85rem;
            color: #7c2d12;
        }

        .actions {
            margin-top: 24px;
            display: flex;
            gap: 10px;
        }

        .btn {
            flex: 1;
            text-align: center;
            padding: 10px;
            border-radius: 6px;
            text-decoration: none;
            font-size: 0.85rem;
            font-weight: 600;
            transition: background 0.2s;
        }

        .btn-back {
            background: #e5e7eb;
            color: #1e293b;
        }

        .btn-back:hover {
            background: #cbd5e1;
        }

        .btn-logout {
            background: var(--danger);
            color: #fff;
        }

        .btn-logout:hover {
            background: #b91c1c;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 480px) {
            .info-row {
                flex-direction: column;
                gap: 4px;
            }
            .value {
                text-align: left;
            }
        }
    </style>
</head>
<body>

<div class="profile-card">
    <div class="profile-header">
        <div class="avatar">
            <?= strtoupper(substr($user['first_name'], 0, 1)) ?>
        </div>
        <h2><?= htmlspecialchars($user['first_name'].' '.$user['last_name']) ?></h2>
        <span><?= ucfirst($user['role']) ?></span>
    </div>

    <div class="profile-body">

        <div class="info-row">
            <span class="label">Username</span>
            <span class="value"><?= htmlspecialchars($user['username']) ?></span>
        </div>

        <div class="info-row">
            <span class="label">Email</span>
            <span class="value"><?= htmlspecialchars($user['email']) ?></span>
        </div>

        <div class="info-row">
            <span class="label">Account Status</span>
            <span class="status <?= $user['status'] ?>">
                <?= ucfirst($user['status']) ?>
            </span>
        </div>

        <div class="info-row">
            <span class="label">Member Since</span>
            <span class="value">
                <?= date('F j, Y', strtotime($user['created_at'])) ?>
            </span>
        </div>

        <?php if ($user['status'] === 'disabled'): ?>
            <div class="notice">
                Your account is currently restricted. Access to some features
                is limited until reactivation by an administrator.
            </div>
        <?php endif; ?>

        <div class="actions">
            <a href="restricted.php" class="btn btn-back">Back</a>
            <a href="logout.php" class="btn btn-logout">Logout</a>
        </div>

    </div>
</div>

</body>
</html>
