{% extends "base.html" %}

{% block title %}用户登录 - FlashExam{% endblock %}

{% block head %}
<style>
    .login-wrapper {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        padding: 20px;
    }
    
    .login-card {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 24px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        overflow: hidden;
        width: 100%;
        max-width: 440px;
    }
    
    [data-theme="dark"] .login-card {
        background: rgba(30, 32, 44, 0.95);
    }
    
    .login-header {
        background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
        color: white;
        padding: 2.5rem 2rem;
        text-align: center;
    }
    
    .login-header .logo-icon {
        font-size: 3rem;
        margin-bottom: 0.5rem;
    }
    
    .login-header h3 {
        font-weight: 700;
        margin-bottom: 0.25rem;
        font-size: 1.5rem;
    }
    
    .login-header p {
        opacity: 0.9;
        margin: 0;
        font-size: 0.95rem;
    }
    
    .login-body {
        padding: 2rem;
    }
    
    .role-toggle {
        display: flex;
        background: var(--color-bg-secondary, #f1f5f9);
        border-radius: 12px;
        padding: 4px;
        margin-bottom: 1.5rem;
    }
    
    .role-toggle .btn {
        flex: 1;
        border: none;
        padding: 12px 16px;
        font-weight: 600;
        border-radius: 10px;
        transition: all 0.3s ease;
        color: var(--color-text-secondary, #64748b);
        background: transparent;
    }
    
    .role-toggle .btn.active {
        background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
    }
    
    .form-label {
        font-weight: 600;
        color: var(--color-text, #1e293b);
        margin-bottom: 0.5rem;
    }
    
    .input-group {
        border-radius: 12px;
        overflow: hidden;
    }
    
    .input-group-text {
        background: var(--color-bg-secondary, #f1f5f9);
        border: 2px solid var(--color-border, #e2e8f0);
        border-right: none;
        color: var(--color-text-secondary, #64748b);
    }
    
    .form-control {
        border: 2px solid var(--color-border, #e2e8f0);
        border-left: none;
        padding: 12px 16px;
        font-size: 1rem;
        transition: all 0.3s ease;
    }
    
    .form-control:focus {
        border-color: #4361ee;
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
    }
    
    .form-check-input:checked {
        background-color: #4361ee;
        border-color: #4361ee;
    }
    
    .btn-login {
        background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
        border: none;
        padding: 14px 24px;
        font-weight: 600;
        font-size: 1rem;
        border-radius: 12px;
        transition: all 0.3s ease;
    }
    
    .btn-login:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(67, 97, 238, 0.4);
    }
    
    .btn-login:active {
        transform: translateY(0);
    }
    
    .info-note {
        background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
        border: none;
        border-radius: 12px;
        padding: 12px 16px;
        font-size: 0.9rem;
    }
    
    [data-theme="dark"] .info-note {
        background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
        color: #bfdbfe;
    }
    
    .info-note.warning {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #92400e;
    }
    
    [data-theme="dark"] .info-note.warning {
        background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
        color: #fef3c7;
    }
    
    .login-footer {
        text-align: center;
        padding-top: 1rem;
    }
    
    .login-footer a {
        color: #4361ee;
        font-weight: 500;
    }
    
    .password-toggle {
        border: 2px solid var(--color-border, #e2e8f0);
        border-left: none;
        background: var(--color-bg-secondary, #f1f5f9);
    }
    
    .password-toggle:hover {
        background: var(--color-bg, #e2e8f0);
    }
</style>
{% endblock %}

{% block content %}
<div class="login-wrapper">
    <div class="login-card">
        <div class="login-header">
            <div class="logo-icon">
                <i class="bi bi-mortarboard-fill"></i>
            </div>
            <h3>FlashExam</h3>
            <p>智能在线考试系统</p>
        </div>
        
        <div class="login-body">
            <!-- 角色选择 -->
            <div class="role-toggle">
                <button type="button" class="btn active" id="btn-student" onclick="switchRole('student')">
                    <i class="bi bi-person-fill"></i> 学生
                </button>
                <button type="button" class="btn" id="btn-teacher" onclick="switchRole('teacher')">
                    <i class="bi bi-person-workspace"></i> 教师
                </button>
            </div>

            <!-- 登录表单 -->
            <form id="loginForm">
                <div class="mb-3">
                    <label for="username" class="form-label">
                        <span id="username-label">学号</span>
                    </label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="bi bi-person" id="username-icon"></i>
                        </span>
                        <input type="text" class="form-control" id="username" name="username" 
                               placeholder="请输入学号" required autocomplete="username">
                    </div>
                </div>

                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="bi bi-lock"></i>
                        </span>
                        <input type="password" class="form-control" id="password" name="password" 
                               placeholder="请输入密码" required autocomplete="current-password">
                        <button class="btn btn-outline-secondary password-toggle" type="button" onclick="togglePassword()">
                            <i class="bi bi-eye" id="eye-icon"></i>
                        </button>
                    </div>
                </div>

                <div class="mb-4 d-flex justify-content-between align-items-center">
                    <div class="form-check mb-0">
                        <input type="checkbox" class="form-check-input" id="remember" name="remember">
                        <label class="form-check-label" for="remember">记住登录</label>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary btn-login w-100" id="loginBtn">
                    <i class="bi bi-box-arrow-in-right me-2"></i>
                    <span id="login-text">学生登录</span>
                </button>
            </form>

            <!-- 提示信息 -->
            <div class="mt-4" id="student-note">
                <div class="info-note">
                    <i class="bi bi-lightbulb me-1"></i>
                    <strong>提示：</strong>学生默认密码为 123456
                </div>
            </div>

            <div class="mt-4" id="teacher-note" style="display: none;">
                <div class="info-note warning">
                    <i class="bi bi-shield-lock me-1"></i>
                    <strong>教师登录：</strong>使用管理员账号密码
                </div>
            </div>

            <div class="login-footer">
                <small class="text-muted">
                    首次使用？<a href="{{ url_for('auth.setup_password') }}">设置管理员密码</a>
                </small>
            </div>
        </div>
    </div>
</div>

<!-- 加载遮罩 -->
<div class="modal fade" id="loadingModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content" style="border-radius: 16px;">
            <div class="modal-body text-center py-4">
                <div class="spinner-border text-primary mb-3" role="status" style="width: 3rem; height: 3rem;">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <div class="fw-medium">正在登录...</div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let currentRole = 'student';

function switchRole(role) {
    currentRole = role;
    
    // 更新按钮状态
    document.getElementById('btn-student').classList.toggle('active', role === 'student');
    document.getElementById('btn-teacher').classList.toggle('active', role === 'teacher');
    
    // 更新表单
    const usernameLabel = document.getElementById('username-label');
    const usernameInput = document.getElementById('username');
    const usernameIcon = document.getElementById('username-icon');
    const loginText = document.getElementById('login-text');
    const studentNote = document.getElementById('student-note');
    const teacherNote = document.getElementById('teacher-note');
    
    if (role === 'teacher') {
        usernameLabel.textContent = '用户名';
        usernameInput.placeholder = '请输入用户名';
        usernameIcon.className = 'bi bi-person-workspace';
        loginText.textContent = '教师登录';
        studentNote.style.display = 'none';
        teacherNote.style.display = 'block';
    } else {
        usernameLabel.textContent = '学号';
        usernameInput.placeholder = '请输入学号';
        usernameIcon.className = 'bi bi-person';
        loginText.textContent = '学生登录';
        studentNote.style.display = 'block';
        teacherNote.style.display = 'none';
    }
}

function togglePassword() {
    const password = document.getElementById('password');
    const icon = document.getElementById('eye-icon');
    
    if (password.type === 'password') {
        password.type = 'text';
        icon.className = 'bi bi-eye-slash';
    } else {
        password.type = 'password';
        icon.className = 'bi bi-eye';
    }
}

function showAlert(message, type) {
    const existing = document.querySelector('.login-alert');
    if (existing) existing.remove();
    
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show login-alert`;
    alertDiv.style.cssText = 'border-radius: 12px; margin-bottom: 1rem;';
    alertDiv.innerHTML = `
        <i class="bi bi-${type === 'success' ? 'check-circle' : type === 'warning' ? 'exclamation-triangle' : 'exclamation-circle'} me-1"></i>
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.querySelector('.login-body').prepend(alertDiv);
}

document.getElementById('loginForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = {
        username: document.getElementById('username').value.trim(),
        password: document.getElementById('password').value.trim(),
        role: currentRole,
        remember: document.getElementById('remember').checked
    };
    
    if (!formData.username) {
        showAlert('请输入' + (formData.role === 'teacher' ? '用户名' : '学号'), 'warning');
        return;
    }
    
    if (!formData.password) {
        showAlert('请输入密码', 'warning');
        return;
    }
    
    // 显示加载
    const modal = new bootstrap.Modal(document.getElementById('loadingModal'));
    modal.show();
    document.getElementById('loginBtn').disabled = true;
    
    fetch('{{ url_for("auth.login") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
    })
    .then(r => r.json())
    .then(response => {
        modal.hide();
        document.getElementById('loginBtn').disabled = false;
        
        if (response.success) {
            showAlert(response.message, 'success');
            setTimeout(() => {
                window.location.href = response.redirect;
            }, 800);
        } else {
            showAlert(response.message, 'danger');
        }
    })
    .catch(err => {
        modal.hide();
        document.getElementById('loginBtn').disabled = false;
        showAlert('登录失败，请重试', 'danger');
        console.error('Login error:', err);
    });
});
</script>
{% endblock %}