{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-person-badge"></i> 岗位管理</h2>
    <div>
        {% if current_user.is_admin() %}
        <button class="btn btn-success" onclick="exportPositions()">
            <i class="bi bi-download"></i> 导出Excel
        </button>
        <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#importPositionModal">
            <i class="bi bi-upload"></i> 导入Excel
        </button>
        <button class="btn btn-primary ms-2" data-bs-toggle="modal" data-bs-target="#addPositionModal">
            <i class="bi bi-plus-circle"></i> 添加岗位
        </button>
        {% endif %}
    </div>
</div>

<div class="alert alert-info">
    <i class="bi bi-info-circle"></i>
    <strong>说明：</strong>
    <ul class="mb-0 mt-1">
        <li><strong>系统岗位</strong>（带 🔒 标识）不可删除，但可以编辑</li>
        <li><strong>自定义岗位</strong> 可以自由编辑和删除</li>
        <li>岗位创建后，会自动出现在审批模板的「审批岗位」下拉列表中</li>
    </ul>
</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>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for pos in positions %}
                    <tr>
                        <td>{{ pos.id }}</td>
                        <td>
                            {{ pos.name }}
                            {% if pos.is_system == 1 %}
                                <span class="badge bg-secondary">🔒 系统</span>
                            {% endif %}
                        </td>
                        <td>{{ pos.description or '-' }}</td>
                        <td>
                            {% if pos.is_system == 1 %}
                                <span class="badge bg-info">内置岗位</span>
                            {% else %}
                                <span class="badge bg-success">自定义</span>
                            {% endif %}
                        </td>
                        <td>
                            <button class="btn btn-sm btn-outline-primary" onclick="editPosition({{ pos.id }}, '{{ pos.name }}', '{{ pos.description or '' }}')">
                                <i class="bi bi-pencil"></i>
                            </button>
                            {% if pos.is_system == 0 %}
                                <button class="btn btn-sm btn-outline-danger" onclick="deletePosition({{ pos.id }}, '{{ pos.name }}')">
                                    <i class="bi bi-trash"></i>
                                </button>
                            {% else %}
                                <button class="btn btn-sm btn-outline-secondary" disabled title="系统岗位不能删除">
                                    <i class="bi bi-lock"></i>
                                </button>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr><td colspan="5" class="text-center text-muted">暂无岗位</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
function exportPositions() {
    window.location.href = '/export/positions';
}
</script>

<!-- ====== 导入岗位弹窗 ====== -->
<div class="modal fade" id="importPositionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-upload"></i> 导入岗位</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i>
                    <strong>Excel格式要求：</strong>
                    <ul class="mb-1 mt-1">
                        <li>第一行必须是表头</li>
                        <li>必填列：<strong>岗位名称</strong></li>
                        <li>可选列：描述</li>
                    </ul>
                    <button class="btn btn-sm btn-outline-primary mt-1" onclick="downloadPositionTemplate()">
                        <i class="bi bi-download"></i> 下载模板示例
                    </button>
                </div>
                <form id="importPositionForm" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label class="form-label">选择Excel文件 <span class="text-danger">*</span></label>
                        <input type="file" name="file" class="form-control" accept=".xlsx,.xls" required>
                    </div>
                    <div id="importPosProgress" style="display:none;">
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%">0%</div>
                        </div>
                        <div id="importPosResult" class="mt-2"></div>
                    </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-warning" id="importPositionBtn">导入</button>
            </div>
        </div>
    </div>
</div>

<!-- ====== 添加岗位弹窗 ====== -->
<div class="modal fade" id="addPositionModal" 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="addPositionForm">
                    <div class="mb-3">
                        <label class="form-label">岗位名称 <span class="text-danger">*</span></label>
                        <input type="text" id="addPosName" name="name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">岗位描述</label>
                        <input type="text" id="addPosDesc" name="description" class="form-control">
                    </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="savePositionBtn">添加</button>
            </div>
        </div>
    </div>
</div>

<!-- ====== 编辑岗位弹窗 ====== -->
<div class="modal fade" id="editPositionModal" 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="editPositionForm">
                    <input type="hidden" id="editPosId">
                    <div class="mb-3">
                        <label class="form-label">岗位名称 <span class="text-danger">*</span></label>
                        <input type="text" id="editPosName" name="name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">岗位描述</label>
                        <input type="text" id="editPosDesc" name="description" class="form-control">
                    </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="updatePositionBtn">保存修改</button>
            </div>
        </div>
    </div>
