{% extends "base.html" %}

{% block title %}人员管理 - 工厂工时效率管理系统{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-person-gear"></i> 人员管理</h2>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">
        <i class="bi bi-plus-lg"></i> 新增人员
    </button>
</div>

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>用户名</th>
                        <th>权限等级</th>
                        <th>隶属部门</th>
                        <th>线别</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr>
                        <td>{{ user.username }}</td>
                        <td>
                            {% if user.is_admin() %}
                                <span class="badge bg-warning text-dark">管理员</span>
                            {% elif user.is_lead() %}
                                <span class="badge bg-info text-dark">组长</span>
                            {% endif %}
                        </td>
                        <td>{{ user.department if user.department_id else '-' }}</td>
                        <td>{{ user.line if user.line_id else '-' }}</td>
                        <td>{{ user.created_at.strftime('%Y-%m-%d') if user.created_at else '-' }}</td>
                        <td>
                            {% if user.id != current_user.id %}
                            <button class="btn btn-sm btn-outline-primary edit-btn"
                                    data-id="{{ user.id }}"
                                    data-username="{{ user.username }}"
                                    data-role="{{ user.role }}"
                                    data-department-id="{{ user.department_id or '' }}"
                                    data-line-id="{{ user.line_id or '' }}">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger delete-btn"
                                    data-id="{{ user.id }}"
                                    data-username="{{ user.username }}">
                                <i class="bi bi-trash"></i>
                            </button>
                            {% else %}
                            <span class="text-muted">当前用户</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Modal -->
<div class="modal fade" id="addModal" 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">
                <form id="addForm">
                    <div class="mb-3">
                        <label for="addUsername" class="form-label">用户名 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="addUsername" required>
                    </div>
                    <div class="mb-3">
                        <label for="addPassword" class="form-label">密码 <span class="text-danger">*</span></label>
                        <input type="password" class="form-control" id="addPassword" required>
                    </div>
                    <div class="mb-3">
                        <label for="addRole" class="form-label">权限等级 <span class="text-danger">*</span></label>
                        <select class="form-select" id="addRole" required>
                            <option value="">请选择</option>
                            <option value="admin">管理员 (Admin)</option>
                            <option value="lead">组长 (Lead)</option>
                        </select>
                    </div>
                    <div class="mb-3" id="addDeptGroup" style="display: none;">
                        <label for="addDepartmentId" class="form-label">隶属部门 <span class="text-danger">*</span></label>
                        <select class="form-select" id="addDepartmentId">
                            <option value="">请先选择部门</option>
                        </select>
                    </div>
                    <div class="mb-3" id="addLineGroup" style="display: none;">
                        <label for="addLineId" class="form-label">线别 <span class="text-danger">*</span></label>
                        <select class="form-select" id="addLineId">
                            <option value="">请先选择部门</option>
                        </select>
                    </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="addSubmit">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" 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">
                <form id="editForm">
                    <input type="hidden" id="editId">
                    <div class="mb-3">
                        <label for="editUsername" class="form-label">用户名 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="editUsername" required>
                    </div>
                    <div class="mb-3">
                        <label for="editRole" class="form-label">权限等级 <span class="text-danger">*</span></label>
                        <select class="form-select" id="editRole" required>
                            <option value="admin">管理员 (Admin)</option>
                            <option value="lead">组长 (Lead)</option>
                        </select>
                    </div>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="editResetPassword">
                        <label class="form-check-label" for="editResetPassword">
                            重置密码
                        </label>
                    </div>
                    <div class="mb-3" id="editNewPasswordGroup" style="display: none;">
                        <label for="editNewPassword" class="form-label">新密码</label>
                        <input type="password" class="form-control" id="editNewPassword">
                    </div>
                    <div class="mb-3" id="editDeptGroup" style="display: none;">
                        <label for="editDepartmentId" class="form-label">隶属部门 <span class="text-danger">*</span></label>
                        <select class="form-select" id="editDepartmentId">
                            <option value="">请选择</option>
                        </select>
                    </div>
                    <div class="mb-3" id="editLineGroup" style="display: none;">
                        <label for="editLineId" class="form-label">线别 <span class="text-danger">*</span></label>
                        <select class="form-select" id="editLineId">
                            <option value="">请先选择部门</option>
                        </select>
                    </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="editSubmit">保存</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Load departments on page load
loadDepartmentsForSelect('addDepartmentId');
loadDepartmentsForSelect('editDepartmentId');

// Add Modal - show/hide department and line fields based on role
document.getElementById('addRole').addEventListener('change', function() {
    const role = this.value;
    const deptGroup = document.getElementById('addDeptGroup');
    const lineGroup = document.getElementById('addLineGroup');

    if (role === 'lead') {
        deptGroup.style.display = 'block';
        lineGroup.style.display = 'block';
    } else {
        deptGroup.style.display = 'none';
        lineGroup.style.display = 'none';
    }
});

// Edit Modal - show/hide department and line fields based on role
document.getElementById('editRole').addEventListener('change', function() {
    const role = this.value;
    const deptGroup = document.getElementById('editDeptGroup');
    const lineGroup = document.getElementById('editLineGroup');

    if (role === 'lead') {
        deptGroup.style.display = 'block';
        lineGroup.style.display = 'block';
    } else {
        deptGroup.style.display = 'none';
        lineGroup.style.display = 'none';
    }
});

// Edit Modal - show/hide password field based on checkbox
document.getElementById('editResetPassword').addEventListener('change', function() {
    const passwordGroup = document.getElementById('editNewPasswordGroup');
    passwordGroup.style.display = this.checked ? 'block' : 'none';
});

// Add Submit
document.getElementById('addSubmit').addEventListener('click', async function() {
    const username = document.getElementById('addUsername').value.trim();
    const password = document.getElementById('addPassword').value;
    const role = document.getElementById('addRole').value;
    const departmentId = document.getElementById('addDepartmentId').value;
    const lineId = document.getElementById('addLineId').value;

    // Validation
    if (!username) {
        alert('请输入用户名');
        return;
    }
    if (!password) {
        alert('请输入密码');
        return;
    }
    if (!role) {
        alert('请选择权限等级');
        return;
    }
    if (role === 'lead' && !departmentId) {
        alert('组长必须选择隶属部门');
        return;
    }
    if (role === 'lead' && !lineId) {
        alert('组长必须选择线别');
        return;
    }

    try {
        const response = await fetch('/auth/api/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                username: username,
                password: password,
                role: role,
                department_id: departmentId || null,
                line_id: lineId || null
            })
        });

        const result = await response.json();

        if (result.success) {
            alert('人员添加成功');
            location.reload();
        } else {
            alert('添加失败: ' + result.error);
        }
    } catch (error) {
        console.error('Error:', error);
        alert('添加失败，请稍后重试');
    }
});

