<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Gitea Webhook Ambassador</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .login-container {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .login-form {
            width: 100%;
            max-width: 400px;
            padding: 2rem;
            margin: auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        .login-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        .login-header h1 {
            color: #333;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        .login-header p {
            color: #666;
            margin: 0;
        }
        .form-floating {
            margin-bottom: 1rem;
        }
        .btn-login {
            width: 100%;
            padding: 0.75rem;
            font-weight: 600;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 8px;
        }
        .btn-login:hover {
            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
            transform: translateY(-1px);
        }
        .alert {
            border-radius: 8px;
            border: none;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-form">
            <div class="login-header">
                <h1>🔗 Gitea Webhook Ambassador</h1>
                <p>High-performance Gitea to Jenkins Webhook Service</p>
            </div>
            
            <form id="loginForm">
                <div class="alert alert-danger" role="alert" id="loginError" style="display: none;">
                </div>
                
                <div class="form-floating">
                    <input type="password" class="form-control" id="secret_key" name="secret_key" placeholder="Admin Secret Key" required>
                    <label for="secret_key">Admin Secret Key</label>
                </div>
                
                <button class="btn btn-primary btn-login" type="submit">
                    <span id="loginBtnText">Login</span>
                    <span id="loginBtnSpinner" class="spinner-border spinner-border-sm" style="display: none;"></span>
                </button>
            </form>
            
            <div class="text-center mt-3">
                <small class="text-muted">
                    Use the admin secret key for authentication
                </small>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // Check if already logged in
            const token = localStorage.getItem('auth_token');
            if (token) {
                window.location.href = '/dashboard';
                return;
            }

            // Check secret_key in URL params
            const urlParams = new URLSearchParams(window.location.search);
            const secretKeyFromUrl = urlParams.get('secret_key');
            if (secretKeyFromUrl) {
                $('#secret_key').val(secretKeyFromUrl);
                // Auto-submit login
                $('#loginForm').submit();
                return;
            }

            // Handle login form submit
            $('#loginForm').on('submit', function(e) {
                e.preventDefault();
                
                const secretKey = $('#secret_key').val();
                if (!secretKey) {
                    showError('Please enter the admin secret key');
                    return;
                }

                // Show loading state
                $('#loginBtnText').hide();
                $('#loginBtnSpinner').show();
                $('#loginError').hide();

                // Send login request
                $.ajax({
                    url: '/api/auth/login',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ secret_key: secretKey }),
                    success: function(response) {
                        if (response && response.token) {
                            // Save token and redirect
                            localStorage.setItem('auth_token', response.token);
                            window.location.href = '/dashboard';
                        } else {
                            showError('Invalid server response');
                        }
                    },
                    error: function(xhr) {
                        console.error('Login error:', xhr);
                        let errorMsg = 'Login failed, please try again';
                        
                        if (xhr.responseJSON && xhr.responseJSON.detail) {
                            errorMsg = xhr.responseJSON.detail;
                        }
                        
                        showError(errorMsg);
                        $('#secret_key').val('').focus();
                    },
                    complete: function() {
                        // Restore button state
                        $('#loginBtnText').show();
                        $('#loginBtnSpinner').hide();
                    }
                });
            });

            function showError(message) {
                $('#loginError').text(message).show();
            }

            // Enter key submit
            $('#secret_key').on('keypress', function(e) {
                if (e.which === 13) {
                    $('#loginForm').submit();
                }
            });
        });
    </script>
</body>
</html> 