{% extends "base.html" %}

{% block title %}班级管理 - 钢琴练习方案系统{% endblock %}

{% block sidebar_nav %}
<a class="nav-link" href="/">
    <i class="bi bi-people"></i> 学员管理
</a>
<a class="nav-link" href="/settings" id="settingsNav" style="display:none;">
    <i class="bi bi-gear"></i> 问题配置
</a>
<a class="nav-link" href="/api-settings" id="apiSettingsNav" style="display:none;">
    <i class="bi bi-key"></i> API设置
</a>
<a class="nav-link" href="/templates" id="templatesNav" style="display:none;">
    <i class="bi bi-file-earmark-text"></i> 模板管理
</a>
<a class="nav-link active" href="/classes">
    <i class="bi bi-collection"></i> 班级管理
</a>
<a class="nav-link" href="/users" id="usersNav" style="display:none;">
    <i class="bi bi-person-badge"></i> 用户管理
</a>
<hr>
<a class="nav-link" href="#" onclick="showChangePasswordModal()">
    <i class="bi bi-key"></i> 修改密码
</a>
<a class="nav-link" href="#" onclick="logout()">
    <i class="bi bi-box-arrow-right"></i> 退出登录
</a>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div class="d-flex align-items-center gap-3">
        <h4><i class="bi bi-collection"></i> 班级管理</h4>
        <select class="form-select form-select-sm" style="width:auto;" id="activeFilter" onchange="loadClasses()">
            <option value="">全部班级</option>
            <option value="true" selected>进行中</option>
            <option value="false">已结束</option>
        </select>
    </div>
    <button class="btn btn-primary" id="addClassBtn" style="display:none;">
        <i class="bi bi-plus-circle"></i> 新增班级
    </button>
</div>

<div class="card">
    <div class="card-body">
        <table class="table table-hover" id="classesTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>班级名称</th>
                    <th>描述</th>
                    <th>进行中</th>
                    <th>学员数</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<!-- 新增/编辑班级弹窗 -->
<div class="modal fade" id="classModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="classModalTitle">新增班级</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="classForm">
                    <input type="hidden" id="classId">
                    <div class="mb-3">
                        <label class="form-label">班级名称</label>
                        <input type="text" class="form-control" id="className" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">描述</label>
                        <textarea class="form-control" id="classDesc" rows="2"></textarea>
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="classActive" checked>
                        <label class="form-check-label" for="classActive">进行中</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveClassBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 班级学员弹窗 -->
<div class="modal fade" id="classStudentsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">班级学员</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <button type="button" class="btn btn-sm btn-success" id="assignStudentsBtn">分配学员</button>
                </div>
                <table class="table" id="classStudentsTable">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>手机</th>
                            <th>练习时间</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 分配学员弹窗 -->
<div class="modal fade" id="assignModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">分配学员到班级</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="studentCheckboxes"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmAssignBtn">确认分配</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let currentUserRole = 'user';
let currentClassId = null;
let allStudents = [];

// Toast 通知函数
function showToast(message, isError = true) {
    const toast = document.createElement('div');
    toast.className = `toast-container position-fixed top-50 start-50 translate-middle`;
    toast.style.zIndex = '9999';
    toast.innerHTML = `
        <div class="toast show" role="alert">
            <div class="toast-header ${isError ? 'bg-danger' : 'bg-success'} text-white">
                <strong class="me-auto">${isError ? '错误' : '成功'}</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body">${message}</div>
        </div>
    `;
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 3000);
}

// 检查登录状态
fetch('/api/check-login').then(r => r.json()).then(data => {
    if (!data.logged_in) {
        window.location.href = '/login';
        return;
    }
    currentUserRole = data.role;
    const ROLE_LABELS = { 'admin': '管理员', 'user': '普通用户' };

    const userDisplay = data.username + ' (' + (ROLE_LABELS[data.role] || data.role) + ')';
    document.getElementById('currentUserDisplay').textContent = userDisplay;
    const mobileDisplay = document.getElementById('mobileUserDisplay');
    if (mobileDisplay) mobileDisplay.textContent = userDisplay;

    if (data.role === 'admin') {
        document.getElementById('usersNav').style.display = '';
        document.getElementById('settingsNav').style.display = '';
        document.getElementById('apiSettingsNav').style.display = '';
        document.getElementById('templatesNav').style.display = '';
        document.getElementById('addClassBtn').style.display = 'inline-block';
    } else {
        document.getElementById('settingsNav').style.display = '';
        document.getElementById('apiSettingsNav').style.display = 'none';
        document.getElementById('templatesNav').style.display = 'none';
    }
    loadClasses();
});

