<?php
$pageTitle = 'My Profile';
$pageDescription = 'Manage your account and view your game history.';
include __DIR__ . '/../layout/header.php';
?>

<div class="container mx-auto px-4 py-8">
    <div class="bg-card-bg rounded-xl shadow-lg overflow-hidden">
        <div class="p-6">
            <h1 class="text-2xl font-bold mb-6">My Profile</h1>

            <?php if (!empty($error)): ?>
            <div class="bg-red-900/50 border border-red-500 text-red-100 px-4 py-3 rounded mb-4">
                <p><?= htmlspecialchars($error) ?></p>
            </div>
            <?php endif; ?>

            <?php if (!empty($success)): ?>
            <div class="bg-green-900/50 border border-green-500 text-green-100 px-4 py-3 rounded mb-4">
                <p><?= htmlspecialchars($success) ?></p>
            </div>
            <?php endif; ?>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Profile Information -->
                <div class="md:col-span-1">
                    <div class="bg-darker rounded-xl p-6">
                        <h2 class="text-xl font-semibold mb-4">Account Information</h2>

                        <div class="mb-6">
                            <div class="flex items-center justify-center mb-4">
                                <div class="w-24 h-24 rounded-full bg-primary flex items-center justify-center text-white text-3xl font-bold">
                                    <?= strtoupper(substr($user['username'], 0, 1)) ?>
                                </div>
                            </div>
                            <h3 class="text-lg font-medium text-center"><?= htmlspecialchars($user['name'] ?: $user['username']) ?></h3>
                            <p class="text-gray-400 text-center">@<?= htmlspecialchars($user['username']) ?></p>
                        </div>

                        <div class="space-y-2">
                            <div>
                                <span class="text-gray-400">Email:</span>
                                <span class="ml-2"><?= htmlspecialchars($user['email']) ?></span>
                            </div>
                            <div>
                                <span class="text-gray-400">Member Since:</span>
                                <span class="ml-2"><?= date('M d, Y', strtotime($user['created_at'])) ?></span>
                            </div>
                            <div>
                                <span class="text-gray-400">Games Played:</span>
                                <span class="ml-2"><?= count($gameHistory) ?></span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Profile Settings -->
                <div class="md:col-span-2">
                    <div class="bg-darker rounded-xl p-6 mb-6">
                        <h2 class="text-xl font-semibold mb-4">Edit Profile</h2>

                        <form method="POST" action="/profile" class="space-y-4">
                            <input type="hidden" name="action" value="update_profile">

                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Name</label>
                                <input type="text" id="name" name="name" class="w-full px-4 py-2 rounded-lg bg-card-bg border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="<?= htmlspecialchars($user['name']) ?>">
                            </div>

                            <div>
                                <label for="username" class="block text-sm font-medium text-gray-300 mb-1">Username</label>
                                <input type="text" id="username" name="username" class="w-full px-4 py-2 rounded-lg bg-card-bg border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="<?= htmlspecialchars($user['username']) ?>" required>
                            </div>

                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label>
                                <input type="email" id="email" name="email" class="w-full px-4 py-2 rounded-lg bg-card-bg border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="<?= htmlspecialchars($user['email']) ?>" required>
                            </div>

                            <div>
                                <button type="submit" class="bg-primary hover:bg-primary-dark text-white font-bold py-2 px-4 rounded-lg transition duration-200">
                                    Update Profile
                                </button>
                            </div>
                        </form>
                    </div>

                    <div class="bg-darker rounded-xl p-6">
                        <h2 class="text-xl font-semibold mb-4">Change Password</h2>

                        <form method="POST" action="/profile" class="space-y-4">
                            <input type="hidden" name="action" value="change_password">

                            <div>
                                <label for="current_password" class="block text-sm font-medium text-gray-300 mb-1">Current Password</label>
                                <input type="password" id="current_password" name="current_password" class="w-full px-4 py-2 rounded-lg bg-card-bg border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required>
                            </div>

                            <div>
                                <label for="new_password" class="block text-sm font-medium text-gray-300 mb-1">New Password</label>
                                <input type="password" id="new_password" name="new_password" class="w-full px-4 py-2 rounded-lg bg-card-bg border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required minlength="8">
                                <p class="text-xs text-gray-400 mt-1">Must be at least 8 characters long</p>
                            </div>

                            <div>
                                <label for="confirm_password" class="block text-sm font-medium text-gray-300 mb-1">Confirm New Password</label>
                                <input type="password" id="confirm_password" name="confirm_password" class="w-full px-4 py-2 rounded-lg bg-card-bg border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required minlength="8">
                            </div>

                            <div>
                                <button type="submit" class="bg-primary hover:bg-primary-dark text-white font-bold py-2 px-4 rounded-lg transition duration-200">
                                    Change Password
                                </button>
                            </div>
                        </form>
                    </div>

                    <div class="bg-darker rounded-xl p-6 mt-6">
                        <h2 class="text-xl font-semibold mb-4">Data & Privacy</h2>
                        <div class="space-y-4">
                            <form method="POST" action="/profile">
                                <input type="hidden" name="action" value="export_data">
                                <button type="submit" class="w-full text-left flex items-center justify-between px-4 py-3 bg-card-bg hover:bg-gray-800 rounded-lg transition duration-200">
                                    <div>
                                        <h3 class="font-medium">Export Your Data</h3>
                                        <p class="text-sm text-gray-400">Download a copy of your personal data.</p>
                                    </div>
                                    <i class="fas fa-download text-primary"></i>
                                </button>
                            </form>
                            <form method="POST" action="/profile" onsubmit="return confirm('Are you sure you want to delete your account? This action cannot be undone.');">
                                <input type="hidden" name="action" value="delete_account">
                                <button type="submit" class="w-full text-left flex items-center justify-between px-4 py-3 bg-red-900/50 hover:bg-red-800/60 rounded-lg transition duration-200">
                                    <div>
                                        <h3 class="font-medium text-red-200">Delete Your Account</h3>
                                        <p class="text-sm text-red-300">Permanently delete your account and all associated data.</p>
                                    </div>
                                    <i class="fas fa-trash-alt text-red-300"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Favorite Games -->
            <div class="mt-8">
                <h2 class="text-xl font-semibold mb-4">Favorite Games</h2>

                <?php if (empty($favoriteGames)): ?>
                <div class="bg-darker rounded-xl p-6 text-center">
                    <p class="text-gray-400">You haven't favorited any games yet.</p>
                    <a href="/" class="inline-block mt-4 bg-primary hover:bg-primary-dark text-white font-bold py-2 px-4 rounded-lg transition duration-200">
                        Browse Games
                    </a>
                </div>
                <?php else: ?>
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                    <?php foreach ($favoriteGames as $game): ?>
                    <a href="/game/<?= htmlspecialchars($game['slug']) ?>" class="game-card group">
                        <div class="relative aspect-square overflow-hidden rounded-xl">
                            <img src="<?= htmlspecialchars($game['thumbnail']) ?>" alt="<?= htmlspecialchars($game['title']) ?>"
                                 class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" loading="lazy">
                            <div class="absolute top-0 left-0 m-2">
                                <span class="category-badge">
                                    <i class="fas fa-tag mr-1"></i>
                                    <?= htmlspecialchars($game['category_name']) ?>
                                </span>
                            </div>
                            <div class="absolute top-0 right-0 m-2">
                                <span class="favorite-badge">
                                    <i class="fas fa-heart text-red-500"></i>
                                </span>
                            </div>
                            <div class="game-card-overlay">
                                <h3 class="game-card-title"><?= htmlspecialchars($game['title']) ?></h3>
                                <p class="text-xs text-gray-300">Added: <?= date('M d, Y', strtotime($game['created_at'])) ?></p>
                            </div>
                            <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                <button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center">
                                    <i class="fas fa-play text-white"></i>
                                </button>
                            </div>
                        </div>
                    </a>
                    <?php endforeach; ?>
                </div>
                <?php endif; ?>
            </div>

            <!-- Game History -->
            <div class="mt-8">
                <h2 class="text-xl font-semibold mb-4">Game History</h2>

                <?php if (empty($gameHistory)): ?>
                <div class="bg-darker rounded-xl p-6 text-center">
                    <p class="text-gray-400">You haven't played any games yet.</p>
                    <a href="/" class="inline-block mt-4 bg-primary hover:bg-primary-dark text-white font-bold py-2 px-4 rounded-lg transition duration-200">
                        Browse Games
                    </a>
                </div>
                <?php else: ?>
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                    <?php foreach ($gameHistory as $play): ?>
                    <a href="/game/<?= htmlspecialchars($play['slug']) ?>" class="game-card group">
                        <div class="relative aspect-square overflow-hidden rounded-xl">
                            <img src="<?= htmlspecialchars($play['thumbnail']) ?>" alt="<?= htmlspecialchars($play['title']) ?>"
                                 class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" loading="lazy">
                            <div class="absolute top-0 left-0 m-2">
                                <span class="category-badge">
                                    <i class="fas fa-tag mr-1"></i>
                                    <?= htmlspecialchars($play['category_name']) ?>
                                </span>
                            </div>
                            <div class="game-card-overlay">
                                <h3 class="game-card-title"><?= htmlspecialchars($play['title']) ?></h3>
                                <p class="text-xs text-gray-300">Played: <?= date('M d, Y', strtotime($play['created_at'])) ?></p>
                            </div>
                            <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                <button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center">
                                    <i class="fas fa-play text-white"></i>
                                </button>
                            </div>
                        </div>
                    </a>
                    <?php endforeach; ?>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<?php include __DIR__ . '/../layout/footer.php'; ?>
