{% extends "base.html" %}
{% block title %}教师管理 - FlashExam{% endblock %}

{% block content %}
<div class="admin-container">
    <div class="page-header">
        <h1><i class="fas fa-chalkboard-teacher"></i> 教师账户管理</h1>
        <button class="btn btn-primary" onclick="showAddTeacherModal()">
            <i class="fas fa-plus"></i> 添加教师
        </button>
    </div>
    
    <div class="table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th>用户名</th>
                    <th>姓名</th>
                    <th>邮箱</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="teachers-list">
                <tr>
                    <td colspan="5" class="loading">加载中...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div id="add-teacher-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>添加教师账户</h3>
            <button class="close-btn" onclick="closeModal()">&times;</button>
        </div>
        <form id="add-teacher-form" onsubmit="addTeacher(event)">
            <div class="form-group">
                <label>用户名 *</label>
                <input type="text" name="username" required placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label>姓名 *</label>
                <input type="text" name="name" required placeholder="请输入姓名">
            </div>
            <div class="form-group">
                <label>密码 *</label>
                <input type="password" name="password" required placeholder="至少6位密码">
            </div>
            <div class="form-group">
                <label>邮箱</label>
                <input type="email" name="email" placeholder="可选">
            </div>
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" onclick="closeModal()">取消</button>
                <button type="submit" class="btn btn-primary">添加</button>
            </div>
        </form>
    </div>
</div>

<div id="reset-password-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>重置密码</h3>
            <button class="close-btn" onclick="closeResetModal()">&times;</button>
        </div>
        <form id="reset-password-form" onsubmit="resetPassword(event)">
            <input type="hidden" name="username" id="reset-username">
            <div class="form-group">
                <label>新密码 *</label>
                <input type="password" name="new_password" required placeholder="至少6位密码">
            </div>
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" onclick="closeResetModal()">取消</button>
                <button type="submit" class="btn btn-primary">确认</button>
            </div>
        </form>
    </div>
</div>

<style>
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.page-header h1 {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-container {
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.data-table th {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 600;
}

.data-table td {
    color: var(--text-secondary);
}

.loading {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--accent-primary);
    color: white;
}

.btn-primary:hover {
    background: #2563eb;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--border-color);
}

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--bg-secondary);
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    border: 1px solid var(--border-color);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    margin: 0;
    color: var(--text-primary);
}

.close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
}

form {
    padding: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-primary);
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    box-sizing: border-box;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}
</style>

<script>
async function loadTeachers() {
    try {
        const response = await fetch('/admin/api/teachers');
        const data = await response.json();
        
        if (data.success) {
            const tbody = document.getElementById('teachers-list');
            
            if (data.teachers.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" class="loading">暂无教师账户</td></tr>';
                return;
            }
            
            tbody.innerHTML = data.teachers.map(t => `
                <tr>
                    <td><strong>${t.username}</strong></td>
                    <td>${t.name}</td>
                    <td>${t.email || '-'}</td>
                    <td>${t.created_at || '-'}</td>
                    <td>
                        <button class="btn btn-sm btn-secondary" onclick="showResetModal('${t.username}')">
                            <i class="fas fa-key"></i> 重置密码
                        </button>
                    </td>
                </tr>
            `).join('');
        }
    } catch (error) {
        console.error('加载失败:', error);
    }
}

function showAddTeacherModal() {
    document.getElementById('add-teacher-modal').classList.add('active');
}

function closeModal() {
    document.getElementById('add-teacher-modal').classList.remove('active');
    document.getElementById('add-teacher-form').reset();
}

function showResetModal(username) {
    document.getElementById('reset-username').value = username;
    document.getElementById('reset-password-modal').classList.add('active');
}

function closeResetModal() {
    document.getElementById('reset-password-modal').classList.remove('active');
    document.getElementById('reset-password-form').reset();
}

async function addTeacher(e) {
    e.preventDefault();
    const form = e.target;
    const formData = new FormData(form);
    const data = Object.fromEntries(formData);
    
    try {
        const response = await fetch('/admin/teachers/add', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
        });
        
        const result = await response.json();
        
        if (result.success) {
            closeModal();
            loadTeachers();
            alert('教师账户添加成功');
        } else {
            alert(result.message || '添加失败');
        }
    } catch (error) {
        alert('添加失败: ' + error.message);
    }
}

async function resetPassword(e) {
    e.preventDefault();
    const form = e.target;
    const formData = new FormData(form);
    const data = Object.fromEntries(formData);
    
    try {
        const response = await fetch(`/admin/teachers/${data.username}/password`, {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
        });
        
        const result = await response.json();
        
        if (result.success) {
            closeResetModal();
            alert('密码重置成功');
        } else {
            alert(result.message || '重置失败');
        }
    } catch (error) {
        alert('重置失败: ' + error.message);
    }
}

loadTeachers();
</script>
{% endblock %}