<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 智队中枢</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            200: '#bae6fd',
                            300: '#7dd3fc',
                            400: '#38bdf8',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            700: '#0369a1',
                            800: '#075985',
                            900: '#0c4a6e',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
        .btn { @apply px-4 py-2 rounded-lg font-medium transition-colors; }
        .btn-primary { @apply bg-primary-600 text-white hover:bg-primary-700; }
        .input { @apply w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent; }
    </style>
</head>
<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-md">
        <!-- Logo -->
        <div class="text-center mb-8">
            <div class="w-16 h-16 bg-primary-600 rounded-xl flex items-center justify-center mx-auto mb-4">
                <span class="text-white text-2xl font-bold">智</span>
            </div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">智队中枢</h1>
            <p class="text-gray-500 dark:text-gray-400 mt-2">Personal Intelligent Team</p>
        </div>

        <!-- Login Form -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8">
            <form id="login-form" class="space-y-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">用户名</label>
                    <input type="text" id="username" class="input" placeholder="请输入用户名" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">密码</label>
                    <input type="password" id="password" class="input" placeholder="请输入密码" required>
                </div>
                <div id="error-msg" class="hidden text-red-500 text-sm text-center"></div>
                <button type="submit" class="btn btn-primary w-full py-3">
                    登录
                </button>
            </form>
            
            <div class="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
                还没有账号？请联系管理员
            </div>
        </div>

        <div class="mt-8 text-center text-sm text-gray-400 dark:text-gray-500">
            智队中枢 v0.7.0
        </div>
    </div>

    <script>
        // 主题切换
        const savedTheme = localStorage.getItem('theme') || 'light';
        if (savedTheme === 'dark') {
            document.documentElement.classList.add('dark');
        }

        // 登录处理
        document.getElementById('login-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const errorMsg = document.getElementById('error-msg');
            
            try {
                const response = await fetch('/api/auth/login', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ username, password })
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    // 保存 token
                    localStorage.setItem('access_token', data.access_token);
                    localStorage.setItem('user', JSON.stringify(data.user));
                    
                    // 跳转到首页
                    window.location.href = '/web/';
                } else {
                    errorMsg.textContent = data.error || '登录失败';
                    errorMsg.classList.remove('hidden');
                }
            } catch (err) {
                errorMsg.textContent = '网络错误，请重试';
                errorMsg.classList.remove('hidden');
            }
        });
    </script>
</body>
</html>
