<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% if success %}Authentication Successful{% else %}Authentication Failed{% endif %} - Rise</title>
    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-950 text-gray-100">
    <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-900 via-gray-950 to-black">
        <div class="w-full max-w-md p-8 bg-gray-900 rounded-lg border border-gray-800 shadow-2xl text-center">
            {% if success %}
            <div>
                <div class="text-6xl text-green-500 mb-4">✓</div>
                <h2 class="text-2xl font-bold text-white mb-4">Authentication Successful</h2>

                <p class="text-gray-300 mb-4">
                    You have been successfully authenticated for project
                    <strong class="font-mono text-white bg-gray-800 px-2 py-1 rounded">{{ project_name }}</strong>.
                </p>

                <p class="text-gray-400 mb-2">
                    Redirecting in <span class="font-bold text-indigo-400" id="countdown">3</span> seconds...
                </p>

                <div class="w-full bg-gray-800 rounded-full h-2 mb-4">
                    <div class="bg-indigo-600 h-2 rounded-full transition-all duration-1000" id="progress-bar" style="width: 0%"></div>
                </div>

                {% if redirect_url %}
                <p class="text-xs text-gray-500 mb-4">
                    <small>Redirecting to: <code class="bg-gray-800 px-1 rounded">{{ redirect_url }}</code></small>
                </p>
                {% endif %}

                <a href="{{ redirect_url }}" class="text-sm text-indigo-400 hover:text-indigo-300">Click here if not redirected automatically</a>
            </div>

            <script>
                let secondsLeft = 3;
                const countdownElement = document.getElementById('countdown');
                const progressBar = document.getElementById('progress-bar');
                const redirectUrl = "{{ redirect_url }}";

                const intervalId = setInterval(() => {
                    secondsLeft--;
                    countdownElement.textContent = secondsLeft;
                    progressBar.style.width = ((3 - secondsLeft) / 3 * 100) + '%';

                    if (secondsLeft <= 0) {
                        clearInterval(intervalId);
                        window.location.href = redirectUrl;
                    }
                }, 1000);

                // Start progress bar animation
                setTimeout(() => progressBar.style.width = '33.33%', 100);
            </script>
            {% else %}
            <div>
                <div class="text-6xl text-red-500 mb-4">✗</div>
                <h2 class="text-2xl font-bold text-white mb-4">Authentication Failed</h2>

                <p class="text-gray-300 mb-4">
                    Failed to authenticate for project
                    <strong class="font-mono text-white bg-gray-800 px-2 py-1 rounded">{{ project_name }}</strong>.
                </p>

                {% if error_message %}
                <p class="bg-red-900/50 border border-red-500 text-red-200 px-4 py-2 rounded mb-4">
                    {{ error_message }}
                </p>
                {% endif %}

                <a href="/api/v1/auth/signin?project={{ project_name }}{% if redirect_url %}&redirect={{ redirect_url | urlencode }}{% endif %}"
                   class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors">
                    Try Again
                </a>
            </div>
            {% endif %}
        </div>
    </div>
</body>
</html>
