<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Login - MCP Auth</title>
    <link rel="stylesheet" href="/static/tailwind.css">
    <script src="/static/lucide.min.js"></script>
</head>
<body class="h-full bg-gradient-to-br from-blue-600 via-cyan-600 to-cyan-700">
    <div class="min-h-full flex items-center justify-center px-4 py-12">
        <div class="max-w-md w-full bg-white rounded-2xl shadow-2xl p-8">
            <div class="flex justify-center mb-6">
                <div class="p-4 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-full">
                    <i data-lucide="key-round" class="w-12 h-12 text-white"></i>
                </div>
            </div>
            <div class="text-center mb-8">
                <h2 class="text-3xl font-bold text-gray-900 mb-2">User Login</h2>
                <p class="text-gray-600">Access your MCP token</p>
            </div>
            <form id="loginForm" class="space-y-6" autocomplete="off">
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-2">Username</label>
                    <input type="text" id="username" required
                           class="block w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                </div>
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password</label>
                    <input type="password" id="password" required autocomplete="new-password"
                           class="block w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                </div>
                <button type="submit"
                        class="w-full bg-gradient-to-r from-blue-600 to-cyan-600 text-white py-3 px-4 rounded-lg font-semibold hover:from-blue-700 hover:to-cyan-700 transition-all shadow-lg hover:shadow-xl">
                    Login
                </button>
                <div id="errorMessage" class="hidden bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm"></div>
                <div class="text-center text-sm text-gray-500">
                    Admin account? <a href="/admin/login" class="text-blue-600 hover:underline">Go to admin login</a>
                </div>
            </form>
        </div>
    </div>
    <script>
        lucide.createIcons();
        document.getElementById('loginForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const errorDiv = document.getElementById('errorMessage');
            errorDiv.classList.add('hidden');
            try {
                const response = await fetch('/api/login', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({username, password})
                });
                if (response.ok) {
                    window.location.href = '/account';
                    return;
                }
                const data = await response.json();
                if (response.status === 403) {
                    window.location.href = '/admin/login';
                    return;
                }
                errorDiv.textContent = data.detail || 'Login failed';
                errorDiv.classList.remove('hidden');
            } catch (err) {
                errorDiv.textContent = 'Network error. Please try again.';
                errorDiv.classList.remove('hidden');
            }
        });
    </script>
</body>
</html>