// Edit button click
document.querySelectorAll('.edit-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const id = this.dataset.id;
        const username = this.dataset.username;
        const role = this.dataset.role;
        const departmentId = this.dataset.departmentId;
        const lineId = this.dataset.lineId;

        document.getElementById('editId').value = id;
        document.getElementById('editUsername').value = username;
        document.getElementById('editRole').value = role;

        // Trigger role change to show/hide fields
        document.getElementById('editRole').dispatchEvent(new Event('change'));

        // Set department and line values after options are loaded
        setTimeout(() => {
            document.getElementById('editDepartmentId').value = departmentId;
            document.getElementById('editDepartmentId').dispatchEvent(new Event('change'));
            setTimeout(() => {
                document.getElementById('editLineId').value = lineId;
            }, 100);
        }, 100);

        const modal = new bootstrap.Modal(document.getElementById('editModal'));
        modal.show();
    });
});

// Edit Submit
document.getElementById('editSubmit').addEventListener('click', async function() {
    const id = document.getElementById('editId').value;
    const username = document.getElementById('editUsername').value.trim();
    const role = document.getElementById('editRole').value;
    const resetPassword = document.getElementById('editResetPassword').checked;
    const newPassword = document.getElementById('editNewPassword').value;
    const departmentId = document.getElementById('editDepartmentId').value;
    const lineId = document.getElementById('editLineId').value;

    // Validation
    if (!username) {
        alert('请输入用户名');
        return;
    }
    if (!role) {
        alert('请选择权限等级');
        return;
    }
    if (role === 'lead' && !departmentId) {
        alert('组长必须选择隶属部门');
        return;
    }
    if (role === 'lead' && !lineId) {
        alert('组长必须选择线别');
        return;
    }
    if (resetPassword && !newPassword) {
        alert('请输入新密码');
        return;
    }

    try {
        const response = await fetch(`/auth/api/users/${id}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                username: username,
                role: role,
                password: resetPassword ? newPassword : null,
                department_id: departmentId || null,
                line_id: lineId || null
            })
        });

        const result = await response.json();

        if (result.success) {
            alert('人员修改成功');
            location.reload();
        } else {
            alert('修改失败: ' + result.error);
        }
    } catch (error) {
        console.error('Error:', error);
        alert('修改失败，请稍后重试');
    }
});

// Delete button click
document.querySelectorAll('.delete-btn').forEach(btn => {
    btn.addEventListener('click', async function() {
        const id = this.dataset.id;
        const username = this.dataset.username;

        if (!confirm(`确定要删除人员 "${username}" 吗？`)) {
            return;
        }

        try {
            const response = await fetch(`/auth/api/users/${id}`, {
                method: 'DELETE'
            });

            const result = await response.json();

            if (result.success) {
                alert('人员删除成功');
                location.reload();
            } else {
                alert('删除失败: ' + result.error);
            }
        } catch (error) {
            console.error('Error:', error);
            alert('删除失败，请稍后重试');
        }
    });
});

// Load departments for select
async function loadDepartmentsForSelect(selectId) {
    try {
        const response = await fetch('/api/departments');
        const result = await response.json();

        if (result.success) {
            const select = document.getElementById(selectId);
            select.innerHTML = '<option value="">请选择部门</option>';

            // Get all unique departments
            const departments = result.data;

            departments.forEach(dept => {
                const option = document.createElement('option');
                option.value = dept;
                option.textContent = dept;
                select.appendChild(option);
            });
        }
    } catch (error) {
        console.error('Error loading departments:', error);
    }
}

// Load lines when department changes in add modal
document.getElementById('addDepartmentId').addEventListener('change', async function() {
    const department = this.value;
    const lineSelect = document.getElementById('addLineId');
    lineSelect.innerHTML = '<option value="">请选择线别</option>';

    if (!department) return;

    try {
        const response = await fetch(`/api/lines?department=${department}`);
        const result = await response.json();

        if (result.success) {
            result.data.forEach(line => {
                const option = document.createElement('option');
                option.value = line.id;
                option.textContent = line.line;
                lineSelect.appendChild(option);
            });
        }
    } catch (error) {
        console.error('Error loading lines:', error);
    }
});

// Load lines when department changes in edit modal
document.getElementById('editDepartmentId').addEventListener('change', async function() {
    const department = this.value;
    const lineSelect = document.getElementById('editLineId');
    lineSelect.innerHTML = '<option value="">请选择线别</option>';

    if (!department) return;

    try {
        const response = await fetch(`/api/lines?department=${department}`);
        const result = await response.json();

        if (result.success) {
            result.data.forEach(line => {
                const option = document.createElement('option');
                option.value = line.id;
                option.textContent = line.line;
                lineSelect.appendChild(option);
            });
        }
    } catch (error) {
        console.error('Error loading lines:', error);
    }
});
</script>
{% endblock %}