<?php
require_once __DIR__ . '/../../helpers/TurnstileHelper.php';
require_once __DIR__ . '/../../helpers/GoogleOAuthHelper.php';

$pageTitle = 'Login';
$pageDescription = 'Login to your account to track your game history and compete on the leaderboard.';
include __DIR__ . '/../layout/header.php';

$turnstileHelper = new TurnstileHelper();
$googleOAuthHelper = new GoogleOAuthHelper();
?>

<div class="container mx-auto px-4 py-8">
    <div class="max-w-md mx-auto bg-card-bg rounded-xl shadow-lg overflow-hidden">
        <div class="p-6">
            <div class="text-center mb-6">
                <?php if (!empty($settings['logo_path'])): ?>
                <img src="<?= htmlspecialchars($settings['logo_path']) ?>" alt="<?= htmlspecialchars($settings['site_title'] ?? 'Game Portal') ?>" class="h-12 mx-auto mb-4">
                <?php else: ?>
                <h1 class="text-2xl font-bold text-primary"><?= htmlspecialchars($settings['site_title'] ?? 'Game Portal') ?></h1>
                <?php endif; ?>
                <h2 class="text-xl font-semibold">Login to Your Account</h2>
                <p class="text-gray-400 mt-1">Welcome back, gamer!</p>
            </div>

            <?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; ?>

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

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

                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input type="checkbox" id="remember_me" name="remember_me" class="h-4 w-4 text-primary focus:ring-primary border-gray-700 rounded bg-darker">
                        <label for="remember_me" class="ml-2 block text-sm text-gray-300">Remember me</label>
                    </div>
                    <a href="/forgot-password" class="text-sm text-primary hover:underline">Forgot password?</a>
                </div>

                <?php if ($turnstileHelper->isEnabled()): ?>
                <?= $turnstileHelper->renderWidget() ?>
                <?php endif; ?>

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

                <div class="text-center text-sm text-gray-400">
                    Don't have an account? <a href="/register" class="text-primary hover:underline">Register</a>
                </div>
            </form>

            <?php if ($googleOAuthHelper->isEnabled()): ?>
            <div class="mt-6">
                <div class="relative">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t border-gray-700"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-card-bg text-gray-400">Or continue with</span>
                    </div>
                </div>

                <div class="mt-6">
                    <a href="/auth/google" class="w-full flex items-center justify-center px-4 py-2 border border-gray-700 rounded-lg shadow-sm text-sm font-medium text-white bg-darker hover:bg-gray-800 transition duration-200">
                        <svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z"/>
                        </svg>
                        Sign in with Google
                    </a>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>
</div>

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