</div>

<script>
// 下载岗位模板
function downloadPositionTemplate() {
    const headers = ['岗位名称', '描述'];
    const rows = [['质量总监', '质量管理'], ['采购经理', '采购管理']];
    let csv = headers.join(',') + '\n';
    rows.forEach(row => { csv += row.join(',') + '\n'; });
    const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '岗位导入模板.csv';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
}

// 导入岗位
document.getElementById('importPositionBtn').addEventListener('click', function() {
    const form = document.getElementById('importPositionForm');
    const formData = new FormData(form);
    const fileInput = form.querySelector('input[type="file"]');
    
    if (!fileInput.files || fileInput.files.length === 0) {
        alert('请选择Excel文件');
        return;
    }
    
    const btn = this;
    btn.disabled = true;
    btn.innerHTML = '导入中...';
    document.getElementById('importPosProgress').style.display = 'block';
    document.querySelector('#importPosProgress .progress-bar').style.width = '50%';
    document.querySelector('#importPosProgress .progress-bar').textContent = '50%';
    
    fetch('/import/positions', {
        method: 'POST',
        body: formData
    })
    .then(r => r.json())
    .then(data => {
        document.querySelector('#importPosProgress .progress-bar').style.width = '100%';
        document.querySelector('#importPosProgress .progress-bar').textContent = '100%';
        const resultDiv = document.getElementById('importPosResult');
        if (data.success) {
            let html = `<div class="alert alert-success">✅ ${data.message}</div>`;
            if (data.errors && data.errors.length > 0) {
                html += `<div class="alert alert-warning"><strong>错误明细：</strong><br>${data.errors.join('<br>')}</div>`;
            }
            resultDiv.innerHTML = html;
            setTimeout(() => { location.reload(); }, 2000);
        } else {
            resultDiv.innerHTML = `<div class="alert alert-danger">❌ ${data.message}</div>`;
            btn.disabled = false;
            btn.innerHTML = '导入';
            document.querySelector('#importPosProgress .progress-bar').style.width = '0%';
            document.querySelector('#importPosProgress .progress-bar').textContent = '0%';
        }
    })
    .catch(err => {
        document.getElementById('importPosResult').innerHTML = `<div class="alert alert-danger">❌ 导入失败：${err.message}</div>`;
        btn.disabled = false;
        btn.innerHTML = '导入';
        document.querySelector('#importPosProgress .progress-bar').style.width = '0%';
        document.querySelector('#importPosProgress .progress-bar').textContent = '0%';
    });
});

// 添加岗位
document.getElementById('savePositionBtn').addEventListener('click', function() {
    const name = document.getElementById('addPosName').value.trim();
    const description = document.getElementById('addPosDesc').value.trim();
    if (!name) { alert('请输入岗位名称'); return; }
    fetch('/api/positions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: name, description: description })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) { alert('✅ 岗位添加成功！'); location.reload(); }
        else { alert('❌ ' + (data.message || '添加失败')); }
    });
});

// 编辑岗位
function editPosition(id, name, description) {
    document.getElementById('editPosId').value = id;
    document.getElementById('editPosName').value = name;
    document.getElementById('editPosDesc').value = description;
    const modal = new bootstrap.Modal(document.getElementById('editPositionModal'));
    modal.show();
}

document.getElementById('updatePositionBtn').addEventListener('click', function() {
    const id = document.getElementById('editPosId').value;
    const name = document.getElementById('editPosName').value.trim();
    const description = document.getElementById('editPosDesc').value.trim();
    if (!name) { alert('请输入岗位名称'); return; }
    fetch(`/api/positions/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: name, description: description })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) { alert('✅ 岗位已更新！'); location.reload(); }
        else { alert('❌ ' + (data.message || '更新失败')); }
    });
});

// 删除岗位
function deletePosition(id, name) {
    if (!confirm(`确定要删除岗位「${name}」吗？`)) return;
    fetch(`/api/positions/${id}`, { method: 'DELETE' })
        .then(r => r.json())
        .then(data => {
            if (data.success) { alert('✅ 岗位已删除！'); location.reload(); }
            else { alert('❌ ' + (data.message || '删除失败')); }
        });
}
</script>
{% endblock %}