<?php
$title = 'My Profile';
$active = 'profile';
require_once __DIR__ . '/../layouts/header.php';
require_once __DIR__ . '/../layouts/sidebar.php';

// Get user data from session
$user = [
    'full_name' => $_SESSION['full_name'] ?? 'User',
    'username' => $_SESSION['username'] ?? '',
    'email' => $_SESSION['email'] ?? '',
    'rank' => $_SESSION['rank'] ?? '',
    'nis_number' => $_SESSION['nis_number'] ?? '',
    'profile_image' => $_SESSION['profile_image'] ?? null,
    'two_factor_enabled' => $_SESSION['two_factor_enabled'] ?? false,
    'created_at' => $_SESSION['created_at'] ?? date('Y-m-d H:i:s'),
    'last_login' => $_SESSION['last_login'] ?? null,
    'last_ip' => $_SESSION['last_ip'] ?? null
];

// Alternative: Use Auth class if it exists
if (class_exists('Auth') && method_exists('Auth', 'user')) {
    $authUser = Auth::user();
    if ($authUser) {
        $user = array_merge($user, $authUser);
    }
}

$roles = $_SESSION['roles'] ?? [];
?>

<div class="container-fluid">
    <!-- Page Header -->
    <div class="page-header">
        <div class="header-content">
            <h1>
                <i class="fas fa-user-circle"></i>
                My Profile
            </h1>
            <p>View and manage your profile information</p>
        </div>
        <div class="header-actions">
            <a href="<?php echo BASE_URL; ?>/auth/change-password.php" class="btn btn-warning">
                <i class="fas fa-key"></i> Change Password
            </a>
            <button class="btn btn-outline" onclick="window.print()">
                <i class="fas fa-print"></i> Print
            </button>
        </div>
    </div>

    <!-- Profile Information -->
    <div class="profile-grid">
        <!-- Profile Card -->
        <div class="profile-card">
            <div class="card-header">
                <h3><i class="fas fa-id-badge"></i> Profile Information</h3>
            </div>
            <div class="card-body text-center">
                <div class="profile-image-container">
                    <?php if ($user['profile_image']): ?>
                        <img src="<?php echo BASE_URL; ?>/<?php echo $user['profile_image']; ?>" 
                             alt="Profile" class="profile-image">
                    <?php else: ?>
                        <div class="profile-image-placeholder">
                            <i class="fas fa-user-circle fa-6x" style="color: var(--primary-light);"></i>
                        </div>
                    <?php endif; ?>
                </div>
                
                <h2 class="profile-name"><?php echo htmlspecialchars($user['full_name']); ?></h2>
                <p class="profile-role"><?php echo htmlspecialchars($user['rank']); ?></p>
                
                <div class="profile-badges">
                    <span class="badge badge-primary">NIS: <?php echo htmlspecialchars($user['nis_number']); ?></span>
                    <?php if ($user['two_factor_enabled']): ?>
                        <span class="badge badge-success">2FA Enabled</span>
                    <?php else: ?>
                        <span class="badge badge-warning">2FA Disabled</span>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- Contact Information -->
        <div class="profile-card">
            <div class="card-header">
                <h3><i class="fas fa-address-card"></i> Contact Information</h3>
            </div>
            <div class="card-body">
                <div class="info-row">
                    <div class="info-label">
                        <i class="fas fa-envelope"></i> Email:
                    </div>
                    <div class="info-value">
                        <a href="mailto:<?php echo htmlspecialchars($user['email']); ?>">
                            <?php echo htmlspecialchars($user['email']); ?>
                        </a>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">
                        <i class="fas fa-phone"></i> Phone:
                    </div>
                    <div class="info-value">
                        <a href="tel:<?php echo htmlspecialchars($user['phone'] ?? ''); ?>">
                            <?php echo htmlspecialchars($user['phone'] ?? 'Not provided'); ?>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Account Information -->
        <div class="profile-card">
            <div class="card-header">
                <h3><i class="fas fa-cog"></i> Account Information</h3>
            </div>
            <div class="card-body">
                <div class="info-row">
                    <div class="info-label">
                        <i class="fas fa-user"></i> Username:
                    </div>
                    <div class="info-value"><?php echo htmlspecialchars($user['username']); ?></div>
                </div>
                <div class="info-row">
                    <div class="info-label">
                        <i class="fas fa-calendar-alt"></i> Member Since:
                    </div>
                    <div class="info-value">
                        <?php echo date('F j, Y', strtotime($user['created_at'])); ?>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">
                        <i class="fas fa-clock"></i> Last Login:
                    </div>
                    <div class="info-value">
                        <?php echo $user['last_login'] ? date('F j, Y H:i', strtotime($user['last_login'])) : 'Never'; ?>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">
                        <i class="fas fa-network-wired"></i> Last IP:
                    </div>
                    <div class="info-value"><?php echo htmlspecialchars($user['last_ip'] ?? 'N/A'); ?></div>
                </div>
            </div>
        </div>

        <!-- Role Information -->
        <div class="profile-card full-width">
            <div class="card-header">
                <h3><i class="fas fa-user-tag"></i> Assigned Roles</h3>
            </div>
            <div class="card-body">
                <div class="roles-grid">
                    <?php if (empty($roles)): ?>
                        <p class="text-muted">No roles assigned</p>
                    <?php else: ?>
                        <?php foreach ($roles as $role): ?>
                            <div class="role-item">
                                <i class="fas fa-check-circle text-success"></i>
                                <span><?php echo htmlspecialchars($role); ?></span>
                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>

    <!-- Two-Factor Authentication Section -->
    <div class="profile-card">
        <div class="card-header">
            <h3><i class="fas fa-shield-alt"></i> Two-Factor Authentication</h3>
        </div>
        <div class="card-body">
            <?php if ($user['two_factor_enabled']): ?>
                <p class="text-success">
                    <i class="fas fa-check-circle"></i> Two-factor authentication is enabled.
                </p>
                <a href="<?php echo BASE_URL; ?>/auth/disable-2fa.php" class="btn btn-danger">
                    <i class="fas fa-times-circle"></i> Disable 2FA
                </a>
            <?php else: ?>
                <p class="text-warning">
                    <i class="fas fa-exclamation-triangle"></i> Two-factor authentication is not enabled.
                </p>
                <a href="<?php echo BASE_URL; ?>/auth/enable-2fa.php" class="btn btn-success">
                    <i class="fas fa-shield-alt"></i> Enable 2FA
                </a>
            <?php endif; ?>
        </div>
    </div>
