{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-building"></i> 部门管理</h2>
    <div>
        <button class="btn btn-success" onclick="exportDepartments()">
            <i class="bi bi-download"></i> 导出Excel
        </button>
        <button class="btn btn-primary" onclick="downloadTemplate()">
            <i class="bi bi-file-earmark-arrow-down"></i> 下载模板
        </button>
        <button class="btn btn-orange" onclick="document.getElementById('importFileInput').click()" style="background-color:#e67e22;border-color:#d35400;color:#fff;">
            <i class="bi bi-upload"></i> 导入Excel
        </button>
        <input type="file" id="importFileInput" accept=".xlsx,.xls" style="display:none" onchange="importDepartments(this)">
        <button class="btn btn-primary ms-2" data-bs-toggle="modal" data-bs-target="#addDeptModal">
            <i class="bi bi-plus-circle"></i> 添加部门
        </button>
    </div>
</div>

<!-- 导入进度/结果提示区域 -->
<div id="importResult" class="alert" style="display:none;"></div>

<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>部门名称</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for d in departments %}
                    <tr>
                        <td>{{ d.id }}</td>
                        <td><strong>{{ d.name }}</strong></td>
                        <td>{{ d.created_at }}</td>
                        <td>
                            <button class="btn btn-sm btn-outline-primary" onclick="editDept({{ d.id }}, '{{ d.name }}')">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger" onclick="deleteDept({{ d.id }}, '{{ d.name }}')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="4" class="text-center text-muted py-4">暂无部门</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- ====== 添加部门弹窗 ====== -->
<div class="modal fade" id="addDeptModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-plus-circle"></i> 添加部门</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addDeptForm">
                    <div class="mb-3">
                        <label class="form-label">部门名称 <span class="text-danger">*</span></label>
                        <input type="text" id="addDeptName" name="name" class="form-control" required>
                    </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="saveDeptBtn">添加</button>
            </div>
        </div>
    </div>
</div>

<!-- ====== 编辑部门弹窗 ====== -->
<div class="modal fade" id="editDeptModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-pencil"></i> 编辑部门</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editDeptForm">
                    <input type="hidden" id="editDeptId" name="dept_id">
                    <div class="mb-3">
                        <label class="form-label">部门名称 <span class="text-danger">*</span></label>
                        <input type="text" id="editDeptName" name="name" class="form-control" required>
                    </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="updateDeptBtn">保存修改</button>
            </div>
        </div>
    </div>
</div>

<script>
// ====== 下载模板 ======
function downloadTemplate() {
    window.location.href = '/api/departments/template';
}

// ====== 导入部门 ======
function importDepartments(input) {
    const file = input.files[0];
    if (!file) return;

    const resultDiv = document.getElementById('importResult');
    
    // 检查文件类型
    if (!file.name.endsWith('.xlsx') && !file.name.endsWith('.xls')) {
        resultDiv.className = 'alert alert-danger';
        resultDiv.innerHTML = '❌ 请上传Excel文件（.xlsx或.xls）';
        resultDiv.style.display = 'block';
        input.value = '';
        return;
    }

    const formData = new FormData();
    formData.append('file', file);

    resultDiv.className = 'alert alert-info';
    resultDiv.innerHTML = '⏳ 正在导入，请稍候...';
    resultDiv.style.display = 'block';

    fetch('/api/departments/import', {
        method: 'POST',
        body: formData
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            let msg = `✅ 导入完成！成功 ${data.success_count} 个`;
            if (data.fail_count > 0) {
                msg += `，失败 ${data.fail_count} 个`;
                if (data.errors && data.errors.length > 0) {
                    msg += '<br><ul>' + data.errors.map(e => `<li>${e}</li>`).join('') + '</ul>';
                }
            }
            resultDiv.className = data.fail_count > 0 ? 'alert alert-warning' : 'alert alert-success';
            resultDiv.innerHTML = msg;
            if (data.success_count > 0) {
                setTimeout(() => location.reload(), 2000);
            }
        } else {
            resultDiv.className = 'alert alert-danger';
            resultDiv.innerHTML = '❌ ' + (data.message || '导入失败');
        }
    })
    .catch(err => {
        resultDiv.className = 'alert alert-danger';
        resultDiv.innerHTML = '❌ 导入失败：' + err.message;
    })
    .finally(() => {
        input.value = '';
    });
}

// ====== 导出 ======
function exportDepartments() {
    window.location.href = '/export/departments';
}

// ====== 添加部门 ======
document.getElementById('saveDeptBtn').addEventListener('click', function() {
    const name = document.getElementById('addDeptName').value.trim();
    if (!name) {
        alert('请输入部门名称');
        return;
    }

    fetch('/api/departments', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: name })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            alert('✅ 部门添加成功');
            location.reload();
        } else {
            alert('❌ ' + (data.message || '添加失败'));
        }
    });
});

// ====== 编辑部门 ======
function editDept(id, name) {
    document.getElementById('editDeptId').value = id;
    document.getElementById('editDeptName').value = name;
    const modal = new bootstrap.Modal(document.getElementById('editDeptModal'));
    modal.show();
}

document.getElementById('updateDeptBtn').addEventListener('click', function() {
    const id = document.getElementById('editDeptId').value;
    const name = document.getElementById('editDeptName').value.trim();

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

    fetch(`/api/departments/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: name })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            alert('✅ 部门已更新！');
            location.reload();
        } else {
            alert('❌ ' + (data.message || '更新失败'));
        }
    });
});

// ====== 删除部门 ======
function deleteDept(deptId, name) {
    if (!confirm(`确定要删除部门「${name}」吗？`)) return;

    fetch(`/api/departments/${deptId}`, { method: 'DELETE' })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                alert('✅ 部门已删除');
                location.reload();
            } else {
                alert('❌ 删除失败');
            }
        });
}
</script>
{% endblock %}