// 加载班级列表
function loadClasses() {
    const activeFilter = document.getElementById('activeFilter').value;
    const url = activeFilter ? '/api/classes?active=' + activeFilter : '/api/classes';
    fetch(url).then(r => r.json()).then(classes => {
        const tbody = document.querySelector('#classesTable tbody');
        const isAdmin = currentUserRole === 'admin';
        tbody.innerHTML = classes.map(c => `
            <tr>
                <td>${c.id}</td>
                <td>${c.name}</td>
                <td>${c.description || '-'}</td>
                <td>${c.active ? '<span class="badge bg-success">进行中</span>' : '<span class="badge bg-secondary">已结束</span>'}</td>
                <td><a href="#" onclick="viewClassStudents(${c.id})">${c.student_count}</a></td>
                <td>${c.created_at}</td>
                <td>
                    ${isAdmin ? `<button type="button" class="btn btn-sm btn-primary me-1" onclick="editClass(${c.id}, '${c.name}', '${c.description || ''}', ${c.active})">编辑</button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="deleteClass(${c.id})">删除</button>` : ''}
                </td>
            </tr>
        `).join('');
    });
}

// 保存班级
document.getElementById('saveClassBtn').onclick = () => {
    const id = document.getElementById('classId').value;
    const name = document.getElementById('className').value.trim();
    const description = document.getElementById('classDesc').value;
    const active = document.getElementById('classActive').checked;

    if (!name) {
        alert('请输入班级名称');
        return;
    }

    const method = id ? 'PUT' : 'POST';
    fetch('/api/classes' + (id ? '/' + id : ''), {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, description, active })
    }).then(r => r.json()).then(data => {
        if (data.error) {
            showToast(data.error);
        } else {
            const modal = bootstrap.Modal.getInstance(document.getElementById('classModal'));
            if (modal) modal.hide();
            document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
            document.body.classList.remove('modal-open');
            loadClasses();
        }
    });
};

// 编辑班级
function editClass(id, name, desc, active) {
    document.getElementById('classId').value = id;
    document.getElementById('className').value = name;
    document.getElementById('classDesc').value = desc;
    document.getElementById('classActive').checked = active !== false;
    document.getElementById('classModalTitle').textContent = '编辑班级';
    new bootstrap.Modal(document.getElementById('classModal')).show();
}

// 删除班级
function deleteClass(id) {
    if (!confirm('确定要删除该班级吗？学员不会被删除。')) return;
    fetch('/api/classes/' + id, { method: 'DELETE' }).then(r => r.json()).then(data => {
        if (data.error) {
            showToast(data.error);
        } else {
            loadClasses();
        }
    });
}

// 查看班级学员
function viewClassStudents(classId) {
    currentClassId = classId;
    fetch('/api/classes/' + classId + '/students').then(r => r.json()).then(students => {
        const tbody = document.querySelector('#classStudentsTable tbody');
        tbody.innerHTML = students.length ? students.map(s => `
            <tr><td>${s.name}</td><td>${s.phone || '-'}</td><td>${s.practice_time}</td></tr>
        `).join('') : '<tr><td colspan="3" class="text-center">暂无学员</td></tr>';
        new bootstrap.Modal(document.getElementById('classStudentsModal')).show();
    });
}

// 分配学员
document.getElementById('assignStudentsBtn').onclick = () => {
    fetch('/api/students').then(r => r.json()).then(students => {
        allStudents = students;
        const container = document.getElementById('studentCheckboxes');
        container.innerHTML = students.map(s => `
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="${s.id}" ${s.class_id == currentClassId ? 'checked' : ''}>
                <label class="form-check-label">${s.name} (${s.practice_time})</label>
            </div>
        `).join('');
        new bootstrap.Modal(document.getElementById('assignModal')).show();
    });
};

document.getElementById('confirmAssignBtn').onclick = () => {
    const checked = Array.from(document.querySelectorAll('#studentCheckboxes input:checked')).map(c => parseInt(c.value));
    fetch('/api/classes/' + currentClassId + '/assign', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ student_ids: checked })
    }).then(r => r.json()).then(data => {
        if (data.error) {
            showToast(data.error);
        } else {
            const modal = bootstrap.Modal.getInstance(document.getElementById('assignModal'));
            if (modal) modal.hide();
            document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
            document.body.classList.remove('modal-open');
            loadClasses();
            viewClassStudents(currentClassId);
        }
    });
};

// 新增班级按钮
document.getElementById('addClassBtn').onclick = () => {
    document.getElementById('classId').value = '';
    document.getElementById('className').value = '';
    document.getElementById('classDesc').value = '';
    document.getElementById('classActive').checked = true;
    document.getElementById('classModalTitle').textContent = '新增班级';
    new bootstrap.Modal(document.getElementById('classModal')).show();
};
</script>
{% endblock %}