</div>

<style>
.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.profile-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
}

.profile-card.full-width {
    grid-column: 1 / -1;
}

.card-header {
    padding: 15px 20px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
}

.card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-body {
    padding: 20px;
}

.profile-image-container {
    text-align: center;
    margin-bottom: 15px;
}

.profile-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-light);
}

.profile-image-placeholder {
    color: var(--primary-light);
}

.profile-name {
    font-size: 1.5rem;
    margin: 10px 0 5px;
    color: var(--text-primary);
}

.profile-role {
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.profile-badges {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.badge-primary {
    background: #e3f2fd;
    color: #1565c0;
}

.badge-success {
    background: #e8f5e9;
    color: #2e7d32;
}

.badge-warning {
    background: #fff8e1;
    color: #ff8f00;
}

.info-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

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

.info-label {
    flex: 0 0 100px;
    font-weight: 600;
    color: var(--text-secondary);
}

.info-label i {
    width: 20px;
    color: var(--primary-light);
}

.info-value {
    flex: 1;
    color: var(--text-primary);
}

.info-value a {
    color: var(--primary-light);
    text-decoration: none;
}

.info-value a:hover {
    text-decoration: underline;
}

.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.role-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: var(--light-bg);
    border-radius: 6px;
}

.role-item i {
    color: var(--success-color);
}

.text-success {
    color: var(--success-color);
}

.text-warning {
    color: var(--warning-color);
}

.text-muted {
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
    
    .info-row {
        flex-direction: column;
    }
    
    .info-label {
        margin-bottom: 5px;
    }
    
    .roles-grid {
        grid-template-columns: 1fr;
    }
}
</style>

<?php require_once __DIR__ . '/../layouts/footer.php'; ?>